Added Localities tab to the frontend

frontend/src/components/Reference/ReferenceDetails.tsx

@@ -2,6 +2,7 @@ import { useParams, useNavigate } from 'react-router-dom'
 import { CircularProgress } from '@mui/material'
 import { DetailView, TabType } from '../DetailView/DetailView'
 import { ReferenceTab } from './Tabs/ReferenceTab'
+import { LocalityTab } from './Tabs/LocalityTab'
 import {
   useEditReferenceMutation,
   useGetReferenceDetailsQuery,
@@ -60,6 +61,10 @@ export const ReferenceDetails = () => {
       title: 'Reference',
       content: <ReferenceTab />,
     },
+    {
+      title: 'Localities',
+      content: <LocalityTab />,
+    },
   ]
 
   return (

frontend/src/components/Reference/Tabs/LocalityTab.tsx

@@ -0,0 +1,34 @@
+import { ReferenceDetailsType } from '@/shared/types'
+import { useGetReferenceLocalitiesQuery } from '@/redux/referenceReducer'
+import { CircularProgress } from '@mui/material'
+import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
+import { SimpleTable } from '@/components/DetailView/common/SimpleTable'
+
+export const LocalityTab = () => {
+  const { data } = useDetailContext<ReferenceDetailsType>()
+  const { data: localitiesData, isError } = useGetReferenceLocalitiesQuery(encodeURIComponent(data.rid))
+
+  if (isError) return 'Error loading Localities.'
+  if (!localitiesData) return <CircularProgress />
+
+  const columns = [
+    {
+      accessorKey: 'loc_name',
+      header: 'Locality',
+    },
+    {
+      accessorKey: 'country',
+      header: 'Country',
+    },
+    {
+      accessorKey: 'max_age',
+      header: 'Max Age',
+    },
+    {
+      accessorKey: 'min_age',
+      header: 'Min Age',
+    },
+  ]
+
+  return <SimpleTable columns={columns} data={localitiesData} idFieldName="lid" url="locality" />
+}