From 9a2efd7ebd9b819d3c6487b5b0bb663345b0d8c4 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 13 Nov 2024 13:58:06 +0100
Subject: [PATCH 1/3] Added personen and organisaties widgets

---
 lib/AppInfo/Application.php                 |   4 +
 lib/Dashboard/OrganisatiesWidget.php        |  69 ++++++++++
 lib/Dashboard/PersonenWidget.php            |  69 ++++++++++
 package-lock.json                           |   2 +-
 package.json                                |   3 +-
 src/entities/klanten/klanten.mock.ts        |   1 +
 src/entities/klanten/klanten.ts             |   4 +-
 src/entities/klanten/klanten.types.ts       |   3 +
 src/modals/klanten/EditKlant.vue            |  24 +++-
 src/organisatiesWidget.js                   |  10 ++
 src/personenWidget.js                       |  10 ++
 src/store/modules/klanten.js                |  53 ++++++++
 src/views/klanten/KlantenList.vue           |  28 +++-
 src/views/widgets/ContactMomentenWidget.vue |   5 +-
 src/views/widgets/OpenZakenWidget.vue       |   5 +-
 src/views/widgets/OrganisatiesWidget.vue    | 135 +++++++++++++++++++
 src/views/widgets/PersonenWidget.vue        | 137 ++++++++++++++++++++
 src/views/widgets/TakenWidget.vue           |   5 +-
 src/views/widgets/ZakenWidget.vue           |  12 +-
 webpack.config.js                           |   8 ++
 20 files changed, 570 insertions(+), 17 deletions(-)
 create mode 100644 lib/Dashboard/OrganisatiesWidget.php
 create mode 100644 lib/Dashboard/PersonenWidget.php
 create mode 100644 src/organisatiesWidget.js
 create mode 100644 src/personenWidget.js
 create mode 100644 src/views/widgets/OrganisatiesWidget.vue
 create mode 100644 src/views/widgets/PersonenWidget.vue

diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index d7857d7..dfe6f4f 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -10,6 +10,8 @@
 use OCA\ZaakAfhandelApp\Dashboard\TakenWidget;
 use OCA\ZaakAfhandelApp\Dashboard\OpenZakenWidget;
 use OCA\ZaakAfhandelApp\Dashboard\ContactmomentenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\PersonenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\OrganisatiesWidget;
 
 /**
  * Class Application
@@ -36,6 +38,8 @@ public function register(IRegistrationContext $context): void
 		$context->registerDashboardWidget(TakenWidget::class);
 		$context->registerDashboardWidget(OpenZakenWidget::class);
 		$context->registerDashboardWidget(ContactmomentenWidget::class);
+		$context->registerDashboardWidget(PersonenWidget::class);
+		$context->registerDashboardWidget(OrganisatiesWidget::class);
 	}
 
 	public function boot(IBootContext $context): void
diff --git a/lib/Dashboard/OrganisatiesWidget.php b/lib/Dashboard/OrganisatiesWidget.php
new file mode 100644
index 0000000..4ca9e72
--- /dev/null
+++ b/lib/Dashboard/OrganisatiesWidget.php
@@ -0,0 +1,69 @@
+<?php
+
+
+namespace OCA\ZaakAfhandelApp\Dashboard;
+
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Util;
+
+use OCA\ZaakAfhandelApp\AppInfo\Application;
+
+class OrganisatiesWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_organisaties_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Organisaties zoeken');
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getOrder(): int
+    {
+        return 10;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getIconClass(): string
+    {
+        return 'icon-zaken-widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getUrl(): ?string
+    {
+        return null;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function load(): void
+    {
+        Util::addScript(Application::APP_ID, Application::APP_ID . '-organisatiesWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}
diff --git a/lib/Dashboard/PersonenWidget.php b/lib/Dashboard/PersonenWidget.php
new file mode 100644
index 0000000..2b9ffcb
--- /dev/null
+++ b/lib/Dashboard/PersonenWidget.php
@@ -0,0 +1,69 @@
+<?php
+
+
+namespace OCA\ZaakAfhandelApp\Dashboard;
+
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
+use OCP\IURLGenerator;
+use OCP\Util;
+
+use OCA\ZaakAfhandelApp\AppInfo\Application;
+
+class PersonenWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_personen_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Personen zoeken');
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getOrder(): int
+    {
+        return 10;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getIconClass(): string
+    {
+        return 'icon-zaken-widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getUrl(): ?string
+    {
+        return null;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function load(): void
+    {
+        Util::addScript(Application::APP_ID, Application::APP_ID . '-personenWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index b0938d8..6159537 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
                 "@nextcloud/router": "^2.0.1",
                 "@nextcloud/vue": "^8.12.0",
                 "bootstrap-vue": "^2.23.1",
+                "lodash": "^4.17.21",
                 "pinia": "^2.2.4",
                 "vue": "^2.7.14",
                 "vue-loading-overlay": "^3.4.3",
@@ -15261,7 +15262,6 @@
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/lodash.debounce": {
diff --git a/package.json b/package.json
index ce027b2..88ee6e6 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "@nextcloud/router": "^2.0.1",
         "@nextcloud/vue": "^8.12.0",
         "bootstrap-vue": "^2.23.1",
+        "lodash": "^4.17.21",
         "pinia": "^2.2.4",
         "vue": "^2.7.14",
         "vue-loading-overlay": "^3.4.3",
@@ -53,4 +54,4 @@
         "typescript": "^5.5.4",
         "vue-jest": "^3.0.7"
     }
-}
\ No newline at end of file
+}
diff --git a/src/entities/klanten/klanten.mock.ts b/src/entities/klanten/klanten.mock.ts
index f9fffe7..b48e1eb 100644
--- a/src/entities/klanten/klanten.mock.ts
+++ b/src/entities/klanten/klanten.mock.ts
@@ -4,6 +4,7 @@ import { TKlant } from './klanten.types'
 export const mockKlantData = (): TKlant[] => [
 	{
 		id: '15551d6f-44e3-43f3-a9d2-59e583c91eb0',
+		type: 'persoon',
 		voornaam: 'John',
 		tussenvoegsel: 'de',
 		achternaam: 'Doe',
diff --git a/src/entities/klanten/klanten.ts b/src/entities/klanten/klanten.ts
index cbc95ad..ef71d14 100644
--- a/src/entities/klanten/klanten.ts
+++ b/src/entities/klanten/klanten.ts
@@ -1,9 +1,10 @@
 import { SafeParseReturnType, z } from 'zod'
-import { TKlant } from './klanten.types'
+import { TKlant, TKlantType } from './klanten.types'
 
 export class Klant implements TKlant {
 
 	public id: string
+	public type: TKlantType
 	public voornaam: string
 	public tussenvoegsel: string
 	public achternaam: string
@@ -22,6 +23,7 @@ export class Klant implements TKlant {
 
 	constructor(source: TKlant) {
 		this.id = source.id || ''
+		this.type = source.type || 'persoon'
 		this.voornaam = source.voornaam || ''
 		this.tussenvoegsel = source.tussenvoegsel || ''
 		this.achternaam = source.achternaam || ''
diff --git a/src/entities/klanten/klanten.types.ts b/src/entities/klanten/klanten.types.ts
index 68b00ce..5f21bac 100644
--- a/src/entities/klanten/klanten.types.ts
+++ b/src/entities/klanten/klanten.types.ts
@@ -1,5 +1,8 @@
+export type TKlantType = 'persoon' | 'organisatie'
+
 export type TKlant = {
     id: string;
+    type: TKlantType;
     voornaam: string;
     tussenvoegsel: string;
     achternaam: string;
diff --git a/src/modals/klanten/EditKlant.vue b/src/modals/klanten/EditKlant.vue
index 8be256a..e7c2cdd 100644
--- a/src/modals/klanten/EditKlant.vue
+++ b/src/modals/klanten/EditKlant.vue
@@ -15,6 +15,13 @@ import { klantStore, navigationStore } from '../../store/store.js'
 		</NcNoteCard>
 
 		<div v-if="!success" class="form-group">
+			<NcSelect
+				v-bind="typeOptions"
+				v-model="klantItem.type"
+				:disabled="loading"
+				input-label="Type klant"
+				required />
+
 			<NcTextField :disabled="loading"
 				label="Voornaam"
 				maxlength="255"
@@ -105,7 +112,7 @@ import { klantStore, navigationStore } from '../../store/store.js'
 				Help
 			</NcButton>
 			<NcButton v-if="!success"
-				:disabled="loading"
+				:disabled="loading || !klantItem.type"
 				type="primary"
 				@click="editKlant()">
 				<template #icon>
@@ -126,6 +133,7 @@ import {
 	NcTextField,
 	NcLoadingIcon,
 	NcNoteCard,
+	NcSelect,
 } from '@nextcloud/vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
@@ -140,6 +148,7 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
+		NcSelect,
 		// Icons
 		ContentSaveOutline,
 		Cancel,
@@ -154,6 +163,7 @@ export default {
 			hasUpdated: false,
 			klantItem: {
 				voornaam: '',
+				type: 'persoon',
 				tussenvoegsel: '',
 				achternaam: '',
 				telefoonnummer: '',
@@ -169,14 +179,24 @@ export default {
 				subjectIdentificatie: '',
 				subjectType: '',
 			},
+			typeOptions: {
+				options: [
+					{ value: 'persoon', label: 'Persoon' },
+					{ value: 'organisatie', label: 'Organisatie' },
+				],
+			},
 		}
 	},
 	updated() {
 		if (navigationStore.modal === 'editKlant' && !this.hasUpdated) {
+
+			const klantType = this.typeOptions.options.find((option) => option.value === klantStore.klantItem.type)
+
 			if (klantStore.klantItem?.id) {
 				this.klantItem = {
 					...klantStore.klantItem,
 					voornaam: klantStore.klantItem.voornaam || '',
+					type: klantType || { value: 'persoon', label: 'Persoon' },
 					tussenvoegsel: klantStore.klantItem.tussenvoegsel || '',
 					achternaam: klantStore.klantItem.achternaam || '',
 					telefoonnummer: klantStore.klantItem.telefoonnummer || '',
@@ -205,6 +225,7 @@ export default {
 			this.hasUpdated = false
 			this.klantItem = {
 				voornaam: '',
+				type: { value: 'persoon', label: 'Persoon' },
 				tussenvoegsel: '',
 				achternaam: '',
 				telefoonnummer: '',
@@ -226,6 +247,7 @@ export default {
 			try {
 				await klantStore.saveKlant({
 					...this.klantItem,
+					type: this.klantItem.type.value,
 				})
 				this.success = true
 				this.loading = false
diff --git a/src/organisatiesWidget.js b/src/organisatiesWidget.js
new file mode 100644
index 0000000..81e30fb
--- /dev/null
+++ b/src/organisatiesWidget.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import OrganisatiesWidget from './views/widgets/OrganisatiesWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_organisaties_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(OrganisatiesWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})
diff --git a/src/personenWidget.js b/src/personenWidget.js
new file mode 100644
index 0000000..a606299
--- /dev/null
+++ b/src/personenWidget.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import PersonenWidget from './views/widgets/PersonenWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_personen_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(PersonenWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})
diff --git a/src/store/modules/klanten.js b/src/store/modules/klanten.js
index 674a22a..ce929dd 100644
--- a/src/store/modules/klanten.js
+++ b/src/store/modules/klanten.js
@@ -48,6 +48,59 @@ export const useKlantStore = defineStore('klanten', {
 
 			return { response, data, entities }
 		},
+
+		async searchPersons(search = null) {
+			let endpoint = apiEndpoint
+
+			endpoint = endpoint + '?type=persoon'
+
+			if (search !== null && search !== '') {
+				endpoint = endpoint + '&voornaam=' + search
+			}
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results
+			const entities = data.map((klantItem) => new Klant(klantItem))
+
+			this.setKlantenList(data)
+
+			return { response, data, entities }
+		},
+
+		async searchOrganisations(search = null) {
+			let endpoint = apiEndpoint
+
+			endpoint = endpoint + '?type=organisatie'
+
+			if (search !== null && search !== '') {
+				endpoint = endpoint + '&bedrijfsnaam=' + search
+			}
+
+			const response = await fetch(endpoint, {
+				method: 'GET',
+			})
+
+			if (!response.ok) {
+				console.log(response)
+				throw new Error(`HTTP error! status: ${response.status}`)
+			}
+
+			const data = (await response.json()).results
+			const entities = data.map((klantItem) => new Klant(klantItem))
+
+			this.setKlantenList(data)
+
+			return { response, data, entities }
+		},
+
 		// New function to get a single klant
 		async getKlant(id) {
 			const endpoint = `${apiEndpoint}/${id}`
diff --git a/src/views/klanten/KlantenList.vue b/src/views/klanten/KlantenList.vue
index fb91398..406db5a 100644
--- a/src/views/klanten/KlantenList.vue
+++ b/src/views/klanten/KlantenList.vue
@@ -33,11 +33,10 @@ import { navigationStore, klantStore } from '../../store/store.js'
 			<div v-if="klantStore.klantenList?.length && !loading">
 				<NcListItem v-for="(klant, i) in klantStore.klantenList"
 					:key="`${klant}${i}`"
-					:name="klant.voornaam || 'onbekend'"
-					:active="klantStore.klantItem.id === klant?.id"
+					:name="getName(klant)"
+					:active="klantStore.klantItem?.id === klant?.id"
 					:force-display-actions="true"
-					:details="'Persoon'"
-					:counter-number="Math.floor(Math.random() * 101)"
+					:details="_.upperFirst(klant.type)"
 					@click="klantStore.setKlantItem(klant)">
 					<template #icon>
 						<AccountOutline :class="klantStore.klantItem === klant.id && 'selectedZaakIcon'"
@@ -45,7 +44,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 							:size="44" />
 					</template>
 					<template #subname>
-						{{ klant?.voorvoegsel ? `${klant.voorvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend' }}
+						{{ getSubname(klant) }}
 					</template>
 					<template #actions>
 						<NcActionButton @click="klantStore.setKlantItem(klant); navigationStore.setModal('editKlant')">
@@ -73,6 +72,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 <script>
 // Components
 import { NcListItem, NcActionButton, NcAppContentList, NcTextField, NcLoadingIcon, NcActions } from '@nextcloud/vue'
+import _ from 'lodash'
 
 // Icons
 import Magnify from 'vue-material-design-icons/Magnify.vue'
@@ -118,6 +118,24 @@ export default {
 			}
 			return name
 		},
+		getName(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.voornaam ?? 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.bedrijfsnaam ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
+		getSubname(klant) {
+			if (klant.type === 'persoon') {
+				return klant?.voorvoegsel ? `${klant.voorvoegsel} ${klant.achternaam}` : klant?.achternaam ? `${klant.achternaam}` : 'onbekend'
+			}
+			if (klant.type === 'organisatie') {
+				return klant?.websiteUrl ?? 'onbekend'
+			}
+			return 'onbekend'
+		},
 		deleteKlant() {
 			fetch(
 				`/index.php/apps/zaakafhandelapp/api/klanten/${klantStore.klantItem.id}`,
diff --git a/src/views/widgets/ContactMomentenWidget.vue b/src/views/widgets/ContactMomentenWidget.vue
index 71ad00f..9be9dc5 100644
--- a/src/views/widgets/ContactMomentenWidget.vue
+++ b/src/views/widgets/ContactMomentenWidget.vue
@@ -9,7 +9,7 @@ import { berichtStore, navigationStore } from '../../store/store.js'
 				:loading="loading"
 				@show="onShow">
 				<template #empty-content>
-					<NcEmptyContent :title="t('Geen contact momenten')">
+					<NcEmptyContent name="Geen contact momenten gevonden">
 						<template #icon>
 							<ChatOutline />
 						</template>
@@ -98,7 +98,7 @@ export default {
 
 }
 </script>
-<style>
+<style scoped>
 .contactmomentenContainer{
     display: flex;
     justify-content: space-between;
@@ -107,5 +107,6 @@ export default {
 }
 .itemContainer{
 	overflow: auto;
+	margin-block-end: var(--zaa-margin-10);
  }
 </style>
diff --git a/src/views/widgets/OpenZakenWidget.vue b/src/views/widgets/OpenZakenWidget.vue
index 60b2430..a9ba93b 100644
--- a/src/views/widgets/OpenZakenWidget.vue
+++ b/src/views/widgets/OpenZakenWidget.vue
@@ -9,7 +9,7 @@ import { zaakStore } from '../../store/store.js'
 				:loading="loading"
 				@show="onShow">
 				<template #empty-content>
-					<NcEmptyContent :title="t('Geen open zaken')">
+					<NcEmptyContent name="Geen open zaken">
 						<template #icon>
 							<Folder />
 						</template>
@@ -84,7 +84,7 @@ export default {
 
 }
 </script>
-<style>
+<style scoped>
 .openZakenContainer{
     display: flex;
     justify-content: space-between;
@@ -93,5 +93,6 @@ export default {
 }
 .itemContainer{
    overflow: auto;
+   margin-block-end: var(--zaa-margin-10);
 }
 </style>
diff --git a/src/views/widgets/OrganisatiesWidget.vue b/src/views/widgets/OrganisatiesWidget.vue
new file mode 100644
index 0000000..650871d
--- /dev/null
+++ b/src/views/widgets/OrganisatiesWidget.vue
@@ -0,0 +1,135 @@
+<script setup>
+import { klantStore } from '../../store/store.js'
+</script>
+
+<template>
+	<div class="openZakenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				@show="onShow">
+				<template #empty-content>
+					<NcEmptyContent name="Geen organisaties gevonden">
+						<template #icon>
+							<OfficeBuildingOutline />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+
+		<div class="searchContainer">
+			<NcTextField :disabled="loading"
+				label="Zoeken op bedrijfsnaam"
+				maxlength="255"
+				class="searchField"
+				:value.sync="searchOrganisatie" />
+
+			<NcButton type="primary"
+				:disabled="loading"
+				class="searchButton"
+				@click="search">
+				<template #icon>
+					<Search :size="20" />
+				</template>
+				Zoeken
+			</NcButton>
+		</div>
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextcloud/vue'
+import Search from 'vue-material-design-icons/Magnify.vue'
+import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
+
+export default {
+	name: 'OrganisatiesWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		Search,
+		NcTextField,
+	},
+
+	data() {
+		return {
+			loading: false,
+			organisatieItems: [],
+			searchOrganisatie: '',
+		}
+	},
+
+	computed: {
+		items() {
+			return this.organisatieItems
+		},
+	},
+
+	mounted() {
+		this.fetchOrganisatieItems()
+	},
+
+	methods: {
+		fetchOrganisatieItems() {
+			this.loading = true
+			klantStore.searchOrganisations()
+				.then(() => {
+					this.organisatieItems = klantStore.klantenList.map(organisatie => ({
+						id: organisatie.id,
+						mainText: organisatie.bedrijfsnaam,
+						subText: organisatie.websiteUrl,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/office-building-outline.svg',
+					}))
+
+					this.loading = false
+				})
+		},
+		search() {
+			this.loading = true
+			klantStore.searchOrganisations(this.searchOrganisatie)
+				.then(() => {
+					this.organisatieItems = klantStore.klantenList.map(organisatie => ({
+						id: organisatie.id,
+						mainText: organisatie.bedrijfsnaam,
+						subText: organisatie.websiteUrl,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/office-building-outline.svg',
+					}))
+					this.loading = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+		onShow() {
+			window.open('/apps/opencatalogi/catalogi', '_self')
+		},
+	},
+
+}
+</script>
+<style scoped>
+.openZakenContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+}
+.itemContainer{
+   overflow: auto;
+}
+.searchContainer {
+	display: flex;
+	align-items: end;
+	gap: 10px;
+}
+.searchField {
+	width: auto;
+}
+.searchButton {
+	min-width: min-content !important;
+}
+</style>
diff --git a/src/views/widgets/PersonenWidget.vue b/src/views/widgets/PersonenWidget.vue
new file mode 100644
index 0000000..8405814
--- /dev/null
+++ b/src/views/widgets/PersonenWidget.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { klantStore } from '../../store/store.js'
+</script>
+
+<template>
+	<div class="personenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				@show="onShow">
+				<template #empty-content>
+					<NcEmptyContent name="Geen personen gevonden">
+						<template #icon>
+							<AccountOutline />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+
+		<div class="searchContainer">
+			<NcTextField :disabled="loading"
+				label="Zoeken op voornaam"
+				maxlength="255"
+				class="searchField"
+				:value.sync="searchPerson" />
+
+			<NcButton type="primary"
+				:disabled="loading"
+				class="searchButton"
+				@click="search">
+				<template #icon>
+					<Search :size="20" />
+				</template>
+				Zoeken
+			</NcButton>
+		</div>
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextcloud/vue'
+import Search from 'vue-material-design-icons/Magnify.vue'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
+
+export default {
+	name: 'PersonenWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		Search,
+		NcTextField,
+		AccountOutline,
+	},
+
+	data() {
+		return {
+			loading: false,
+			isModalOpen: false,
+			personenItems: [],
+			searchPerson: '',
+		}
+	},
+
+	computed: {
+		items() {
+			return this.personenItems
+		},
+	},
+
+	mounted() {
+		this.fetchPersonenItems()
+	},
+
+	methods: {
+		fetchPersonenItems() {
+			this.loading = true
+			klantStore.searchPersons()
+				.then(() => {
+					this.personenItems = klantStore.klantenList.map(person => ({
+						id: person.id,
+						mainText: `${person.voornaam} ${person.achternaam}`,
+						subText: person.emailadres,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
+					}))
+					this.loading = false
+				})
+		},
+		search() {
+			this.loading = true
+			klantStore.searchPersons(this.searchPerson)
+				.then(() => {
+					this.personenItems = klantStore.klantenList.map(person => ({
+						id: person.id,
+						mainText: `${person.voornaam} ${person.achternaam}`,
+						subText: person.emailadres,
+						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
+					}))
+					this.loading = false
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		},
+		onShow() {
+			window.open('/apps/opencatalogi/catalogi', '_self')
+		},
+	},
+
+}
+</script>
+<style scoped>
+.personenContainer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+}
+.itemContainer {
+  overflow: auto;
+  margin-block-end: var(--zaa-margin-10);
+}
+.searchContainer {
+  display: flex;
+  align-items: end;
+  gap: 10px;
+}
+.searchField {
+  width: auto;
+}
+.searchButton {
+  min-width: min-content !important;
+}
+</style>
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
index 9147a41..1c1d8cb 100644
--- a/src/views/widgets/TakenWidget.vue
+++ b/src/views/widgets/TakenWidget.vue
@@ -9,7 +9,7 @@ import { taakStore } from '../../store/store.js'
 				:loading="loading"
 				@show="onShow">
 				<template #empty-content>
-					<NcEmptyContent :title="t('Geen open taken')">
+					<NcEmptyContent name="Geen open taken">
 						<template #icon>
 							<Folder />
 						</template>
@@ -85,7 +85,7 @@ export default {
 
 }
 </script>
-<style>
+<style scoped>
 .takenContainer{
     display: flex;
     justify-content: space-between;
@@ -94,5 +94,6 @@ export default {
 }
 .itemContainer{
 	overflow: auto;
+	margin-block-end: var(--zaa-margin-10);
  }
 </style>
diff --git a/src/views/widgets/ZakenWidget.vue b/src/views/widgets/ZakenWidget.vue
index bdc0fb2..7f8b8bf 100644
--- a/src/views/widgets/ZakenWidget.vue
+++ b/src/views/widgets/ZakenWidget.vue
@@ -9,7 +9,7 @@ import { zaakStore } from '../../store/store.js'
 				:loading="loading"
 				@show="onShow">
 				<template #empty-content>
-					<NcEmptyContent :title="t('Geen open zaken')">
+					<NcEmptyContent name="Geen open zaken">
 						<template #icon>
 							<Folder />
 						</template>
@@ -86,7 +86,7 @@ export default {
 
 }
 </script>
-<style>
+<style scoped>
 .zakenContainer{
     display: flex;
     justify-content: space-between;
@@ -95,5 +95,13 @@ export default {
 }
 .itemContainer{
 	overflow: auto;
+	margin-block-end: var(--zaa-margin-10);
  }
 </style>
+<style>
+:root {
+	--zaa-margin-10: 10px;
+	--zaa-margin-20: 20px;
+	--zaa-margin-50: 50px;
+  }
+</style>
diff --git a/webpack.config.js b/webpack.config.js
index fd21ae7..923a8db 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,6 +36,14 @@ webpackConfig.entry = {
 		import: path.join(__dirname, 'src', 'contactmomentenWidget.js'),
 		filename: appId + '-contactmomentenWidget.js',
 	},
+	personenWidget: {
+		import: path.join(__dirname, 'src', 'personenWidget.js'),
+		filename: appId + '-personenWidget.js',
+	},
+	organisatiesWidget: {
+		import: path.join(__dirname, 'src', 'organisatiesWidget.js'),
+		filename: appId + '-organisatiesWidget.js',
+	},
 }
 
 module.exports = webpackConfig

From abd26de6d30de074d1435751e7ffb09a58c06b37 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 13 Nov 2024 13:58:14 +0100
Subject: [PATCH 2/3] lint

---
 src/dialogs/Dialogs.vue          | 4 +---
 src/navigation/Configuration.vue | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/dialogs/Dialogs.vue b/src/dialogs/Dialogs.vue
index 9650d92..85d1b84 100644
--- a/src/dialogs/Dialogs.vue
+++ b/src/dialogs/Dialogs.vue
@@ -1,8 +1,6 @@
 <template>
 	<!-- Placeholder div -->
-	<div>
-
-	</div>
+	<div />
 </template>
 
 <script>
diff --git a/src/navigation/Configuration.vue b/src/navigation/Configuration.vue
index 7d0ce43..41e49c5 100644
--- a/src/navigation/Configuration.vue
+++ b/src/navigation/Configuration.vue
@@ -40,7 +40,7 @@
 					<NcCheckboxRadioSwitch :checked.sync="configuration.external" type="switch">
 						{{ t('forms', 'Enable sharing') }}
 					</NcCheckboxRadioSwitch>
-					
+
 					<b>Mongo DB</b>
 					<NcTextField :value.sync="configuration.mongodbLocation"
 						label="The location (url)"

From 96a1a285e8ca58ddaaa94f77c357efd0544f1485 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 13 Nov 2024 14:32:21 +0100
Subject: [PATCH 3/3] cleanup

---
 src/modals/klanten/EditKlant.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modals/klanten/EditKlant.vue b/src/modals/klanten/EditKlant.vue
index e7c2cdd..8368e47 100644
--- a/src/modals/klanten/EditKlant.vue
+++ b/src/modals/klanten/EditKlant.vue
@@ -190,7 +190,7 @@ export default {
 	updated() {
 		if (navigationStore.modal === 'editKlant' && !this.hasUpdated) {
 
-			const klantType = this.typeOptions.options.find((option) => option.value === klantStore.klantItem.type)
+			const klantType = this.typeOptions.options.find((option) => option.value === klantStore.klantItem?.type)
 
 			if (klantStore.klantItem?.id) {
 				this.klantItem = {