From 7eef2fd0e8d9cdcd7f83cb942d0510b0163cbdf9 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 30 Jan 2025 15:09:31 -0300
Subject: [PATCH 1/4] Add browse field occurrence scaffold

---
 .../field_occurrences/browse_controller.rb    |   4 +
 app/javascript/packs/application.js           |   3 +-
 .../components/Panel/PanelIdentifier.vue      |  51 ++++++-
 .../tasks/field_occurrences/browse/app.vue    |   6 +
 .../browse/components/COHeader.vue            | 123 +++++++++++++++
 .../browse/components/CONavegation.vue        | 122 +++++++++++++++
 .../browse/components/ColumnThree.vue         |  26 ++++
 .../components/Panel/PanelBiocurations.vue    |  23 +++
 .../Panel/PanelBiologicalAssociations.vue     |  23 +++
 .../Panel/PanelBuffered/PanelBuffered.vue     |  34 +++++
 .../PanelBuffered/PanelBufferedSection.vue    |  22 +++
 .../PanelBuffered/PanelCollectingEvent.vue    |   9 ++
 .../components/Panel/PanelDepictions.vue      |  61 ++++++++
 .../components/Panel/PanelDeterminations.vue  |  45 ++++++
 .../browse/components/Panel/PanelFO.vue       |  31 ++++
 .../components/Panel/PanelIdentifier.vue      |  46 ++++++
 .../browse/components/Panel/PanelMap.vue      |  35 +++++
 .../browse/components/PanelCE/PanelCE.vue     |  71 +++++++++
 .../components/PanelCE/PanelCEAttributes.vue  |  35 +++++
 .../components/PanelCE/PanelCEModal.vue       | 144 ++++++++++++++++++
 .../components/Table/TableAttributes.vue      |  74 +++++++++
 .../browse/components/Table/TableData.vue     |  57 +++++++
 .../tasks/field_occurrences/browse/main.js    |  18 +++
 .../field_occurrences/browse/store/store.js   |   0
 .../{new_field_occurrences => new}/App.vue    |   0
 .../components/BiocurationForm.vue            |   0
 .../components/BiologicalAssociation.vue      |   2 +-
 .../BiologicalAssociation.vue                 |   0
 .../BiologicalAssociationList.vue             |   0
 .../BiologicalAssociationObject.vue           |   0
 .../BiologicalAssociationRelated.vue          |   0
 .../BiologicalAssociationRelationship.vue     |   0
 .../components/CitationForm.vue               |   0
 .../components/CollectingEventForm.vue        |   0
 .../components/Depiction/Depiction.vue        |   0
 .../FieldOccurenceForm/FieldIsAbsent.vue      |   0
 .../FieldOccurrenceForm.vue                   |   0
 .../FieldOccurenceForm/FieldTotal.vue         |   0
 .../Identifier/IdentifierForm.vue             |   0
 .../Identifier/NamespaceForm.vue              |   0
 .../components/HeaderBar.vue                  |   0
 .../components/Recent.vue                     |   0
 .../components/TaxonDeterminationForm.vue     |   0
 .../{new_field_occurrences => new}/main.js    |   0
 .../store/biocurations.js                     |   0
 .../store/biologicalAssociations.js           |   0
 .../store/citations.js                        |   0
 .../store/depictions.js                       |   0
 .../store/determinations.js                   |   0
 .../store/fieldOccurrence.js                  |   2 +-
 .../store/identifier.js                       |   0
 .../store/settings.js                         |   0
 .../field_occurrences/browse/index.html.erb   |   1 +
 config/interface/hub/user_tasks.yml           |   8 +
 config/routes/tasks.rb                        |   4 +
 55 files changed, 1071 insertions(+), 9 deletions(-)
 create mode 100644 app/controllers/tasks/field_occurrences/browse_controller.rb
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/app.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableAttributes.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableData.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/main.js
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/store.js
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/App.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiocurationForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiologicalAssociation.vue (98%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiologicalAssociation/BiologicalAssociation.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiologicalAssociation/BiologicalAssociationList.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiologicalAssociation/BiologicalAssociationObject.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiologicalAssociation/BiologicalAssociationRelated.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/BiologicalAssociation/BiologicalAssociationRelationship.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/CitationForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/CollectingEventForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/Depiction/Depiction.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/FieldOccurenceForm/FieldIsAbsent.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/FieldOccurenceForm/FieldOccurrenceForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/FieldOccurenceForm/FieldTotal.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/FieldOccurenceForm/Identifier/IdentifierForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/FieldOccurenceForm/Identifier/NamespaceForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/HeaderBar.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/Recent.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/components/TaxonDeterminationForm.vue (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/main.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/biocurations.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/biologicalAssociations.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/citations.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/depictions.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/determinations.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/fieldOccurrence.js (94%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/identifier.js (100%)
 rename app/javascript/vue/tasks/field_occurrences/{new_field_occurrences => new}/store/settings.js (100%)
 create mode 100644 app/views/tasks/field_occurrences/browse/index.html.erb

diff --git a/app/controllers/tasks/field_occurrences/browse_controller.rb b/app/controllers/tasks/field_occurrences/browse_controller.rb
new file mode 100644
index 0000000000..b910e4c906
--- /dev/null
+++ b/app/controllers/tasks/field_occurrences/browse_controller.rb
@@ -0,0 +1,4 @@
+class Tasks::FieldOccurrences::BrowseController < ApplicationController
+  include TaskControllerConfiguration
+
+end
\ No newline at end of file
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 5603d109dd..8ad5cfc24f 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -105,7 +105,7 @@ import '../vue/tasks/biological_associations/network/main.js'
 import '../vue/tasks/collecting_events/stepwise/collectors/main.js'
 import '../vue/tasks/leads/new_lead/main.js'
 import '../vue/tasks/leads/show/main.js'
-import '../vue/tasks/field_occurrences/new_field_occurrences/main.js'
+import '../vue/tasks/field_occurrences/new/main.js'
 import '../vue/tasks/metadata/vocabulary/project_vocabulary/main.js'
 import '../vue/tasks/otus/new_otu/main.js'
 import '../vue/tasks/leads/hub/main.js'
@@ -117,3 +117,4 @@ import '../vue/tasks/unify/objects/main.js'
 import '../vue/tasks/images/new_filename_depicting_image/main.js'
 import '../vue/tasks/biological_associations/new/main.js'
 import '../vue/tasks/otus/duplicates/main.js'
+import '../vue/tasks/field_occurrences/browse/main.js'
diff --git a/app/javascript/vue/tasks/collection_objects/browse/components/Panel/PanelIdentifier.vue b/app/javascript/vue/tasks/collection_objects/browse/components/Panel/PanelIdentifier.vue
index d03904ab43..8b812b8da7 100644
--- a/app/javascript/vue/tasks/collection_objects/browse/components/Panel/PanelIdentifier.vue
+++ b/app/javascript/vue/tasks/collection_objects/browse/components/Panel/PanelIdentifier.vue
@@ -1,9 +1,27 @@
 <template>
   <PanelContainer title="Identifiers">
-    <TableAttributes
-      :header="['Identifier', 'On']"
-      :items="identifiers"
-    />
+    <table class="table-attributes">
+      <thead>
+        <tr class="cell-head">
+          <th>Identifier</th>
+          <th>On</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template
+          v-for="(value, key) in identifiers"
+          :key="key"
+        >
+          <tr>
+            <td v-html="key" />
+            <td
+              class="cell-value"
+              v-html="value"
+            />
+          </tr>
+        </template>
+      </tbody>
+    </table>
   </PanelContainer>
 </template>
 
@@ -12,7 +30,6 @@ import { useStore } from 'vuex'
 import { computed } from 'vue'
 import { GetterNames } from '../../store/getters/getters'
 import PanelContainer from './PanelContainer.vue'
-import TableAttributes from '../Table/TableAttributes.vue'
 
 const store = useStore()
 const identifiers = computed(() => {
@@ -20,7 +37,7 @@ const identifiers = computed(() => {
   const newlist = {}
 
   for (const key in list) {
-    list[key].forEach(identifier => {
+    list[key].forEach((identifier) => {
       newlist[identifier.objectTag] = key
     })
   }
@@ -28,3 +45,25 @@ const identifiers = computed(() => {
   return newlist
 })
 </script>
+
+<style lang="scss">
+.table-attributes {
+  box-shadow: none;
+
+  tr {
+    border-bottom: 1px solid #eaeaea;
+  }
+
+  th {
+    border-bottom: 2px solid #eaeaea;
+  }
+  .cell-value {
+    font-weight: 500;
+    word-break: break-all;
+  }
+
+  .cell-head {
+    text-transform: uppercase;
+  }
+}
+</style>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/app.vue b/app/javascript/vue/tasks/field_occurrences/browse/app.vue
new file mode 100644
index 0000000000..984dea42bf
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/app.vue
@@ -0,0 +1,6 @@
+<template>
+  <h1>Welcome to your new Vue task!</h1>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue
new file mode 100644
index 0000000000..2ee1ca7479
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue
@@ -0,0 +1,123 @@
+<template>
+  <NavBar>
+    <div
+      v-if="collectionObject.id"
+      class="flex-separate middle"
+    >
+      <span v-html="collectionObject.objectTag" />
+      <div class="horizontal-right-content">
+        <ul class="context-menu">
+          <li>
+            <CONavegation class="margin-small-right" />
+          </li>
+          <li v-if="otu">
+            <BrowseOTU :otu="otu" />
+          </li>
+          <li>
+            <RadialAnnotator
+              :global-id="collectionObject.globalId"
+              @create="handleRadialCreate"
+              @delete="handleRadialDelete"
+              @update="handleRadialUpdate"
+            />
+          </li>
+          <li>
+            <RadialObject :global-id="collectionObject.globalId" />
+          </li>
+          <li>
+            <RadialFilter object-type="CollectionObject" />
+          </li>
+          <li>
+            <VBtn
+              circle
+              color="submit"
+              title="Edit on comprehensive task"
+              @click="openComprehenseive(collectionObject.id)"
+            >
+              <VIcon
+                x-small
+                title="Edit on comprehensive task"
+                name="pencil"
+              />
+            </VBtn>
+          </li>
+          <li>
+            <RadialNavigator :global-id="collectionObject.globalId" />
+          </li>
+        </ul>
+      </div>
+      <RadialFilterAttribute
+        :parameters="{ collection_object_id: [collectionObject.id] }"
+      />
+    </div>
+  </NavBar>
+</template>
+
+<script setup>
+import { addToArray, removeFromArray } from '@/helpers'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import { GetterNames } from '../store/getters/getters'
+import { MutationNames } from '../store/mutations/mutations'
+import { DEPICTION, IDENTIFIER, COLLECTION_OBJECT } from '@/constants'
+import VBtn from '@/components/ui/VBtn'
+import VIcon from '@/components/ui/VIcon'
+import NavBar from '@/components/layout/NavBar.vue'
+import CONavegation from './CONavegation.vue'
+import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
+import RadialObject from '@/components/radials/object/radial.vue'
+import RadialNavigator from '@/components/radials/navigation/radial.vue'
+import RadialFilter from '@/components/radials/linker/radial.vue'
+import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
+import BrowseOTU from '@/components/otu/otu.vue'
+import { RouteNames } from '@/routes/routes'
+
+const store = useStore()
+const collectionObject = computed(
+  () => store.getters[GetterNames.GetCollectionObject]
+)
+const otu = computed(() => {
+  const determinations = store.getters[GetterNames.GetDeterminations]
+  const d = determinations[0]
+
+  return d && { id: d.otu_id }
+})
+
+const openComprehenseive = (id) => {
+  window.open(`${RouteNames.DigitizeTask}?collection_object_id=${id}`, '_self')
+}
+
+function handleRadialCreate({ item }) {
+  switch (item.base_class) {
+    case DEPICTION:
+      addToArray(store.state.depictions.list, item)
+      break
+
+    case IDENTIFIER:
+      store.commit(MutationNames.AddIdentifier, {
+        objectType: COLLECTION_OBJECT,
+        item
+      })
+      break
+  }
+}
+
+function handleRadialDelete({ item }) {
+  switch (item.base_class) {
+    case DEPICTION:
+      removeFromArray(store.state.depictions.list, item)
+      break
+    case IDENTIFIER:
+      removeFromArray(store.state.identifiers[COLLECTION_OBJECT], item)
+      break
+  }
+}
+
+function handleRadialUpdate({ item }) {
+  switch (item.base_class) {
+    case DEPICTION:
+      addToArray(store.state.depictions.list, item)
+      break
+  }
+}
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue
new file mode 100644
index 0000000000..e0908a8ca9
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <VBtn
+      medium
+      color="primary"
+      :disabled="!previousByCurrent"
+      @click="loadCO(previousByCurrent)"
+    >
+      <VIcon
+        x-small
+        name="arrowLeft"
+      />
+    </VBtn>
+    <VBtn
+      medium
+      class="margin-small-left margin-small-right"
+      color="primary"
+      @click="isVisible = true"
+      :disabled="!navigate.current_collection_object"
+    >
+      Go
+    </VBtn>
+    <VBtn
+      medium
+      color="primary"
+      :disabled="!nextByCurrent"
+      @click="loadCO(nextByCurrent)"
+    >
+      <VIcon
+        x-small
+        name="arrowRight"
+      />
+    </VBtn>
+    <modal-component
+      v-if="isVisible"
+      @close="isVisible = false"
+      :container-style="{ width: '500px' }"
+    >
+      <template #header>
+        <h3>Navigate</h3>
+      </template>
+      <template #body>
+        <p>Current: <span v-html="collectionObject.object_tag" /></p>
+        <table class="full_width">
+          <thead>
+            <tr>
+              <th>Previous by</th>
+              <th>Next by</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="key in Object.keys(
+                navigate.previous_by || navigate.next_by
+              )"
+              :key="key"
+            >
+              <td>
+                <button
+                  type="button"
+                  class="button normal-input button-default"
+                  :disabled="!navigate.previous_by[key]"
+                  @click="loadCO(navigate.previous_by[key])"
+                >
+                  {{ key.replaceAll('_', ' ') }}
+                </button>
+              </td>
+              <td>
+                <button
+                  class="button normal-input button-default"
+                  type="button"
+                  :disabled="!navigate.next_by[key]"
+                  @click="loadCO(navigate.next_by[key])"
+                >
+                  {{ key.replaceAll('_', ' ') }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+    </modal-component>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import { computed, ref } from 'vue'
+import { GetterNames } from '../store/getters/getters'
+import { ActionNames } from '../store/actions/actions'
+import { RouteNames } from '@/routes/routes'
+import ModalComponent from '@/components/ui/Modal'
+import setParam from '@/helpers/setParam'
+import VBtn from '@/components/ui/VBtn/index.vue'
+import VIcon from '@/components/ui/VIcon/index.vue'
+
+const store = useStore()
+
+const isVisible = ref(false)
+const currentNavigation = ref('id')
+
+const navigate = computed(() => store.getters[GetterNames.GetNavigation])
+const collectionObject = computed(
+  () => store.getters[GetterNames.GetCollectionObject]
+)
+
+const previousByCurrent = computed(
+  () =>
+    navigate.value?.previous_by &&
+    navigate.value.previous_by[currentNavigation.value]
+)
+const nextByCurrent = computed(
+  () =>
+    navigate.value?.next_by && navigate.value.next_by[currentNavigation.value]
+)
+
+function loadCO(coId) {
+  store.dispatch(ActionNames.ResetStore)
+  store.dispatch(ActionNames.LoadCollectionObject, coId)
+  setParam(RouteNames.BrowseCollectionObject, 'collection_object_id', coId)
+}
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue
new file mode 100644
index 0000000000..049058b008
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue
@@ -0,0 +1,26 @@
+<template>
+  <TableGrid
+    :columns="1"
+    gap="1em"
+  >
+    <SoftValidations
+      class="column-validation"
+      :validations="store.getters[GetterNames.GetSoftValidations]"
+    />
+    <PanelIdentifier />
+    <PanelDepictions />
+    <PanelMap />
+  </TableGrid>
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import { GetterNames } from '../store/getters/getters'
+import SoftValidations from '@/components/soft_validations/panel.vue'
+import PanelIdentifier from './Panel/PanelIdentifier.vue'
+import TableGrid from '@/components/layout/Table/TableGrid.vue'
+import PanelDepictions from './Panel/PanelDepictions.vue'
+import PanelMap from './Panel/PanelMap.vue'
+
+const store = useStore()
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue
new file mode 100644
index 0000000000..e450ba8c33
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue
@@ -0,0 +1,23 @@
+<template>
+  <PanelContainer title="Biocurations">
+    <ul class="no_bullets">
+      <li
+        v-for="({ groupName, items }) in biocurations"
+        :key="groupName"
+      >
+        {{ groupName }}: <b>{{ items.map(item => item.object_tag).join(', ') }}</b>
+      </li>
+    </ul>
+  </PanelContainer>
+</template>
+
+<script setup>
+import { GetterNames } from '../../store/getters/getters.js'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import PanelContainer from './PanelContainer.vue'
+
+const store = useStore()
+const biocurations = computed(() => store.getters[GetterNames.GetBiocurations])
+
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
new file mode 100644
index 0000000000..11c3676cce
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
@@ -0,0 +1,23 @@
+<template>
+  <PanelContainer title="Biological associations">
+    <ListITems
+      class="no_bullets"
+      :list="biologicalAssociations"
+      label="object_tag"
+      :remove="false"
+    />
+  </PanelContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { GetterNames } from '../../store/getters/getters'
+import PanelContainer from './PanelContainer.vue'
+import ListITems from '@/components/displayList.vue'
+
+const store = useStore()
+const biologicalAssociations = computed(
+  () => store.getters[GetterNames.GetBiologicalAssociations]
+)
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue
new file mode 100644
index 0000000000..722f554032
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue
@@ -0,0 +1,34 @@
+<template>
+  <PanelContainer title="Buffered">
+    <PanelBufferedSection
+      class="margin-small-bottom"
+      v-if="collectionObject.bufferedCollectingEvent"
+      title="Collecting event"
+      :text="collectionObject.bufferedCollectingEvent"
+    />
+    <PanelBufferedSection
+      v-if="collectionObject.bufferedDeterminations"
+      class="margin-small-bottom"
+      title="Determinations"
+      :text="collectionObject.bufferedDeterminations"
+    />
+    <PanelBufferedSection
+      v-if="collectionObject.bufferedLabels"
+      class="margin-small-bottom"
+      title="Other labels"
+      :text="collectionObject.bufferedLabels"
+    />
+  </PanelContainer>
+</template>
+
+<script setup>
+import { GetterNames } from '../../../store/getters/getters'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import PanelBufferedSection from './PanelBufferedSection.vue'
+import PanelContainer from '../PanelContainer.vue'
+
+const store = useStore()
+
+const collectionObject = computed(() => store.getters[GetterNames.GetCollectionObject])
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue
new file mode 100644
index 0000000000..c655f3cd86
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <h3 class="panel__subtitle">
+      {{ title }}
+    </h3>
+    <pre class="break_words_pre">{{ text }}</pre>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+
+  text: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue
new file mode 100644
index 0000000000..422d72dbc6
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="panel panel__content">
+    <h2>Collecting event</h2>
+  </div>
+</template>
+
+<script setup>
+
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
new file mode 100644
index 0000000000..673d32c608
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
@@ -0,0 +1,61 @@
+<template>
+  <PanelContainer title="Depictions">
+    <VPagination
+      class="margin-large-top"
+      :pagination="depictions.pagination"
+      @next-page="loadDepictions"
+    />
+    <div class="flex-wrap-row depictions-list">
+      <ImageViewer
+        v-for="depiction in depictions.list"
+        :key="depiction.id"
+        :depiction="depiction"
+      />
+    </div>
+  </PanelContainer>
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import { GetterNames } from '../../store/getters/getters.js'
+import { ActionNames } from '../../store/actions/actions.js'
+import ImageViewer from '@/components/ui/ImageViewer/ImageViewer'
+import PanelContainer from './PanelContainer.vue'
+import VPagination from '@/components/pagination.vue'
+
+const store = useStore()
+const depictions = computed(() => store.getters[GetterNames.GetDepictions])
+const coId = computed(() => store.getters[GetterNames.GetCollectionObject]?.id)
+
+function loadDepictions({ page }) {
+  store.dispatch(ActionNames.LoadDepictions, { page, id: coId.value })
+}
+</script>
+
+<style scoped>
+.depictions-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+
+::-webkit-scrollbar-corner {
+  background: 0 0;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  background-color: rgb(156, 163, 175);
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgb(229, 231, 235);
+}
+</style>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
new file mode 100644
index 0000000000..299b85f6cd
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
@@ -0,0 +1,45 @@
+<template>
+  <PanelContainer title="Determinations">
+    <TableData
+      :headers="HEADERS"
+      :items="list"
+    />
+    <RadialFilterAttribute :parameters="parameters" />
+  </PanelContainer>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { GetterNames } from '../../store/getters/getters'
+import PanelContainer from './PanelContainer.vue'
+import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
+import TableData from '../Table/TableData.vue'
+
+const HEADERS = ['OTU', 'Determiners', 'Date']
+
+const store = useStore()
+const determinations = computed(
+  () => store.getters[GetterNames.GetDeterminations]
+)
+
+const parameters = computed(() => {
+  const d = determinations.value[0]
+
+  return d
+    ? {
+        otu_id: [d.otu_id],
+        taxon_name_id: d.otu.taxon_name_id
+        // ancestor_id,
+      }
+    : {}
+})
+
+const list = computed(() => {
+  return determinations.value.map((d) => ({
+    otu: d.otu.object_tag,
+    roles: d?.determiner_roles?.map((r) => r?.person?.cached).join('; '),
+    date: [d.day_made, d.month_made, d.year_made].filter(Boolean).join('/')
+  }))
+})
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
new file mode 100644
index 0000000000..21759d3e66
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
@@ -0,0 +1,31 @@
+<template>
+  <TableGrid
+    :columns="1"
+    gap="1em"
+  >
+    <PanelBuffered />
+    <TableGrid
+      gap="1em"
+      :columns="1"
+      :column-width="{
+        default: '1fr'
+      }"
+    >
+      <PanelBiocurations />
+    </TableGrid>
+    <PanelDeterminations />
+    <PanelDisposition />
+    <PanelBiologicalAssociations />
+    <PanelTypeMaterial />
+  </TableGrid>
+</template>
+
+<script setup>
+import PanelBuffered from './PanelBuffered/PanelBuffered.vue'
+import PanelDeterminations from './PanelDeterminations.vue'
+import PanelBiocurations from './PanelBiocurations.vue'
+import PanelBiologicalAssociations from './PanelBiologicalAssociations.vue'
+import PanelTypeMaterial from './PanelTypeMaterial.vue'
+import PanelDisposition from './PanelDisposition.vue'
+import TableGrid from '@/components/layout/Table/TableGrid.vue'
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
new file mode 100644
index 0000000000..fc39dc040c
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
@@ -0,0 +1,46 @@
+<template>
+  <PanelContainer title="Identifiers">
+    <TableAttributes
+      :header="['Identifier', 'On']"
+      :items="identifiers"
+    />
+  </PanelContainer>
+</template>
+
+<script setup>
+import { Identifier } from '@/routes/endpoints'
+import { computed, ref, watch } from 'vue'
+import PanelContainer from './PanelContainer.vue'
+import TableAttributes from '@/tasks/collection_objects/browse/components/Table/TableAttributes.vue'
+
+const props = defineProps({
+  objectId: {
+    type: [Number, String],
+    required: true
+  },
+
+  objectType: {
+    type: [String, undefined],
+    required: true
+  }
+})
+
+const identifiers = ref([])
+
+watch(
+  () => props.objectId,
+  (id) => {
+    if (id) {
+      identifiers.value = []
+      Identifier.where({
+        identifier_object_id: props.objectId,
+        identifier_object_type: props.objectType
+      })
+        .then(({ body }) => {
+          identifiers.value = body
+        })
+        .catch(() => {})
+    }
+  }
+)
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue
new file mode 100644
index 0000000000..12441bb946
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue
@@ -0,0 +1,35 @@
+<template>
+  <VMap
+    width="100%"
+    height="100%"
+    style="min-height: 500px"
+    :geojson="geoJson"
+    resize
+  />
+  <RadialFilterAttribute
+    v-if="geographicArea.id"
+    :parameters="{ geographic_area_id: [geographicArea.id] }"
+  />
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import { GetterNames } from '../../store/getters/getters'
+import VMap from '@/components/georeferences/map.vue'
+import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
+
+const store = useStore()
+const georeferences = computed(() =>
+  store.getters[GetterNames.GetGeoreferences].map((g) => g.geo_json)
+)
+const geographicArea = computed(
+  () => store.getters[GetterNames.GetGeographicArea]
+)
+
+const geoJson = computed(() =>
+  geographicArea.value?.shape
+    ? [geographicArea.value.shape, ...georeferences.value]
+    : [...georeferences.value]
+)
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue
new file mode 100644
index 0000000000..a14665b990
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue
@@ -0,0 +1,71 @@
+<template>
+  <BlockLayout v-if="collectingEvent.id">
+    <template #header>
+      <div class="flex-separate middle full_width">
+        <h3>Collecting event</h3>
+        <RadialFilterAttribute
+          :parameters="{ collecting_event_id: [collectingEvent.id] }"
+        />
+        <div class="horizontal-right-content gap-small">
+          <RadialAnnotator :global-id="collectingEvent.global_id" />
+          <RadialNavigator :global-id="collectingEvent.global_id" />
+        </div>
+      </div>
+    </template>
+    <template #body>
+      <TableGrid :columns="1">
+        <PanelCEAttributes @row-click="setRow" />
+      </TableGrid>
+      <PanelCEModal
+        v-if="row"
+        :param="row"
+        :textarea="textareaFields.includes(row.field)"
+        :collecting-event-id="collectingEvent.id"
+        @close="row = undefined"
+      />
+    </template>
+  </BlockLayout>
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import { computed, ref } from 'vue'
+import { GetterNames } from '../../store/getters/getters'
+import BlockLayout from '@/components/layout/BlockLayout.vue'
+import PanelCEAttributes from './PanelCEAttributes.vue'
+import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
+import RadialNavigator from '@/components/radials/navigation/radial.vue'
+import TableGrid from '@/components/layout/Table/TableGrid.vue'
+import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
+import PanelCEModal from './PanelCEModal.vue'
+
+const notEditableFields = [
+  'created_at',
+  'updated_at',
+  'global_id',
+  'id',
+  'cached_level0_geographic_name',
+  'cached_level1_geographic_name',
+  'cached_level2_geographic_name'
+]
+
+const textareaFields = [
+  'document_label',
+  'print_label',
+  'verbatim_label',
+  'verbatim_locality'
+]
+
+function setRow(rowObject) {
+  if (!notEditableFields.includes(rowObject.field)) {
+    row.value = rowObject
+  }
+}
+
+const row = ref(undefined)
+
+const store = useStore()
+const collectingEvent = computed(
+  () => store.getters[GetterNames.GetCollectingEvent]
+)
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue
new file mode 100644
index 0000000000..1e234b1cd4
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue
@@ -0,0 +1,35 @@
+<template>
+  <TableAttributes
+    :items="list"
+    filter-attributes
+  />
+</template>
+
+<script setup>
+import {
+  PRIORITIZE_ATTRIBUTES,
+  HIDE_ATTRIBUTES
+} from '../../constants/collectingEvents.js'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import { GetterNames } from '../../store/getters/getters'
+import TableAttributes from '../Table/TableAttributes.vue'
+
+const store = useStore()
+const collectingEvent = computed(() => store.getters[GetterNames.GetCollectingEvent])
+
+const list = computed(() => {
+  const entries = Object.entries(collectingEvent.value)
+  const filteredList = entries.filter(([property, _]) => !HIDE_ATTRIBUTES.includes(property))
+
+  filteredList.sort((a, b) => {
+    const index1 = PRIORITIZE_ATTRIBUTES.indexOf(a[0])
+    const index2 = PRIORITIZE_ATTRIBUTES.indexOf(b[0])
+
+    return (index1 > -1 ? index1 : Infinity) - (index2 > -1 ? index2 : Infinity)
+  })
+
+  return Object.fromEntries(filteredList)
+})
+
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue
new file mode 100644
index 0000000000..2872ab44f5
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue
@@ -0,0 +1,144 @@
+<template>
+  <VModal :container-style="{ width: '600px' }">
+    <template #header>
+      <h3>Collecting event - {{ param.field }}</h3>
+    </template>
+    <template #body>
+      <div>
+        <div class="field label-above">
+          <textarea
+            v-if="textarea"
+            v-model="fieldValue"
+            class="full_width"
+            rows="5"
+          />
+          <input
+            v-else
+            type="text"
+            class="full_width"
+            v-model="fieldValue"
+          />
+          <div class="margin-small-top middle">
+            <VIcon
+              name="attention"
+              color="attention"
+              x-small
+            />
+            <span class="margin-small-left">
+              {{ collectionObjects.length }} linked collection objects
+            </span>
+          </div>
+        </div>
+
+        <VSpinner
+          v-if="isLoading"
+          full-screen
+        />
+      </div>
+      <ConfirmationModal ref="confirmationModal" />
+    </template>
+    <template #footer>
+      <VBtn
+        color="submit"
+        medium
+        @click="updateCE"
+        :disabled="isUpdating"
+      >
+        Update
+      </VBtn>
+
+      <VBtn
+        class="margin-small-left"
+        color="primary"
+        medium
+        @click="emit('close')"
+      >
+        Cancel
+      </VBtn>
+    </template>
+  </VModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { CollectionObject } from '@/routes/endpoints'
+import { useStore } from 'vuex'
+import { ActionNames } from '../../store/actions/actions'
+import { GetterNames } from '../../store/getters/getters'
+import VModal from '@/components/ui/Modal.vue'
+import VIcon from '@/components/ui/VIcon/index.vue'
+import VBtn from '@/components/ui/VBtn/index.vue'
+import VSpinner from '@/components/ui/VSpinner.vue'
+import ConfirmationModal from '@/components/ConfirmationModal.vue'
+
+const props = defineProps({
+  collectingEventId: {
+    type: Number,
+    required: true
+  },
+
+  param: {
+    type: Object,
+    required: true
+  },
+
+  textarea: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits('close')
+const store = useStore()
+const collectionObjects = ref([])
+const fieldValue = ref(props.param.value)
+const isLoading = ref(true)
+const isUpdating = ref(false)
+const confirmationModal = ref(null)
+
+const MAX_WITHOUT_WARNING = 10
+
+CollectionObject.where({ collecting_event_id: [props.collectingEventId] }).then(
+  ({ body }) => {
+    collectionObjects.value = body
+    isLoading.value = false
+  }
+)
+
+async function updateCE() {
+  const ok =
+    collectionObjects.value.length > MAX_WITHOUT_WARNING
+      ? await confirmationModal.value.show({
+          title: 'Update collecting event',
+          message:
+            'This will update the current collecting event. Are you sure you want to proceed?',
+          confirmationWord: 'UPDATE',
+          okButton: 'Update',
+          typeButton: 'submit'
+        })
+      : true
+
+  if (ok) {
+    isUpdating.value = true
+
+    store
+      .dispatch(ActionNames.UpdateCollectingEvent, {
+        collectingEventId: props.collectingEventId,
+        payload: { [props.param.field]: fieldValue.value }
+      })
+      .then((_) => {
+        const coId = store.getters[GetterNames.GetCollectionObject].id
+
+        store.dispatch(ActionNames.LoadDwc, coId)
+        store.dispatch(ActionNames.LoadTimeline, coId)
+
+        isUpdating.value = false
+        TW.workbench.alert.create(
+          'Collecting event was successfully updated',
+          'notice'
+        )
+        emit('close')
+      })
+  }
+}
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableAttributes.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableAttributes.vue
new file mode 100644
index 0000000000..f7f81f0db8
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableAttributes.vue
@@ -0,0 +1,74 @@
+<template>
+  <table class="table-attributes">
+    <thead>
+      <tr class="cell-head">
+        <th>{{ header[0] }}</th>
+        <th>{{ header[1] }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template
+        v-for="(value, key) in items"
+        :key="key"
+      >
+        <tr
+          v-if="value"
+          :[getFilterAttribute(key)]="value"
+          @click="emit('rowClick', { field: key, value })"
+        >
+          <td v-html="key" />
+          <td
+            class="cell-value"
+            v-html="value"
+          />
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { DATA_ATTRIBUTE_FILTER_PROPERTY } from '@/constants/index.js'
+
+const props = defineProps({
+  items: {
+    type: Object,
+    required: true
+  },
+
+  header: {
+    type: Array,
+    default: () => ['Field', 'Value']
+  },
+
+  filterAttributes: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['rowClick'])
+const getFilterAttribute = (atrr) =>
+  props.filterAttributes && `${DATA_ATTRIBUTE_FILTER_PROPERTY}-${atrr}`
+</script>
+
+<style lang="scss">
+.table-attributes {
+  box-shadow: none;
+
+  tr {
+    border-bottom: 1px solid #eaeaea;
+  }
+
+  th {
+    border-bottom: 2px solid #eaeaea;
+  }
+  .cell-value {
+    font-weight: 500;
+    word-break: break-all;
+  }
+
+  .cell-head {
+    text-transform: uppercase;
+  }
+}
+</style>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableData.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableData.vue
new file mode 100644
index 0000000000..954bd431f0
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Table/TableData.vue
@@ -0,0 +1,57 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th
+          v-for="item in headers"
+          :key="item"
+        >
+          {{ item }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(properties, index) in items"
+        :key="index"
+      >
+        <td
+          v-for="(value, key) in properties"
+          :key="key"
+          v-html="value"
+        />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+defineProps({
+  headers: {
+    type: Array,
+    default: () => []
+  },
+
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<style scoped>
+table {
+  box-shadow: none;
+}
+
+tr {
+  border-bottom: 1px solid #eaeaea;
+}
+
+th {
+  border-bottom: 2px solid #eaeaea;
+  text-transform: uppercase;
+
+}
+
+</style>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/main.js b/app/javascript/vue/tasks/field_occurrences/browse/main.js
new file mode 100644
index 0000000000..82bfb95636
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/main.js
@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './app.vue'
+
+function initApp(element) {
+  const app = createApp(App)
+
+  app.use(createPinia())
+  app.mount(element)
+}
+
+document.addEventListener('turbolinks:load', () => {
+  const el = document.querySelector('#field-occurrences-browse-task')
+
+  if (el) {
+    initApp(el)
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/store.js b/app/javascript/vue/tasks/field_occurrences/browse/store/store.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/App.vue b/app/javascript/vue/tasks/field_occurrences/new/App.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/App.vue
rename to app/javascript/vue/tasks/field_occurrences/new/App.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiocurationForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiocurationForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiocurationForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiocurationForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation.vue
similarity index 98%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation.vue
index e7423958ac..bd2e63c1a0 100644
--- a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation.vue
+++ b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation.vue
@@ -27,7 +27,7 @@ import { useTemplateRef } from 'vue'
 import useSettingStore from '../store/settings.js'
 import BlockLayout from '@/components/layout/BlockLayout.vue'
 import BiologicalAssociationForm from './BiologicalAssociation/BiologicalAssociation.vue'
-import useBiologicalAssociationStore from '../store/biologicalAssociations'
+import useBiologicalAssociationStore from '../store/biologicalAssociations.js'
 import BiologicalAssociationList from './BiologicalAssociation/BiologicalAssociationList.vue'
 
 const settings = useSettingStore()
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociation.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociation.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociation.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociation.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationList.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationList.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationList.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationList.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationObject.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationObject.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationObject.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationObject.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationRelated.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationRelated.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationRelated.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationRelated.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationRelationship.vue b/app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationRelationship.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/BiologicalAssociation/BiologicalAssociationRelationship.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/BiologicalAssociation/BiologicalAssociationRelationship.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/CitationForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/CitationForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/CitationForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/CitationForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/CollectingEventForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/CollectingEventForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/CollectingEventForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/CollectingEventForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/Depiction/Depiction.vue b/app/javascript/vue/tasks/field_occurrences/new/components/Depiction/Depiction.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/Depiction/Depiction.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/Depiction/Depiction.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/FieldIsAbsent.vue b/app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/FieldIsAbsent.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/FieldIsAbsent.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/FieldIsAbsent.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/FieldOccurrenceForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/FieldOccurrenceForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/FieldOccurrenceForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/FieldOccurrenceForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/FieldTotal.vue b/app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/FieldTotal.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/FieldTotal.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/FieldTotal.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/Identifier/IdentifierForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/Identifier/IdentifierForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/Identifier/IdentifierForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/Identifier/IdentifierForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/Identifier/NamespaceForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/Identifier/NamespaceForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/FieldOccurenceForm/Identifier/NamespaceForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/FieldOccurenceForm/Identifier/NamespaceForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/HeaderBar.vue b/app/javascript/vue/tasks/field_occurrences/new/components/HeaderBar.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/HeaderBar.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/HeaderBar.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/Recent.vue b/app/javascript/vue/tasks/field_occurrences/new/components/Recent.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/Recent.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/Recent.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/TaxonDeterminationForm.vue b/app/javascript/vue/tasks/field_occurrences/new/components/TaxonDeterminationForm.vue
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/components/TaxonDeterminationForm.vue
rename to app/javascript/vue/tasks/field_occurrences/new/components/TaxonDeterminationForm.vue
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/main.js b/app/javascript/vue/tasks/field_occurrences/new/main.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/main.js
rename to app/javascript/vue/tasks/field_occurrences/new/main.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/biocurations.js b/app/javascript/vue/tasks/field_occurrences/new/store/biocurations.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/biocurations.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/biocurations.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/biologicalAssociations.js b/app/javascript/vue/tasks/field_occurrences/new/store/biologicalAssociations.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/biologicalAssociations.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/biologicalAssociations.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/citations.js b/app/javascript/vue/tasks/field_occurrences/new/store/citations.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/citations.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/citations.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/depictions.js b/app/javascript/vue/tasks/field_occurrences/new/store/depictions.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/depictions.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/depictions.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/determinations.js b/app/javascript/vue/tasks/field_occurrences/new/store/determinations.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/determinations.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/determinations.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/fieldOccurrence.js b/app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js
similarity index 94%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/fieldOccurrence.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js
index 64cb9506e5..791bd2044b 100644
--- a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/fieldOccurrence.js
+++ b/app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { makeFieldOccurrence } from '@/factory'
 import { FieldOccurrence } from '@/routes/endpoints'
-import useDeterminationStore from '../store/determinations.js'
+import useDeterminationStore from './determinations.js'
 
 export default defineStore('fieldOccurrences', {
   state: () => ({
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/identifier.js b/app/javascript/vue/tasks/field_occurrences/new/store/identifier.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/identifier.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/identifier.js
diff --git a/app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/settings.js b/app/javascript/vue/tasks/field_occurrences/new/store/settings.js
similarity index 100%
rename from app/javascript/vue/tasks/field_occurrences/new_field_occurrences/store/settings.js
rename to app/javascript/vue/tasks/field_occurrences/new/store/settings.js
diff --git a/app/views/tasks/field_occurrences/browse/index.html.erb b/app/views/tasks/field_occurrences/browse/index.html.erb
new file mode 100644
index 0000000000..ff04a87f8d
--- /dev/null
+++ b/app/views/tasks/field_occurrences/browse/index.html.erb
@@ -0,0 +1 @@
+<div id="field-occurrences-browse-task"></div>
diff --git a/config/interface/hub/user_tasks.yml b/config/interface/hub/user_tasks.yml
index 25ed0454a3..00b984b2cf 100644
--- a/config/interface/hub/user_tasks.yml
+++ b/config/interface/hub/user_tasks.yml
@@ -1006,3 +1006,11 @@ summarize_projects_controlled_vocabulary_terms_task:
   categories:
   status: prototype
   description: 'Visualize controlled vocabulary terms across the projects you are a member of.'
+
+index_browse_task:
+  hub: true
+  name: 'TODO: Task name'
+  related:
+  categories:
+  status: prototype
+  description: 'TODO: Task description'
diff --git a/config/routes/tasks.rb b/config/routes/tasks.rb
index 0931b8ca33..12572cc018 100644
--- a/config/routes/tasks.rb
+++ b/config/routes/tasks.rb
@@ -107,6 +107,10 @@
   end
 
   scope :field_occurrences do
+    scope :browse, controller: 'tasks/field_occurrences/browse' do
+      get :index, as: 'index_browse_task'
+    end
+
     scope :new_field_occurrences, controller: 'tasks/field_occurrences/new_field_occurrences' do
       get '/', as: 'new_field_occurrence_task', action: :index
     end

From c8383bb2be85096f6db991477f77a8d408c90957 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Fri, 31 Jan 2025 12:28:44 -0300
Subject: [PATCH 2/4] Update panels

---
 .../Panel/PanelBiologicalAssociations.vue     | 38 +++++++++++--
 .../components/Panel/PanelDepictions.vue      | 52 +++++++++++++----
 .../components/Panel/PanelDeterminations.vue  | 56 +++++++++++--------
 .../components/Panel/PanelIdentifier.vue      |  5 +-
 4 files changed, 109 insertions(+), 42 deletions(-)

diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
index 11c3676cce..1002fde097 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
@@ -10,14 +10,40 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { GetterNames } from '../../store/getters/getters'
+import { ref, watch } from 'vue'
+import { BiologicalAssociation } from '@/routes/endpoints'
 import PanelContainer from './PanelContainer.vue'
 import ListITems from '@/components/displayList.vue'
 
-const store = useStore()
-const biologicalAssociations = computed(
-  () => store.getters[GetterNames.GetBiologicalAssociations]
+const props = defineProps({
+  objectId: {
+    type: [String, undefined],
+    required: true
+  },
+
+  objectType: {
+    type: [String, undefined],
+    required: true
+  }
+})
+
+const list = ref([])
+
+watch(
+  () => props.objectId,
+  (id) => {
+    list.value = []
+
+    if (id) {
+      BiologicalAssociation.where({
+        biological_association_subject_id: props.objectId,
+        biological_association_subject_type: props.objectType
+      })
+        .then(({ body }) => {
+          list.value = body
+        })
+        .catch(() => {})
+    }
+  }
 )
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
index 673d32c608..bd16deccc6 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
@@ -2,12 +2,12 @@
   <PanelContainer title="Depictions">
     <VPagination
       class="margin-large-top"
-      :pagination="depictions.pagination"
+      :pagination="pagination"
       @next-page="loadDepictions"
     />
     <div class="flex-wrap-row depictions-list">
       <ImageViewer
-        v-for="depiction in depictions.list"
+        v-for="depiction in list"
         :key="depiction.id"
         :depiction="depiction"
       />
@@ -16,21 +16,51 @@
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
-import { computed } from 'vue'
-import { GetterNames } from '../../store/getters/getters.js'
-import { ActionNames } from '../../store/actions/actions.js'
+import { ref, watch } from 'vue'
+import { Depiction } from '@/routes/endpoints.js'
 import ImageViewer from '@/components/ui/ImageViewer/ImageViewer'
 import PanelContainer from './PanelContainer.vue'
 import VPagination from '@/components/pagination.vue'
+import getPagination from '@/helpers/getPagination.js'
 
-const store = useStore()
-const depictions = computed(() => store.getters[GetterNames.GetDepictions])
-const coId = computed(() => store.getters[GetterNames.GetCollectionObject]?.id)
+const props = defineProps({
+  objectId: {
+    type: [String, undefined],
+    required: true
+  },
 
-function loadDepictions({ page }) {
-  store.dispatch(ActionNames.LoadDepictions, { page, id: coId.value })
+  objectType: {
+    type: [String, undefined],
+    required: true
+  }
+})
+
+const pagination = ref()
+const list = ref([])
+
+function loadDepictions(page = 1) {
+  Depiction.where({
+    depiction_object_id: props.objectId,
+    depiction_object_type: props.objectType,
+    page
+  })
+    .then((response) => {
+      pagination.value = getPagination(response)
+      list.value = response.body
+    })
+    .catch(() => {})
 }
+
+watch(
+  () => props.objectId,
+  (id) => {
+    list.value = []
+
+    if (id) {
+      loadDepictions()
+    }
+  }
+)
 </script>
 
 <style scoped>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
index 299b85f6cd..7c69b3f7b5 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
@@ -4,42 +4,52 @@
       :headers="HEADERS"
       :items="list"
     />
-    <RadialFilterAttribute :parameters="parameters" />
   </PanelContainer>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { GetterNames } from '../../store/getters/getters'
+import { computed, ref, watch } from 'vue'
+import { TaxonDetermination } from '@/routes/endpoints'
 import PanelContainer from './PanelContainer.vue'
-import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
-import TableData from '../Table/TableData.vue'
+import TableData from '@/tasks/collection_objects/browse/components/Table/TableData.vue'
 
 const HEADERS = ['OTU', 'Determiners', 'Date']
 
-const store = useStore()
-const determinations = computed(
-  () => store.getters[GetterNames.GetDeterminations]
-)
-
-const parameters = computed(() => {
-  const d = determinations.value[0]
+const props = defineProps({
+  objectId: {
+    type: [String, undefined],
+    required: true
+  },
 
-  return d
-    ? {
-        otu_id: [d.otu_id],
-        taxon_name_id: d.otu.taxon_name_id
-        // ancestor_id,
-      }
-    : {}
+  objectType: {
+    type: [String, undefined],
+    required: true
+  }
 })
 
-const list = computed(() => {
-  return determinations.value.map((d) => ({
+const determinations = ref([])
+
+watch(
+  () => props.objectId,
+  (id) => {
+    determinations.value = []
+
+    if (id) {
+      TaxonDetermination.where({
+        taxon_determination_object_id: props.objectId,
+        taxon_determination_object_type: props.objectType
+      }).then(({ body }) => {
+        determinations.value = body
+      })
+    }
+  }
+)
+
+const list = computed(() =>
+  determinations.value.map((d) => ({
     otu: d.otu.object_tag,
     roles: d?.determiner_roles?.map((r) => r?.person?.cached).join('; '),
     date: [d.day_made, d.month_made, d.year_made].filter(Boolean).join('/')
   }))
-})
+)
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
index fc39dc040c..b4ef01d825 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
@@ -15,7 +15,7 @@ import TableAttributes from '@/tasks/collection_objects/browse/components/Table/
 
 const props = defineProps({
   objectId: {
-    type: [Number, String],
+    type: [Number, undefined],
     required: true
   },
 
@@ -30,8 +30,9 @@ const identifiers = ref([])
 watch(
   () => props.objectId,
   (id) => {
+    identifiers.value = []
+
     if (id) {
-      identifiers.value = []
       Identifier.where({
         identifier_object_id: props.objectId,
         identifier_object_type: props.objectType

From b643bab0f574fe996a51346f2876795a924ebfc5 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 11 Feb 2025 18:50:07 -0300
Subject: [PATCH 3/4] Add browse field occurrence stores and components

---
 app/javascript/vue/routes/routes.js           |   1 +
 .../tasks/field_occurrences/browse/app.vue    | 101 +++++++++++-
 .../browse/components/COHeader.vue            | 123 ---------------
 .../browse/components/ColumnThree.vue         |   6 +-
 .../browse/components/FOHeader.vue            | 115 ++++++++++++++
 .../components/Panel/PanelBiocurations.vue    |  13 +-
 .../Panel/PanelBuffered/PanelBuffered.vue     |  34 -----
 .../PanelBuffered/PanelBufferedSection.vue    |  22 ---
 .../PanelBuffered/PanelCollectingEvent.vue    |   9 --
 .../components/Panel/PanelContainer.vue       |  15 ++
 .../components/Panel/PanelDepictions.vue      |  36 ++---
 .../browse/components/Panel/PanelFO.vue       |   6 -
 .../browse/components/Panel/PanelMap.vue      |  21 +--
 .../browse/components/PanelCE/PanelCE.vue     |  54 +------
 .../components/PanelCE/PanelCEAttributes.vue  |  15 +-
 .../components/PanelCE/PanelCEModal.vue       | 144 ------------------
 .../browse/constants/collectingEvents.js      |  26 ++++
 .../browse/store/biocurations.js              |  61 ++++++++
 .../browse/store/collectingEvent.js           |  38 +++++
 .../browse/store/depictions.js                |  22 +++
 .../field_occurrences/browse/store/store.js   |  18 +++
 21 files changed, 428 insertions(+), 452 deletions(-)
 delete mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue
 delete mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue
 delete mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue
 delete mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelContainer.vue
 delete mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/constants/collectingEvents.js
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/biocurations.js
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/collectingEvent.js
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/depictions.js

diff --git a/app/javascript/vue/routes/routes.js b/app/javascript/vue/routes/routes.js
index 7774b4d02a..698c4c9fe7 100644
--- a/app/javascript/vue/routes/routes.js
+++ b/app/javascript/vue/routes/routes.js
@@ -57,6 +57,7 @@ const RouteNames = {
   NewCombination: '/tasks/nomenclature/new_combination',
   NewDescriptor: '/tasks/descriptors/new_descriptor',
   NewExtract: '/tasks/extracts/new_extract',
+  NewFieldOccurrence: '/tasks/field_occurrences/new_field_occurrences',
   NewLead: '/tasks/leads/new_lead',
   NewNamespace: '/tasks/namespaces/new_namespace',
   NewObservationMatrix: '/tasks/observation_matrices/new_matrix',
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/app.vue b/app/javascript/vue/tasks/field_occurrences/browse/app.vue
index 984dea42bf..6d5d4e2cea 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/app.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/app.vue
@@ -1,6 +1,103 @@
 <template>
-  <h1>Welcome to your new Vue task!</h1>
+  <div class="flex flex-separate middle">
+    <VSpinner
+      v-if="isLoading"
+      full-screen
+    />
+    <h1>Field occurrence</h1>
+    <VAutocomplete
+      v-if="store.fieldOccurrence"
+      class="autocomplete"
+      url="/field_occurrences/autocomplete"
+      placeholder="Search a field occurrence"
+      param="term"
+      label="label_html"
+      clear-after
+      @get-item="({ id }) => loadData(id)"
+    />
+  </div>
+  <FOHeader @select="loadData" />
+  <TableGrid
+    :columns="1"
+    gap="1em"
+  >
+    <TableGrid
+      :columns="ceStore.collectingEvent ? 3 : 2"
+      gap="1em"
+      :column-width="{
+        default: 'min-content',
+        0: '1fr',
+        1: ceStore.collectingEvent ? '2fr' : '1fr',
+        2: '1fr'
+      }"
+    >
+      <PanelFO />
+      <PanelCE />
+      <ColumnThree />
+    </TableGrid>
+  </TableGrid>
 </template>
 
 <script setup>
-</script>
\ No newline at end of file
+import { FIELD_OCCURRENCE } from '@/constants'
+import { URLParamsToJSON } from '@/helpers'
+import { onBeforeMount, ref } from 'vue'
+
+import VAutocomplete from '@/components/ui/Autocomplete.vue'
+import FOHeader from './components/FOHeader.vue'
+import PanelFO from './components/Panel/PanelFO.vue'
+import PanelCE from './components/PanelCE/PanelCE.vue'
+import ColumnThree from './components/ColumnThree.vue'
+import TableGrid from '@/components/layout/Table/TableGrid.vue'
+import VSpinner from '@/components/ui/VSpinner.vue'
+
+import useFieldOccurrenceStore from './store/store.js'
+import useCollectingEventStore from './store/collectingEvent.js'
+import useDepictionStore from './store/depictions.js'
+import useBiocurationStore from './store/biocurations.js'
+
+defineOptions({
+  name: 'BrowseFieldOccurrence'
+})
+
+const store = useFieldOccurrenceStore()
+const ceStore = useCollectingEventStore()
+const depictionStore = useDepictionStore()
+const biocurationStore = useBiocurationStore()
+const isLoading = ref(false)
+
+onBeforeMount(async () => {
+  const { field_occurrence_id: foId } = URLParamsToJSON(location.href)
+
+  if (foId) {
+    loadData(foId)
+  }
+})
+
+async function loadData(foId) {
+  const requests = []
+  const args = {
+    objectId: foId,
+    objectType: FIELD_OCCURRENCE
+  }
+
+  try {
+    isLoading.value = true
+    await store.load(foId)
+
+    const ceId = store.fieldOccurrence.collecting_event_id
+
+    if (ceId) {
+      requests.push(ceStore.load(ceId))
+    }
+
+    requests.push(depictionStore.load(args), biocurationStore.load(args))
+
+    Promise.all(requests).finally(() => {
+      isLoading.value = false
+    })
+  } catch {
+    TW.workbench.alert.create('No field occurrence found.', 'notice')
+  }
+}
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue
deleted file mode 100644
index 2ee1ca7479..0000000000
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/COHeader.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <NavBar>
-    <div
-      v-if="collectionObject.id"
-      class="flex-separate middle"
-    >
-      <span v-html="collectionObject.objectTag" />
-      <div class="horizontal-right-content">
-        <ul class="context-menu">
-          <li>
-            <CONavegation class="margin-small-right" />
-          </li>
-          <li v-if="otu">
-            <BrowseOTU :otu="otu" />
-          </li>
-          <li>
-            <RadialAnnotator
-              :global-id="collectionObject.globalId"
-              @create="handleRadialCreate"
-              @delete="handleRadialDelete"
-              @update="handleRadialUpdate"
-            />
-          </li>
-          <li>
-            <RadialObject :global-id="collectionObject.globalId" />
-          </li>
-          <li>
-            <RadialFilter object-type="CollectionObject" />
-          </li>
-          <li>
-            <VBtn
-              circle
-              color="submit"
-              title="Edit on comprehensive task"
-              @click="openComprehenseive(collectionObject.id)"
-            >
-              <VIcon
-                x-small
-                title="Edit on comprehensive task"
-                name="pencil"
-              />
-            </VBtn>
-          </li>
-          <li>
-            <RadialNavigator :global-id="collectionObject.globalId" />
-          </li>
-        </ul>
-      </div>
-      <RadialFilterAttribute
-        :parameters="{ collection_object_id: [collectionObject.id] }"
-      />
-    </div>
-  </NavBar>
-</template>
-
-<script setup>
-import { addToArray, removeFromArray } from '@/helpers'
-import { useStore } from 'vuex'
-import { computed } from 'vue'
-import { GetterNames } from '../store/getters/getters'
-import { MutationNames } from '../store/mutations/mutations'
-import { DEPICTION, IDENTIFIER, COLLECTION_OBJECT } from '@/constants'
-import VBtn from '@/components/ui/VBtn'
-import VIcon from '@/components/ui/VIcon'
-import NavBar from '@/components/layout/NavBar.vue'
-import CONavegation from './CONavegation.vue'
-import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
-import RadialObject from '@/components/radials/object/radial.vue'
-import RadialNavigator from '@/components/radials/navigation/radial.vue'
-import RadialFilter from '@/components/radials/linker/radial.vue'
-import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
-import BrowseOTU from '@/components/otu/otu.vue'
-import { RouteNames } from '@/routes/routes'
-
-const store = useStore()
-const collectionObject = computed(
-  () => store.getters[GetterNames.GetCollectionObject]
-)
-const otu = computed(() => {
-  const determinations = store.getters[GetterNames.GetDeterminations]
-  const d = determinations[0]
-
-  return d && { id: d.otu_id }
-})
-
-const openComprehenseive = (id) => {
-  window.open(`${RouteNames.DigitizeTask}?collection_object_id=${id}`, '_self')
-}
-
-function handleRadialCreate({ item }) {
-  switch (item.base_class) {
-    case DEPICTION:
-      addToArray(store.state.depictions.list, item)
-      break
-
-    case IDENTIFIER:
-      store.commit(MutationNames.AddIdentifier, {
-        objectType: COLLECTION_OBJECT,
-        item
-      })
-      break
-  }
-}
-
-function handleRadialDelete({ item }) {
-  switch (item.base_class) {
-    case DEPICTION:
-      removeFromArray(store.state.depictions.list, item)
-      break
-    case IDENTIFIER:
-      removeFromArray(store.state.identifiers[COLLECTION_OBJECT], item)
-      break
-  }
-}
-
-function handleRadialUpdate({ item }) {
-  switch (item.base_class) {
-    case DEPICTION:
-      addToArray(store.state.depictions.list, item)
-      break
-  }
-}
-</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue
index 049058b008..869eb137b1 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/ColumnThree.vue
@@ -4,8 +4,8 @@
     gap="1em"
   >
     <SoftValidations
+      v-if="false"
       class="column-validation"
-      :validations="store.getters[GetterNames.GetSoftValidations]"
     />
     <PanelIdentifier />
     <PanelDepictions />
@@ -14,13 +14,9 @@
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
-import { GetterNames } from '../store/getters/getters'
 import SoftValidations from '@/components/soft_validations/panel.vue'
 import PanelIdentifier from './Panel/PanelIdentifier.vue'
 import TableGrid from '@/components/layout/Table/TableGrid.vue'
 import PanelDepictions from './Panel/PanelDepictions.vue'
 import PanelMap from './Panel/PanelMap.vue'
-
-const store = useStore()
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue
new file mode 100644
index 0000000000..0d2a1edfd6
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue
@@ -0,0 +1,115 @@
+<template>
+  <NavBar>
+    <div
+      v-if="store.fieldOccurrence"
+      class="flex-separate middle"
+    >
+      <span v-html="store.fieldOccurrence.object_tag" />
+      <div class="horizontal-right-content">
+        <ul class="context-menu">
+          <li>
+            <RadialAnnotator
+              :global-id="store.fieldOccurrence.global_id"
+              @create="handleRadialCreate"
+              @delete="handleRadialDelete"
+              @update="handleRadialUpdate"
+            />
+          </li>
+          <li>
+            <RadialObject :global-id="store.fieldOccurrence.global_id" />
+          </li>
+          <li>
+            <RadialFilter object-type="CollectionObject" />
+          </li>
+          <li>
+            <VBtn
+              circle
+              color="primary"
+              title="Edit field occurrence"
+              @click="openEditFieldOccurrence(store.fieldOccurrence.id)"
+            >
+              <VIcon
+                x-small
+                title="Edit field occurrence"
+                name="pencil"
+              />
+            </VBtn>
+          </li>
+          <li>
+            <RadialNavigator :global-id="store.fieldOccurrence.global_id" />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <VAutocomplete
+      v-else
+      class="autocomplete"
+      url="/field_occurrences/autocomplete"
+      placeholder="Search a field occurrence"
+      param="term"
+      label="label_html"
+      clear-after
+      @get-item="(item) => emit('select', item.id)"
+    />
+  </NavBar>
+</template>
+
+<script setup>
+import { addToArray, removeFromArray } from '@/helpers'
+import { DEPICTION, IDENTIFIER } from '@/constants'
+import { RouteNames } from '@/routes/routes'
+import useStore from '../store/store.js'
+import VBtn from '@/components/ui/VBtn'
+import VIcon from '@/components/ui/VIcon'
+import NavBar from '@/components/layout/NavBar.vue'
+import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
+import RadialObject from '@/components/radials/object/radial.vue'
+import RadialNavigator from '@/components/radials/navigation/radial.vue'
+import RadialFilter from '@/components/radials/linker/radial.vue'
+import VAutocomplete from '@/components/ui/Autocomplete.vue'
+
+const emit = defineEmits(['select'])
+
+const store = useStore()
+
+const openEditFieldOccurrence = (id) => {
+  window.open(
+    `${RouteNames.NewFieldOccurrence}?field_occurrence_id=${id}`,
+    '_self'
+  )
+}
+
+function handleRadialCreate({ item }) {
+  switch (item.base_class) {
+    case DEPICTION:
+      addToArray(store.depictions, item)
+      break
+
+    case IDENTIFIER:
+      /*       store.commit(MutationNames.AddIdentifier, {
+        objectType: FIELD_OCCURRENCE,
+        item
+      }) */
+      break
+  }
+}
+
+function handleRadialDelete({ item }) {
+  switch (item.base_class) {
+    case DEPICTION:
+      removeFromArray(store.depictions, item)
+      break
+    case IDENTIFIER:
+      //removeFromArray(store.identifiers[COLLECTION_OBJECT], item)
+      break
+  }
+}
+
+function handleRadialUpdate({ item }) {
+  switch (item.base_class) {
+    case DEPICTION:
+      addToArray(store.depictions, item)
+      break
+  }
+}
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue
index e450ba8c33..a53e800566 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiocurations.vue
@@ -2,22 +2,19 @@
   <PanelContainer title="Biocurations">
     <ul class="no_bullets">
       <li
-        v-for="({ groupName, items }) in biocurations"
+        v-for="{ groupName, items } in store.biocurations"
         :key="groupName"
       >
-        {{ groupName }}: <b>{{ items.map(item => item.object_tag).join(', ') }}</b>
+        {{ groupName }}:
+        <b>{{ items.map((item) => item.object_tag).join(', ') }}</b>
       </li>
     </ul>
   </PanelContainer>
 </template>
 
 <script setup>
-import { GetterNames } from '../../store/getters/getters.js'
-import { useStore } from 'vuex'
-import { computed } from 'vue'
 import PanelContainer from './PanelContainer.vue'
+import useBiocurationStore from '../../store/biocurations.js'
 
-const store = useStore()
-const biocurations = computed(() => store.getters[GetterNames.GetBiocurations])
-
+const store = useBiocurationStore()
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue
deleted file mode 100644
index 722f554032..0000000000
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBuffered.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <PanelContainer title="Buffered">
-    <PanelBufferedSection
-      class="margin-small-bottom"
-      v-if="collectionObject.bufferedCollectingEvent"
-      title="Collecting event"
-      :text="collectionObject.bufferedCollectingEvent"
-    />
-    <PanelBufferedSection
-      v-if="collectionObject.bufferedDeterminations"
-      class="margin-small-bottom"
-      title="Determinations"
-      :text="collectionObject.bufferedDeterminations"
-    />
-    <PanelBufferedSection
-      v-if="collectionObject.bufferedLabels"
-      class="margin-small-bottom"
-      title="Other labels"
-      :text="collectionObject.bufferedLabels"
-    />
-  </PanelContainer>
-</template>
-
-<script setup>
-import { GetterNames } from '../../../store/getters/getters'
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import PanelBufferedSection from './PanelBufferedSection.vue'
-import PanelContainer from '../PanelContainer.vue'
-
-const store = useStore()
-
-const collectionObject = computed(() => store.getters[GetterNames.GetCollectionObject])
-</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue
deleted file mode 100644
index c655f3cd86..0000000000
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelBufferedSection.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <h3 class="panel__subtitle">
-      {{ title }}
-    </h3>
-    <pre class="break_words_pre">{{ text }}</pre>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-
-  text: {
-    type: String,
-    required: true
-  }
-})
-</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue
deleted file mode 100644
index 422d72dbc6..0000000000
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBuffered/PanelCollectingEvent.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="panel panel__content">
-    <h2>Collecting event</h2>
-  </div>
-</template>
-
-<script setup>
-
-</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelContainer.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelContainer.vue
new file mode 100644
index 0000000000..f8a6a3f31a
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelContainer.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="panel content">
+    <h3>{{ title }}</h3>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
index bd16deccc6..a3dbd071bc 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDepictions.vue
@@ -1,13 +1,8 @@
 <template>
   <PanelContainer title="Depictions">
-    <VPagination
-      class="margin-large-top"
-      :pagination="pagination"
-      @next-page="loadDepictions"
-    />
     <div class="flex-wrap-row depictions-list">
       <ImageViewer
-        v-for="depiction in list"
+        v-for="depiction in store.depictions"
         :key="depiction.id"
         :depiction="depiction"
       />
@@ -16,12 +11,10 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { Depiction } from '@/routes/endpoints.js'
+import { watch } from 'vue'
+import useDepictionStore from '../../store/depictions.js'
 import ImageViewer from '@/components/ui/ImageViewer/ImageViewer'
 import PanelContainer from './PanelContainer.vue'
-import VPagination from '@/components/pagination.vue'
-import getPagination from '@/helpers/getPagination.js'
 
 const props = defineProps({
   objectId: {
@@ -35,29 +28,18 @@ const props = defineProps({
   }
 })
 
-const pagination = ref()
-const list = ref([])
-
-function loadDepictions(page = 1) {
-  Depiction.where({
-    depiction_object_id: props.objectId,
-    depiction_object_type: props.objectType,
-    page
-  })
-    .then((response) => {
-      pagination.value = getPagination(response)
-      list.value = response.body
-    })
-    .catch(() => {})
-}
+const store = useDepictionStore()
 
 watch(
   () => props.objectId,
   (id) => {
-    list.value = []
+    store.$reset()
 
     if (id) {
-      loadDepictions()
+      store.load({
+        objectId: props.objectId,
+        objectType: props.objectType
+      })
     }
   }
 )
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
index 21759d3e66..ff3b8e60fc 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
@@ -3,7 +3,6 @@
     :columns="1"
     gap="1em"
   >
-    <PanelBuffered />
     <TableGrid
       gap="1em"
       :columns="1"
@@ -14,18 +13,13 @@
       <PanelBiocurations />
     </TableGrid>
     <PanelDeterminations />
-    <PanelDisposition />
     <PanelBiologicalAssociations />
-    <PanelTypeMaterial />
   </TableGrid>
 </template>
 
 <script setup>
-import PanelBuffered from './PanelBuffered/PanelBuffered.vue'
 import PanelDeterminations from './PanelDeterminations.vue'
 import PanelBiocurations from './PanelBiocurations.vue'
 import PanelBiologicalAssociations from './PanelBiologicalAssociations.vue'
-import PanelTypeMaterial from './PanelTypeMaterial.vue'
-import PanelDisposition from './PanelDisposition.vue'
 import TableGrid from '@/components/layout/Table/TableGrid.vue'
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue
index 12441bb946..961178107b 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelMap.vue
@@ -6,30 +6,19 @@
     :geojson="geoJson"
     resize
   />
-  <RadialFilterAttribute
-    v-if="geographicArea.id"
-    :parameters="{ geographic_area_id: [geographicArea.id] }"
-  />
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
+import useGeoreferencesStore from '../../store/collectingEvent.js'
 import { computed } from 'vue'
-import { GetterNames } from '../../store/getters/getters'
 import VMap from '@/components/georeferences/map.vue'
-import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
 
-const store = useStore()
-const georeferences = computed(() =>
-  store.getters[GetterNames.GetGeoreferences].map((g) => g.geo_json)
-)
-const geographicArea = computed(
-  () => store.getters[GetterNames.GetGeographicArea]
-)
+const store = useGeoreferencesStore()
+const georeferences = computed(() => store.georeferences.map((g) => g.geo_json))
 
 const geoJson = computed(() =>
-  geographicArea.value?.shape
-    ? [geographicArea.value.shape, ...georeferences.value]
+  store.geographicArea?.shape
+    ? [store.geographicArea.shape, ...georeferences.value]
     : [...georeferences.value]
 )
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue
index a14665b990..59d728ed08 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCE.vue
@@ -1,71 +1,29 @@
 <template>
-  <BlockLayout v-if="collectingEvent.id">
+  <BlockLayout v-if="store.collectingEvent">
     <template #header>
       <div class="flex-separate middle full_width">
         <h3>Collecting event</h3>
-        <RadialFilterAttribute
-          :parameters="{ collecting_event_id: [collectingEvent.id] }"
-        />
         <div class="horizontal-right-content gap-small">
-          <RadialAnnotator :global-id="collectingEvent.global_id" />
-          <RadialNavigator :global-id="collectingEvent.global_id" />
+          <RadialAnnotator :global-id="store.collectingEvent.global_id" />
+          <RadialNavigator :global-id="store.collectingEvent.global_id" />
         </div>
       </div>
     </template>
     <template #body>
       <TableGrid :columns="1">
-        <PanelCEAttributes @row-click="setRow" />
+        <PanelCEAttributes />
       </TableGrid>
-      <PanelCEModal
-        v-if="row"
-        :param="row"
-        :textarea="textareaFields.includes(row.field)"
-        :collecting-event-id="collectingEvent.id"
-        @close="row = undefined"
-      />
     </template>
   </BlockLayout>
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
-import { computed, ref } from 'vue'
-import { GetterNames } from '../../store/getters/getters'
+import useCollectingEventStore from '../../store/collectingEvent.js'
 import BlockLayout from '@/components/layout/BlockLayout.vue'
 import PanelCEAttributes from './PanelCEAttributes.vue'
 import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
 import RadialNavigator from '@/components/radials/navigation/radial.vue'
 import TableGrid from '@/components/layout/Table/TableGrid.vue'
-import RadialFilterAttribute from '@/components/radials/linker/RadialFilterAttribute.vue'
-import PanelCEModal from './PanelCEModal.vue'
 
-const notEditableFields = [
-  'created_at',
-  'updated_at',
-  'global_id',
-  'id',
-  'cached_level0_geographic_name',
-  'cached_level1_geographic_name',
-  'cached_level2_geographic_name'
-]
-
-const textareaFields = [
-  'document_label',
-  'print_label',
-  'verbatim_label',
-  'verbatim_locality'
-]
-
-function setRow(rowObject) {
-  if (!notEditableFields.includes(rowObject.field)) {
-    row.value = rowObject
-  }
-}
-
-const row = ref(undefined)
-
-const store = useStore()
-const collectingEvent = computed(
-  () => store.getters[GetterNames.GetCollectingEvent]
-)
+const store = useCollectingEventStore()
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue
index 1e234b1cd4..762899c4f1 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEAttributes.vue
@@ -6,21 +6,21 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import {
   PRIORITIZE_ATTRIBUTES,
   HIDE_ATTRIBUTES
 } from '../../constants/collectingEvents.js'
-import { useStore } from 'vuex'
-import { computed } from 'vue'
-import { GetterNames } from '../../store/getters/getters'
+import useCollectingEventStore from '../../store/collectingEvent.js'
 import TableAttributes from '../Table/TableAttributes.vue'
 
-const store = useStore()
-const collectingEvent = computed(() => store.getters[GetterNames.GetCollectingEvent])
+const store = useCollectingEventStore()
 
 const list = computed(() => {
-  const entries = Object.entries(collectingEvent.value)
-  const filteredList = entries.filter(([property, _]) => !HIDE_ATTRIBUTES.includes(property))
+  const entries = Object.entries(store.collectingEvent)
+  const filteredList = entries.filter(
+    ([property, _]) => !HIDE_ATTRIBUTES.includes(property)
+  )
 
   filteredList.sort((a, b) => {
     const index1 = PRIORITIZE_ATTRIBUTES.indexOf(a[0])
@@ -31,5 +31,4 @@ const list = computed(() => {
 
   return Object.fromEntries(filteredList)
 })
-
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue
deleted file mode 100644
index 2872ab44f5..0000000000
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/PanelCE/PanelCEModal.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <VModal :container-style="{ width: '600px' }">
-    <template #header>
-      <h3>Collecting event - {{ param.field }}</h3>
-    </template>
-    <template #body>
-      <div>
-        <div class="field label-above">
-          <textarea
-            v-if="textarea"
-            v-model="fieldValue"
-            class="full_width"
-            rows="5"
-          />
-          <input
-            v-else
-            type="text"
-            class="full_width"
-            v-model="fieldValue"
-          />
-          <div class="margin-small-top middle">
-            <VIcon
-              name="attention"
-              color="attention"
-              x-small
-            />
-            <span class="margin-small-left">
-              {{ collectionObjects.length }} linked collection objects
-            </span>
-          </div>
-        </div>
-
-        <VSpinner
-          v-if="isLoading"
-          full-screen
-        />
-      </div>
-      <ConfirmationModal ref="confirmationModal" />
-    </template>
-    <template #footer>
-      <VBtn
-        color="submit"
-        medium
-        @click="updateCE"
-        :disabled="isUpdating"
-      >
-        Update
-      </VBtn>
-
-      <VBtn
-        class="margin-small-left"
-        color="primary"
-        medium
-        @click="emit('close')"
-      >
-        Cancel
-      </VBtn>
-    </template>
-  </VModal>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { CollectionObject } from '@/routes/endpoints'
-import { useStore } from 'vuex'
-import { ActionNames } from '../../store/actions/actions'
-import { GetterNames } from '../../store/getters/getters'
-import VModal from '@/components/ui/Modal.vue'
-import VIcon from '@/components/ui/VIcon/index.vue'
-import VBtn from '@/components/ui/VBtn/index.vue'
-import VSpinner from '@/components/ui/VSpinner.vue'
-import ConfirmationModal from '@/components/ConfirmationModal.vue'
-
-const props = defineProps({
-  collectingEventId: {
-    type: Number,
-    required: true
-  },
-
-  param: {
-    type: Object,
-    required: true
-  },
-
-  textarea: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const emit = defineEmits('close')
-const store = useStore()
-const collectionObjects = ref([])
-const fieldValue = ref(props.param.value)
-const isLoading = ref(true)
-const isUpdating = ref(false)
-const confirmationModal = ref(null)
-
-const MAX_WITHOUT_WARNING = 10
-
-CollectionObject.where({ collecting_event_id: [props.collectingEventId] }).then(
-  ({ body }) => {
-    collectionObjects.value = body
-    isLoading.value = false
-  }
-)
-
-async function updateCE() {
-  const ok =
-    collectionObjects.value.length > MAX_WITHOUT_WARNING
-      ? await confirmationModal.value.show({
-          title: 'Update collecting event',
-          message:
-            'This will update the current collecting event. Are you sure you want to proceed?',
-          confirmationWord: 'UPDATE',
-          okButton: 'Update',
-          typeButton: 'submit'
-        })
-      : true
-
-  if (ok) {
-    isUpdating.value = true
-
-    store
-      .dispatch(ActionNames.UpdateCollectingEvent, {
-        collectingEventId: props.collectingEventId,
-        payload: { [props.param.field]: fieldValue.value }
-      })
-      .then((_) => {
-        const coId = store.getters[GetterNames.GetCollectionObject].id
-
-        store.dispatch(ActionNames.LoadDwc, coId)
-        store.dispatch(ActionNames.LoadTimeline, coId)
-
-        isUpdating.value = false
-        TW.workbench.alert.create(
-          'Collecting event was successfully updated',
-          'notice'
-        )
-        emit('close')
-      })
-  }
-}
-</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/constants/collectingEvents.js b/app/javascript/vue/tasks/field_occurrences/browse/constants/collectingEvents.js
new file mode 100644
index 0000000000..47bd6afa5c
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/constants/collectingEvents.js
@@ -0,0 +1,26 @@
+export const PRIORITIZE_ATTRIBUTES = [
+  'id',
+  'verbatim_label',
+  'verbatim_collectors',
+  'verbatim_method',
+  'verbatim_habitat',
+  'verbatim_locality',
+  'verbatim_latitude',
+  'verbatim_longitude',
+  'verbatim_date'
+]
+export const HIDE_ATTRIBUTES = [
+  'global_id',
+  'geographic_area_id',
+  'identifiers',
+  'url_for',
+  'project_id',
+  'object_url',
+  'object_label',
+  'object_tag',
+  'cached',
+  'created_by_id',
+  'updated_by_id',
+  'base_class',
+  'md5_of_verbatim_label'
+]
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/biocurations.js b/app/javascript/vue/tasks/field_occurrences/browse/store/biocurations.js
new file mode 100644
index 0000000000..5c78eecd5d
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/biocurations.js
@@ -0,0 +1,61 @@
+import {
+  BiocurationClassification,
+  ControlledVocabularyTerm,
+  Tag
+} from '@/routes/endpoints'
+import { BIOCURATION_GROUP } from '@/constants/index.js'
+import { defineStore } from 'pinia'
+
+async function makeGroup(groups, biocurations) {
+  const newGroups = {}
+
+  for (const groupId in groups) {
+    await Tag.where({ keyword_id: groupId }).then(({ body }) => {
+      body.forEach((item) => {
+        biocurations.forEach((klass) => {
+          if (klass.biocuration_class_id === item.tag_object_id) {
+            if (groupId in newGroups) {
+              newGroups[groupId].items.push(klass)
+            } else {
+              newGroups[groupId] = {
+                groupName: groups[groupId].name,
+                items: [klass]
+              }
+            }
+          }
+        })
+      })
+    })
+  }
+
+  return newGroups
+}
+
+export default defineStore('biocurations', {
+  state: () => ({
+    biocurations: []
+  }),
+
+  actions: {
+    async load({ objectId, objectType }) {
+      const { body: biocurationGroups } = await ControlledVocabularyTerm.where({
+        type: [BIOCURATION_GROUP]
+      })
+      const { body: biocurations } = await BiocurationClassification.where({
+        biocuration_classification_object_id: objectId,
+        biocuration_classification_object_type: objectType
+      })
+      const groups = Object.assign(
+        {},
+        ...biocurationGroups.map((item) => ({
+          [item.id]: {
+            name: item.name,
+            items: []
+          }
+        }))
+      )
+
+      this.biocurations = await makeGroup(groups, biocurations)
+    }
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/collectingEvent.js b/app/javascript/vue/tasks/field_occurrences/browse/store/collectingEvent.js
new file mode 100644
index 0000000000..f0eedbfdd7
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/collectingEvent.js
@@ -0,0 +1,38 @@
+import {
+  CollectingEvent,
+  GeographicArea,
+  Georeference
+} from '@/routes/endpoints'
+import { defineStore } from 'pinia'
+
+export default defineStore('collectingEvent', {
+  state: () => ({
+    collectingEvent: null,
+    geographicArea: null,
+    georeferences: []
+  }),
+
+  actions: {
+    async load(collectingEventId) {
+      try {
+        CollectingEvent.find(collectingEventId).then(({ body }) => {
+          this.collectingEvent = body
+
+          if (body.geographic_area_id) {
+            GeographicArea.find(body.geographic_area_id, {
+              embed: ['shape']
+            }).then(({ body }) => {
+              this.geographicArea = body
+            })
+          }
+        })
+
+        Georeference.where({ collecting_event_id: collectingEventId }).then(
+          ({ body }) => {
+            this.georeferences = body
+          }
+        )
+      } catch {}
+    }
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/depictions.js b/app/javascript/vue/tasks/field_occurrences/browse/store/depictions.js
new file mode 100644
index 0000000000..eb0014b7f7
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/depictions.js
@@ -0,0 +1,22 @@
+import { Depiction } from '@/routes/endpoints'
+import { defineStore } from 'pinia'
+
+export default defineStore('depictions', {
+  state: () => ({
+    depictions: []
+  }),
+
+  actions: {
+    async load({ objectId, objectType }) {
+      return Depiction.where({
+        depiction_object_id: objectId,
+        depiction_object_type: objectType,
+        per: 100
+      })
+        .then(({ body }) => {
+          this.depictions = body
+        })
+        .catch(() => {})
+    }
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/store.js b/app/javascript/vue/tasks/field_occurrences/browse/store/store.js
index e69de29bb2..51cff25754 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/store/store.js
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/store.js
@@ -0,0 +1,18 @@
+import { FieldOccurrence } from '@/routes/endpoints'
+import { defineStore } from 'pinia'
+
+export default defineStore('browseFieldOccurrence', {
+  state: () => ({
+    fieldOccurrence: null
+  }),
+
+  actions: {
+    async load(fieldOccurrenceId) {
+      return FieldOccurrence.find(fieldOccurrenceId)
+        .then(({ body }) => {
+          this.fieldOccurrence = body
+        })
+        .catch(() => {})
+    }
+  }
+})

From f384470a9e2a35626f9514759e6bfead8a6c2a79 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 12 Feb 2025 13:26:40 -0300
Subject: [PATCH 4/4] Add quick forms for field occurrences, add actions and
 panels for browse field occurrence

---
 .../components/collecting_event/main.vue      |  33 +++--
 app/javascript/vue/routes/routes.js           |   1 +
 .../tasks/field_occurrences/browse/app.vue    |  39 +++++-
 .../browse/components/CONavegation.vue        | 122 ------------------
 .../browse/components/FOHeader.vue            |  21 ++-
 .../Panel/PanelBiologicalAssociations.vue     |  37 +-----
 .../components/Panel/PanelDeterminations.vue  |  34 +----
 .../browse/components/Panel/PanelFO.vue       |   2 +
 .../components/Panel/PanelFieldOccurrence.vue |  23 ++++
 .../components/Panel/PanelIdentifier.vue      |  38 +-----
 .../browse/store/biologicalAssociations.js    |  21 +++
 .../browse/store/determinations.js            |  21 +++
 .../browse/store/identifiers.js               |  21 +++
 .../vue/tasks/field_occurrences/new/App.vue   |   2 -
 .../new/components/HeaderBar.vue              |  22 ++--
 .../new/store/fieldOccurrence.js              |   8 +-
 app/models/field_occurrence.rb                |   2 +
 config/interface/hub/user_tasks.yml           |   2 +-
 config/interface/object_radials.yml           |   1 +
 config/routes/tasks.rb                        |   2 +-
 20 files changed, 194 insertions(+), 258 deletions(-)
 delete mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFieldOccurrence.vue
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/biologicalAssociations.js
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/determinations.js
 create mode 100644 app/javascript/vue/tasks/field_occurrences/browse/store/identifiers.js

diff --git a/app/javascript/vue/components/radials/object/components/collecting_event/main.vue b/app/javascript/vue/components/radials/object/components/collecting_event/main.vue
index 23721669de..d78f330693 100644
--- a/app/javascript/vue/components/radials/object/components/collecting_event/main.vue
+++ b/app/javascript/vue/components/radials/object/components/collecting_event/main.vue
@@ -71,12 +71,14 @@ import {
   LABEL_CODE_128,
   IDENTIFIER_LOCAL_CATALOG_NUMBER,
   COLLECTION_OBJECT,
-  COLLECTING_EVENT
+  COLLECTING_EVENT,
+  FIELD_OCCURRENCE
 } from '@/constants/index.js'
 import {
   Label,
   Identifier,
   CollectionObject,
+  FieldOccurrence,
   CollectingEvent
 } from '@/routes/endpoints'
 import { onBeforeMount, ref, watch } from 'vue'
@@ -87,6 +89,17 @@ const LABEL_TYPES = {
   [LABEL_CODE_128]: QRCodeComponent
 }
 
+const TYPES = {
+  [FIELD_OCCURRENCE]: {
+    service: FieldOccurrence,
+    property: 'field_occurrence'
+  },
+  [COLLECTION_OBJECT]: {
+    service: CollectionObject,
+    property: 'collection_object'
+  }
+}
+
 const props = defineProps({
   objectId: {
     type: Number,
@@ -123,12 +136,12 @@ watch(collectingEvent, (newVal) => {
 })
 
 onBeforeMount(async () => {
-  const ceId = (await CollectionObject.find(props.objectId)).body
-    .collecting_event_id
+  const ceId = (await TYPES[props.objectType].service.find(props.objectId)).body
+    ?.collecting_event_id
 
   Identifier.where({
     identifier_object_id: props.objectId,
-    identifier_object_type: COLLECTION_OBJECT,
+    identifier_object_type: props.objectType,
     type: IDENTIFIER_LOCAL_CATALOG_NUMBER
   }).then(({ body }) => {
     identifier.value = body[0]
@@ -180,10 +193,12 @@ function removeLabel(label) {
 }
 
 function addCollectingEvent(ce) {
-  CollectionObject.update(props.objectId, {
-    collection_object: { collecting_event_id: ce.id || null }
-  }).then((_) => {
-    collectingEvent.value = ce.id ? ce : undefined
-  })
+  TYPES[props.objectType].service
+    .update(props.objectId, {
+      [TYPES[props.objectType].property]: { collecting_event_id: ce.id || null }
+    })
+    .then(() => {
+      collectingEvent.value = ce.id ? ce : undefined
+    })
 }
 </script>
diff --git a/app/javascript/vue/routes/routes.js b/app/javascript/vue/routes/routes.js
index 698c4c9fe7..4f7862f241 100644
--- a/app/javascript/vue/routes/routes.js
+++ b/app/javascript/vue/routes/routes.js
@@ -19,6 +19,7 @@ const RouteNames = {
   BiologicalRelationshipComposer: '/tasks/biological_relationships/composer',
   BrowseAssertedDistribution: '/tasks/otus/browse_asserted_distributions',
   BrowseCollectionObject: '/tasks/collection_objects/browse',
+  BrowseFieldOccurrence: '/tasks/field_occurrences/browse',
   BrowseNomenclature: '/tasks/nomenclature/browse',
   BrowseOtu: '/tasks/otus/browse',
   ContentEditorTask: '/tasks/content/editor/index',
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/app.vue b/app/javascript/vue/tasks/field_occurrences/browse/app.vue
index 6d5d4e2cea..e591555a10 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/app.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/app.vue
@@ -4,7 +4,7 @@
       v-if="isLoading"
       full-screen
     />
-    <h1>Field occurrence</h1>
+    <h1>Browse field occurrence</h1>
     <VAutocomplete
       v-if="store.fieldOccurrence"
       class="autocomplete"
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { FIELD_OCCURRENCE } from '@/constants'
+import { FIELD_OCCURRENCE, COLLECTING_EVENT } from '@/constants'
 import { URLParamsToJSON } from '@/helpers'
 import { onBeforeMount, ref } from 'vue'
 
@@ -53,8 +53,13 @@ import VSpinner from '@/components/ui/VSpinner.vue'
 
 import useFieldOccurrenceStore from './store/store.js'
 import useCollectingEventStore from './store/collectingEvent.js'
+import useDeterminationStore from './store/determinations.js'
 import useDepictionStore from './store/depictions.js'
 import useBiocurationStore from './store/biocurations.js'
+import useBiologicalAssociationStore from './store/biologicalAssociations.js'
+import useIdentifierStore from './store/identifiers.js'
+import { setParam } from '@/helpers'
+import { RouteNames } from '@/routes/routes'
 
 defineOptions({
   name: 'BrowseFieldOccurrence'
@@ -64,6 +69,10 @@ const store = useFieldOccurrenceStore()
 const ceStore = useCollectingEventStore()
 const depictionStore = useDepictionStore()
 const biocurationStore = useBiocurationStore()
+const determinationStore = useDeterminationStore()
+const biologicalAssociationStore = useBiologicalAssociationStore()
+const identifierStore = useIdentifierStore()
+
 const isLoading = ref(false)
 
 onBeforeMount(async () => {
@@ -83,15 +92,37 @@ async function loadData(foId) {
 
   try {
     isLoading.value = true
+    store.$reset()
+    ceStore.$reset()
+    depictionStore.$reset()
+    biocurationStore.$reset()
+    determinationStore.$reset()
+    biologicalAssociationStore.$reset()
+    identifierStore.$reset()
+
     await store.load(foId)
 
     const ceId = store.fieldOccurrence.collecting_event_id
 
+    setParam(RouteNames.BrowseFieldOccurrence, 'field_occurrence_id', foId)
+
     if (ceId) {
-      requests.push(ceStore.load(ceId))
+      requests.push(
+        ceStore.load(ceId),
+        identifierStore.load({
+          objectId: ceId,
+          objectType: COLLECTING_EVENT
+        })
+      )
     }
 
-    requests.push(depictionStore.load(args), biocurationStore.load(args))
+    requests.push(
+      depictionStore.load(args),
+      biocurationStore.load(args),
+      determinationStore.load(args),
+      biologicalAssociationStore.load(args),
+      identifierStore.load(args)
+    )
 
     Promise.all(requests).finally(() => {
       isLoading.value = false
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue
deleted file mode 100644
index e0908a8ca9..0000000000
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/CONavegation.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div>
-    <VBtn
-      medium
-      color="primary"
-      :disabled="!previousByCurrent"
-      @click="loadCO(previousByCurrent)"
-    >
-      <VIcon
-        x-small
-        name="arrowLeft"
-      />
-    </VBtn>
-    <VBtn
-      medium
-      class="margin-small-left margin-small-right"
-      color="primary"
-      @click="isVisible = true"
-      :disabled="!navigate.current_collection_object"
-    >
-      Go
-    </VBtn>
-    <VBtn
-      medium
-      color="primary"
-      :disabled="!nextByCurrent"
-      @click="loadCO(nextByCurrent)"
-    >
-      <VIcon
-        x-small
-        name="arrowRight"
-      />
-    </VBtn>
-    <modal-component
-      v-if="isVisible"
-      @close="isVisible = false"
-      :container-style="{ width: '500px' }"
-    >
-      <template #header>
-        <h3>Navigate</h3>
-      </template>
-      <template #body>
-        <p>Current: <span v-html="collectionObject.object_tag" /></p>
-        <table class="full_width">
-          <thead>
-            <tr>
-              <th>Previous by</th>
-              <th>Next by</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="key in Object.keys(
-                navigate.previous_by || navigate.next_by
-              )"
-              :key="key"
-            >
-              <td>
-                <button
-                  type="button"
-                  class="button normal-input button-default"
-                  :disabled="!navigate.previous_by[key]"
-                  @click="loadCO(navigate.previous_by[key])"
-                >
-                  {{ key.replaceAll('_', ' ') }}
-                </button>
-              </td>
-              <td>
-                <button
-                  class="button normal-input button-default"
-                  type="button"
-                  :disabled="!navigate.next_by[key]"
-                  @click="loadCO(navigate.next_by[key])"
-                >
-                  {{ key.replaceAll('_', ' ') }}
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </template>
-    </modal-component>
-  </div>
-</template>
-
-<script setup>
-import { useStore } from 'vuex'
-import { computed, ref } from 'vue'
-import { GetterNames } from '../store/getters/getters'
-import { ActionNames } from '../store/actions/actions'
-import { RouteNames } from '@/routes/routes'
-import ModalComponent from '@/components/ui/Modal'
-import setParam from '@/helpers/setParam'
-import VBtn from '@/components/ui/VBtn/index.vue'
-import VIcon from '@/components/ui/VIcon/index.vue'
-
-const store = useStore()
-
-const isVisible = ref(false)
-const currentNavigation = ref('id')
-
-const navigate = computed(() => store.getters[GetterNames.GetNavigation])
-const collectionObject = computed(
-  () => store.getters[GetterNames.GetCollectionObject]
-)
-
-const previousByCurrent = computed(
-  () =>
-    navigate.value?.previous_by &&
-    navigate.value.previous_by[currentNavigation.value]
-)
-const nextByCurrent = computed(
-  () =>
-    navigate.value?.next_by && navigate.value.next_by[currentNavigation.value]
-)
-
-function loadCO(coId) {
-  store.dispatch(ActionNames.ResetStore)
-  store.dispatch(ActionNames.LoadCollectionObject, coId)
-  setParam(RouteNames.BrowseCollectionObject, 'collection_object_id', coId)
-}
-</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue
index 0d2a1edfd6..289ca78983 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/FOHeader.vue
@@ -18,9 +18,6 @@
           <li>
             <RadialObject :global-id="store.fieldOccurrence.global_id" />
           </li>
-          <li>
-            <RadialFilter object-type="CollectionObject" />
-          </li>
           <li>
             <VBtn
               circle
@@ -65,12 +62,15 @@ import NavBar from '@/components/layout/NavBar.vue'
 import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
 import RadialObject from '@/components/radials/object/radial.vue'
 import RadialNavigator from '@/components/radials/navigation/radial.vue'
-import RadialFilter from '@/components/radials/linker/radial.vue'
 import VAutocomplete from '@/components/ui/Autocomplete.vue'
+import useDepictionStore from '../store/depictions.js'
+import useIdentifierStore from '../store/identifiers.js'
 
 const emit = defineEmits(['select'])
 
 const store = useStore()
+const depictionStore = useDepictionStore()
+const identifierStore = useIdentifierStore()
 
 const openEditFieldOccurrence = (id) => {
   window.open(
@@ -82,14 +82,11 @@ const openEditFieldOccurrence = (id) => {
 function handleRadialCreate({ item }) {
   switch (item.base_class) {
     case DEPICTION:
-      addToArray(store.depictions, item)
+      addToArray(depictionStore.depictions, item)
       break
 
     case IDENTIFIER:
-      /*       store.commit(MutationNames.AddIdentifier, {
-        objectType: FIELD_OCCURRENCE,
-        item
-      }) */
+      addToArray(identifierStore.identifiers, item)
       break
   }
 }
@@ -97,10 +94,10 @@ function handleRadialCreate({ item }) {
 function handleRadialDelete({ item }) {
   switch (item.base_class) {
     case DEPICTION:
-      removeFromArray(store.depictions, item)
+      removeFromArray(depictionStore.depictions, item)
       break
     case IDENTIFIER:
-      //removeFromArray(store.identifiers[COLLECTION_OBJECT], item)
+      removeFromArray(identifierStore.identifiers, item)
       break
   }
 }
@@ -108,7 +105,7 @@ function handleRadialDelete({ item }) {
 function handleRadialUpdate({ item }) {
   switch (item.base_class) {
     case DEPICTION:
-      addToArray(store.depictions, item)
+      addToArray(depictionStore.depictions, item)
       break
   }
 }
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
index 1002fde097..d975a4fd39 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelBiologicalAssociations.vue
@@ -2,7 +2,7 @@
   <PanelContainer title="Biological associations">
     <ListITems
       class="no_bullets"
-      :list="biologicalAssociations"
+      :list="store.biologicalAssociations"
       label="object_tag"
       :remove="false"
     />
@@ -10,40 +10,9 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { BiologicalAssociation } from '@/routes/endpoints'
 import PanelContainer from './PanelContainer.vue'
 import ListITems from '@/components/displayList.vue'
+import useBiologicalAssociationsStore from '../../store/biologicalAssociations.js'
 
-const props = defineProps({
-  objectId: {
-    type: [String, undefined],
-    required: true
-  },
-
-  objectType: {
-    type: [String, undefined],
-    required: true
-  }
-})
-
-const list = ref([])
-
-watch(
-  () => props.objectId,
-  (id) => {
-    list.value = []
-
-    if (id) {
-      BiologicalAssociation.where({
-        biological_association_subject_id: props.objectId,
-        biological_association_subject_type: props.objectType
-      })
-        .then(({ body }) => {
-          list.value = body
-        })
-        .catch(() => {})
-    }
-  }
-)
+const store = useBiologicalAssociationsStore()
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
index 7c69b3f7b5..580c5a6923 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelDeterminations.vue
@@ -9,44 +9,16 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import { TaxonDetermination } from '@/routes/endpoints'
+import useStore from '../../store/determinations.js'
 import PanelContainer from './PanelContainer.vue'
 import TableData from '@/tasks/collection_objects/browse/components/Table/TableData.vue'
 
 const HEADERS = ['OTU', 'Determiners', 'Date']
 
-const props = defineProps({
-  objectId: {
-    type: [String, undefined],
-    required: true
-  },
-
-  objectType: {
-    type: [String, undefined],
-    required: true
-  }
-})
-
-const determinations = ref([])
-
-watch(
-  () => props.objectId,
-  (id) => {
-    determinations.value = []
-
-    if (id) {
-      TaxonDetermination.where({
-        taxon_determination_object_id: props.objectId,
-        taxon_determination_object_type: props.objectType
-      }).then(({ body }) => {
-        determinations.value = body
-      })
-    }
-  }
-)
+const store = useStore()
 
 const list = computed(() =>
-  determinations.value.map((d) => ({
+  store.determinations.map((d) => ({
     otu: d.otu.object_tag,
     roles: d?.determiner_roles?.map((r) => r?.person?.cached).join('; '),
     date: [d.day_made, d.month_made, d.year_made].filter(Boolean).join('/')
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
index ff3b8e60fc..b0f3032ecc 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFO.vue
@@ -10,6 +10,7 @@
         default: '1fr'
       }"
     >
+      <PanelFieldOccurrence />
       <PanelBiocurations />
     </TableGrid>
     <PanelDeterminations />
@@ -22,4 +23,5 @@ import PanelDeterminations from './PanelDeterminations.vue'
 import PanelBiocurations from './PanelBiocurations.vue'
 import PanelBiologicalAssociations from './PanelBiologicalAssociations.vue'
 import TableGrid from '@/components/layout/Table/TableGrid.vue'
+import PanelFieldOccurrence from './PanelFieldOccurrence.vue'
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFieldOccurrence.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFieldOccurrence.vue
new file mode 100644
index 0000000000..b399425090
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelFieldOccurrence.vue
@@ -0,0 +1,23 @@
+<template>
+  <BlockLayout>
+    <template #header>
+      <div class="flex-separate middle full_width">
+        <h3>FieldOccurrence</h3>
+      </div>
+    </template>
+    <template #body>
+      <TableGrid :columns="1">
+        <TableAttributes :items="store.fieldOccurrence || {}" />
+      </TableGrid>
+    </template>
+  </BlockLayout>
+</template>
+
+<script setup>
+import useStore from '../../store/store.js'
+import BlockLayout from '@/components/layout/BlockLayout.vue'
+import TableAttributes from '../Table/TableAttributes.vue'
+import TableGrid from '@/components/layout/Table/TableGrid.vue'
+
+const store = useStore()
+</script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
index b4ef01d825..190bc943cb 100644
--- a/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
+++ b/app/javascript/vue/tasks/field_occurrences/browse/components/Panel/PanelIdentifier.vue
@@ -8,40 +8,16 @@
 </template>
 
 <script setup>
-import { Identifier } from '@/routes/endpoints'
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import PanelContainer from './PanelContainer.vue'
 import TableAttributes from '@/tasks/collection_objects/browse/components/Table/TableAttributes.vue'
+import useIdentifierStore from '../../store/identifiers.js'
 
-const props = defineProps({
-  objectId: {
-    type: [Number, undefined],
-    required: true
-  },
+const store = useIdentifierStore()
 
-  objectType: {
-    type: [String, undefined],
-    required: true
-  }
+const identifiers = computed(() => {
+  return Object.fromEntries(
+    store.identifiers.map((item) => [item.identifier, item.type])
+  )
 })
-
-const identifiers = ref([])
-
-watch(
-  () => props.objectId,
-  (id) => {
-    identifiers.value = []
-
-    if (id) {
-      Identifier.where({
-        identifier_object_id: props.objectId,
-        identifier_object_type: props.objectType
-      })
-        .then(({ body }) => {
-          identifiers.value = body
-        })
-        .catch(() => {})
-    }
-  }
-)
 </script>
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/biologicalAssociations.js b/app/javascript/vue/tasks/field_occurrences/browse/store/biologicalAssociations.js
new file mode 100644
index 0000000000..06d27a4f0a
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/biologicalAssociations.js
@@ -0,0 +1,21 @@
+import { BiologicalAssociation } from '@/routes/endpoints'
+import { defineStore } from 'pinia'
+
+export default defineStore('biologicalAssociations', {
+  state: () => ({
+    biologicalAssociations: []
+  }),
+
+  actions: {
+    async load({ objectId, objectType }) {
+      return BiologicalAssociation.where({
+        biological_association_subject_id: [objectId],
+        biological_association_subject_type: [objectType]
+      })
+        .then(({ body }) => {
+          this.biologicalAssociations = body
+        })
+        .catch(() => {})
+    }
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/determinations.js b/app/javascript/vue/tasks/field_occurrences/browse/store/determinations.js
new file mode 100644
index 0000000000..f2451de61c
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/determinations.js
@@ -0,0 +1,21 @@
+import { TaxonDetermination } from '@/routes/endpoints'
+import { defineStore } from 'pinia'
+
+export default defineStore('determinations', {
+  state: () => ({
+    determinations: []
+  }),
+
+  actions: {
+    async load({ objectId, objectType }) {
+      return TaxonDetermination.where({
+        taxon_determination_object_id: [objectId],
+        taxon_determination_object_type: [objectType]
+      })
+        .then(({ body }) => {
+          this.determinations = body
+        })
+        .catch(() => {})
+    }
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/browse/store/identifiers.js b/app/javascript/vue/tasks/field_occurrences/browse/store/identifiers.js
new file mode 100644
index 0000000000..509386d237
--- /dev/null
+++ b/app/javascript/vue/tasks/field_occurrences/browse/store/identifiers.js
@@ -0,0 +1,21 @@
+import { Identifier } from '@/routes/endpoints'
+import { defineStore } from 'pinia'
+
+export default defineStore('identifiers', {
+  state: () => ({
+    identifiers: []
+  }),
+
+  actions: {
+    async load({ objectId, objectType }) {
+      return Identifier.where({
+        identifier_object_id: [objectId],
+        identifier_object_type: [objectType]
+      })
+        .then(({ body }) => {
+          this.identifiers.push(...body)
+        })
+        .catch(() => {})
+    }
+  }
+})
diff --git a/app/javascript/vue/tasks/field_occurrences/new/App.vue b/app/javascript/vue/tasks/field_occurrences/new/App.vue
index 73499c7211..841c52f83e 100644
--- a/app/javascript/vue/tasks/field_occurrences/new/App.vue
+++ b/app/javascript/vue/tasks/field_occurrences/new/App.vue
@@ -10,7 +10,6 @@
         <BiocurationForm />
         <VDepiction />
         <CitationForm />
-        <IdentifierForm />
       </div>
 
       <CollectingEventForm class="right-column" />
@@ -23,7 +22,6 @@ import TaxonDeterminationForm from './components/TaxonDeterminationForm.vue'
 import FieldOccurrenceForm from './components/FieldOccurenceForm/FieldOccurrenceForm.vue'
 import HeaderBar from './components/HeaderBar.vue'
 import CollectingEventForm from './components/CollectingEventForm.vue'
-import IdentifierForm from './components/FieldOccurenceForm/Identifier/IdentifierForm.vue'
 import CitationForm from './components/CitationForm.vue'
 import BiocurationForm from './components/BiocurationForm.vue'
 import BiologicalAssociation from './components/BiologicalAssociation.vue'
diff --git a/app/javascript/vue/tasks/field_occurrences/new/components/HeaderBar.vue b/app/javascript/vue/tasks/field_occurrences/new/components/HeaderBar.vue
index 1fe7930023..1b44e02e83 100644
--- a/app/javascript/vue/tasks/field_occurrences/new/components/HeaderBar.vue
+++ b/app/javascript/vue/tasks/field_occurrences/new/components/HeaderBar.vue
@@ -148,14 +148,20 @@ async function save() {
       biologicalAssociationStore.save(args)
     ]
 
-    return Promise.all(requests).then(() => {
-      settings.isSaving = false
-      TW.workbench.alert.create(
-        'Field occurrence was successfully saved.',
-        'notice'
-      )
-    })
-  } catch {}
+    return Promise.all(requests)
+      .then(() => {
+        TW.workbench.alert.create(
+          'Field occurrence was successfully saved.',
+          'notice'
+        )
+      })
+      .catch(() => {})
+      .finally(() => {
+        settings.isSaving = false
+      })
+  } catch {
+    settings.isSaving = false
+  }
 }
 
 function reset() {
diff --git a/app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js b/app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js
index 791bd2044b..e00598e5e7 100644
--- a/app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js
+++ b/app/javascript/vue/tasks/field_occurrences/new/store/fieldOccurrence.js
@@ -36,9 +36,11 @@ export default defineStore('fieldOccurrences', {
         ? FieldOccurrence.update(this.fieldOccurrence.id, payload)
         : FieldOccurrence.create(payload)
 
-      request.then(({ body }) => {
-        this.fieldOccurrence = body
-      })
+      request
+        .then(({ body }) => {
+          this.fieldOccurrence = body
+        })
+        .catch(() => {})
 
       return request
     }
diff --git a/app/models/field_occurrence.rb b/app/models/field_occurrence.rb
index bd2edf315b..c3943b5393 100644
--- a/app/models/field_occurrence.rb
+++ b/app/models/field_occurrence.rb
@@ -43,6 +43,8 @@ class FieldOccurrence < ApplicationRecord
   include Shared::BiologicalExtensions
   include Shared::IsDwcOccurrence
 
+  GRAPH_ENTRY_POINTS = [:biological_associations, :taxon_determinations, :biocuration_classifications, :collecting_event]
+
   is_origin_for 'Specimen', 'Lot', 'Extract', 'AssertedDistribution', 'Sequence'
 
   belongs_to :collecting_event, inverse_of: :field_occurrences
diff --git a/config/interface/hub/user_tasks.yml b/config/interface/hub/user_tasks.yml
index fa6fd2d667..71700be552 100644
--- a/config/interface/hub/user_tasks.yml
+++ b/config/interface/hub/user_tasks.yml
@@ -1006,7 +1006,7 @@ summarize_projects_controlled_vocabulary_terms_task:
   categories:
   status: prototype
   description: 'Visualize controlled vocabulary terms across the projects you are a member of.'
-field_occurrence_browse_task:
+browse_field_occurrence_task:
   hub: true
   name: 'Browse field occurrences'
   related:
diff --git a/config/interface/object_radials.yml b/config/interface/object_radials.yml
index 6af4f25ed5..5b18e41bf1 100644
--- a/config/interface/object_radials.yml
+++ b/config/interface/object_radials.yml
@@ -105,6 +105,7 @@ Extract:
     recent: true
 FieldOccurrence:
   tasks:
+    - browse_field_occurrence_task
     - new_field_occurrence_task
     - unify_objects_task
   edit: new_field_occurrence_task
diff --git a/config/routes/tasks.rb b/config/routes/tasks.rb
index 45a5515d36..263dca37c8 100644
--- a/config/routes/tasks.rb
+++ b/config/routes/tasks.rb
@@ -112,7 +112,7 @@
 
   scope :field_occurrences do
     scope :browse, controller: 'tasks/field_occurrences/browse' do
-      get '/', as: 'field_occurrence_browse_task', action: :index
+      get '/', as: 'browse_field_occurrence_task', action: :index
     end
 
     scope :new_field_occurrences, controller: 'tasks/field_occurrences/new_field_occurrences' do