From 6c21b5e897aa7919c5fb23e69aa2f70b84cf158f Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Thu, 5 Sep 2024 16:25:05 +0200
Subject: [PATCH] Added widgets

---
 css/dashboardWidgets.css              |   9 +
 img/briefcase-account-outline.svg     |   1 +
 img/calendar-month-outline.svg        |   1 +
 lib/AppInfo/Application.php           |   7 +
 lib/Dashboard/OpenZakenWidget.php     |  69 +++++
 lib/Dashboard/TakenWidget.php         |  69 +++++
 lib/Dashboard/ZakenWidget.php         |  69 +++++
 package-lock.json                     | 347 +++-----------------------
 src/openZakenWidget.js                |  10 +
 src/takenWidget.js                    |  10 +
 src/views/widgets/OpenZakenWidget.vue | 137 ++++++++++
 src/views/widgets/TakenWidget.vue     |  83 ++++++
 src/views/widgets/ZakenWidget.vue     |  97 +++++++
 src/zakenWidget.js                    |  10 +
 webpack.config.js                     |  12 +
 15 files changed, 612 insertions(+), 319 deletions(-)
 create mode 100644 css/dashboardWidgets.css
 create mode 100644 img/briefcase-account-outline.svg
 create mode 100644 img/calendar-month-outline.svg
 create mode 100644 lib/Dashboard/OpenZakenWidget.php
 create mode 100644 lib/Dashboard/TakenWidget.php
 create mode 100644 lib/Dashboard/ZakenWidget.php
 create mode 100644 src/openZakenWidget.js
 create mode 100644 src/takenWidget.js
 create mode 100644 src/views/widgets/OpenZakenWidget.vue
 create mode 100644 src/views/widgets/TakenWidget.vue
 create mode 100644 src/views/widgets/ZakenWidget.vue
 create mode 100644 src/zakenWidget.js

diff --git a/css/dashboardWidgets.css b/css/dashboardWidgets.css
new file mode 100644
index 0000000..8e75b49
--- /dev/null
+++ b/css/dashboardWidgets.css
@@ -0,0 +1,9 @@
+.icon-zaken-widget {
+    background-image: url("../img/app-dark.svg");
+    filter: var(--background-invert-if-dark);
+  }
+  
+  body.theme--dark .icon-zaken-widget {
+    background-image: url("../img/app.svg");
+  }
+  
\ No newline at end of file
diff --git a/img/briefcase-account-outline.svg b/img/briefcase-account-outline.svg
new file mode 100644
index 0000000..318b950
--- /dev/null
+++ b/img/briefcase-account-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>briefcase-account-outline</title><path d="M20,6C20.58,6 21.05,6.2 21.42,6.59C21.8,7 22,7.45 22,8V19C22,19.55 21.8,20 21.42,20.41C21.05,20.8 20.58,21 20,21H4C3.42,21 2.95,20.8 2.58,20.41C2.2,20 2,19.55 2,19V8C2,7.45 2.2,7 2.58,6.59C2.95,6.2 3.42,6 4,6H8V4C8,3.42 8.2,2.95 8.58,2.58C8.95,2.2 9.42,2 10,2H14C14.58,2 15.05,2.2 15.42,2.58C15.8,2.95 16,3.42 16,4V6H20M4,8V19H20V8H4M14,6V4H10V6H14M12,9A2.25,2.25 0 0,1 14.25,11.25C14.25,12.5 13.24,13.5 12,13.5A2.25,2.25 0 0,1 9.75,11.25C9.75,10 10.76,9 12,9M16.5,18H7.5V16.88C7.5,15.63 9.5,14.63 12,14.63C14.5,14.63 16.5,15.63 16.5,16.88V18Z" /></svg>
\ No newline at end of file
diff --git a/img/calendar-month-outline.svg b/img/calendar-month-outline.svg
new file mode 100644
index 0000000..8bcef25
--- /dev/null
+++ b/img/calendar-month-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>calendar-month-outline</title><path d="M7 11H9V13H7V11M21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5M5 7H19V5H5V7M19 19V9H5V19H19M15 13V11H17V13H15M11 13V11H13V13H11M7 15H9V17H7V15M15 17V15H17V17H15M11 17V15H13V17H11Z" /></svg>
\ No newline at end of file
diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 5e2733b..53c1d61 100755
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -6,6 +6,9 @@
 use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\AppFramework\Bootstrap\IBootContext;
 use OCP\AppFramework\Bootstrap\IBootstrap;
+use OCA\ZaakAfhandelApp\Dashboard\ZakenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\TakenWidget;
+use OCA\ZaakAfhandelApp\Dashboard\OpenZakenWidget;
 
 /**
  * Class Application
@@ -28,6 +31,10 @@ public function __construct(array $urlParams = [])
 
 	public function register(IRegistrationContext $context): void
 	{
+		$context->registerDashboardWidget(ZakenWidget::class);
+		$context->registerDashboardWidget(TakenWidget::class);
+		$context->registerDashboardWidget(OpenZakenWidget::class);
+
 	}
 
 	public function boot(IBootContext $context): void
diff --git a/lib/Dashboard/OpenZakenWidget.php b/lib/Dashboard/OpenZakenWidget.php
new file mode 100644
index 0000000..edab96d
--- /dev/null
+++ b/lib/Dashboard/OpenZakenWidget.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 OpenZakenWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_openzaak_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Open zaken');
+    }
+
+    /**
+     * @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 . '-openZakenWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}
diff --git a/lib/Dashboard/TakenWidget.php b/lib/Dashboard/TakenWidget.php
new file mode 100644
index 0000000..f912353
--- /dev/null
+++ b/lib/Dashboard/TakenWidget.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 TakenWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_taak_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Uw taken');
+    }
+
+    /**
+     * @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 . '-takenWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}
diff --git a/lib/Dashboard/ZakenWidget.php b/lib/Dashboard/ZakenWidget.php
new file mode 100644
index 0000000..eae18d1
--- /dev/null
+++ b/lib/Dashboard/ZakenWidget.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 ZakenWidget implements IWidget
+{
+
+    public function __construct(
+        private IL10N $l10n,
+        private IURLGenerator $url
+    ) {}
+
+    /**
+     * @inheritDoc
+     */
+    public function getId(): string
+    {
+        return 'zaakAfhandelApp_zaak_widget';
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function getTitle(): string
+    {
+        return $this->l10n->t('Uw zaken');
+    }
+
+    /**
+     * @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 . '-zakenWidget');
+        Util::addStyle(Application::APP_ID, 'dashboardWidgets');
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 6c07aab..b23474a 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -4177,21 +4177,13 @@
     },
     "node_modules/@types/eslint": {
       "version": "8.56.10",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "license": "MIT"
@@ -5297,8 +5289,10 @@
         "acorn-walk": "^8.0.2"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "license": "MIT",
       "peer": true,
       "peerDependencies": {
@@ -5786,157 +5780,14 @@
       }
     },
     "node_modules/babel-core": {
-      "version": "6.26.3",
-      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
-      "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "babel-code-frame": "^6.26.0",
-        "babel-generator": "^6.26.0",
-        "babel-helpers": "^6.24.1",
-        "babel-messages": "^6.23.0",
-        "babel-register": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "babel-template": "^6.26.0",
-        "babel-traverse": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0",
-        "convert-source-map": "^1.5.1",
-        "debug": "^2.6.9",
-        "json5": "^0.5.1",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.4",
-        "path-is-absolute": "^1.0.1",
-        "private": "^0.1.8",
-        "slash": "^1.0.0",
-        "source-map": "^0.5.7"
-      }
-    },
-    "node_modules/babel-core/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/babel-core/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/babel-core/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/babel-core/node_modules/json5": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/babel-core/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/babel-core/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/babel-core/node_modules/slash": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/babel-core/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/babel-generator": {
-      "version": "6.26.1",
-      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
-      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "babel-messages": "^6.23.0",
-        "babel-runtime": "^6.26.0",
-        "babel-types": "^6.26.0",
-        "detect-indent": "^4.0.0",
-        "jsesc": "^1.3.0",
-        "lodash": "^4.17.4",
-        "source-map": "^0.5.7",
-        "trim-right": "^1.0.1"
-      }
-    },
-    "node_modules/babel-generator/node_modules/jsesc": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
-      "integrity": "sha512-Mke0DA0QjUWuJlhsE0ZPPhYiJkRap642SmI/4ztCFaUs6V2AiH1sfecc+57NgaryfAA2VR3v6O+CSjC1jZJKOA==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
-      }
-    },
-    "node_modules/babel-generator/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/babel-helpers": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
-      "integrity": "sha512-n7pFrqQm44TCYvrCDb0MqabAF+JUBq+ijBvNMUxpkLjJaAu32faIexewMumrH5KLLJ1HDyT0PTEqRyAe/GwwuQ==",
+      "version": "7.0.0-bridge.0",
+      "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
+      "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
-      "dependencies": {
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/babel-jest": {
@@ -6190,51 +6041,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/babel-register": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
-      "integrity": "sha512-veliHlHX06wjaeY8xNITbveXSiI+ASFnOqvne/LaIJIqOWi2Ogmj91KOugEz/hoh/fwMhXNBJPCv8Xaz5CyM4A==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "babel-core": "^6.26.0",
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "home-or-tmp": "^2.0.0",
-        "lodash": "^4.17.4",
-        "mkdirp": "^0.5.1",
-        "source-map-support": "^0.4.15"
-      }
-    },
-    "node_modules/babel-register/node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
-      "hasInstallScript": true,
-      "peer": true
-    },
-    "node_modules/babel-register/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/babel-register/node_modules/source-map-support": {
-      "version": "0.4.18",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
-      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "source-map": "^0.5.6"
-      }
-    },
     "node_modules/babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -8096,19 +7902,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/detect-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
-      "integrity": "sha512-BDKtmHlOzwI7iRuEkhzsnPoi5ypEhWAJB5RvHWe1kMr06js3uK5B3734i3ui5Yd+wOJV1cpE4JnivPD283GU/A==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "repeating": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -8377,7 +8170,9 @@
       "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q=="
     },
     "node_modules/elliptic": {
-      "version": "6.5.5",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -8443,7 +8238,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.0",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -9700,7 +9497,9 @@
       "license": "MIT"
     },
     "node_modules/fast-xml-parser": {
-      "version": "4.4.0",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.0.tgz",
+      "integrity": "sha512-/PlTQCI96+fZMAOLMZK4CWG1ItCbfZ/0jx7UIJFChPNrx7tcEgerUgWbeieCM9MfHInUDyK8DWYZ+YrywDJuTg==",
       "dev": true,
       "funding": [
         {
@@ -10528,20 +10327,6 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
-    "node_modules/home-or-tmp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
-      "integrity": "sha512-ycURW7oUxE2sNiPVw1HVEFsW+ecOpJ5zaj7eC0RlwhibhRBod20muUN8qu/gzx956YrLolVvs1MTXwKgC2rVEg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "dev": true,
@@ -11275,19 +11060,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-finite": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "license": "MIT",
@@ -14918,7 +14690,9 @@
       "license": "MIT"
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -15048,19 +14822,6 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "license": "MIT"
@@ -15567,26 +15328,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "dev": true,
@@ -16242,16 +15983,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/private": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
-      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/proc-log": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
@@ -18405,19 +18136,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "is-finite": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -20240,16 +19958,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/trim-right": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-      "integrity": "sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/trough": {
       "version": "2.2.0",
       "license": "MIT",
@@ -21957,20 +21665,21 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
diff --git a/src/openZakenWidget.js b/src/openZakenWidget.js
new file mode 100644
index 0000000..4903c78
--- /dev/null
+++ b/src/openZakenWidget.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import OpenZakenWidget from './views/widgets/OpenZakenWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_openzaak_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(OpenZakenWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})
diff --git a/src/takenWidget.js b/src/takenWidget.js
new file mode 100644
index 0000000..fa1ab32
--- /dev/null
+++ b/src/takenWidget.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import TakenWidget from './views/widgets/TakenWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_taak_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(TakenWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})
diff --git a/src/views/widgets/OpenZakenWidget.vue b/src/views/widgets/OpenZakenWidget.vue
new file mode 100644
index 0000000..dc1f2f3
--- /dev/null
+++ b/src/views/widgets/OpenZakenWidget.vue
@@ -0,0 +1,137 @@
+<template>
+	<div class="openZakenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				:item-menu="itemMenu"
+				@show="onShow">
+				<template #empty-content>
+					<NcEmptyContent :title="t('Geen open zaken')">
+						<template #icon>
+							<FolderIcon />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+		<NcButton type="primary" @click="search">
+			<template #icon>
+				<OpenInApp :size="20" />
+			</template>
+			Zaken bekijken
+		</NcButton>
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import OpenInApp from 'vue-material-design-icons/OpenInApp.vue'
+
+export default {
+	name: 'OpenZakenWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		OpenInApp,
+	},
+
+	data() {
+		return {
+			loading: false,
+			zaakItems: [
+				{
+					id: '1',
+					mainText: 'Klant kan niet meer inloggen',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+				},
+				{
+					id: '2',
+					mainText: 'Klant heeft meerdere meldingen gemaakt',
+					subText: 'Informatie verzoek',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+				{
+					id: '3',
+					mainText: 'Geluidsoverlast',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+				{
+					id: '4',
+					mainText: 'Klant kan niet meer inloggen',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+				},
+				{
+					id: '5',
+					mainText: 'Klant heeft meerdere meldingen gemaakt',
+					subText: 'Informatie verzoek',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+				{
+					id: '6',
+					mainText: 'Geluidsoverlast',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+				{
+					id: '7',
+					mainText: 'Klant kan niet meer inloggen',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+				},
+				{
+					id: '8',
+					mainText: 'Klant heeft meerdere meldingen gemaakt',
+					subText: 'Informatie verzoek',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+				{
+					id: '9',
+					mainText: 'Geluidsoverlast',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+
+			],
+		}
+	},
+
+	computed: {
+		items() {
+			return this.zaakItems
+		},
+	},
+
+	mounted() {
+	},
+
+	methods: {
+		onShow() {
+			window.open('/apps/opencatalogi/catalogi', '_self')
+		},
+	},
+
+}
+</script>
+<style>
+.openZakenContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+}
+.itemContainer{
+   overflow: auto;
+}
+</style>
diff --git a/src/views/widgets/TakenWidget.vue b/src/views/widgets/TakenWidget.vue
new file mode 100644
index 0000000..1f40e63
--- /dev/null
+++ b/src/views/widgets/TakenWidget.vue
@@ -0,0 +1,83 @@
+<template>
+	<div class="takenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				:item-menu="itemMenu"
+				@show="onShow">
+				<template #empty-content>
+					<NcEmptyContent :title="t('Geen open taken')">
+						<template #icon>
+							<FolderIcon />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+
+		<NcButton type="primary" @click="search">
+			<template #icon>
+				<Plus :size="20" />
+			</template>
+			Taak aanmaken
+		</NcButton>
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'TakenWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		Plus,
+	},
+
+	data() {
+		return {
+			loading: false,
+			zaakItems: [
+				{
+					id: '1',
+					mainText: 'Terugbel verzoek brandkraan',
+					subText: 'brandkraan staat schuin',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/calendar-month-outline.svg',
+				},
+			],
+		}
+	},
+
+	computed: {
+		items() {
+			return this.zaakItems
+		},
+	},
+
+	mounted() {
+	},
+
+	methods: {
+		onShow() {
+			window.open('/apps/opencatalogi/catalogi', '_self')
+		},
+	},
+
+}
+</script>
+<style>
+.takenContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+}
+.itemContainer{
+	overflow: auto;
+ }
+</style>
diff --git a/src/views/widgets/ZakenWidget.vue b/src/views/widgets/ZakenWidget.vue
new file mode 100644
index 0000000..f5375a5
--- /dev/null
+++ b/src/views/widgets/ZakenWidget.vue
@@ -0,0 +1,97 @@
+<template>
+	<div class="zakenContainer">
+		<div class="itemContainer">
+			<NcDashboardWidget :items="items"
+				:loading="loading"
+				:item-menu="itemMenu"
+				@show="onShow">
+				<template #empty-content>
+					<NcEmptyContent :title="t('Geen open zaken')">
+						<template #icon>
+							<FolderIcon />
+						</template>
+					</NcEmptyContent>
+				</template>
+			</NcDashboardWidget>
+		</div>
+
+		<NcButton type="primary" @click="search">
+			<template #icon>
+				<Plus :size="20" />
+			</template>
+			Zaak aanmaken
+		</NcButton>
+	</div>
+</template>
+
+<script>
+// Components
+import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+
+export default {
+	name: 'ZakenWidget',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcButton,
+		Plus,
+	},
+
+	data() {
+		return {
+			loading: false,
+			zaakItems: [
+				{
+					id: '1',
+					mainText: 'Klant kan niet meer inloggen',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+				},
+				{
+					id: '2',
+					mainText: 'Klant heeft meerdere meldingen gemaakt',
+					subText: 'Informatie verzoek',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+				{
+					id: '3',
+					mainText: 'Geluidsoverlast',
+					subText: 'Klacht',
+					avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+
+				},
+			],
+		}
+	},
+
+	computed: {
+		items() {
+			return this.zaakItems
+		},
+	},
+
+	mounted() {
+	},
+
+	methods: {
+		onShow() {
+			window.open('/apps/opencatalogi/catalogi', '_self')
+		},
+	},
+
+}
+</script>
+<style>
+.zakenContainer{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+}
+.itemContainer{
+	overflow: auto;
+ }
+</style>
diff --git a/src/zakenWidget.js b/src/zakenWidget.js
new file mode 100644
index 0000000..6b1d662
--- /dev/null
+++ b/src/zakenWidget.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import ZakenWidget from './views/widgets/ZakenWidget.vue'
+
+OCA.Dashboard.register('zaakAfhandelApp_zaak_widget', async (el, { widget }) => {
+	Vue.mixin({ methods: { t, n } })
+	const View = Vue.extend(ZakenWidget)
+	new View({
+		propsData: { title: widget.title },
+	}).$mount(el)
+})
diff --git a/webpack.config.js b/webpack.config.js
index 6206af5..3cdb00d 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,6 +16,18 @@ webpackConfig.entry = {
 		import: path.join(__dirname, 'src', 'main.js'),
 		filename: appId + '-main.js',
 	},
+	zakenWidget: {
+		import: path.join(__dirname, 'src', 'zakenWidget.js'),
+		filename: appId + '-zakenWidget.js',
+	},
+	takenWidget: {
+		import: path.join(__dirname, 'src', 'takenWidget.js'),
+		filename: appId + '-takenWidget.js',
+	},
+	openZakenWidget: {
+		import: path.join(__dirname, 'src', 'openZakenWidget.js'),
+		filename: appId + '-openZakenWidget.js',
+	},
 }
 
 module.exports = webpackConfig