Rename referenceselection to StagingView and add some fields

frontend/src/backendTypes.d.ts

@@ -1,7 +1,7 @@
 import * as Prisma from '../../backend/node_modules/@prisma/client/default'
 
 export type RowState = 'new' | 'removed' | 'cancelled' | 'clean'
-
+export type UpdateComment = { update_comment: string }
 // Use this for fields that include array that has to be edited by EditableTable.
 // For example see LocalityDetails: museums field
 export type Editable<T> = T & { rowState?: RowState }
@@ -23,7 +23,7 @@ export type LocalityDetails = Omit<Prisma.now_loc, 'now_mus'> & { museums: Array
   now_ss: Editable<SedimentaryStructure>[]
 } & {
   now_coll_meth: Editable<CollectingMethod>[]
-} & { now_lau: Array<Editable<LocalityUpdate>> }
+} & { now_lau: Array<Editable<LocalityUpdate>> } & UpdateComment
 
 export type Locality = {
   lid: number

frontend/src/components/DetailView/DetailView.tsx

@@ -6,7 +6,7 @@ import { DetailContextProvider, ModeType } from './Context/DetailContext'
 import { cloneDeep } from 'lodash-es'
 import { DropdownOption, DropdownSelector, EditableTextField, RadioSelector } from './common/editingComponents'
 import { DetailBrowser } from './DetailBrowser'
-import { ReferenceSelection } from './ReferenceSelection'
+import { StagingView } from './StagingView'
 import { ReturnButton, WriteButton } from './components'
 
 export type TabType = {
@@ -84,7 +84,7 @@ export const DetailView = <T extends object>({
   const refSelectionView = (
     <Paper {...paperProps}>
       <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: '1em' }}>
-        <ReferenceSelection />
+        <StagingView />
       </Box>
     </Paper>
   )
@@ -120,7 +120,7 @@ export const DetailView = <T extends object>({
               </Button>
             )}
             {mode !== 'read' && onWrite && (
-              <WriteButton onWrite={onWrite} text={refMode ? 'Complete and save' : 'Select reference'} />
+              <WriteButton onWrite={onWrite} text={refMode ? 'Complete and save' : 'Finalize entry'} />
             )}
           </Box>
           {!refMode && (

frontend/src/components/DetailView/ReferenceSelection.tsx

@@ -1,5 +0,0 @@
-import { Grouped } from './common/tabLayoutHelpers'
-
-export const ReferenceSelection = () => {
-  return <Grouped title="Reference for the new data">Selecting reference</Grouped>
-}

frontend/src/components/DetailView/StagingView.tsx

@@ -0,0 +1,14 @@
+import { LocalityDetails } from '@/backendTypes'
+import { ArrayFrame } from './common/tabLayoutHelpers'
+import { useDetailContext } from './hooks'
+
+export const StagingView = () => {
+  const { bigTextField } = useDetailContext<LocalityDetails>()
+  const array = [
+    ['Date', new Date().toLocaleDateString('en-CA')],
+    ['Editor', 'Users Name'],
+    ['Coordinator', 'Indre Zliobaite'],
+    ['Comment', bigTextField('update_comment')],
+  ]
+  return <ArrayFrame array={array} title="Reference for the new data" />
+}