Styling updated

src/app/features/cases/components/organisms/CaseDetail/CaseDetail.tsx

@@ -8,7 +8,7 @@ import Logbook from "./sections/Logbook"
 import Residence from "./sections/Residence"
 import Permits from "./sections/Permits"
 import ResidentsView from "./sections/ResidentsView"
-import Status from "./sections/Status"
+import History from "./sections/History"
 import VacationRentalThisYear from "./sections/VacationRentalThisYear"
 
 type Props = {
@@ -45,7 +45,7 @@ const CaseDetail: FC<Props> = ({ caseId }) => {
       <Permits caseId={ caseId } />
       <VacationRentalThisYear caseId={ caseId } />
       <Logbook caseId={ caseId } />
-      <Status caseId={ caseId } />
+      <History caseId={ caseId } />
     </Article>
   )
 }

src/app/features/cases/components/organisms/CaseDetail/sections/Status.tsx → src/app/features/cases/components/organisms/CaseDetail/sections/History.tsx

@@ -6,11 +6,11 @@ type Props = {
   caseId: string
 }
 
-const Status: React.FC<Props> = ({ caseId }) => {
+const History: React.FC<Props> = ({ caseId }) => {
   const { data } = useCaseEvents(caseId)
 
   return (
-    <CaseDetailSection title="Status" dataSource="AZA">
+    <CaseDetailSection title="Zaakhistorie" dataSource="AZA">
       { data !== undefined &&
         <EventsTimeline
           events={ data as CaseEvent[] }
@@ -22,4 +22,4 @@ const Status: React.FC<Props> = ({ caseId }) => {
   )
 }
 
-export default Status
+export default History

src/app/features/cases/components/organisms/CaseDetail/sections/Logbook.tsx

@@ -149,7 +149,7 @@ const Logbook: React.FC<Props> = ({ caseId }) => {
       .map(mapLogbookItemToDetailComponents(observations?.results!, suggestNextVisits?.results!))
       .flat()
 
-    return details.length ? details : [ "Geen notities." ]
+    return details.length ? details : [ "Geen notities" ]
   }, [ caseData, caseVisitsData, users, observations, suggestNextVisits ])
 
   return (

src/app/features/cases/components/organisms/CaseDetail/sections/Owner.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+import { BrkData, BrkDataError, Case } from "app/features/types"
+
+const Ul = styled.ul`
+	list-style-position: inside;
+	padding-left: 0;
+`
+
+type Props = {
+  caseData: Case
+}
+
+const Owner: FC<Props> = ({ caseData: { brk_data } }) => {
+	const hasBrkError = (brk_data as BrkDataError).error
+	// An error has occurred!
+	if (hasBrkError) {
+		return <>BRK-gegevens kunnen momenteel niet worden opgehaald.</>
+	}
+
+	const brkData = brk_data as BrkData
+
+	if (brkData.results.length) {
+		const rechten = brkData.results.map(result => (
+			<span key={ result.id }>
+				{ result?.cultuurcode_bebouwd?.omschrijving && (
+					<b>{ result?.cultuurcode_bebouwd?.omschrijving }</b>
+				)}
+				<Ul>{ result?.rechten?.map(recht => <li key={ recht.id } >{ recht._display }</li>) }</Ul>
+			</span>
+		))
+		return (
+			<span className="anonymous">
+					{ rechten }
+			</span>
+		)
+	}
+	// BRK is empty and that shouldn't be possible.
+	return <>Er zijn geen BRK-gegevens gevonden.</>
+}
+
+export default Owner

src/app/features/cases/components/organisms/CaseDetail/sections/Residence.tsx

@@ -4,8 +4,9 @@ import { useCase } from "app/state/rest"
 import { BagData, BagDataError } from "app/features/types"
 import MailtoAnchor from "app/features/cases/components/molecules/MailtoAnchor/MailtoAnchor"
 
-import { getAddress, getBagId, getEigenaar } from "../utils"
+import { getAddress, getBagId } from "../utils"
 import CaseDetailSection from "../CaseDetailSection"
+import Owner from "./Owner"
 
 type Props = {
   caseId: string
@@ -42,7 +43,6 @@ const Residence: FC<Props> = ({ caseId }) => {
 
   // General
   const address = getAddress(caseData.address)
-  const eigenaar = getEigenaar(caseData)
   const postalCode = caseData.address.postal_code
 
   // Terugmeld email
@@ -61,11 +61,9 @@ const Residence: FC<Props> = ({ caseId }) => {
     woonbootAanduiding={ woonbootAanduiding }
   />
 
-  const ownerField = [ "Eigenaar", <span className="anonymous">{ eigenaar }</span> ]
-
   const woningFields = [
     [ "Databron", "BRK" ],
-    ownerField,
+    <Owner caseData={ caseData } />,
     [ "Databron", "BAG" ],
     [ "Gebruiksdoel", woningBestemming ],
     [ "Soort object (feitelijk gebruik)", woningGebruik ],
@@ -80,7 +78,7 @@ const Residence: FC<Props> = ({ caseId }) => {
     [ "Status", woonbootStatus || "–" ],
     [ "Indicatie geconstateerd", woonbootIndicatie ],
     [ "Aanduiding in onderzoek", woonbootAanduiding ],
-    ownerField,
+    <Owner caseData={ caseData } />,
     mailtoAnchor
   ]
 

src/app/features/cases/components/organisms/CaseDetail/utils.tsx → src/app/features/cases/components/organisms/CaseDetail/utils.ts

@@ -1,4 +1,4 @@
-import { BagData, BagDataError, BrkData, BrkDataError, Case, Address } from "app/features/types"
+import { BagData, BagDataError, Case, Address } from "app/features/types"
 import displayAddress from "app/features/shared/utils/displayAddress"
 
 export const getAddress = (address: Address) => displayAddress(address.street_name, address.number, address.suffix_letter || undefined, address.suffix || undefined)
@@ -10,29 +10,6 @@ export const getBagId = (caseData: Case) => {
   return hasBagData ? (bagData.verblijfsobjectidentificatie ?? bagData.ligplaatsidentificatie) : undefined
 }
 
-export const getEigenaar = (caseData: Case) => {
-  const hasBrkData = (caseData.brk_data as BrkDataError).error === undefined
-
-  if (!hasBrkData) {
-    return undefined
-  }
-
-  const brkData = caseData.brk_data as BrkData
-
-  if (brkData.results.length) {
-    const rechten = brkData.results.map(result => (
-      <>
-        { result?.cultuurcode_bebouwd?.omschrijving && (
-          <b>{ result?.cultuurcode_bebouwd?.omschrijving }</b>
-        )}
-        <ul>{result?.rechten?.map(recht => <li>{ recht._display}</li>)}</ul>
-      </>
-    ))
-    return rechten
-  }
-  return undefined
-}
-
 export const isNullish = (a: any): a is undefined | null => a === undefined || a === null || a === ""
 
 const logbookTranslationsMap: Record<string, string> = {

src/app/features/types.ts

@@ -31,10 +31,12 @@ export type BagDataError = {
 
 export type BrkData = {
   results: {
+    id: string
     cultuurcode_bebouwd?: {
       omschrijving?: string
     }
     rechten?: {
+      id: string
       _display: string
     }[]
   }[]