From c2f8e07d19caa0f6b2385d1ca48fc716d85d07c0 Mon Sep 17 00:00:00 2001
From: GaziYucel <84437883+GaziYucel@users.noreply.github.com>
Date: Tue, 16 Sep 2025 09:32:02 +0200
Subject: [PATCH 1/3] pkp/pkp-lib#10692 structured citations

---
 src/components/Checkbox/Checkbox.vue          |   2 +-
 src/components/Form/fields/FieldAuthors.vue   |   2 +-
 .../CitationManager/CitationManager.mdx       |  34 +++
 .../CitationManager.stories.js                |  17 ++
 .../CitationManager/CitationManager.vue       | 115 +++++++
 .../CitationManagerAddRawCitations.vue        |  80 +++++
 .../CitationManagerCellActions.vue            |  33 ++
 .../CitationManagerCellCitation.vue           | 153 ++++++++++
 .../CitationManagerCellToggle.vue             |  23 ++
 .../CitationManagerMetadataLookup.vue         |  79 +++++
 .../CitationManagerSearchField.vue            |  16 +
 .../CitationManagerStatusProcessed.vue        |  48 +++
 .../CitationManagerToggleAll.vue              |  24 ++
 .../CitationManager/citationManagerStore.js   | 285 ++++++++++++++++++
 .../modals/CitationEditModal.mdx              |  16 +
 .../modals/CitationEditModal.stories.js       |  46 +++
 .../modals/CitationEditModal.vue              |  48 +++
 .../useCitationManagerActions.js              | 112 +++++++
 .../useCitationManagerConfig.js               |  85 ++++++
 src/pages/workflow/WorkflowPageOJS.vue        |   2 +
 .../workflowConfigAuthorOJS.js                |  10 +-
 .../workflowConfigEditorialOJS.js             |  10 +-
 22 files changed, 1232 insertions(+), 8 deletions(-)
 create mode 100644 src/managers/CitationManager/CitationManager.mdx
 create mode 100644 src/managers/CitationManager/CitationManager.stories.js
 create mode 100644 src/managers/CitationManager/CitationManager.vue
 create mode 100644 src/managers/CitationManager/CitationManagerAddRawCitations.vue
 create mode 100644 src/managers/CitationManager/CitationManagerCellActions.vue
 create mode 100644 src/managers/CitationManager/CitationManagerCellCitation.vue
 create mode 100644 src/managers/CitationManager/CitationManagerCellToggle.vue
 create mode 100644 src/managers/CitationManager/CitationManagerMetadataLookup.vue
 create mode 100644 src/managers/CitationManager/CitationManagerSearchField.vue
 create mode 100644 src/managers/CitationManager/CitationManagerStatusProcessed.vue
 create mode 100644 src/managers/CitationManager/CitationManagerToggleAll.vue
 create mode 100644 src/managers/CitationManager/citationManagerStore.js
 create mode 100644 src/managers/CitationManager/modals/CitationEditModal.mdx
 create mode 100644 src/managers/CitationManager/modals/CitationEditModal.stories.js
 create mode 100644 src/managers/CitationManager/modals/CitationEditModal.vue
 create mode 100644 src/managers/CitationManager/useCitationManagerActions.js
 create mode 100644 src/managers/CitationManager/useCitationManagerConfig.js

diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index 7a8576f01..628c3aa03 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
 	<label
-		class="flex select-none items-center text-base-normal"
+		class="text-base flex select-none items-center"
 		:class="{'w-5': !label}"
 	>
 		<input
diff --git a/src/components/Form/fields/FieldAuthors.vue b/src/components/Form/fields/FieldAuthors.vue
index 9a5ce6ff4..627c114ee 100644
--- a/src/components/Form/fields/FieldAuthors.vue
+++ b/src/components/Form/fields/FieldAuthors.vue
@@ -57,7 +57,7 @@
 						/>
 					</TableCell>
 					<TableCell>
-						<PkpButton :is-link="true" @click="deleteRow(index)">
+						<PkpButton :is-link="true" :is-warnable="true" @click="deleteRow(index)">
 							{{ t('common.delete', []) }}
 						</PkpButton>
 					</TableCell>
diff --git a/src/managers/CitationManager/CitationManager.mdx b/src/managers/CitationManager/CitationManager.mdx
new file mode 100644
index 000000000..98bbbf1e7
--- /dev/null
+++ b/src/managers/CitationManager/CitationManager.mdx
@@ -0,0 +1,34 @@
+import {
+    Primary,
+    Controls,
+    Stories,
+    Meta,
+    ArgTypes
+} from '@storybook/addon-docs/blocks';
+import * as CitationManager from './CitationManager.stories.js';
+
+<Meta of={CitationManager} />
+
+# Citation manager
+
+Listing of Citations.
+
+## Props
+
+<ArgTypes />
+
+## Extension points for plugins
+
+For more details and examples on how to use them, check out [Plugins guide](..?path=/docs/guide-plugins--docs)
+
+The name of the Pinia store is `CitationManager`.
+
+- `getTopItems`: Add/Change items in the top right, where the `Upload / Select` button is.
+- `getItemActions`: Add/Change the list of actions that are displayed after clicking the 3 dots button.
+- `getItemPrimaryActions`: Add/Change one individual Action which is displayed in the ACTIONS column.
+- `getColumns`: Add/Change the columns being displayed in the table.
+- ...
+
+<Primary />
+<Controls />
+<Stories />
diff --git a/src/managers/CitationManager/CitationManager.stories.js b/src/managers/CitationManager/CitationManager.stories.js
new file mode 100644
index 000000000..8977ee5bd
--- /dev/null
+++ b/src/managers/CitationManager/CitationManager.stories.js
@@ -0,0 +1,17 @@
+import CitationManager from './CitationManager.vue';
+
+export default {
+	title: 'Managers/CitationManager',
+	component: CitationManager,
+	render: (args) => ({
+		components: {CitationManager},
+		setup() {
+			return {args};
+		},
+		template: `<CitationManager v-bind="args"/>`,
+	}),
+};
+
+export const Base = {
+	args: {},
+};
diff --git a/src/managers/CitationManager/CitationManager.vue b/src/managers/CitationManager/CitationManager.vue
new file mode 100644
index 000000000..b5709e47d
--- /dev/null
+++ b/src/managers/CitationManager/CitationManager.vue
@@ -0,0 +1,115 @@
+<template>
+	<CitationManagerMetadataLookup :checked="isChecked" @change="change" />
+	<CitationManagerAddRawCitations />
+	<CitationManagerStatusProcessed
+		v-if="citationStore.citationsMetadataLookup"
+	/>
+	<div>
+		<PkpButton
+			:is-disabled="!citationStore.canEditPublication"
+			:is-link="true"
+			@click="citationStore.citationDeleteAllCitations"
+		>
+			{{ t('submission.citations.structured.deleteAllLink') }}
+		</PkpButton>
+	</div>
+	<PkpTable aria-label="Structured References" :aria-describedby="headingId">
+		<template #label>
+			<h3 class="text-4 font-semibold">
+				{{ t('submission.citations.structured') }}
+			</h3>
+			<span class="text-lg-normal">
+				{{ t('submission.citations.structured.descriptionTable') }}
+			</span>
+		</template>
+		<template #top-controls>
+			<div class="flex gap-x-2">
+				<component
+					:is="Components[action.component] || action.component"
+					v-bind="action.props || {}"
+					v-for="(action, i) in citationStore.topItems"
+					:key="i"
+				></component>
+			</div>
+		</template>
+		<TableHeader>
+			<TableColumn
+				v-for="(column, i) in citationStore.columns"
+				:key="i"
+				:class="i > 0 ? '!w-16 !text-center' : ''"
+			>
+				<span v-if="column.isHeaderComponent">
+					<component :is="Components[column.header] || column.header" />
+				</span>
+				<span v-else :class="column.headerSrOnly ? 'sr-only' : ''">
+					{{ column.header }}
+				</span>
+			</TableColumn>
+		</TableHeader>
+		<TableBody
+			:empty-text="t('submission.citations.structured.emptyCitations')"
+		>
+			<TableRow
+				v-for="citation in citationStore.citationsFiltered"
+				:key="citation.id"
+			>
+				<component
+					:is="Components[column.component] || column.component"
+					v-for="(column, index) in citationStore.columns"
+					:key="index"
+					v-bind="citation"
+					:citation="citation"
+				></component>
+			</TableRow>
+		</TableBody>
+	</PkpTable>
+</template>
+
+<script setup>
+import {computed, useId} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import PkpButton from '@/components/Button/Button.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import CitationManagerCellCitation from '@/managers/CitationManager/CitationManagerCellCitation.vue';
+import CitationManagerCellToggle from '@/managers/CitationManager/CitationManagerCellToggle.vue';
+import CitationManagerToggleAll from '@/managers/CitationManager/CitationManagerToggleAll.vue';
+import CitationManagerCellActions from '@/managers/CitationManager/CitationManagerCellActions.vue';
+import CitationManagerSearchField from '@/managers/CitationManager/CitationManagerSearchField.vue';
+import CitationManagerStatusProcessed from '@/managers/CitationManager/CitationManagerStatusProcessed.vue';
+import CitationManagerAddRawCitations from '@/managers/CitationManager/CitationManagerAddRawCitations.vue';
+import CitationManagerMetadataLookup from '@/managers/CitationManager/CitationManagerMetadataLookup.vue';
+import {useCitationManagerStore} from './citationManagerStore.js';
+
+const {t} = useLocalize();
+
+const headingId = useId();
+
+const Components = {
+	CitationManagerCellCitation,
+	CitationManagerCellToggle,
+	CitationManagerToggleAll,
+	CitationManagerCellActions,
+	CitationManagerSearchField,
+};
+
+const props = defineProps({
+	submission: {type: Object, required: true},
+	publication: {type: Object, required: true},
+	canEdit: {type: Boolean, required: true},
+	componentForms: {type: Object, required: true},
+});
+
+const citationStore = useCitationManagerStore(props);
+
+const isChecked = computed(() => {
+	return citationStore.citationsMetadataLookup;
+});
+
+function change(checked) {
+	citationStore.citationsMetadataLookupChanged(checked);
+}
+</script>
diff --git a/src/managers/CitationManager/CitationManagerAddRawCitations.vue b/src/managers/CitationManager/CitationManagerAddRawCitations.vue
new file mode 100644
index 000000000..f42701945
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerAddRawCitations.vue
@@ -0,0 +1,80 @@
+<template>
+	<div>
+		<h3 class="font-bold leading-6">
+			{{ t('submission.citations') }}
+		</h3>
+		<div class="py-4 leading-6">
+			{{ t('submission.citations.structured.description') }}
+		</div>
+		<div>
+			<textarea
+				v-model="citationStore.citationsRawToBeAdded"
+				class="border-gray-600 min-h-20 w-full border p-2"
+				:disabled="!citationStore.canEditPublication"
+			></textarea>
+		</div>
+		<div>
+			<PkpButton
+				class="my-2"
+				:is-disabled="!citationStore.canEditPublication"
+				@click="citationStore.handleAddCitationsRawToList"
+			>
+				{{ t('common.add') }}
+			</PkpButton>
+			<span
+				v-if="citationStore.citationsRawShowMessage === 'isEmpty'"
+				class="align-middle"
+			>
+				<Icon
+					:icon="'Declined'"
+					:class="'inline-block h-auto w-6 align-middle'"
+					:inline="true"
+				/>
+				<span class="align-middle">
+					{{ t('submission.citations.structured.addRaw.empty') }}
+				</span>
+			</span>
+			<span v-if="citationStore.citationsRawShowMessage === 'isLoading'">
+				<Spinner />
+			</span>
+			<span
+				v-if="citationStore.citationsRawShowMessage === 'isSuccess'"
+				class="items-center py-2 text-success"
+			>
+				<Icon
+					:icon="'Complete'"
+					:class="'inline-block h-auto w-6 align-middle'"
+					:inline="true"
+				/>
+				<span class="align-middle">
+					{{ t('submission.citations.structured.addRaw.success') }}
+				</span>
+			</span>
+			<span
+				v-if="citationStore.citationsRawShowMessage === 'isPartial'"
+				class="items-center py-2 text-attention"
+			>
+				<Icon
+					:icon="'InProgress'"
+					:class="'inline-block h-auto w-6 align-middle'"
+					:inline="true"
+				/>
+				<span class="align-middle">
+					{{ t('submission.citations.structured.addRaw.partialSuccess') }}
+				</span>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import PkpButton from '@/components/Button/Button.vue';
+import {useCitationManagerStore} from './citationManagerStore.js';
+import Icon from '@/components/Icon/Icon.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerCellActions.vue b/src/managers/CitationManager/CitationManagerCellActions.vue
new file mode 100644
index 000000000..ca5f65d7f
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerCellActions.vue
@@ -0,0 +1,33 @@
+<template>
+	<TableCell>
+		<DropdownActions
+			v-show="citationStore.canEditPublication"
+			button-variant="ellipsis"
+			:label="t('common.moreActions')"
+			:actions="citationStore.getItemActions({citationStore, citation})"
+			@action="(actionName) => handleAction(actionName, citation)"
+		/>
+	</TableCell>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import TableCell from '@/components/Table/TableCell.vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	citation: {type: Object, required: true},
+});
+
+const citation = computed(() => props.citation);
+
+const citationStore = useCitationManagerStore();
+
+function handleAction(actionName, citation) {
+	citationStore[actionName]({citation});
+}
+</script>
diff --git a/src/managers/CitationManager/CitationManagerCellCitation.vue b/src/managers/CitationManager/CitationManagerCellCitation.vue
new file mode 100644
index 000000000..c7105ee20
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerCellCitation.vue
@@ -0,0 +1,153 @@
+<template>
+	<TableCell :is-row-header="false">
+		<!-- citationsMetadataLookup enabled -->
+		<div v-if="citationStore.citationsMetadataLookup">
+			<!-- all -->
+			<div class="text-lg-normal">
+				<PkpButton
+					v-if="citation.doi"
+					:is-link="true"
+					:href="citationStore.doiPrefix + '/' + citation.doi"
+					target="_blank"
+				>
+					{{ citation.doi }}
+				</PkpButton>
+				<PkpButton
+					v-if="citation.url"
+					:is-link="true"
+					:href="citation.url"
+					target="_blank"
+				>
+					{{ citation.url }}
+				</PkpButton>
+				<PkpButton
+					v-if="citation.arxiv"
+					:is-link="true"
+					:href="citation.arxiv"
+					target="_blank"
+				>
+					{{ citation.arxiv }}
+				</PkpButton>
+				<PkpButton
+					v-if="citation.handle"
+					:is-link="true"
+					:href="citation.handle"
+					target="_blank"
+				>
+					{{ citation.handle }}
+				</PkpButton>
+				<span v-if="citation.urn">urn: {{ citation.urn }}</span>
+			</div>
+			<!-- is structured -->
+			<div v-if="citation.isStructured">
+				<div>{{ citation.title }}</div>
+				<div v-if="isExpanded">
+					<div class="text-lg-normal leading-8">
+						<ul>
+							<li
+								v-for="(author, authorIndex) in citation.authors"
+								:key="authorIndex"
+								class="inline"
+							>
+								<span>{{ author.familyName }} {{ author.givenName }}</span>
+								<a
+									v-if="author.orcid"
+									class="inline-flex items-center"
+									:href="author.orcid"
+									target="_blank"
+								>
+									<!-- Icon component, marked as decorative -->
+									<Icon icon="Orcid" class="mx-1 w-4" aria-hidden="true" />
+									<!-- Screen reader-only text with author context -->
+									<span class="sr-only">
+										{{
+											t('submission.citations.structured.label.authorOrcid', {
+												givenName: author.givenName,
+												familyName: author.familyName,
+											})
+										}}
+									</span>
+								</a>
+							</li>
+						</ul>
+					</div>
+					<div v-if="citation.sourceName">{{ citation.sourceName }}</div>
+					<div class="leading-8">
+						<dl>
+							<dt v-if="citation.dateToDisplay" class="inline">Date:</dt>
+							<dd v-if="citation.dateToDisplay" class="inline">
+								{{ citation.dateToDisplay }}
+							</dd>
+							<dt v-if="citation.volume" class="inline">Volume:</dt>
+							<dd v-if="citation.volume" class="inline">
+								{{ citation.volume }}
+							</dd>
+							<dt v-if="citation.issue" class="inline">Issue number:</dt>
+							<dd v-if="citation.issue" class="inline">{{ citation.issue }}</dd>
+							<dt v-if="citation.firstPage && citation.lastPage" class="inline">
+								Pages:
+							</dt>
+							<dd v-if="citation.firstPage && citation.lastPage" class="inline">
+								{{ citation.firstPage }} - {{ citation.lastPage }}
+							</dd>
+						</dl>
+					</div>
+					<div v-if="citation.isStructured" class="w-fit pt-1">
+						{{ citation.rawCitation }}
+					</div>
+				</div>
+				<div class="mt-2">
+					<a v-if="citation.wikidata" :href="citation.wikidata" target="_blank">
+						<Badge :color-variant="'primary'" :size-variant="'compact'">
+							Wikidata
+						</Badge>
+					</a>
+					<a v-if="citation.openAlex" :href="citation.openAlex" target="_blank">
+						<Badge :color-variant="'primary'" :size-variant="'compact'">
+							OpenAlex
+						</Badge>
+					</a>
+				</div>
+			</div>
+			<!-- is not structured -->
+			<div v-else>
+				<div>{{ citation.rawCitation }}</div>
+				<div v-if="citation.isProcessed" class="mt-2">
+					<Badge :color-variant="'attention'" :size-variant="'compact'">
+						{{
+							t('submission.citations.structured.noStructuredInformationFound')
+						}}
+					</Badge>
+				</div>
+			</div>
+		</div>
+		<!-- citationsMetadataLookup disabled -->
+		<div v-else>
+			<div>{{ citation.rawCitation }}</div>
+		</div>
+	</TableCell>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import Badge from '@/components/Badge/Badge.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	citation: {type: Object, required: true},
+});
+
+const citation = computed(() => props.citation);
+
+const citationStore = useCitationManagerStore();
+
+const isExpanded = computed(() => {
+	return citationStore.expandedIds.includes(citation.value.id);
+});
+</script>
diff --git a/src/managers/CitationManager/CitationManagerCellToggle.vue b/src/managers/CitationManager/CitationManagerCellToggle.vue
new file mode 100644
index 000000000..09721acff
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerCellToggle.vue
@@ -0,0 +1,23 @@
+<template>
+	<TableCellTreeExpand
+		:is-displayed="
+			citationStore.citationsMetadataLookup && citation.isStructured
+		"
+		:is-expanded="citationStore.isExpanded(citation)"
+		@toggle="citationStore.toggleItemExpansion(citation)"
+	></TableCellTreeExpand>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import {useCitationManagerStore} from './citationManagerStore';
+import TableCellTreeExpand from '@/components/Table/TableCellTreeExpand.vue';
+
+const props = defineProps({
+	citation: {type: Object, required: true},
+});
+
+const citation = computed(() => props.citation);
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerMetadataLookup.vue b/src/managers/CitationManager/CitationManagerMetadataLookup.vue
new file mode 100644
index 000000000..af83f01f9
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerMetadataLookup.vue
@@ -0,0 +1,79 @@
+<template>
+	<div>
+		<h3 class="font-bold leading-6">
+			{{ t('submission.citations.structured') }}
+		</h3>
+		<div class="py-4 leading-8">
+			{{
+				t('submission.citations.structured.citationsMetadataLookup.description')
+			}}
+		</div>
+		<div>
+			<Checkbox
+				id="citations-citationsMetadataLookup"
+				:label="
+					t('submission.citations.structured.enableCitationsMetadataLookup')
+				"
+				:checked="isChecked"
+				:disabled="!citationStore.canEditPublication"
+				:labelled-by="''"
+				@change="onChange"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useCitationManagerStore} from './citationManagerStore.js';
+import Checkbox from '@/components/Checkbox/Checkbox.vue';
+import {useModal} from '@/composables/useModal';
+
+const {t} = useLocalize();
+
+const props = defineProps({
+	checked: {type: Boolean, required: true},
+});
+
+const citationStore = useCitationManagerStore();
+
+const emit = defineEmits(['change']);
+const isChecked = ref(!!props.checked);
+
+function onChange($event) {
+	// confirm before emitting
+	$event.preventDefault();
+
+	const {openDialog} = useModal();
+	openDialog({
+		title: citationStore.citationsMetadataLookup
+			? t('submission.citations.structured.enableModal.title')
+			: t('submission.citations.structured.disableModal.title'),
+		message: citationStore.citationsMetadataLookup
+			? t('submission.citations.structured.enableModal.confirm')
+			: t('submission.citations.structured.disableModal.confirm'),
+		modalStyle: 'negative',
+		actions: [
+			{
+				label: t('common.ok'),
+				isPrimary: true,
+				callback: async (close) => {
+					isChecked.value = !isChecked.value;
+					emit('change', isChecked.value);
+					close();
+				},
+			},
+			{
+				label: t('common.cancel'),
+				isSecondary: true,
+				callback: (close) => {
+					$event.preventDefault();
+					close();
+				},
+			},
+		],
+		close: () => {},
+	});
+}
+</script>
diff --git a/src/managers/CitationManager/CitationManagerSearchField.vue b/src/managers/CitationManager/CitationManagerSearchField.vue
new file mode 100644
index 000000000..eab1cb4b7
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerSearchField.vue
@@ -0,0 +1,16 @@
+<template>
+	<PkpSearch
+		:search-label="t('submission.citations.structured.search.placeholder')"
+		@search-phrase-changed="(...args) => citationStore.setSearchPhrase(...args)"
+	/>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import PkpSearch from '@/components/Search/Search.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/CitationManagerStatusProcessed.vue b/src/managers/CitationManager/CitationManagerStatusProcessed.vue
new file mode 100644
index 000000000..9f1c57e57
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerStatusProcessed.vue
@@ -0,0 +1,48 @@
+<template>
+	<div v-if="total > 0">
+		<div class="flex items-center py-2">
+			<Icon
+				:icon="processed === total ? 'Complete' : 'InProgress'"
+				:class="'inline-block h-auto w-12 align-middle'"
+				:inline="true"
+			/>
+			<div class="align-middle">
+				<span class="font-semibold">
+					{{
+						processed === total
+							? t('submission.citations.structured.processed.title', {
+									total: total,
+								})
+							: t('submission.citations.structured.processing.title', {
+									processed: processed,
+									total: total,
+								})
+					}}
+				</span>
+				<br />
+				<p class="text-lg-normal">
+					{{
+						processed === total
+							? t('submission.citations.structured.processed.description')
+							: t('submission.citations.structured.processing.description')
+					}}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import Icon from '@/components/Icon/Icon.vue';
+import {useCitationManagerStore} from './citationManagerStore.js';
+import {computed} from 'vue';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+
+const total = computed(() => citationStore.totalCitations);
+
+const processed = computed(() => citationStore.processedCitations);
+</script>
diff --git a/src/managers/CitationManager/CitationManagerToggleAll.vue b/src/managers/CitationManager/CitationManagerToggleAll.vue
new file mode 100644
index 000000000..ae6370e27
--- /dev/null
+++ b/src/managers/CitationManager/CitationManagerToggleAll.vue
@@ -0,0 +1,24 @@
+<template>
+	<PkpButton
+		v-if="citationStore.citationsMetadataLookup"
+		:is-link="true"
+		@click="citationStore.toggleAllItemsExpansion"
+	>
+		{{
+			citationStore.allIdsExpanded
+				? t('submission.citations.structured.collapseAll')
+				: t('submission.citations.structured.expandAll')
+		}}
+	</PkpButton>
+	<span v-else>&nbsp;</span>
+</template>
+
+<script setup>
+import {useLocalize} from '@/composables/useLocalize';
+import PkpButton from '@/components/Button/Button.vue';
+import {useCitationManagerStore} from './citationManagerStore';
+
+const {t} = useLocalize();
+
+const citationStore = useCitationManagerStore();
+</script>
diff --git a/src/managers/CitationManager/citationManagerStore.js b/src/managers/CitationManager/citationManagerStore.js
new file mode 100644
index 000000000..a11353fc9
--- /dev/null
+++ b/src/managers/CitationManager/citationManagerStore.js
@@ -0,0 +1,285 @@
+import {computed, ref, toRefs} from 'vue';
+import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useDataChanged} from '@/composables/useDataChanged';
+import {useExtender} from '@/composables/useExtender';
+import {useLocalize} from '@/composables/useLocalize';
+import {useUrl} from '@/composables/useUrl';
+import {useModal} from '@/composables/useModal';
+import {useFetch} from '@/composables/useFetch';
+import {useCitationManagerConfig} from './useCitationManagerConfig';
+import {useCitationManagerActions} from './useCitationManagerActions';
+
+export const useCitationManagerStore = defineComponentStore(
+	'citationManager',
+	(props) => {
+		const {openDialog} = useModal();
+		const {t} = useLocalize();
+		const extender = useExtender();
+		const {triggerDataChange} = useDataChanged();
+
+		function dataUpdateCallback() {
+			triggerDataChange();
+		}
+
+		const citationManagerConfig = extender.addFns(useCitationManagerConfig());
+		const columns = computed(() => citationManagerConfig.getColumns());
+		const topItems = computed(() => citationManagerConfig.getTopItems());
+		function getItemPrimaryActions(args) {
+			return citationManagerConfig.getItemPrimaryActions(args);
+		}
+		function getItemActions(args) {
+			return citationManagerConfig.getItemActions(args);
+		}
+
+		const {
+			submission,
+			publication,
+			canEdit: canEditPublication,
+		} = toRefs(props);
+		const citations = computed(() => publication.value.citations ?? []);
+
+		/**
+		 * constants
+		 */
+		const doiPrefix = 'https://doi.org';
+		const apiPathCitations = 'citations';
+		const apiPathSubmissions = `submissions/${submission.value.id}/publications/${publication.value.id}/citations`;
+
+		/**
+		 * citations metadata lookup
+		 */
+		const citationsMetadataLookup = computed(
+			() => publication.value.citationsMetadataLookup,
+		);
+		async function citationsMetadataLookupChanged(newValue) {
+			const {apiUrl} = useUrl(apiPathSubmissions);
+			const {fetch} = useFetch(`${apiUrl.value}/metadataLookup`, {
+				method: 'PUT',
+				body: {
+					citationsMetadataLookup: newValue,
+				},
+			});
+			await fetch();
+			dataUpdateCallback();
+		}
+
+		/**
+		 * add new raw citations
+		 */
+		const citationsRawToBeAdded = ref('');
+		const citationsRawShowMessage = ref('');
+		async function handleAddCitationsRawToList() {
+			if (!citationsRawToBeAdded.value) {
+				citationsRawShowMessage.value = 'isEmpty';
+				setTimeout(() => {
+					citationsRawShowMessage.value = '';
+				}, 4000);
+				return;
+			}
+			const {apiUrl} = useUrl(apiPathSubmissions);
+			const {fetch, data} = useFetch(
+				`${apiUrl.value}/importAdditionalCitations`,
+				{
+					method: 'POST',
+					body: {rawCitations: citationsRawToBeAdded.value},
+				},
+			);
+			citationsRawShowMessage.value = 'isLoading';
+			await fetch();
+			citationsRawToBeAdded.value = data.value?.trim?.() ?? '';
+			citationsRawShowMessage.value = citationsRawToBeAdded.value
+				? 'isPartial'
+				: 'isSuccess';
+			dataUpdateCallback();
+			setTimeout(() => {
+				citationsRawShowMessage.value = '';
+			}, 4000);
+		}
+
+		/**
+		 * status processed citations
+		 */
+		const totalCitations = computed(() => citations.value?.length ?? 0);
+		const processedCitations = computed(
+			() =>
+				(citations.value || []).filter((c) => c?.isProcessed === true).length,
+		);
+
+		/**
+		 * delete all citations
+		 */
+		function citationDeleteAllCitations() {
+			openDialog({
+				title: t('submission.citations.structured.deleteAllDialog.title'),
+				message: t('submission.citations.structured.deleteAllDialog.confirm'),
+				modalStyle: 'negative',
+				actions: [
+					{
+						label: t('common.ok'),
+						isWarnable: true,
+						callback: async (close) => {
+							const {apiUrl} = useUrl(apiPathSubmissions);
+							const {fetch} = useFetch(
+								`${apiUrl.value}/deleteCitationsByPublicationId`,
+								{method: 'DELETE'},
+							);
+							await fetch();
+							dataUpdateCallback();
+							close();
+						},
+					},
+					{
+						label: t('common.cancel'),
+						isSecondary: true,
+						callback: (close) => {
+							close();
+						},
+					},
+				],
+			});
+		}
+
+		/**
+		 * Toggle all / toggle status
+		 */
+		const allIdsExpanded = ref(false);
+		const expandedIds = ref([]);
+		function toggleItemExpansion(citation) {
+			if (!expandedIds.value.includes(citation.id)) {
+				expandedIds.value.push(citation.id);
+			} else {
+				expandedIds.value = expandedIds.value.filter(
+					(id) => id !== citation.id,
+				);
+			}
+		}
+		function toggleAllItemsExpansion() {
+			allIdsExpanded.value = !allIdsExpanded.value;
+			if (allIdsExpanded.value) {
+				citations.value.forEach((citation) => {
+					if (
+						allIdsExpanded.value &&
+						citation.isStructured &&
+						!expandedIds.value.includes(citation.id)
+					) {
+						expandedIds.value.push(citation.id);
+					}
+				});
+			} else {
+				expandedIds.value = [];
+			}
+		}
+		function isExpanded(citation) {
+			return expandedIds.value.includes(citation.id);
+		}
+
+		/**
+		 * Filtered citations and search phrase
+		 */
+		const searchPhrase = ref('');
+		const citationsFiltered = computed(() => {
+			const data = citations.value || [];
+			return searchPhrase.value
+				? filterArrayByPhrase(data, searchPhrase.value)
+				: data;
+		});
+		function setSearchPhrase(value) {
+			searchPhrase.value = value;
+		}
+		function containsSearchPhrase(obj, phrase) {
+			function deepSearch(value) {
+				if (value === null || value === undefined) return false;
+				if (typeof value === 'string') {
+					return value
+						.toLowerCase()
+						.includes(String(phrase ?? '').toLowerCase());
+				}
+				if (Array.isArray(value)) {
+					return value.some(deepSearch);
+				}
+				if (typeof value === 'object') {
+					return Object.values(value).some(deepSearch);
+				}
+				return false;
+			}
+			return deepSearch(obj);
+		}
+		function filterArrayByPhrase(data, phrase) {
+			return (Array.isArray(data) ? data : []).filter((item) =>
+				containsSearchPhrase(item, phrase),
+			);
+		}
+
+		/**
+		 * Actions
+		 */
+		const citationManagerActions = useCitationManagerActions();
+		function getActionArgs(additionalArgs = {}) {
+			return {
+				submission: props.submission,
+				publication: props.publication,
+				componentForms: props.componentForms,
+				...additionalArgs,
+			};
+		}
+		function citationEditCitation({citation}) {
+			citationManagerActions.citationEditCitation(
+				getActionArgs({citation}),
+				dataUpdateCallback,
+			);
+		}
+		function citationDeleteCitation({citation}) {
+			citationManagerActions.citationDeleteCitation(
+				getActionArgs({citation}),
+				dataUpdateCallback,
+			);
+		}
+		function citationReprocessCitation({citation}) {
+			citationManagerActions.citationReprocessCitation(
+				getActionArgs({citation}),
+				dataUpdateCallback,
+			);
+		}
+
+		return {
+			columns,
+			topItems,
+			getItemPrimaryActions,
+			getItemActions,
+
+			submission,
+			publication,
+			canEditPublication,
+
+			doiPrefix,
+			apiPathCitations,
+			apiPathSubmissions,
+
+			citationsMetadataLookup,
+			citationsMetadataLookupChanged,
+
+			citationsRawToBeAdded,
+			citationsRawShowMessage,
+			handleAddCitationsRawToList,
+
+			totalCitations,
+			processedCitations,
+
+			citationDeleteAllCitations,
+
+			allIdsExpanded,
+			expandedIds,
+			toggleItemExpansion,
+			toggleAllItemsExpansion,
+			isExpanded,
+
+			citationsFiltered,
+			searchPhrase,
+			setSearchPhrase,
+
+			citationEditCitation,
+			citationDeleteCitation,
+			citationReprocessCitation,
+		};
+	},
+);
diff --git a/src/managers/CitationManager/modals/CitationEditModal.mdx b/src/managers/CitationManager/modals/CitationEditModal.mdx
new file mode 100644
index 000000000..5adecd849
--- /dev/null
+++ b/src/managers/CitationManager/modals/CitationEditModal.mdx
@@ -0,0 +1,16 @@
+import {
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
+} from '@storybook/addon-docs/blocks';
+import * as CitationEditModalStories from './CitationEditModal.stories';
+
+<Meta of={CitationEditModalStories} />
+
+# Citation Edit Modal
+
+A vue modal containing a form for editing a citation.
+
+<ArgTypes/ >
diff --git a/src/managers/CitationManager/modals/CitationEditModal.stories.js b/src/managers/CitationManager/modals/CitationEditModal.stories.js
new file mode 100644
index 000000000..7d9020931
--- /dev/null
+++ b/src/managers/CitationManager/modals/CitationEditModal.stories.js
@@ -0,0 +1,46 @@
+import CitationEditModal from './CitationEditModal.vue';
+import PkpButton from '@/components/Button/Button.vue';
+import {useModal} from '@/composables/useModal';
+
+export default {
+	title: 'Managers/CitationManager/modals/CitationEditModal',
+	component: CitationEditModal,
+};
+
+export const Base = {
+	render: (args) => ({
+		components: {
+			CitationEditModal,
+			PkpButton,
+		},
+		setup() {
+			const {openSideModal} = useModal();
+
+			function openEditStructuredModal() {
+				openSideModal(CitationEditModal, args.modalProps);
+			}
+
+			function openEditRawModal() {
+				openSideModal(CitationEditModal, args.modalProps);
+			}
+			return {
+				openEditStructuredModal,
+				openEditRawModal,
+			};
+		},
+		template: `<PkpButton @click="openEditStructuredModal">Structured</PkpButton> <PkpButton @click="openEditRawModal">Raw</PkpButton>`,
+	}),
+	args: {
+		modalProps: {
+			title: 'Edit citation',
+			form: {},
+			citation: {},
+		},
+	},
+	play: async ({canvasElement}) => {},
+	decorators: [
+		() => ({
+			template: '<div style="height: 300px"><story/></div>',
+		}),
+	],
+};
diff --git a/src/managers/CitationManager/modals/CitationEditModal.vue b/src/managers/CitationManager/modals/CitationEditModal.vue
new file mode 100644
index 000000000..ab0ff0b90
--- /dev/null
+++ b/src/managers/CitationManager/modals/CitationEditModal.vue
@@ -0,0 +1,48 @@
+<template>
+	<SideModalBody>
+		<template #title>
+			<span>{{ title }}</span>
+		</template>
+		<div class="citation-edit-modal-container">
+			<div class="ml-8 mr-8 h-full bg-secondary">
+				<PkpForm
+					v-bind="form"
+					@set="(...args) => emit('set', ...args)"
+					@success="
+						(...args) => {
+							closeModal();
+							emit('success', ...args);
+						}
+					"
+				></PkpForm>
+			</div>
+		</div>
+	</SideModalBody>
+</template>
+
+<script setup>
+import {inject, defineEmits} from 'vue';
+import SideModalBody from '@/components/Modal/SideModalBody.vue';
+import PkpForm from '@/components/Form/Form.vue';
+
+const props = defineProps({
+	title: {type: String, required: true},
+	form: {type: Object, required: true},
+	citation: {type: Number, required: true},
+});
+
+const emit = defineEmits(['set', 'success']);
+
+const closeModal = inject('closeModal');
+</script>
+
+<style>
+.citation-edit-modal-container #citation_raw-rawCitation-control,
+.citation-edit-modal-container #citation_structured-rawCitation-control {
+	height: 5rem;
+}
+.citation-edit-modal-container fieldset {
+	padding-top: 0;
+	margin-top: 1.5rem;
+}
+</style>
diff --git a/src/managers/CitationManager/useCitationManagerActions.js b/src/managers/CitationManager/useCitationManagerActions.js
new file mode 100644
index 000000000..36b512b28
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerActions.js
@@ -0,0 +1,112 @@
+import {useForm} from '@/composables/useForm';
+import CitationEditModal from '@/managers/CitationManager/modals/CitationEditModal.vue';
+import {useModal} from '@/composables/useModal';
+import {useLocalize} from '@/composables/useLocalize';
+import {useUrl} from '@/composables/useUrl';
+import {useFetch} from '@/composables/useFetch';
+
+const {openDialog, openSideModal} = useModal();
+
+export const Actions = {
+	CITATION_EDIT_CITATION: 'citationEditCitation',
+	CITATION_DELETE_CITATION: 'citationDeleteCitation',
+	CITATION_REPROCESS_CITATION: 'citationReprocessCitation'
+};
+
+export function useCitationManagerActions() {
+	const {t} = useLocalize();
+
+	function citationEditCitation({publication, componentForms, citation}, finishedCallback) {
+		if (!citation.authors) {
+			citation.authors = [];
+		}
+		let formName = 'citationRawEditForm';
+		if (publication.citationsMetadataLookup) {
+			formName = 'citationStructuredEditForm';
+		}
+
+		const {apiUrl} = useUrl(`citations`);
+
+		const {form, set, setValues, setAction} = useForm(componentForms[formName]);
+		setValues(citation);
+		setAction(`${apiUrl.value}/${citation.id}`);
+		openSideModal(CitationEditModal, {
+			title: t('submission.citations.structured.editModal.title'),
+			form: form,
+			onSet: set,
+			citation: citation,
+			onSuccess: () => {
+				finishedCallback();
+			}
+		});
+	}
+
+	function citationDeleteCitation({publication, componentForms, citation}, finishedCallback) {
+		openDialog({
+			title: t('common.delete'),
+			message: t('common.confirmDelete'),
+			modalStyle: 'negative',
+			actions: [
+				{
+					label: t('common.ok'),
+					isWarnable: true,
+					callback: async (close) => {
+						const {apiUrl} = useUrl(`citations`);
+						const {fetch} = useFetch(`${apiUrl.value}/${citation.id}`, {
+							method: 'DELETE'
+						});
+						await fetch();
+						finishedCallback();
+						close();
+					}
+				},
+				{
+					label: t('common.cancel'),
+					isSecondary: true,
+					callback: (close) => {
+						close();
+					}
+				}
+			]
+		});
+	}
+
+	function citationReprocessCitation({citation}, finishedCallback) {
+		openDialog({
+			title: 'Are you sure you want to reprocess this citation?',
+			message: '',
+			actions: [
+				{
+					label: t('common.ok'),
+					isWarnable: true,
+					callback: async (close) => {
+						const {apiUrl} = useUrl(`citations`);
+						const {fetch} = useFetch(
+							`${apiUrl.value}/${citation.id}/reprocessCitation`,
+							{
+								method: 'POST',
+								body: {}
+							}
+						);
+						await fetch();
+						finishedCallback();
+						close();
+					}
+				},
+				{
+					label: t('common.cancel'),
+					isSecondary: true,
+					callback: (close) => {
+						close();
+					}
+				}
+			]
+		});
+	}
+
+	return {
+		citationEditCitation,
+		citationDeleteCitation,
+		citationReprocessCitation
+	};
+}
diff --git a/src/managers/CitationManager/useCitationManagerConfig.js b/src/managers/CitationManager/useCitationManagerConfig.js
new file mode 100644
index 000000000..3912a35e5
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerConfig.js
@@ -0,0 +1,85 @@
+import {useLocalize} from '@/composables/useLocalize';
+import {Actions} from './useCitationManagerActions';
+
+export function useCitationManagerConfig() {
+	const {t} = useLocalize();
+
+	function getColumns() {
+		const columns = [];
+
+		columns.push({
+			header: t('submission.citations.structured'),
+			component: 'CitationManagerCellCitation',
+			props: {},
+		});
+
+		columns.push({
+			header: 'CitationManagerToggleAll',
+			component: 'CitationManagerCellToggle',
+			props: {},
+			isHeaderComponent: true,
+		});
+
+		columns.push({
+			header: '',
+			component: 'CitationManagerCellActions',
+			props: {},
+		});
+
+		return columns;
+	}
+
+	function getTopItems() {
+		const items = [];
+
+		items.push({
+			component: 'CitationManagerSearchField',
+			props: {
+				label: t('submission.citations.structured.expandAll'),
+				action: '',
+			},
+		});
+
+		return items;
+	}
+
+	function getItemPrimaryActions() {
+		return [];
+	}
+
+	function getItemActions(args) {
+		const actions = [];
+
+		actions.push({
+			label: t('common.edit'),
+			name: Actions.CITATION_EDIT_CITATION,
+			icon: 'Edit',
+		});
+
+		actions.push({
+			label: t('common.delete'),
+			name: Actions.CITATION_DELETE_CITATION,
+			icon: 'Cancel',
+			isWarnable: true,
+		});
+
+		if (args.citationStore.citationsMetadataLookup) {
+			if (!args.citation.isStructured) {
+				actions.push({
+					label: t('admin.citation.reprocess'),
+					name: Actions.CITATION_REPROCESS_CITATION,
+					icon: 'Add',
+				});
+			}
+		}
+
+		return actions;
+	}
+
+	return {
+		getColumns,
+		getTopItems,
+		getItemPrimaryActions,
+		getItemActions,
+	};
+}
diff --git a/src/pages/workflow/WorkflowPageOJS.vue b/src/pages/workflow/WorkflowPageOJS.vue
index 25df92228..1c7120fbc 100644
--- a/src/pages/workflow/WorkflowPageOJS.vue
+++ b/src/pages/workflow/WorkflowPageOJS.vue
@@ -12,6 +12,7 @@ import FileManager from '@/managers/FileManager/FileManager.vue';
 import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManagerLegacy from '@/managers/DiscussionManagerLegacy/DiscussionManagerLegacy.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
+import CitationManager from '@/managers/CitationManager/CitationManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
 import ReviewerSuggestionManager from '@/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue';
 import DiscussionManager from '@/managers/DiscussionManager/DiscussionManager.vue';
@@ -49,6 +50,7 @@ const Components = markRaw({
 	ReviewerManager,
 	DiscussionManagerLegacy,
 	ContributorManager,
+	CitationManager,
 	ParticipantManager,
 	ReviewerSuggestionManager,
 	DiscussionManager,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
index f23a7b90e..a55707a6b 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
@@ -396,14 +396,18 @@ export const PublicationConfig = {
 			pageInitConfig,
 			permissions,
 		}) => {
+			selectedPublication.citationsMetadataLookup =
+				selectedPublication.citationsMetadataLookup ??
+				submission.contextCitationsMetadataLookup ??
+				false;
 			return [
 				{
-					component: 'WorkflowPublicationForm',
+					component: 'CitationManager',
 					props: {
-						formName: 'reference',
-						submission,
+						submission: submission,
 						publication: selectedPublication,
 						canEdit: permissions.canEditPublication,
+						componentForms: pageInitConfig.componentForms,
 					},
 				},
 			];
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
index ecbe24d0a..3ce78065f 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
@@ -942,14 +942,18 @@ export const PublicationConfig = {
 			pageInitConfig,
 			permissions,
 		}) => {
+			selectedPublication.citationsMetadataLookup =
+				selectedPublication.citationsMetadataLookup ??
+				submission.contextCitationsMetadataLookup ??
+				false;
 			return [
 				{
-					component: 'WorkflowPublicationForm',
+					component: 'CitationManager',
 					props: {
-						formName: 'reference',
-						submission,
+						submission: submission,
 						publication: selectedPublication,
 						canEdit: permissions.canEditPublication,
+						componentForms: pageInitConfig.componentForms,
 					},
 				},
 			];

From d182981319d3a091b74771819009c825f4f5b55e Mon Sep 17 00:00:00 2001
From: Bozana Bokan <bozana.bokan@posteo.net>
Date: Tue, 30 Sep 2025 09:26:42 +0200
Subject: [PATCH 2/3] pkp/pkp-lib#10692 final changes for structured citations

---
 .../useCitationManagerActions.js              | 41 +++++++++++--------
 src/pages/dashboard/DashboardPage.vue         |  5 +++
 src/pages/workflow/WorkflowPageOMP.vue        |  2 +
 src/pages/workflow/WorkflowPageOPS.vue        |  2 +
 .../workflowConfigAuthorOJS.js                |  2 +-
 .../workflowConfigEditorialOJS.js             |  2 +-
 6 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/managers/CitationManager/useCitationManagerActions.js b/src/managers/CitationManager/useCitationManagerActions.js
index 36b512b28..32bdd0d6e 100644
--- a/src/managers/CitationManager/useCitationManagerActions.js
+++ b/src/managers/CitationManager/useCitationManagerActions.js
@@ -5,18 +5,20 @@ import {useLocalize} from '@/composables/useLocalize';
 import {useUrl} from '@/composables/useUrl';
 import {useFetch} from '@/composables/useFetch';
 
-const {openDialog, openSideModal} = useModal();
-
 export const Actions = {
 	CITATION_EDIT_CITATION: 'citationEditCitation',
 	CITATION_DELETE_CITATION: 'citationDeleteCitation',
-	CITATION_REPROCESS_CITATION: 'citationReprocessCitation'
+	CITATION_REPROCESS_CITATION: 'citationReprocessCitation',
 };
 
 export function useCitationManagerActions() {
+	const {openDialog, openSideModal} = useModal();
 	const {t} = useLocalize();
 
-	function citationEditCitation({publication, componentForms, citation}, finishedCallback) {
+	function citationEditCitation(
+		{publication, componentForms, citation},
+		finishedCallback,
+	) {
 		if (!citation.authors) {
 			citation.authors = [];
 		}
@@ -37,11 +39,14 @@ export function useCitationManagerActions() {
 			citation: citation,
 			onSuccess: () => {
 				finishedCallback();
-			}
+			},
 		});
 	}
 
-	function citationDeleteCitation({publication, componentForms, citation}, finishedCallback) {
+	function citationDeleteCitation(
+		{publication, componentForms, citation},
+		finishedCallback,
+	) {
 		openDialog({
 			title: t('common.delete'),
 			message: t('common.confirmDelete'),
@@ -53,21 +58,21 @@ export function useCitationManagerActions() {
 					callback: async (close) => {
 						const {apiUrl} = useUrl(`citations`);
 						const {fetch} = useFetch(`${apiUrl.value}/${citation.id}`, {
-							method: 'DELETE'
+							method: 'DELETE',
 						});
 						await fetch();
 						finishedCallback();
 						close();
-					}
+					},
 				},
 				{
 					label: t('common.cancel'),
 					isSecondary: true,
 					callback: (close) => {
 						close();
-					}
-				}
-			]
+					},
+				},
+			],
 		});
 	}
 
@@ -85,28 +90,28 @@ export function useCitationManagerActions() {
 							`${apiUrl.value}/${citation.id}/reprocessCitation`,
 							{
 								method: 'POST',
-								body: {}
-							}
+								body: {},
+							},
 						);
 						await fetch();
 						finishedCallback();
 						close();
-					}
+					},
 				},
 				{
 					label: t('common.cancel'),
 					isSecondary: true,
 					callback: (close) => {
 						close();
-					}
-				}
-			]
+					},
+				},
+			],
 		});
 	}
 
 	return {
 		citationEditCitation,
 		citationDeleteCitation,
-		citationReprocessCitation
+		citationReprocessCitation,
 	};
 }
diff --git a/src/pages/dashboard/DashboardPage.vue b/src/pages/dashboard/DashboardPage.vue
index c2edd18a5..11aec913a 100644
--- a/src/pages/dashboard/DashboardPage.vue
+++ b/src/pages/dashboard/DashboardPage.vue
@@ -98,6 +98,11 @@ const props = defineProps({
 		type: Number,
 		required: true,
 	},
+	/** Context setting, whether the citations metadata lookup is enabled per default for a publication */
+	contextCitationsMetadataLookup: {
+		type: Boolean,
+		required: true,
+	},
 	/** Filters form config  */
 	filtersForm: {
 		type: Object,
diff --git a/src/pages/workflow/WorkflowPageOMP.vue b/src/pages/workflow/WorkflowPageOMP.vue
index e81cddd8f..cacb60653 100644
--- a/src/pages/workflow/WorkflowPageOMP.vue
+++ b/src/pages/workflow/WorkflowPageOMP.vue
@@ -13,6 +13,7 @@ import {useWorkflowNavigationConfigOMP as useWorkflowNavigationConfig} from './c
 import FileManager from '@/managers/FileManager/FileManager.vue';
 import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManagerLegacy from '@/managers/DiscussionManagerLegacy/DiscussionManagerLegacy.vue';
+import CitationManager from '@/managers/CitationManager/CitationManager.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
 import ReviewerSuggestionManager from '@/managers/ReviewerSuggestionManager/ReviewerSuggestionManager.vue';
@@ -49,6 +50,7 @@ const Components = markRaw({
 	FileManager,
 	ReviewerManager,
 	DiscussionManagerLegacy,
+	CitationManager,
 	ContributorManager,
 	ParticipantManager,
 	ReviewerSuggestionManager,
diff --git a/src/pages/workflow/WorkflowPageOPS.vue b/src/pages/workflow/WorkflowPageOPS.vue
index 729af182d..dcd9d49f4 100644
--- a/src/pages/workflow/WorkflowPageOPS.vue
+++ b/src/pages/workflow/WorkflowPageOPS.vue
@@ -14,6 +14,7 @@ import {useWorkflowNavigationConfigOPS as useWorkflowNavigationConfig} from './c
 import FileManager from '@/managers/FileManager/FileManager.vue';
 import ReviewerManager from '@/managers/ReviewerManager/ReviewerManager.vue';
 import DiscussionManagerLegacy from '@/managers/DiscussionManagerLegacy/DiscussionManagerLegacy.vue';
+import CitationManager from '@/managers/CitationManager/CitationManager.vue';
 import ContributorManager from '@/managers/ContributorManager/ContributorManager.vue';
 import ParticipantManager from '@/managers/ParticipantManager/ParticipantManager.vue';
 import GalleyManager from '@/managers/GalleyManager/GalleyManager.vue';
@@ -43,6 +44,7 @@ const Components = markRaw({
 	FileManager,
 	ReviewerManager,
 	DiscussionManagerLegacy,
+	CitationManager,
 	ContributorManager,
 	ParticipantManager,
 	GalleyManager,
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
index a55707a6b..05d2c6049 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js
@@ -398,7 +398,7 @@ export const PublicationConfig = {
 		}) => {
 			selectedPublication.citationsMetadataLookup =
 				selectedPublication.citationsMetadataLookup ??
-				submission.contextCitationsMetadataLookup ??
+				pageInitConfig.contextCitationsMetadataLookup ??
 				false;
 			return [
 				{
diff --git a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
index 3ce78065f..a8f7d118d 100644
--- a/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
+++ b/src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js
@@ -944,7 +944,7 @@ export const PublicationConfig = {
 		}) => {
 			selectedPublication.citationsMetadataLookup =
 				selectedPublication.citationsMetadataLookup ??
-				submission.contextCitationsMetadataLookup ??
+				pageInitConfig.contextCitationsMetadataLookup ??
 				false;
 			return [
 				{

From 00fc98d6327b0c6e46283b916654b46eef86d2db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 1 Oct 2025 18:04:31 +0200
Subject: [PATCH 3/3] pkp/pkp-lib#10692 Structured Citations refinments and use
 of forms for adding citations & enabling/disabling metadata

---
 src/components/Form/FormGroup.vue             |   6 +
 src/components/Form/FormPage.vue              |   7 +-
 src/components/Form/fields/FieldAuthors.vue   |  12 +-
 src/components/Form/fields/FieldTextarea.vue  |   8 +-
 src/composables/useForm.js                    |  33 ++++-
 .../CitationManager/CitationManager.mdx       |  11 +-
 .../CitationManager/CitationManager.vue       | 135 +++++++++---------
 .../CitationManagerAddRawCitations.vue        |  73 +---------
 .../CitationManagerCellActions.vue            |   2 +-
 .../CitationManagerCellCitation.vue           | 123 ++++++++++------
 .../CitationManagerMetadataLookup.vue         |  69 +--------
 .../CitationManager/citationManagerStore.js   |  87 +++++------
 .../useCitationManagerActions.js              |   4 +-
 .../useCitationManagerConfig.js               |  11 +-
 .../useCitationManagerFormAddRawCitation.js   |  40 ++++++
 .../useCitationManagerFormEnableLookup.js     |  95 ++++++++++++
 16 files changed, 398 insertions(+), 318 deletions(-)
 create mode 100644 src/managers/CitationManager/useCitationManagerFormAddRawCitation.js
 create mode 100644 src/managers/CitationManager/useCitationManagerFormEnableLookup.js

diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 698a07404..58b22a158 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -154,6 +154,12 @@ export default {
 			validator: (val) => ['default', 'fullWidth'].includes(val),
 		},
 	},
+	emits: [
+		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
+		'change',
+		'set-errors',
+	],
+
 	computed: {
 		/**
 		 * All fields assigned to this group
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 836b181e8..5a38155ad 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -118,6 +118,11 @@ export default {
 		},
 		spacingVariant: String,
 	},
+	emits: [
+		/** Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code. */
+		'change',
+		'set-errors',
+	],
 	data() {
 		return {
 			hasRecentSave: false,
@@ -152,7 +157,7 @@ export default {
 
 		footerSpacingStyle() {
 			if (this.spacingVariant === 'fullWidth') {
-				return '!px-0 !py-12';
+				return '!px-0';
 			}
 			return '';
 		},
diff --git a/src/components/Form/fields/FieldAuthors.vue b/src/components/Form/fields/FieldAuthors.vue
index 627c114ee..b4f084b59 100644
--- a/src/components/Form/fields/FieldAuthors.vue
+++ b/src/components/Form/fields/FieldAuthors.vue
@@ -24,40 +24,44 @@
 						<FieldText
 							:name="'givenName'"
 							:value="row.givenName"
+							:all-errors="{givenName: errors?.[index]?.givenName}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{givenName: errors?.[index]?.givenName}"
 						/>
 					</TableCell>
 					<TableCell>
 						<FieldText
 							:name="'familyName'"
 							:value="row.familyName"
+							:all-errors="{familyName: errors?.[index]?.familyName}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{familyName: errors?.[index]?.familyName}"
 						/>
 					</TableCell>
 					<TableCell>
 						<FieldText
 							:name="'orcid'"
 							:value="row.orcid"
+							:all-errors="{orcid: errors?.[index]?.orcid}"
 							@change="
 								(fieldName, _, fieldValue) => {
 									updateRow(index, fieldName, fieldValue);
 								}
 							"
-							:all-errors="{orcid: errors?.[index]?.orcid}"
 						/>
 					</TableCell>
 					<TableCell>
-						<PkpButton :is-link="true" :is-warnable="true" @click="deleteRow(index)">
+						<PkpButton
+							:is-link="true"
+							:is-warnable="true"
+							@click="deleteRow(index)"
+						>
 							{{ t('common.delete', []) }}
 						</PkpButton>
 					</TableCell>
diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
index 9a6a640de..3a4867d05 100644
--- a/src/components/Form/fields/FieldTextarea.vue
+++ b/src/components/Form/fields/FieldTextarea.vue
@@ -85,7 +85,9 @@ export default {
 			type: String,
 			default: 'normal',
 			validator: function (value) {
-				return ['small', 'normal', 'large'].indexOf(value) !== -1;
+				return (
+					['small', 'small-height', 'normal', 'large'].indexOf(value) !== -1
+				);
 			},
 		},
 	},
@@ -118,6 +120,10 @@ export default {
 	height: 8em;
 }
 
+.pkpFormField--small-height .pkpFormField--textarea__input {
+	height: 10em;
+}
+
 .pkpFormField--large .pkpFormField--textarea__input {
 	height: 40em;
 }
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index 54f2c2c55..4fd3417d1 100644
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -365,7 +365,15 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 
 	function initEmptyForm(
 		formId,
-		{action, method, locales, showErrorFooter, spacingVariant} = {},
+		{
+			action,
+			method,
+			locales,
+			showErrorFooter,
+			spacingVariant,
+			onSuccess,
+			onSet,
+		} = {},
 	) {
 		if (!form.value) {
 			form.value = {};
@@ -379,6 +387,9 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		form.value.locales = locales;
 		form.value.showErrorFooter = showErrorFooter;
 		form.value.spacingVariant = spacingVariant || 'default';
+		form.value.onSuccess = onSuccess || undefined;
+		form.value.onSet = onSet || set;
+
 		setMethod(method || 'POST');
 		setAction(action || 'emit');
 		setLocales(locales);
@@ -592,6 +603,25 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		);
 	}
 
+	/**
+	 * Adds or updates a textarea field in the form.
+	 *
+	 * @param {string} fieldName - The name (or key) of the field.
+	 * @param {Object} fieldOptions - Configuration options for the field.
+	 * @param {Object} [opts] - Optional settings.
+	 * @param {boolean} [opts.override] - If true and the field already exists, it will be fully overridden.
+	 */
+	function addFieldHtml(fieldName, {...commonFields} = {}, opts) {
+		return addField(
+			fieldName,
+			{
+				component: 'field-html',
+				...commonFields,
+			},
+			opts,
+		);
+	}
+
 	/**
 	 * Adds or updates a FieldCheckbox in the form.
 	 * @param {string} fieldName - The name of the field
@@ -670,6 +700,7 @@ export function useForm(_form = {}, {customSubmit} = {}) {
 		addFieldTextArea,
 		addFieldCheckbox,
 		addFieldComponent,
+		addFieldHtml,
 		getField,
 	};
 }
diff --git a/src/managers/CitationManager/CitationManager.mdx b/src/managers/CitationManager/CitationManager.mdx
index 98bbbf1e7..7738d3110 100644
--- a/src/managers/CitationManager/CitationManager.mdx
+++ b/src/managers/CitationManager/CitationManager.mdx
@@ -1,9 +1,9 @@
 import {
-    Primary,
-    Controls,
-    Stories,
-    Meta,
-    ArgTypes
+	Primary,
+	Controls,
+	Stories,
+	Meta,
+	ArgTypes,
 } from '@storybook/addon-docs/blocks';
 import * as CitationManager from './CitationManager.stories.js';
 
@@ -25,7 +25,6 @@ The name of the Pinia store is `CitationManager`.
 
 - `getTopItems`: Add/Change items in the top right, where the `Upload / Select` button is.
 - `getItemActions`: Add/Change the list of actions that are displayed after clicking the 3 dots button.
-- `getItemPrimaryActions`: Add/Change one individual Action which is displayed in the ACTIONS column.
 - `getColumns`: Add/Change the columns being displayed in the table.
 - ...
 
diff --git a/src/managers/CitationManager/CitationManager.vue b/src/managers/CitationManager/CitationManager.vue
index b5709e47d..1ca8e54ec 100644
--- a/src/managers/CitationManager/CitationManager.vue
+++ b/src/managers/CitationManager/CitationManager.vue
@@ -1,72 +1,75 @@
 <template>
-	<CitationManagerMetadataLookup :checked="isChecked" @change="change" />
-	<CitationManagerAddRawCitations />
-	<CitationManagerStatusProcessed
-		v-if="citationStore.citationsMetadataLookup"
-	/>
 	<div>
-		<PkpButton
-			:is-disabled="!citationStore.canEditPublication"
-			:is-link="true"
-			@click="citationStore.citationDeleteAllCitations"
-		>
-			{{ t('submission.citations.structured.deleteAllLink') }}
-		</PkpButton>
-	</div>
-	<PkpTable aria-label="Structured References" :aria-describedby="headingId">
-		<template #label>
-			<h3 class="text-4 font-semibold">
-				{{ t('submission.citations.structured') }}
-			</h3>
-			<span class="text-lg-normal">
-				{{ t('submission.citations.structured.descriptionTable') }}
-			</span>
-		</template>
-		<template #top-controls>
-			<div class="flex gap-x-2">
-				<component
-					:is="Components[action.component] || action.component"
-					v-bind="action.props || {}"
-					v-for="(action, i) in citationStore.topItems"
-					:key="i"
-				></component>
-			</div>
-		</template>
-		<TableHeader>
-			<TableColumn
-				v-for="(column, i) in citationStore.columns"
-				:key="i"
-				:class="i > 0 ? '!w-16 !text-center' : ''"
+		<CitationManagerMetadataLookup />
+		<div class="pt-3">
+			<CitationManagerAddRawCitations />
+		</div>
+		<CitationManagerStatusProcessed
+			v-if="citationStore.citationsMetadataLookup"
+		/>
+		<div>
+			<PkpButton
+				:is-disabled="!citationStore.canEditPublication"
+				:is-link="true"
+				@click="citationStore.citationDeleteAllCitations"
 			>
-				<span v-if="column.isHeaderComponent">
-					<component :is="Components[column.header] || column.header" />
-				</span>
-				<span v-else :class="column.headerSrOnly ? 'sr-only' : ''">
-					{{ column.header }}
+				{{ t('submission.citations.structured.deleteAllLink') }}
+			</PkpButton>
+		</div>
+		<PkpTable :aria-label="t('submission.citations.structured')">
+			<template #label>
+				<h3 class="text-4 font-semibold">
+					{{ t('submission.citations.structured') }}
+				</h3>
+				<span class="text-lg-normal">
+					{{ t('submission.citations.structured.descriptionTable') }}
 				</span>
-			</TableColumn>
-		</TableHeader>
-		<TableBody
-			:empty-text="t('submission.citations.structured.emptyCitations')"
-		>
-			<TableRow
-				v-for="citation in citationStore.citationsFiltered"
-				:key="citation.id"
+			</template>
+			<template #top-controls>
+				<div class="flex gap-x-2">
+					<component
+						:is="Components[action.component] || action.component"
+						v-bind="action.props || {}"
+						v-for="(action, i) in citationStore.topItems"
+						:key="i"
+					></component>
+				</div>
+			</template>
+			<TableHeader>
+				<TableColumn
+					v-for="(column, i) in citationStore.columns"
+					:key="i"
+					:class="i > 0 ? '!w-16 !text-center' : ''"
+				>
+					<span v-if="column.isHeaderComponent">
+						<component :is="Components[column.header] || column.header" />
+					</span>
+					<span v-else :class="column.headerSrOnly ? 'sr-only' : ''">
+						{{ column.header }}
+					</span>
+				</TableColumn>
+			</TableHeader>
+			<TableBody
+				:empty-text="t('submission.citations.structured.emptyCitations')"
 			>
-				<component
-					:is="Components[column.component] || column.component"
-					v-for="(column, index) in citationStore.columns"
-					:key="index"
-					v-bind="citation"
-					:citation="citation"
-				></component>
-			</TableRow>
-		</TableBody>
-	</PkpTable>
+				<TableRow
+					v-for="citation in citationStore.citationsFiltered"
+					:key="citation.id"
+				>
+					<component
+						:is="Components[column.component] || column.component"
+						v-for="(column, index) in citationStore.columns"
+						:key="index"
+						v-bind="citation"
+						:citation="citation"
+					></component>
+				</TableRow>
+			</TableBody>
+		</PkpTable>
+	</div>
 </template>
 
 <script setup>
-import {computed, useId} from 'vue';
 import {useLocalize} from '@/composables/useLocalize';
 import PkpButton from '@/components/Button/Button.vue';
 import PkpTable from '@/components/Table/Table.vue';
@@ -86,8 +89,6 @@ import {useCitationManagerStore} from './citationManagerStore.js';
 
 const {t} = useLocalize();
 
-const headingId = useId();
-
 const Components = {
 	CitationManagerCellCitation,
 	CitationManagerCellToggle,
@@ -104,12 +105,4 @@ const props = defineProps({
 });
 
 const citationStore = useCitationManagerStore(props);
-
-const isChecked = computed(() => {
-	return citationStore.citationsMetadataLookup;
-});
-
-function change(checked) {
-	citationStore.citationsMetadataLookupChanged(checked);
-}
 </script>
diff --git a/src/managers/CitationManager/CitationManagerAddRawCitations.vue b/src/managers/CitationManager/CitationManagerAddRawCitations.vue
index f42701945..0b430f2eb 100644
--- a/src/managers/CitationManager/CitationManagerAddRawCitations.vue
+++ b/src/managers/CitationManager/CitationManagerAddRawCitations.vue
@@ -1,80 +1,9 @@
 <template>
-	<div>
-		<h3 class="font-bold leading-6">
-			{{ t('submission.citations') }}
-		</h3>
-		<div class="py-4 leading-6">
-			{{ t('submission.citations.structured.description') }}
-		</div>
-		<div>
-			<textarea
-				v-model="citationStore.citationsRawToBeAdded"
-				class="border-gray-600 min-h-20 w-full border p-2"
-				:disabled="!citationStore.canEditPublication"
-			></textarea>
-		</div>
-		<div>
-			<PkpButton
-				class="my-2"
-				:is-disabled="!citationStore.canEditPublication"
-				@click="citationStore.handleAddCitationsRawToList"
-			>
-				{{ t('common.add') }}
-			</PkpButton>
-			<span
-				v-if="citationStore.citationsRawShowMessage === 'isEmpty'"
-				class="align-middle"
-			>
-				<Icon
-					:icon="'Declined'"
-					:class="'inline-block h-auto w-6 align-middle'"
-					:inline="true"
-				/>
-				<span class="align-middle">
-					{{ t('submission.citations.structured.addRaw.empty') }}
-				</span>
-			</span>
-			<span v-if="citationStore.citationsRawShowMessage === 'isLoading'">
-				<Spinner />
-			</span>
-			<span
-				v-if="citationStore.citationsRawShowMessage === 'isSuccess'"
-				class="items-center py-2 text-success"
-			>
-				<Icon
-					:icon="'Complete'"
-					:class="'inline-block h-auto w-6 align-middle'"
-					:inline="true"
-				/>
-				<span class="align-middle">
-					{{ t('submission.citations.structured.addRaw.success') }}
-				</span>
-			</span>
-			<span
-				v-if="citationStore.citationsRawShowMessage === 'isPartial'"
-				class="items-center py-2 text-attention"
-			>
-				<Icon
-					:icon="'InProgress'"
-					:class="'inline-block h-auto w-6 align-middle'"
-					:inline="true"
-				/>
-				<span class="align-middle">
-					{{ t('submission.citations.structured.addRaw.partialSuccess') }}
-				</span>
-			</span>
-		</div>
-	</div>
+	<PkpForm v-bind="citationStore.formAddRawCitations"></PkpForm>
 </template>
 
 <script setup>
-import {useLocalize} from '@/composables/useLocalize';
-import PkpButton from '@/components/Button/Button.vue';
 import {useCitationManagerStore} from './citationManagerStore.js';
-import Icon from '@/components/Icon/Icon.vue';
-import Spinner from '@/components/Spinner/Spinner.vue';
-
-const {t} = useLocalize();
 
 const citationStore = useCitationManagerStore();
 </script>
diff --git a/src/managers/CitationManager/CitationManagerCellActions.vue b/src/managers/CitationManager/CitationManagerCellActions.vue
index ca5f65d7f..247013a38 100644
--- a/src/managers/CitationManager/CitationManagerCellActions.vue
+++ b/src/managers/CitationManager/CitationManagerCellActions.vue
@@ -4,7 +4,7 @@
 			v-show="citationStore.canEditPublication"
 			button-variant="ellipsis"
 			:label="t('common.moreActions')"
-			:actions="citationStore.getItemActions({citationStore, citation})"
+			:actions="citationStore.getItemActions({citation})"
 			@action="(actionName) => handleAction(actionName, citation)"
 		/>
 	</TableCell>
diff --git a/src/managers/CitationManager/CitationManagerCellCitation.vue b/src/managers/CitationManager/CitationManagerCellCitation.vue
index c7105ee20..90bfe2512 100644
--- a/src/managers/CitationManager/CitationManagerCellCitation.vue
+++ b/src/managers/CitationManager/CitationManagerCellCitation.vue
@@ -4,107 +4,138 @@
 		<div v-if="citationStore.citationsMetadataLookup">
 			<!-- all -->
 			<div class="text-lg-normal">
-				<PkpButton
+				<a
 					v-if="citation.doi"
 					:is-link="true"
 					:href="citationStore.doiPrefix + '/' + citation.doi"
 					target="_blank"
 				>
 					{{ citation.doi }}
-				</PkpButton>
-				<PkpButton
+				</a>
+				<a
 					v-if="citation.url"
 					:is-link="true"
 					:href="citation.url"
 					target="_blank"
 				>
 					{{ citation.url }}
-				</PkpButton>
-				<PkpButton
+				</a>
+				<a
 					v-if="citation.arxiv"
 					:is-link="true"
 					:href="citation.arxiv"
 					target="_blank"
 				>
 					{{ citation.arxiv }}
-				</PkpButton>
-				<PkpButton
+				</a>
+				<a
 					v-if="citation.handle"
 					:is-link="true"
 					:href="citation.handle"
 					target="_blank"
 				>
 					{{ citation.handle }}
-				</PkpButton>
+				</a>
 				<span v-if="citation.urn">urn: {{ citation.urn }}</span>
 			</div>
 			<!-- is structured -->
 			<div v-if="citation.isStructured">
-				<div>{{ citation.title }}</div>
+				<div class="pt-2 text-secondary">{{ citation.title }}</div>
 				<div v-if="isExpanded">
-					<div class="text-lg-normal leading-8">
-						<ul>
+					<div class="py-2">
+						<ul class="text-base-normal">
 							<li
 								v-for="(author, authorIndex) in citation.authors"
 								:key="authorIndex"
-								class="inline"
+								class="inline-flex items-center"
 							>
-								<span>{{ author.familyName }} {{ author.givenName }}</span>
-								<a
-									v-if="author.orcid"
-									class="inline-flex items-center"
-									:href="author.orcid"
-									target="_blank"
-								>
-									<!-- Icon component, marked as decorative -->
-									<Icon icon="Orcid" class="mx-1 w-4" aria-hidden="true" />
-									<!-- Screen reader-only text with author context -->
-									<span class="sr-only">
-										{{
-											t('submission.citations.structured.label.authorOrcid', {
-												givenName: author.givenName,
-												familyName: author.familyName,
-											})
-										}}
-									</span>
-								</a>
+								<span class="me-2 inline-flex items-center">
+									<span>{{ author.familyName }} {{ author.givenName }}</span>
+									<a
+										v-if="author.orcid"
+										class="inline-flex items-center"
+										:href="author.orcid"
+										target="_blank"
+									>
+										<!-- Icon component, marked as decorative -->
+										<Icon icon="Orcid" class="mx-1 w-4" aria-hidden="true" />
+										<!-- Screen reader-only text with author context -->
+										<span class="sr-only">
+											{{
+												t('submission.citations.structured.label.authorOrcid', {
+													givenName: author.givenName,
+													familyName: author.familyName,
+												})
+											}}
+										</span>
+									</a>
+								</span>
 							</li>
 						</ul>
 					</div>
-					<div v-if="citation.sourceName">{{ citation.sourceName }}</div>
-					<div class="leading-8">
-						<dl>
-							<dt v-if="citation.dateToDisplay" class="inline">Date:</dt>
-							<dd v-if="citation.dateToDisplay" class="inline">
-								{{ citation.dateToDisplay }}
+					<div v-if="citation.sourceName" class="text-sm-normal text-secondary">
+						{{ citation.sourceName }}
+					</div>
+					<div class="py-2 text-sm-normal">
+						<dl class="flex gap-x-1">
+							<dt v-if="citation.date" class="inline text-secondary">
+								{{
+									t('semicolon', {
+										label: t('submission.citations.structured.label.date'),
+									})
+								}}
+							</dt>
+							<dd v-if="citation.date" class="inline">
+								{{ formatShortDate(citation.date) }}
 							</dd>
-							<dt v-if="citation.volume" class="inline">Volume:</dt>
+							<dt v-if="citation.volume" class="ms-3 inline text-secondary">
+								{{
+									t('semicolon', {
+										label: t('submission.citations.structured.label.volume'),
+									})
+								}}
+							</dt>
 							<dd v-if="citation.volume" class="inline">
 								{{ citation.volume }}
 							</dd>
-							<dt v-if="citation.issue" class="inline">Issue number:</dt>
+							<dt v-if="citation.issue" class="ms-3 inline text-secondary">
+								{{
+									t('semicolon', {
+										label: t(
+											'submission.citations.structured.label.issueNumber',
+										),
+									})
+								}}
+							</dt>
 							<dd v-if="citation.issue" class="inline">{{ citation.issue }}</dd>
-							<dt v-if="citation.firstPage && citation.lastPage" class="inline">
-								Pages:
+							<dt
+								v-if="citation.firstPage && citation.lastPage"
+								class="ms-3 inline text-secondary"
+							>
+								{{
+									t('semicolon', {
+										label: t('submission.citations.structured.label.pages'),
+									})
+								}}
 							</dt>
 							<dd v-if="citation.firstPage && citation.lastPage" class="inline">
 								{{ citation.firstPage }} - {{ citation.lastPage }}
 							</dd>
 						</dl>
 					</div>
-					<div v-if="citation.isStructured" class="w-fit pt-1">
+					<div v-if="citation.isStructured" class="w-fit pt-1 text-xs-normal">
 						{{ citation.rawCitation }}
 					</div>
 				</div>
 				<div class="mt-2">
 					<a v-if="citation.wikidata" :href="citation.wikidata" target="_blank">
 						<Badge :color-variant="'primary'" :size-variant="'compact'">
-							Wikidata
+							{{ t('submission.citations.structured.label.wikidata') }}
 						</Badge>
 					</a>
 					<a v-if="citation.openAlex" :href="citation.openAlex" target="_blank">
 						<Badge :color-variant="'primary'" :size-variant="'compact'">
-							OpenAlex
+							{{ t('submission.citations.structured.label.openAlex') }}
 						</Badge>
 					</a>
 				</div>
@@ -132,13 +163,15 @@
 import {computed} from 'vue';
 import {useLocalize} from '@/composables/useLocalize';
 import Badge from '@/components/Badge/Badge.vue';
-import PkpButton from '@/components/Button/Button.vue';
 import TableCell from '@/components/Table/TableCell.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import {useCitationManagerStore} from './citationManagerStore';
+import {useDate} from '@/composables/useDate';
 
 const {t} = useLocalize();
 
+const {formatShortDate} = useDate();
+
 const props = defineProps({
 	citation: {type: Object, required: true},
 });
diff --git a/src/managers/CitationManager/CitationManagerMetadataLookup.vue b/src/managers/CitationManager/CitationManagerMetadataLookup.vue
index af83f01f9..0028f7d72 100644
--- a/src/managers/CitationManager/CitationManagerMetadataLookup.vue
+++ b/src/managers/CitationManager/CitationManagerMetadataLookup.vue
@@ -1,79 +1,16 @@
 <template>
 	<div>
-		<h3 class="font-bold leading-6">
-			{{ t('submission.citations.structured') }}
-		</h3>
-		<div class="py-4 leading-8">
-			{{
-				t('submission.citations.structured.citationsMetadataLookup.description')
-			}}
-		</div>
-		<div>
-			<Checkbox
-				id="citations-citationsMetadataLookup"
-				:label="
-					t('submission.citations.structured.enableCitationsMetadataLookup')
-				"
-				:checked="isChecked"
-				:disabled="!citationStore.canEditPublication"
-				:labelled-by="''"
-				@change="onChange"
-			/>
-		</div>
+		<PkpForm v-bind="citationStore.formEnableLookup"></PkpForm>
 	</div>
 </template>
 
 <script setup>
-import {ref} from 'vue';
-import {useLocalize} from '@/composables/useLocalize';
+import PkpForm from '@/components/Form/Form.vue';
 import {useCitationManagerStore} from './citationManagerStore.js';
-import Checkbox from '@/components/Checkbox/Checkbox.vue';
-import {useModal} from '@/composables/useModal';
 
-const {t} = useLocalize();
-
-const props = defineProps({
+defineProps({
 	checked: {type: Boolean, required: true},
 });
 
 const citationStore = useCitationManagerStore();
-
-const emit = defineEmits(['change']);
-const isChecked = ref(!!props.checked);
-
-function onChange($event) {
-	// confirm before emitting
-	$event.preventDefault();
-
-	const {openDialog} = useModal();
-	openDialog({
-		title: citationStore.citationsMetadataLookup
-			? t('submission.citations.structured.enableModal.title')
-			: t('submission.citations.structured.disableModal.title'),
-		message: citationStore.citationsMetadataLookup
-			? t('submission.citations.structured.enableModal.confirm')
-			: t('submission.citations.structured.disableModal.confirm'),
-		modalStyle: 'negative',
-		actions: [
-			{
-				label: t('common.ok'),
-				isPrimary: true,
-				callback: async (close) => {
-					isChecked.value = !isChecked.value;
-					emit('change', isChecked.value);
-					close();
-				},
-			},
-			{
-				label: t('common.cancel'),
-				isSecondary: true,
-				callback: (close) => {
-					$event.preventDefault();
-					close();
-				},
-			},
-		],
-		close: () => {},
-	});
-}
 </script>
diff --git a/src/managers/CitationManager/citationManagerStore.js b/src/managers/CitationManager/citationManagerStore.js
index a11353fc9..869f4c848 100644
--- a/src/managers/CitationManager/citationManagerStore.js
+++ b/src/managers/CitationManager/citationManagerStore.js
@@ -1,4 +1,4 @@
-import {computed, ref, toRefs} from 'vue';
+import {computed, onUnmounted, ref, toRefs} from 'vue';
 import {defineComponentStore} from '@/utils/defineComponentStore';
 import {useDataChanged} from '@/composables/useDataChanged';
 import {useExtender} from '@/composables/useExtender';
@@ -8,6 +8,8 @@ import {useModal} from '@/composables/useModal';
 import {useFetch} from '@/composables/useFetch';
 import {useCitationManagerConfig} from './useCitationManagerConfig';
 import {useCitationManagerActions} from './useCitationManagerActions';
+import {useCitationManagerFormAddRawCitation} from './useCitationManagerFormAddRawCitation';
+import {useCitationManagerFormEnableLookup} from './useCitationManagerFormEnableLookup';
 
 export const useCitationManagerStore = defineComponentStore(
 	'citationManager',
@@ -24,11 +26,12 @@ export const useCitationManagerStore = defineComponentStore(
 		const citationManagerConfig = extender.addFns(useCitationManagerConfig());
 		const columns = computed(() => citationManagerConfig.getColumns());
 		const topItems = computed(() => citationManagerConfig.getTopItems());
-		function getItemPrimaryActions(args) {
-			return citationManagerConfig.getItemPrimaryActions(args);
-		}
-		function getItemActions(args) {
-			return citationManagerConfig.getItemActions(args);
+
+		function getItemActions({citation}) {
+			return citationManagerConfig.getItemActions({
+				citation,
+				store,
+			});
 		}
 
 		const {
@@ -48,9 +51,19 @@ export const useCitationManagerStore = defineComponentStore(
 		/**
 		 * citations metadata lookup
 		 */
+
 		const citationsMetadataLookup = computed(
 			() => publication.value.citationsMetadataLookup,
 		);
+
+		const {form: formEnableLookup} = useCitationManagerFormEnableLookup({
+			citationsMetadataLookup,
+			onCitationMetadataLookupChange: async (newValue) => {
+				console.log('onCitationMetadataLookUPChange');
+				await citationsMetadataLookupChanged(newValue);
+			},
+		});
+
 		async function citationsMetadataLookupChanged(newValue) {
 			const {apiUrl} = useUrl(apiPathSubmissions);
 			const {fetch} = useFetch(`${apiUrl.value}/metadataLookup`, {
@@ -66,35 +79,12 @@ export const useCitationManagerStore = defineComponentStore(
 		/**
 		 * add new raw citations
 		 */
-		const citationsRawToBeAdded = ref('');
-		const citationsRawShowMessage = ref('');
-		async function handleAddCitationsRawToList() {
-			if (!citationsRawToBeAdded.value) {
-				citationsRawShowMessage.value = 'isEmpty';
-				setTimeout(() => {
-					citationsRawShowMessage.value = '';
-				}, 4000);
-				return;
-			}
-			const {apiUrl} = useUrl(apiPathSubmissions);
-			const {fetch, data} = useFetch(
-				`${apiUrl.value}/importAdditionalCitations`,
-				{
-					method: 'POST',
-					body: {rawCitations: citationsRawToBeAdded.value},
-				},
-			);
-			citationsRawShowMessage.value = 'isLoading';
-			await fetch();
-			citationsRawToBeAdded.value = data.value?.trim?.() ?? '';
-			citationsRawShowMessage.value = citationsRawToBeAdded.value
-				? 'isPartial'
-				: 'isSuccess';
-			dataUpdateCallback();
-			setTimeout(() => {
-				citationsRawShowMessage.value = '';
-			}, 4000);
-		}
+		const {form: formAddRawCitations} = useCitationManagerFormAddRawCitation({
+			apiPathSubmissions,
+			onSuccess: () => {
+				dataUpdateCallback();
+			},
+		});
 
 		/**
 		 * status processed citations
@@ -105,6 +95,23 @@ export const useCitationManagerStore = defineComponentStore(
 				(citations.value || []).filter((c) => c?.isProcessed === true).length,
 		);
 
+		/**
+		 * Reload publication until all citations are processed
+		 */
+		const reloadIntervalId = setInterval(() => {
+			if (
+				citationsMetadataLookup.value &&
+				processedCitations.value < totalCitations.value
+			) {
+				// simple way to refresh publication
+				triggerDataChange();
+			}
+		}, 7000);
+
+		onUnmounted(() => {
+			clearInterval(reloadIntervalId);
+		});
+
 		/**
 		 * delete all citations
 		 */
@@ -241,10 +248,9 @@ export const useCitationManagerStore = defineComponentStore(
 			);
 		}
 
-		return {
+		const store = {
 			columns,
 			topItems,
-			getItemPrimaryActions,
 			getItemActions,
 
 			submission,
@@ -255,12 +261,11 @@ export const useCitationManagerStore = defineComponentStore(
 			apiPathCitations,
 			apiPathSubmissions,
 
+			formEnableLookup,
 			citationsMetadataLookup,
 			citationsMetadataLookupChanged,
 
-			citationsRawToBeAdded,
-			citationsRawShowMessage,
-			handleAddCitationsRawToList,
+			formAddRawCitations,
 
 			totalCitations,
 			processedCitations,
@@ -281,5 +286,7 @@ export const useCitationManagerStore = defineComponentStore(
 			citationDeleteCitation,
 			citationReprocessCitation,
 		};
+
+		return store;
 	},
 );
diff --git a/src/managers/CitationManager/useCitationManagerActions.js b/src/managers/CitationManager/useCitationManagerActions.js
index 32bdd0d6e..fef12d7bf 100644
--- a/src/managers/CitationManager/useCitationManagerActions.js
+++ b/src/managers/CitationManager/useCitationManagerActions.js
@@ -78,12 +78,12 @@ export function useCitationManagerActions() {
 
 	function citationReprocessCitation({citation}, finishedCallback) {
 		openDialog({
-			title: 'Are you sure you want to reprocess this citation?',
+			title: t('submission.citations.structured.reprocessDialog.title'),
 			message: '',
 			actions: [
 				{
 					label: t('common.ok'),
-					isWarnable: true,
+					isPrimary: true,
 					callback: async (close) => {
 						const {apiUrl} = useUrl(`citations`);
 						const {fetch} = useFetch(
diff --git a/src/managers/CitationManager/useCitationManagerConfig.js b/src/managers/CitationManager/useCitationManagerConfig.js
index 3912a35e5..d0eab21b4 100644
--- a/src/managers/CitationManager/useCitationManagerConfig.js
+++ b/src/managers/CitationManager/useCitationManagerConfig.js
@@ -43,11 +43,7 @@ export function useCitationManagerConfig() {
 		return items;
 	}
 
-	function getItemPrimaryActions() {
-		return [];
-	}
-
-	function getItemActions(args) {
+	function getItemActions({citation, store}) {
 		const actions = [];
 
 		actions.push({
@@ -63,8 +59,8 @@ export function useCitationManagerConfig() {
 			isWarnable: true,
 		});
 
-		if (args.citationStore.citationsMetadataLookup) {
-			if (!args.citation.isStructured) {
+		if (store.citationsMetadataLookup.value) {
+			if (!citation.isStructured) {
 				actions.push({
 					label: t('admin.citation.reprocess'),
 					name: Actions.CITATION_REPROCESS_CITATION,
@@ -79,7 +75,6 @@ export function useCitationManagerConfig() {
 	return {
 		getColumns,
 		getTopItems,
-		getItemPrimaryActions,
 		getItemActions,
 	};
 }
diff --git a/src/managers/CitationManager/useCitationManagerFormAddRawCitation.js b/src/managers/CitationManager/useCitationManagerFormAddRawCitation.js
new file mode 100644
index 000000000..8558ae500
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerFormAddRawCitation.js
@@ -0,0 +1,40 @@
+import {useForm} from '@/composables/useForm';
+import {useUrl} from '@/composables/useUrl';
+import {useLocalize} from '@/composables/useLocalize';
+
+export function useCitationManagerFormAddRawCitation({
+	apiPathSubmissions,
+	onSuccess,
+}) {
+	const {t} = useLocalize();
+	const {apiUrl: actionUrl} = useUrl(
+		`${apiPathSubmissions}/importAdditionalCitations`,
+	);
+
+	const {form, initEmptyForm, setValue, addPage, addGroup, addFieldTextArea} =
+		useForm({});
+
+	initEmptyForm('addCitations', {
+		action: actionUrl.value,
+		spacingVariant: 'fullWidth',
+		onSuccess: () => {
+			setValue('rawCitations', '');
+			onSuccess();
+		},
+	});
+
+	addPage('default', {
+		submitButton: {label: t('common.add')},
+	});
+
+	addGroup('default');
+
+	addFieldTextArea('rawCitations', {
+		label: t('submission.citations'),
+		description: t('submission.citations.structured.description'),
+		size: 'small-height',
+		isRequired: true,
+	});
+
+	return {form};
+}
diff --git a/src/managers/CitationManager/useCitationManagerFormEnableLookup.js b/src/managers/CitationManager/useCitationManagerFormEnableLookup.js
new file mode 100644
index 000000000..569af47a4
--- /dev/null
+++ b/src/managers/CitationManager/useCitationManagerFormEnableLookup.js
@@ -0,0 +1,95 @@
+import {useForm} from '@/composables/useForm';
+import {useLocalize} from '@/composables/useLocalize';
+import {watch} from 'vue';
+import {useModal} from '@/composables/useModal';
+
+export function useCitationManagerFormEnableLookup({
+	citationsMetadataLookup,
+	onCitationMetadataLookupChange,
+} = {}) {
+	const {t} = useLocalize();
+
+	const {
+		form,
+		setValue,
+		initEmptyForm,
+		addFieldOptions,
+		addPage,
+		addGroup,
+		getField,
+	} = useForm({});
+
+	initEmptyForm('enableLookup', {
+		action: 'emit',
+		spacingVariant: 'fullWidth',
+	});
+
+	addPage('default', {
+		submitButton: null,
+	});
+
+	addGroup('default');
+
+	addFieldOptions('metadataLookup', 'checkbox', {
+		label: t('submission.citations.structured'),
+		description: t(
+			'submission.citations.structured.citationsMetadataLookup.description',
+		),
+		value: citationsMetadataLookup.value,
+		options: [
+			{
+				label: t(
+					'submission.citations.structured.enableCitationsMetadataLookup',
+				),
+				value: true,
+			},
+		],
+	});
+
+	watch(citationsMetadataLookup, (newValue) => {
+		setValue('metadataLookup', newValue);
+	});
+
+	watch(
+		() => getField('metadataLookup')?.value,
+		(newValue) => {
+			// skip when the value is being rollback in cancel
+			if (newValue === citationsMetadataLookup.value) {
+				return;
+			}
+
+			const {openDialog} = useModal();
+			openDialog({
+				title: citationsMetadataLookup.value
+					? t('submission.citations.structured.disableModal.title')
+					: t('submission.citations.structured.enableModal.title'),
+				message: citationsMetadataLookup.value
+					? t('submission.citations.structured.disableModal.confirm')
+					: t('submission.citations.structured.enableModal.confirm'),
+				actions: [
+					{
+						label: t('common.ok'),
+						isPrimary: true,
+						callback: async (close) => {
+							await onCitationMetadataLookupChange(
+								!citationsMetadataLookup.value,
+							);
+							close();
+						},
+					},
+					{
+						label: t('common.cancel'),
+						isWarnable: true,
+						callback: (close) => {
+							setValue('metadataLookup', citationsMetadataLookup.value);
+							close();
+						},
+					},
+				],
+				close: () => {},
+			});
+		},
+	);
+
+	return {form};
+}