From 258b13c92afbd82eaa25788a5c3c3f522286783f Mon Sep 17 00:00:00 2001
From: romankko2 <romokravarik@gmail.com>
Date: Wed, 11 Jan 2023 12:10:24 +0100
Subject: [PATCH] [subTask, masterTask detail-modal]

---
 app/package-lock.json                         |  26 ++
 app/package.json                              |   1 +
 app/public/mock/v1/master-tasks/(id).GET.json |  39 +-
 app/public/mock/v1/tasks/(id).GET.json        |  60 ++-
 app/src/plugins/app/_config/router.ts         |  16 +-
 .../app/_layout/app/_components/a-header.vue  |   5 +-
 .../app/_theme/_components/z-cancel-btn.css   |   4 +
 .../_theme/_components/z-cancel-btn.css.map   |   1 +
 .../app/_theme/_components/z-default-btn.css  |   5 +
 .../_theme/_components/z-default-btn.css.map  |   1 +
 app/src/plugins/app/_theme/date-picker.css    |  24 ++
 .../plugins/app/_theme/date-picker.css.map    |   1 +
 app/src/plugins/app/_theme/global.css         |  79 ++++
 app/src/plugins/app/_theme/global.css.map     |   1 +
 app/src/plugins/app/_theme/global.sass        |  23 +
 .../plugins/app/_theme/vuetify/v-dialog.css   |   4 +
 .../app/_theme/vuetify/v-dialog.css.map       |   1 +
 .../plugins/app@vendor/vue-cal/scss/index.css |  94 +++++
 .../app@vendor/vue-cal/scss/index.css.map     |   1 +
 app/src/plugins/app@vendor/vue-cal/styles.css | 396 ++++++++++++++++++
 .../plugins/app@vendor/vue-cal/styles.css.map |   1 +
 .../plugins/lib@auth/_theme/auth.theme.css    |  93 ++++
 .../lib@auth/_theme/auth.theme.css.map        |   1 +
 .../_components/a-seach-result-team.vue       |  10 +
 app/src/plugins/lib@search/search/search.vue  |  36 +-
 .../_components/a-project-calendar.vue        |  42 +-
 .../projects/_components/a-project-filter.vue |   2 +-
 .../tm@dashboard/projects/projects.vue        |   3 +-
 .../tasks/_components/z-timeline.vue          |  21 +-
 .../master-task/z-master-task-modal.vue       | 248 ++++++++++-
 .../tm@modal/sub-task/z-sub-task-modal.vue    | 314 ++++++++++++--
 31 files changed, 1465 insertions(+), 88 deletions(-)
 create mode 100644 app/src/plugins/app/_theme/_components/z-cancel-btn.css
 create mode 100644 app/src/plugins/app/_theme/_components/z-cancel-btn.css.map
 create mode 100644 app/src/plugins/app/_theme/_components/z-default-btn.css
 create mode 100644 app/src/plugins/app/_theme/_components/z-default-btn.css.map
 create mode 100644 app/src/plugins/app/_theme/date-picker.css
 create mode 100644 app/src/plugins/app/_theme/date-picker.css.map
 create mode 100644 app/src/plugins/app/_theme/global.css
 create mode 100644 app/src/plugins/app/_theme/global.css.map
 create mode 100644 app/src/plugins/app/_theme/vuetify/v-dialog.css
 create mode 100644 app/src/plugins/app/_theme/vuetify/v-dialog.css.map
 create mode 100644 app/src/plugins/app@vendor/vue-cal/scss/index.css
 create mode 100644 app/src/plugins/app@vendor/vue-cal/scss/index.css.map
 create mode 100644 app/src/plugins/app@vendor/vue-cal/styles.css
 create mode 100644 app/src/plugins/app@vendor/vue-cal/styles.css.map
 create mode 100644 app/src/plugins/lib@auth/_theme/auth.theme.css
 create mode 100644 app/src/plugins/lib@auth/_theme/auth.theme.css.map

diff --git a/app/package-lock.json b/app/package-lock.json
index 6c52103..4542f5b 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -12,6 +12,7 @@
 				"@capacitor/preferences": "^4.0.2",
 				"@fullcalendar/core": "^6.0.2",
 				"@fullcalendar/daygrid": "^6.0.2",
+				"@fullcalendar/interaction": "6.0.2",
 				"@fullcalendar/vue3": "^6.0.2",
 				"@ionic/vue": "^6.3.6",
 				"@mdi/font": "5.9.55",
@@ -22,6 +23,7 @@
 				"axios-auth-refresh": "^3.3.4",
 				"core-js": "^3.8.3",
 				"date-fns": "^2.29.3",
+				"lodash-es": "^4.17.21",
 				"mitt": "^2.1.0",
 				"moment": "^2.29.4",
 				"node-polyfill-webpack-plugin": "^2.0.1",
@@ -1869,6 +1871,14 @@
 				"@fullcalendar/core": "~6.0.2"
 			}
 		},
+		"node_modules/@fullcalendar/interaction": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.0.2.tgz",
+			"integrity": "sha512-RPWWCp6wdzVCc3XdcBUZuduFGX/mB8OrV2xBF5wrGFbGAZE3OYuEPcVnLF1SsC+pJVntG6z1fL5aQ/OM8nul9Q==",
+			"peerDependencies": {
+				"@fullcalendar/core": "~6.0.2"
+			}
+		},
 		"node_modules/@fullcalendar/vue3": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.0.2.tgz",
@@ -8423,6 +8433,11 @@
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
 			"dev": true
 		},
+		"node_modules/lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"node_modules/lodash.debounce": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -15031,6 +15046,12 @@
 			"integrity": "sha512-OoHo+HbKmunq2hy5K6T2390DmSwXIENxHBeKFPlUXHK48xD/zXQI3N1zRlZRd83+Yrq+vDF6l8ObO9PMu2leJw==",
 			"requires": {}
 		},
+		"@fullcalendar/interaction": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.0.2.tgz",
+			"integrity": "sha512-RPWWCp6wdzVCc3XdcBUZuduFGX/mB8OrV2xBF5wrGFbGAZE3OYuEPcVnLF1SsC+pJVntG6z1fL5aQ/OM8nul9Q==",
+			"requires": {}
+		},
 		"@fullcalendar/vue3": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.0.2.tgz",
@@ -19997,6 +20018,11 @@
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
 			"dev": true
 		},
+		"lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"lodash.debounce": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
diff --git a/app/package.json b/app/package.json
index eda8842..834faf2 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,6 +13,7 @@
 		"@fullcalendar/core": "^6.0.2",
 		"@fullcalendar/daygrid": "^6.0.2",
 		"@fullcalendar/vue3": "^6.0.2",
+		"lodash-es": "^4.17.21",
 		"@ionic/vue": "^6.3.6",
 		"@mdi/font": "5.9.55",
 		"@vuelidate/core": "^2.0.0",
diff --git a/app/public/mock/v1/master-tasks/(id).GET.json b/app/public/mock/v1/master-tasks/(id).GET.json
index 1bb539a..5687b64 100644
--- a/app/public/mock/v1/master-tasks/(id).GET.json
+++ b/app/public/mock/v1/master-tasks/(id).GET.json
@@ -2,8 +2,10 @@
 	"data": {
 		"id": 1,
 		"name": "Master task 1",
-		"description": "Nejaky popis tasku",
+		"description": "Urna vitae, suscipit suspendisse lectus arcu, imperdiet. Vulputate sit nec ut et. Urna ut a ac amet, donec orci non. Posuere elit magna consequat volutpat bibendum. Accumsan gravida elit condimentum sed. Congue non, dictum nec accumsan egestas vel. Sed molestie pretium odio morbi. Amet nunc, diam ridiculus dis condimentum arcu. Rhoncus, elementum, quis aenean neque. Faucibus leo laoreet lobortis vitae elementum. Condimentum ornare iaculis in fames in ut sit enim.",
 		"duration": 5400000,
+		"worked_time": 4400000,
+		"remaining_time": 1200000,
 		"time_worked": 0,
 		"starts_at": "2022-05-10T00:00:00+00:00",
 		"deadline": "2022-11-10T00:00:00+00:00",
@@ -17,7 +19,6 @@
 				"name": "Rastislav",
 				"surname": "Kuttner"
 			},
-
 			{
 				"id": 4,
 				"name": "Viliam",
@@ -30,8 +31,38 @@
 				"surname": "Gajdos"
 			}
 		],
-		"files": []
-
+		"files": [
+			{
+				"content_type": "application/pdf",
+				"created_at": "2022-09-23 07:02:55",
+				"description": null,
+				"disk_name": "632d5a1924093750079385.pdf",
+				"extension": "pdf",
+				"name": "File1.pdf",
+				"file_size": 132385,
+				"google_file_id": "1TgBRHhX-JVc5mkREUmoCRO4Sta3diqjo",
+				"id": 265,
+				"path": "",
+				"sort_order": 265,
+				"title": null,
+				"updated_at": "2022-09-23 07:02:55"
+			},
+			{
+				"id":274,
+				"disk_name":"632d5a3a48955848077357.rar",
+				"name":"File2.rar",
+				"file_size":58231,
+				"content_type":"application\/x-rar",
+				"title":null,
+				"description":null,
+				"sort_order":274,
+				"created_at":"2022-09-23 07:03:29",
+				"updated_at":"2022-09-23 07:03:29",
+				"google_file_id":"1CD6P9fAmCRoZTmjc3JWi1ysVDLDSReId",
+				"path":"",
+				"extension":"rar"
+			}
+		]
 	},
 	"status": 200
 }
\ No newline at end of file
diff --git a/app/public/mock/v1/tasks/(id).GET.json b/app/public/mock/v1/tasks/(id).GET.json
index 3ecb5b3..d0486a2 100644
--- a/app/public/mock/v1/tasks/(id).GET.json
+++ b/app/public/mock/v1/tasks/(id).GET.json
@@ -1,13 +1,37 @@
 {
 	"data": {
 		"id": 1,
-		"description": "Nejaky popis tasku",
+		"description": "Urna vitae, suscipit suspendisse lectus arcu, imperdiet. Vulputate sit nec ut et. Urna ut a ac amet, donec orci non. Posuere elit magna consequat volutpat bibendum. Accumsan gravida elit condimentum sed. Congue non, dictum nec accumsan egestas vel. Sed molestie pretium odio morbi. Amet nunc, diam ridiculus dis condimentum arcu. Rhoncus, elementum, quis aenean neque. Faucibus leo laoreet lobortis vitae elementum. Condimentum ornare iaculis in fames in ut sit enim.",
 		"project_code": "CO-2201",
 		"master_task_id": 1,
 		"master_task": "Master task 1",
 		"team_id": 1,
+		"team": {
+			"id": 1,
+			"name": "Team 1",
+			"employees": [
+				{
+					"id": 1,
+					"name": "Rastislav",
+					"surname": "Kuttner"
+				},
+
+				{
+					"id": 2,
+					"name": "Lenka",
+					"surname": "Nemeckova"
+				},
+
+				{
+					"id": 3,
+					"name": "Peter",
+					"surname": "Bucan"
+				}
+			]
+		},
 		"employee_id": 1,
 		"duration": 1000000,
+		"remaining_time": 150,
 		"is_finished": false,
 		"starts_at": "2022-11-10T11:00:00+00:00",
 		"ends_at": "2022-11-12T16:00:00+00:00",
@@ -30,8 +54,38 @@
 				"surname": "Spinelli"
 			}
 		],
-		"files": []
-
+		"files": [
+			{
+				"content_type": "application/pdf",
+				"created_at": "2022-09-23 07:02:55",
+				"description": null,
+				"disk_name": "632d5a1924093750079385.pdf",
+				"extension": "pdf",
+				"name": "File1.pdf",
+				"file_size": 132385,
+				"google_file_id": "1TgBRHhX-JVc5mkREUmoCRO4Sta3diqjo",
+				"id": 265,
+				"path": "",
+				"sort_order": 265,
+				"title": null,
+				"updated_at": "2022-09-23 07:02:55"
+			},
+			{
+				"id":274,
+				"disk_name":"632d5a3a48955848077357.rar",
+				"name":"File2.rar",
+				"file_size":58231,
+				"content_type":"application\/x-rar",
+				"title":null,
+				"description":null,
+				"sort_order":274,
+				"created_at":"2022-09-23 07:03:29",
+				"updated_at":"2022-09-23 07:03:29",
+				"google_file_id":"1CD6P9fAmCRoZTmjc3JWi1ysVDLDSReId",
+				"path":"",
+				"extension":"rar"
+			}
+		]
 	},
 	"status": 200
 }
\ No newline at end of file
diff --git a/app/src/plugins/app/_config/router.ts b/app/src/plugins/app/_config/router.ts
index 905e96f..60f530f 100644
--- a/app/src/plugins/app/_config/router.ts
+++ b/app/src/plugins/app/_config/router.ts
@@ -85,17 +85,11 @@ const routes: Array<RouteRecordRaw> = [
 						meta: { title: 'Váš profil' },
 						component: () => import('@/plugins/tm@profile/profile/my-profile.vue')
 					},
-					// {
-					// 	path: '/app/search/:searchText',
-					// 	redirect: to => {
-					// 	return { path: '/app/search', query: { q: to.params.searchText } }
-					// 	},
-					// },
-					// {
-					// 	path: '/app/search',
-					// 	name: 'Search',
-					// 	component: () => import('@/plugins/lib@search/search/search.vue')
-					// }
+					{
+						path: '/app/search',
+						name: 'Search',
+						component: () => import('@/plugins/lib@search/search/search.vue')
+					}
 				]
 			}
 		]
diff --git a/app/src/plugins/app/_layout/app/_components/a-header.vue b/app/src/plugins/app/_layout/app/_components/a-header.vue
index ee022b9..b6627e1 100644
--- a/app/src/plugins/app/_layout/app/_components/a-header.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-header.vue
@@ -7,7 +7,7 @@
 
 			<div class="d-flex justify-end align-center w-100 header-sm">
 				<img class="search-icon" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
-				<input class="search-input mx-2" type="text" placeholder="Vyhľadávanie" />
+				<input class="search-input mx-2" v-model="search" type="text" placeholder="Vyhľadávanie" @click="$router.push({name: 'Search'})" @keyup="eventBus.emit('onSearch', search)" />
 
 				<v-menu>
 					<template v-slot:activator="{ props }">
@@ -73,7 +73,8 @@ export default {
 
 	data() {
 		return {
-			user: null
+			user: null,
+			search: ''
 		}
 	},
 
diff --git a/app/src/plugins/app/_theme/_components/z-cancel-btn.css b/app/src/plugins/app/_theme/_components/z-cancel-btn.css
new file mode 100644
index 0000000..433383f
--- /dev/null
+++ b/app/src/plugins/app/_theme/_components/z-cancel-btn.css
@@ -0,0 +1,4 @@
+.cancel-btn {
+  border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  color: #7f39fb !important;
+}/*# sourceMappingURL=z-cancel-btn.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/_components/z-cancel-btn.css.map b/app/src/plugins/app/_theme/_components/z-cancel-btn.css.map
new file mode 100644
index 0000000..82dd806
--- /dev/null
+++ b/app/src/plugins/app/_theme/_components/z-cancel-btn.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["z-cancel-btn.sass","z-cancel-btn.css"],"names":[],"mappings":"AAAA;EACC,kFAAA;EACA,yBAAA;ACCD","file":"z-cancel-btn.css"}
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/_components/z-default-btn.css b/app/src/plugins/app/_theme/_components/z-default-btn.css
new file mode 100644
index 0000000..c283a94
--- /dev/null
+++ b/app/src/plugins/app/_theme/_components/z-default-btn.css
@@ -0,0 +1,5 @@
+.z-btn {
+  background: #7f39fb !important;
+  border-radius: 4px !important;
+  color: #fff !important;
+}/*# sourceMappingURL=z-default-btn.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/_components/z-default-btn.css.map b/app/src/plugins/app/_theme/_components/z-default-btn.css.map
new file mode 100644
index 0000000..403cc3e
--- /dev/null
+++ b/app/src/plugins/app/_theme/_components/z-default-btn.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["z-default-btn.sass","z-default-btn.css"],"names":[],"mappings":"AAAA;EACC,8BAAA;EACA,6BAAA;EACA,sBAAA;ACCD","file":"z-default-btn.css"}
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/date-picker.css b/app/src/plugins/app/_theme/date-picker.css
new file mode 100644
index 0000000..03384a6
--- /dev/null
+++ b/app/src/plugins/app/_theme/date-picker.css
@@ -0,0 +1,24 @@
+.dp__input {
+  height: 56px;
+  border: 1px solid #E5E5E5 !important;
+}
+
+.dp__range_end, .dp__range_start, .dp__active_date {
+  background: #7F39FB !important;
+}
+
+.dp__select {
+  color: #7F39FB !important;
+}
+
+.dp__today {
+  border: 1px solid #7F39FB !important;
+}
+
+.dp__range_between {
+  background: #F4E8FF !important;
+}
+
+.dp__action {
+  font-weight: 500 !important;
+}/*# sourceMappingURL=date-picker.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/date-picker.css.map b/app/src/plugins/app/_theme/date-picker.css.map
new file mode 100644
index 0000000..822a3b5
--- /dev/null
+++ b/app/src/plugins/app/_theme/date-picker.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["date-picker.sass","date-picker.css"],"names":[],"mappings":"AAAA;EACC,YAAA;EACA,oCAAA;ACCD;;ADCA;EACC,8BAAA;ACED;;ADAA;EACC,yBAAA;ACGD;;ADDA;EACC,oCAAA;ACID;;ADFA;EACC,8BAAA;ACKD;;ADHA;EACC,2BAAA;ACMD","file":"date-picker.css"}
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/global.css b/app/src/plugins/app/_theme/global.css
new file mode 100644
index 0000000..9fcd694
--- /dev/null
+++ b/app/src/plugins/app/_theme/global.css
@@ -0,0 +1,79 @@
+.task-action .trash-icon {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  margin-left: 12px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.task-action .pencil-icon {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.status-badge {
+  background: #F2E7FE;
+  color: #7F39FB;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.task-badge {
+  background: rgba(0, 0, 0, 0.04);
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.description-detail {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.employee-selected-avatar {
+  background: #6200EE;
+  color: #fff;
+  border-radius: 50%;
+  padding: 13px;
+  font-size: 11.5px;
+  height: 24px;
+  width: 24px;
+}
+
+th {
+  font-size: 16px !important;
+}
+
+.task-action {
+  width: 50%;
+}
+
+.v-card {
+  padding: 35px !important;
+}
+
+.cursor-pointer:hover {
+  cursor: pointer;
+}
+
+.hover-background:hover {
+  background-color: rgba(0, 0, 0, var(--v-hover-opacity));
+}
+
+.v-input__control {
+  border-radius: 4px;
+}
+
+.border-select .v-input__control {
+  border: 1px solid #E5E5E5 !important;
+}
+
+input[type=time]::-webkit-calendar-picker-indicator {
+  display: none;
+  border: 1px solid #E5E5E5 !important;
+}/*# sourceMappingURL=global.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/global.css.map b/app/src/plugins/app/_theme/global.css.map
new file mode 100644
index 0000000..4b00a54
--- /dev/null
+++ b/app/src/plugins/app/_theme/global.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["global.sass","global.css"],"names":[],"mappings":"AACC;EACC,aAAA;EACA,+BAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;ACAF;ADCC;EACC,aAAA;EACA,+BAAA;EACA,kBAAA;EACA,eAAA;ACCF;;ADCA;EACC,mBAAA;EACA,cAAA;EACA,0BAAA;EAAA,uBAAA;EAAA,kBAAA;ACED;;ADAA;EACC,+BAAA;EACA,0BAAA;EAAA,uBAAA;EAAA,kBAAA;ACGD;;ADDA;EACC,+BAAA;EACA,yBAAA;EACA,2BAAA;EAAA,wBAAA;EAAA,mBAAA;ACID;;ADFA;EACC,mBAAA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;ACKD;;ADHA;EACC,0BAAA;ACMD;;ADJA;EACC,UAAA;ACOD;;ADLA;EACC,wBAAA;ACQD;;ADNA;EACC,eAAA;ACSD;;ADPA;EACC,uDAAA;ACUD;;ADRA;EACC,kBAAA;ACWD;;ADTA;EACC,oCAAA;ACYD;;ADVA;EACC,aAAA;EACA,oCAAA;ACaD","file":"global.css"}
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/global.sass b/app/src/plugins/app/_theme/global.sass
index c0457c8..d4fc205 100644
--- a/app/src/plugins/app/_theme/global.sass
+++ b/app/src/plugins/app/_theme/global.sass
@@ -11,6 +11,29 @@
 		border-radius: 50%
 		cursor: pointer
 
+.status-badge
+	background: #F2E7FE
+	color: #7F39FB
+	width: fit-content
+
+.task-badge
+	background: rgba(0, 0, 0, 0.04)
+	width: fit-content
+
+.description-detail
+	background: rgba(0, 0, 0, 0.04)
+	color: rgba(0, 0, 0, 0.6)
+	height: fit-content
+
+.employee-selected-avatar
+	background: #6200EE
+	color: #fff
+	border-radius: 50%
+	padding: 13px
+	font-size: 11.5px
+	height: 24px
+	width: 24px
+
 th
 	font-size: 16px !important
 
diff --git a/app/src/plugins/app/_theme/vuetify/v-dialog.css b/app/src/plugins/app/_theme/vuetify/v-dialog.css
new file mode 100644
index 0000000..4aed496
--- /dev/null
+++ b/app/src/plugins/app/_theme/vuetify/v-dialog.css
@@ -0,0 +1,4 @@
+.v-dialog h1 {
+  font-size: 26px;
+  font-weight: 500;
+}/*# sourceMappingURL=v-dialog.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/vuetify/v-dialog.css.map b/app/src/plugins/app/_theme/vuetify/v-dialog.css.map
new file mode 100644
index 0000000..21a6711
--- /dev/null
+++ b/app/src/plugins/app/_theme/vuetify/v-dialog.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["v-dialog.sass","v-dialog.css"],"names":[],"mappings":"AACC;EACC,eAAA;EACA,gBAAA;ACAF","file":"v-dialog.css"}
\ No newline at end of file
diff --git a/app/src/plugins/app@vendor/vue-cal/scss/index.css b/app/src/plugins/app@vendor/vue-cal/scss/index.css
new file mode 100644
index 0000000..349a17d
--- /dev/null
+++ b/app/src/plugins/app@vendor/vue-cal/scss/index.css
@@ -0,0 +1,94 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+#app {
+  overflow-x: hidden;
+}
+
+.w-app {
+  font: 15px "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #fff !important;
+  color: #2c3e50;
+  margin-top: 8em;
+  padding-top: 12em;
+}
+
+.page-container {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+a {
+  text-decoration: none;
+  color: #42b983;
+}
+a[name] {
+  position: relative;
+  top: -4em;
+  display: block;
+}
+
+.scrollable {
+  height: 250px;
+  overflow-y: scroll;
+  padding-right: 1.8em;
+}
+
+.footer {
+  font-size: 0.9em;
+  font-style: italic;
+  margin: 3em 0 3.5em;
+}
+.footer .w-icon {
+  font-size: 1.2em;
+}
+.footer .w-icon.heart {
+  transition: 1s ease-out;
+  cursor: pointer;
+}
+.footer .w-icon.heart:hover {
+  -webkit-animation: pulse 1.8s ease-out infinite;
+          animation: pulse 1.8s ease-out infinite;
+}
+
+@-webkit-keyframes pulse {
+  0%, 20%, 30%, 35%, 45%, 100% {
+    transform: scale(1);
+  }
+  25%, 40% {
+    transform: scale(1.3);
+  }
+}
+
+@keyframes pulse {
+  0%, 20%, 30%, 35%, 45%, 100% {
+    transform: scale(1);
+  }
+  25%, 40% {
+    transform: scale(1.3);
+  }
+}
+@media screen and (max-width: 1240px) {
+  :root {
+    --container-padding: 20px;
+  }
+  .page-container {
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+  }
+}
+@media screen and (max-width: 524px) {
+  :root {
+    --container-padding: 12px;
+  }
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app@vendor/vue-cal/scss/index.css.map b/app/src/plugins/app@vendor/vue-cal/scss/index.css.map
new file mode 100644
index 0000000..03ae12f
--- /dev/null
+++ b/app/src/plugins/app@vendor/vue-cal/scss/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["_base.scss","index.css","_variables.scss"],"names":[],"mappings":"AAGA;EAAG,SAAA;EAAU,UAAA;ACAb;;ADEA;EAAM,uBAAA;ACEN;;ADAA;EAAM,kBAAA;ACIN;;ADFA;EACE,iDAAA;EACA,mCAAA;EACA,kCAAA;EACA,iCAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;ACKF;;ADFA;EACE,WAAA;EACA,iBEpBe;EFqBf,iBAAA;EACA,kBAAA;ACKF;;ADAA;EACE,qBAAA;EACA,cE9BQ;ADiCV;ADDE;EACE,kBAAA;EACA,SAAA;EACA,cAAA;ACGJ;;ADCA;EACE,aAAA;EACA,kBAAA;EACA,oBAAA;ACEF;;ADCA;EACE,gBAAA;EACA,kBAAA;EACA,mBAAA;ACEF;ADAE;EACE,gBAAA;ACEJ;ADAI;EAAS,uBAAA;EAAwB,eAAA;ACIrC;ADHI;EAAe,+CAAA;UAAA,uCAAA;ACMnB;;ADFA;EACE;IAA8B,mBAAA;ECM9B;EDLA;IAAU,qBAAA;ECQV;AACF;;ADXA;EACE;IAA8B,mBAAA;ECM9B;EDLA;IAAU,qBAAA;ECQV;AACF;ADJA;EACE;IAAO,yBAAA;ECOP;EDNA;IACE,sCAAA;IACA,uCAAA;ECQF;AACF;ADLA;EACE;IAAO,yBAAA;ECQP;AACF","file":"index.css"}
\ No newline at end of file
diff --git a/app/src/plugins/app@vendor/vue-cal/styles.css b/app/src/plugins/app@vendor/vue-cal/styles.css
new file mode 100644
index 0000000..89e8953
--- /dev/null
+++ b/app/src/plugins/app@vendor/vue-cal/styles.css
@@ -0,0 +1,396 @@
+.vuecal {
+  height: 100%;
+  box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.08);
+}
+.vuecal * {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vuecal--has-touch *:not(.vuecal__event-title--edit) {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vuecal .clickable {
+  cursor: pointer;
+}
+.vuecal--resizing-event, .vuecal--drag-creating-event {
+  cursor: ns-resize;
+}
+.vuecal--dragging-event {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.vuecal .dragging-helper {
+  position: absolute;
+  width: 60px;
+  height: 40px;
+  background: rgba(138, 190, 230, 0.8);
+  border: 1px solid #61a9e0;
+  z-index: 10;
+}
+.vuecal--xsmall {
+  font-size: 0.9em;
+}
+.vuecal__flex {
+  display: flex;
+  flex-direction: row;
+}
+.vuecal__flex[column] {
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+.vuecal__flex[grow] {
+  flex: 1 1 auto;
+  width: 100%;
+}
+.vuecal__flex[wrap] {
+  flex-wrap: wrap;
+}
+.vuecal__split-days-headers.slide-fade--right-leave-active {
+  display: none;
+}
+.vuecal--week-numbers.vuecal--month-view .vuecal__split-days-headers {
+  margin-left: 3em;
+}
+.vuecal--day-view:not(.vuecal--overflow-x) .vuecal__split-days-headers {
+  margin-left: 3em;
+  height: 2.2em;
+}
+.vuecal--day-view.vuecal--twelve-hour:not(.vuecal--overflow-x) .vuecal__split-days-headers {
+  margin-left: 4em;
+}
+.vuecal__split-days-headers .day-split-header {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.vuecal__split-days-headers .vuecal--day-view.vuecal--overflow-x.vuecal--sticky-split-labels .day-split-header {
+  height: 1.5em;
+}
+.vuecal__body {
+  position: relative;
+  overflow: hidden;
+}
+.vuecal__all-day {
+  min-height: 1.7em;
+  margin-bottom: -1px;
+  flex-shrink: 0;
+}
+.vuecal__all-day-text {
+  width: 3em;
+  box-sizing: border-box;
+  color: #999;
+  padding-right: 2px;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  border-bottom: 1px solid #ddd;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}
+.vuecal__all-day-text span {
+  font-size: 0.85em;
+  text-align: right;
+  line-height: 1.1;
+}
+.vuecal--twelve-hour .vuecal__all-day > span {
+  width: 4em;
+}
+.vuecal__bg {
+  overflow: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  min-height: 60px;
+  position: relative;
+  width: 100%;
+}
+.vuecal--no-time .vuecal__bg {
+  display: flex;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+.vuecal__week-numbers {
+  width: 3em;
+  flex-shrink: 0 !important;
+}
+.vuecal__week-numbers .vuecal__week-number-cell {
+  opacity: 0.4;
+  font-size: 0.9em;
+  align-items: center;
+  justify-items: center;
+  justify-content: center;
+}
+.vuecal__scrollbar-check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: scroll;
+  visibility: hidden;
+  z-index: -1;
+}
+.vuecal__scrollbar-check div {
+  height: 120%;
+}
+.vuecal__time-column {
+  width: 3em;
+  height: 100%;
+  flex-shrink: 0;
+}
+.vuecal--twelve-hour .vuecal__time-column {
+  width: 4em;
+  font-size: 0.9em;
+}
+.vuecal--overflow-x.vuecal--week-view .vuecal__time-column {
+  margin-top: 4em;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+}
+.vuecal--overflow-x.vuecal--week-view.vuecal--sticky-split-labels .vuecal__time-column {
+  margin-top: 3.4em;
+}
+.vuecal--overflow-x.vuecal--day-view.vuecal--sticky-split-labels .vuecal__time-column {
+  margin-top: 1.5em;
+}
+.vuecal__time-column .vuecal__time-cell {
+  color: #999;
+  text-align: right;
+  padding-right: 2px;
+  font-size: 0.9em;
+}
+.vuecal__time-column .vuecal__time-cell-line:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-top: 1px solid rgba(196, 196, 196, 0.3);
+}
+.vuecal__cells {
+  margin: 0 1px 1px 0;
+}
+.vuecal--overflow-x.vuecal--day-view .vuecal__cells {
+  margin: 0;
+}
+.vuecal--events-on-month-view.vuecal--short-events .vuecal__cells {
+  width: 99.9%;
+}
+.vuecal--overflow-x.vuecal--day-view .vuecal__cells, .vuecal--overflow-x.vuecal--week-view .vuecal__cells {
+  flex-wrap: nowrap;
+  overflow: auto;
+}
+
+.slide-fade--left-enter-active, .slide-fade--left-leave-active,
+.slide-fade--right-enter-active, .slide-fade--right-leave-active {
+  transition: 0.25s ease-out;
+}
+
+.slide-fade--left-enter-from,
+.slide-fade--right-leave-to {
+  transform: translateX(-15px);
+  opacity: 0;
+}
+
+.slide-fade--left-leave-to,
+.slide-fade--right-enter-from {
+  transform: translateX(15px);
+  opacity: 0;
+}
+
+.slide-fade--left-leave-active,
+.slide-fade--right-leave-active {
+  position: absolute !important;
+  height: 100%;
+}
+
+.vuecal__title-bar .slide-fade--left-leave-active,
+.vuecal__title-bar .slide-fade--right-leave-active {
+  left: 0;
+  right: 0;
+  height: auto;
+}
+
+.vuecal__heading .slide-fade--left-leave-active,
+.vuecal__heading .slide-fade--right-leave-active {
+  display: flex;
+  align-items: center;
+}
+
+.vuecal--green-theme .vuecal__menu, .vuecal--green-theme .vuecal__cell-events-count {
+  background-color: #42b983;
+  color: #fff;
+}
+.vuecal--green-theme .vuecal__title-bar {
+  background-color: #e4f5ef;
+}
+.vuecal--green-theme .vuecal__cell--today, .vuecal--green-theme .vuecal__cell--current {
+  background-color: rgba(240, 240, 255, 0.4);
+}
+.vuecal--green-theme:not(.vuecal--day-view) .vuecal__cell--selected {
+  background-color: rgba(235, 255, 245, 0.4);
+}
+.vuecal--green-theme .vuecal__cell--selected:before {
+  border-color: rgba(66, 185, 131, 0.5);
+}
+.vuecal--green-theme .vuecal__cell--highlighted:not(.vuecal__cell--has-splits),
+.vuecal--green-theme .vuecal__cell-split--highlighted {
+  background-color: rgba(195, 255, 225, 0.5);
+}
+.vuecal--green-theme .vuecal__arrow--highlighted,
+.vuecal--green-theme .vuecal__today-btn--highlighted,
+.vuecal--green-theme .vuecal__view-btn--highlighted {
+  background-color: rgba(136, 236, 191, 0.25);
+}
+
+.vuecal--blue-theme .vuecal__menu, .vuecal--blue-theme .vuecal__cell-events-count {
+  background-color: rgba(66, 163, 185, 0.8);
+  color: #fff;
+}
+.vuecal--blue-theme .vuecal__title-bar {
+  background-color: rgba(0, 165, 188, 0.3);
+}
+.vuecal--blue-theme .vuecal__cell--today, .vuecal--blue-theme .vuecal__cell--current {
+  background-color: rgba(240, 240, 255, 0.4);
+}
+.vuecal--blue-theme:not(.vuecal--day-view) .vuecal__cell--selected {
+  background-color: rgba(235, 253, 255, 0.4);
+}
+.vuecal--blue-theme .vuecal__cell--selected:before {
+  border-color: rgba(115, 191, 204, 0.5);
+}
+.vuecal--blue-theme .vuecal__cell--highlighted:not(.vuecal__cell--has-splits),
+.vuecal--blue-theme .vuecal__cell-split--highlighted {
+  background-color: rgba(0, 165, 188, 0.06);
+}
+.vuecal--blue-theme .vuecal__arrow--highlighted,
+.vuecal--blue-theme .vuecal__today-btn--highlighted,
+.vuecal--blue-theme .vuecal__view-btn--highlighted {
+  background-color: rgba(66, 163, 185, 0.2);
+}
+
+.vuecal--rounded-theme .vuecal__weekdays-headings {
+  border: none;
+}
+.vuecal--rounded-theme .vuecal__cell, .vuecal--rounded-theme .vuecal__cell:before {
+  background: none;
+  border: none;
+}
+.vuecal--rounded-theme .vuecal__cell--out-of-scope {
+  opacity: 0.4;
+}
+.vuecal--rounded-theme .vuecal__cell-content {
+  width: 30px;
+  height: 30px;
+  flex-grow: 0;
+  border: 1px solid transparent;
+  border-radius: 30px;
+  color: #333;
+}
+.vuecal--rounded-theme.vuecal--day-view .vuecal__cell-content {
+  width: auto;
+  background: none;
+}
+.vuecal--rounded-theme.vuecal--year-view .vuecal__cell {
+  width: 33.33%;
+}
+.vuecal--rounded-theme.vuecal--year-view .vuecal__cell-content {
+  width: 85px;
+}
+.vuecal--rounded-theme.vuecal--years-view .vuecal__cell-content {
+  width: 52px;
+}
+.vuecal--rounded-theme .vuecal__cell {
+  background-color: transparent !important;
+}
+.vuecal--rounded-theme.vuecal--green-theme:not(.vuecal--day-view) .vuecal__cell-content {
+  background-color: #f1faf7;
+}
+.vuecal--rounded-theme.vuecal--green-theme:not(.vuecal--day-view) .vuecal__cell--today .vuecal__cell-content {
+  background-color: #42b983;
+  color: #fff;
+}
+.vuecal--rounded-theme.vuecal--green-theme .vuecal--day-view .vuecal__cell--today:before {
+  background-color: rgba(66, 185, 131, 0.05);
+}
+.vuecal--rounded-theme.vuecal--green-theme:not(.vuecal--day-view) .vuecal__cell--selected .vuecal__cell-content {
+  border-color: #42b983;
+}
+.vuecal--rounded-theme.vuecal--green-theme .vuecal__cell--highlighted:not(.vuecal__cell--has-splits),
+.vuecal--rounded-theme.vuecal--green-theme .vuecal__cell-split--highlighted {
+  background-color: rgba(195, 255, 225, 0.5);
+}
+.vuecal--rounded-theme.vuecal--blue-theme:not(.vuecal--day-view) .vuecal__cell-content {
+  background-color: rgba(100, 182, 255, 0.2);
+}
+.vuecal--rounded-theme.vuecal--blue-theme:not(.vuecal--day-view) .vuecal__cell--today .vuecal__cell-content {
+  background-color: #8fb7e4;
+  color: #fff;
+}
+.vuecal--rounded-theme.vuecal--blue-theme .vuecal--day-view .vuecal__cell--today:before {
+  background-color: rgba(143, 183, 228, 0.1);
+}
+.vuecal--rounded-theme.vuecal--blue-theme:not(.vuecal--day-view) .vuecal__cell--selected .vuecal__cell-content {
+  border-color: #61a9e0;
+}
+.vuecal--rounded-theme.vuecal--blue-theme .vuecal__cell--highlighted:not(.vuecal__cell--has-splits),
+.vuecal--rounded-theme.vuecal--blue-theme .vuecal__cell-split--highlighted {
+  background-color: rgba(0, 165, 188, 0.06);
+}
+
+.vuecal--date-picker .vuecal__title-bar {
+  font-size: 1.2em;
+}
+.vuecal--date-picker .vuecal__heading {
+  height: 2.2em;
+  font-weight: 500;
+  opacity: 0.4;
+}
+.vuecal--date-picker .vuecal__weekdays-headings {
+  border: none;
+}
+.vuecal--date-picker .vuecal__body {
+  margin-left: 1px;
+}
+.vuecal--date-picker .vuecal__cell, .vuecal--date-picker .vuecal__cell:before {
+  background: none;
+  border: none;
+}
+.vuecal--date-picker .vuecal__cell-content {
+  height: 26px;
+  flex-grow: 0;
+  border: 1px solid transparent;
+  border-radius: 25px;
+  transition: background-color 0.2s cubic-bezier(0.39, 0.58, 0.57, 1);
+}
+.vuecal--date-picker.vuecal--years-view .vuecal__cell-content {
+  flex: 0;
+  padding: 0 4px;
+  height: 24px;
+}
+.vuecal--date-picker.vuecal--year-view .vuecal__cell-content {
+  flex: 0;
+  padding: 0 15px;
+}
+.vuecal--date-picker.vuecal--month-view .vuecal__cell-content {
+  width: 26px;
+}
+.vuecal--date-picker:not(.vuecal--day-view) .vuecal__cell-content:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.vuecal--date-picker:not(.vuecal--day-view) .vuecal__cell--selected .vuecal__cell-content {
+  background-color: #42b982;
+  color: #fff;
+}
+.vuecal--date-picker:not(.vuecal--day-view) .vuecal__cell--current .vuecal__cell-content, .vuecal--date-picker:not(.vuecal--day-view) .vuecal__cell--today .vuecal__cell-content {
+  border-color: #42b982;
+}/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/app@vendor/vue-cal/styles.css.map b/app/src/plugins/app@vendor/vue-cal/styles.css.map
new file mode 100644
index 0000000..ab386d5
--- /dev/null
+++ b/app/src/plugins/app@vendor/vue-cal/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"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","file":"styles.css"}
\ No newline at end of file
diff --git a/app/src/plugins/lib@auth/_theme/auth.theme.css b/app/src/plugins/lib@auth/_theme/auth.theme.css
new file mode 100644
index 0000000..cd92a36
--- /dev/null
+++ b/app/src/plugins/lib@auth/_theme/auth.theme.css
@@ -0,0 +1,93 @@
+.auth-card {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  padding: 30px;
+  width: 100%;
+  max-width: 486px;
+  margin: auto;
+}
+.auth-card img {
+  position: absolute;
+  right: 60px;
+  bottom: 188px;
+  cursor: pointer;
+}
+.auth-card .button {
+  color: white !important;
+}
+.auth-card .v-field {
+  border-bottom: 1px solid rgba(0, 0, 0, 0);
+}
+.auth-card .error .v-field {
+  border-bottom: 1px solid red;
+}
+
+@media screen and (max-width: 904px) {
+  .auth-card {
+    position: relative;
+    padding: 0;
+    border: none;
+    top: 0;
+    left: 0;
+    transform: translate(0, 0);
+  }
+  .auth-card h1 {
+    font-size: 19px;
+  }
+  .auth-card p {
+    font-size: 15px;
+  }
+  .auth-card .v-icon {
+    position: absolute !important;
+    right: 15px;
+  }
+}
+.v-field--variant-solo {
+  box-shadow: none !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+.auth-card .error .v-field {
+  border: 0.5px solid red !important;
+}
+
+.error .v-field {
+  border: 0.5px solid red !important;
+}
+
+.error .dp__input {
+  border: 0.5px solid red !important;
+}
+
+.v-input__append {
+  margin: 0 !important;
+}
+.v-input__append .v-icon {
+  position: absolute !important;
+  right: 45px;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.error-message {
+  position: absolute;
+  top: 50%;
+  left: 30px;
+  color: red;
+  opacity: 0.8;
+}
+
+.v-select .v-field--variant-solo {
+  border: none !important;
+}
+
+.v-messages__message {
+  color: red !important;
+}/*# sourceMappingURL=auth.theme.css.map */
\ No newline at end of file
diff --git a/app/src/plugins/lib@auth/_theme/auth.theme.css.map b/app/src/plugins/lib@auth/_theme/auth.theme.css.map
new file mode 100644
index 0000000..f1f1314
--- /dev/null
+++ b/app/src/plugins/lib@auth/_theme/auth.theme.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["auth.theme.sass","auth.theme.css"],"names":[],"mappings":"AAAA;EACC,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,oCAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;EACA,YAAA;ACCD;ADCC;EACC,kBAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;ACCF;ADCC;EACC,uBAAA;ACCF;ADCC;EACC,yCAAA;ACCF;ADCC;EACC,4BAAA;ACCF;;ADCA;EACC;IACC,kBAAA;IACA,UAAA;IACA,YAAA;IACA,MAAA;IACA,OAAA;IACA,0BAAA;ECEA;EDAA;IACC,eAAA;ECED;EDAA;IACC,eAAA;ECED;EDAA;IACC,6BAAA;IACA,WAAA;ECED;AACF;ADDA;EACC,2BAAA;EACA,+CAAA;ACGD;;ADDA;EACC,kCAAA;ACID;;ADFA;EACC,kCAAA;ACKD;;ADHA;EACC,kCAAA;ACMD;;ADJA;EACC,oBAAA;ACOD;ADLC;EACC,6BAAA;EACA,WAAA;ACOF;;ADLA;;EAEC,wBAAA;ACQD;;ADNA;EACC,kBAAA;EACA,QAAA;EACA,UAAA;EACA,UAAA;EACA,YAAA;ACSD;;ADPA;EACC,uBAAA;ACUD;;ADRA;EACC,qBAAA;ACWD","file":"auth.theme.css"}
\ No newline at end of file
diff --git a/app/src/plugins/lib@search/search/_components/a-seach-result-team.vue b/app/src/plugins/lib@search/search/_components/a-seach-result-team.vue
index e69de29..7720cb0 100644
--- a/app/src/plugins/lib@search/search/_components/a-seach-result-team.vue
+++ b/app/src/plugins/lib@search/search/_components/a-seach-result-team.vue
@@ -0,0 +1,10 @@
+<template>
+	<div>
+
+	</div>
+</template>
+
+<script>
+export default {
+}
+</script>
\ No newline at end of file
diff --git a/app/src/plugins/lib@search/search/search.vue b/app/src/plugins/lib@search/search/search.vue
index b02a397..f09bbfc 100644
--- a/app/src/plugins/lib@search/search/search.vue
+++ b/app/src/plugins/lib@search/search/search.vue
@@ -1,4 +1,34 @@
 <template>
-	<div>
-	</div>
-</template>
\ No newline at end of file
+	<form>
+		<A-search-result-team />
+	</form>
+</template>
+
+<script>
+import { debounce } from 'lodash-es'
+import ASearchResultTeam from '@/plugins/lib@search/search/_components/a-seach-result-team.vue'
+
+export default {
+	components: {
+		ASearchResultTeam
+	},
+
+	data() {
+		return {
+			search: null
+		}
+	},	
+
+	created() {
+		this.eventBus.on('onSearch', (search) => {
+			this.search = search
+		})
+	},
+
+	methods: {
+		debounceSearch: debounce(function () {
+			console.log("object")
+		}, 2000),
+	}
+}
+</script>
\ No newline at end of file
diff --git a/app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue b/app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue
index bd67de0..dea2f51 100644
--- a/app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue
+++ b/app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue
@@ -1,17 +1,25 @@
 <template>
   <div id="calendar" class="mb-12">
-    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+    <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
+    <Z-master-task-modal ref="z-master-task-modal" />
   </div>
 </template>
 <script>
-import FullCalendar from '@fullcalendar/vue3'
-import dayGridPlugin from '@fullcalendar/daygrid'
+import FullCalendar       from '@fullcalendar/vue3'
+import dayGridPlugin      from '@fullcalendar/daygrid'
+import ZMasterTaskModal   from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
 
 export default {
   components: {
-    FullCalendar
+    FullCalendar,
+    ZMasterTaskModal
   },
   props: ['events', 'month'],
+  methods: {
+    editTask(masterTask, editMode) {
+      this.$refs['z-master-task-modal'].create(masterTask, editMode)
+    }
+  },  
   computed: {
     calendarOptions() {
       return {
@@ -22,7 +30,15 @@ export default {
         height: 650,
         firstDay: 1,
         dayHeaderClassNames: ['w-day-header'],
-        events: this.events
+        events: this.events,
+        eventContent: function(eventInfo) {
+          return { html: eventInfo.event.extendedProps.title_html }
+        },
+        eventClick: (info) => {
+          console.log(info.event._def)
+          // alert(JSON.stringify(info.event._def))
+          this.editTask(info.event._def.publicId, false)
+        }
       }
     }
   },
@@ -60,9 +76,21 @@ export default {
   &:deep(.fc-event-end)
     border-top-right-radius: 30px
     border-bottom-right-radius: 30px
-  &:deep(.fc-event-title)
+  &:deep(.fc-event)
     font-size: 12px
     padding-left: 10px
-  &:deep(.fc-event)
     margin-top: 5px
+    &:after
+      background: unset
+  &:deep(.fc-day-today)
+    background: white
+    a
+      background: #3700B3
+      width: 32px
+      height: 32px
+      color: white
+      text-align: center
+      border-radius: 50%
+      border: 5px solid white
+      line-height: 15px
 </style>
diff --git a/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue b/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue
index ee549a4..4180e54 100644
--- a/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue
+++ b/app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue
@@ -83,7 +83,7 @@ export default {
 }
 </script>
 <style lang="sass" scoped>
-// TODO: zjednotit styly ikon v hlobalnom sass subore
+// TODO: zjednotit styly ikon v globalnom sass subore
 // TODO: ↓
 .subheader
   max-width: 100%
diff --git a/app/src/plugins/tm@dashboard/projects/projects.vue b/app/src/plugins/tm@dashboard/projects/projects.vue
index b31c094..3837ced 100644
--- a/app/src/plugins/tm@dashboard/projects/projects.vue
+++ b/app/src/plugins/tm@dashboard/projects/projects.vue
@@ -7,7 +7,7 @@
 
 <script>
 import AProjectCalendar from './_components/a-project-calendar.vue'
-import AProjectFilter from './_components/a-project-filter.vue'
+import AProjectFilter   from './_components/a-project-filter.vue'
 
 export default {
   components: {
@@ -34,6 +34,7 @@ export default {
     this.events = events.map(item => ({
       id: item.id,
       title: `${item.project_code} - ${item.name}`,
+      title_html: `${item.project_code} - <b>${item.name}</b>`,
       start: item.starts_at,
       end: item.deadline,
       is_finished: item.is_finished,
diff --git a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
index 5e475a2..d7a260a 100644
--- a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
+++ b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
@@ -47,7 +47,7 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				<div class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
+				<div @click.stop="editTask(event.id)" class="event-wrapper w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}">
 					<div class="event-content">
 						<small v-if="(event.project_code && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
@@ -60,14 +60,15 @@
 					</div>
 
 					<div class="event-footer d-flex">
-						<v-btn rounded class="event-footer-button me-2" @click="this.showCompleteModal = {task: event}"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
-						<v-btn rounded class="event-footer-button me-2" @click="editTask(event.id)" :style="{opacity: 0.3}"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
-						<v-btn rounded class="event-footer-button me-2" @click="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
+						<v-btn rounded class="event-footer-button me-2" @click.stop="this.showCompleteModal = {task: event}"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
+						<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event.id, true)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
+						<v-btn rounded class="event-footer-button me-2" @click.stop="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
 					</div>
 				</div>
 			</template>
 		</Vue-cal>
 
+		<Z-sub-task-modal ref="z-sub-task-modal" />
 		<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @close="showCompleteModal = null" />
 		<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @close="showDeleteModal = null" />
 	</div>
@@ -76,11 +77,13 @@
 <script>
 import ZCompleteTaskModal 	from '@/plugins/tm@modal/task/z-complete-task-modal.vue'
 import ZDeleteTaskModal 	from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
+import ZSubTaskModal 		from '@/plugins/tm@modal/sub-task/z-sub-task-modal.vue'
 
 export default {
 	components: {
 		ZCompleteTaskModal,
-		ZDeleteTaskModal
+		ZDeleteTaskModal,
+		ZSubTaskModal
 	},
 
 	props: {
@@ -185,10 +188,6 @@ export default {
 			}
 		},
 
-		editTask(id) {
-			console.log('edit', id)
-		},
-
 		eventFocused(event) {
 			this.focusedEventId = event.task_id
 			console.log(`Focused: ${event.task_id}`)
@@ -204,6 +203,10 @@ export default {
 				top: defaultTimeToScrollTo.getBoundingClientRect().top - toolbarHeight - subheaderHeight
 			})
 		},
+
+		editTask(subTask, editMode) {
+			this.$refs['z-sub-task-modal'].create(subTask, editMode)
+		}
 	}
 }
 </script>
diff --git a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
index 75f1ae1..58ce456 100644
--- a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
@@ -1,9 +1,9 @@
 <template>
 	<v-dialog v-model="visible" max-width="650" max-height="90%" height="700px">
-		<W-loadable :content="masterTask" class="h-100">
-			<v-card height="100%" class="d-flex flex-column scrolling">
+		<W-loadable :content="masterTask && employees" class="h-100">
+			<v-card v-if="editMode" height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center modal-header">
-					<h1>Vytvoriť master task</h1>
+					<h1>{{ masterTask.id ? 'Upraviť master task' : 'Vytvoriť master task' }}</h1>
 					<v-icon
 						@click.stop="close()"
 						icon="mdi-close"
@@ -116,6 +116,184 @@
 
 				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
 			</v-card>
+
+			<v-card v-else height="100%" class="d-flex flex-column scrolling">
+				<div class="d-flex justify-space-between align-center">
+					<p>{{ masterTask.project_code }}</p>
+					<v-icon
+						@click.stop="close()"
+						icon="mdi-close"
+						size="large"
+						class="pb-5"
+					></v-icon>
+				</div>
+				<div class="d-flex justify-space-between align-center modal-header border-bottom pb-4">
+					<h1>{{ masterTask.name }}</h1>
+					<div class="d-flex justify-start">
+						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="editMode = !editMode" />
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="deleteTask()"/>
+					</div>	
+				</div>
+
+				<v-card-actions class="d-flex flex-column modal-content">
+					<div class="w-100">
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-drag-vertical"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Status</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p v-if="masterTask.is_finished" class="status-badge px-4 py-2 rounded-pill">Ukončený</p>
+									<p v-if="!masterTask.is_finished" class="status-badge px-4 py-2 rounded-pill">Neukončený</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-calendar-week"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Deadline</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p class="text-red-darken-4">{{ formattedDeadline }}</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-account-multiple-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Tím</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2 d-flex scroll-employees">
+									<p class="task-badge px-4 py-2 rounded-pill flex-shrink-0">{{ masterTask.team }}</p>
+									<div class="d-flex align-center flex-shrink-0 mx-3" v-for="(employee, index) in masterTask.employees" :key="employee.id">
+										<p class="employee-selected-avatar d-flex justify-center align-center">
+											{{ employee.name.charAt(0) + employee.surname.charAt(0) }} 
+										</p>
+										<p class="ml-2" v-html="`${masterTask.employees[index].name} ${masterTask.employees[index].surname}`" />
+									</div>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-clock-time-three-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Naplánovaný čas</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p>{{ (masterTask.duration / 60 / 60).toFixed(2) }} h</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-timer-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Odpracovaný čas</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p class="text-red-darken-4">{{ masterTask.worked_time }} h</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center border-bottom">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-clock-time-three-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Zostávajúci čas</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p class="text-red-darken-4">{{ masterTask.remaining_time }} h</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<div class="px-5 py-5 border-bottom">
+							<p>Popis zadania</p>
+							<section class="description-detail px-2 py-2 w-100 rounded mt-2">{{ masterTask.description }}</section>
+							<p class="mt-5">Prílohy</p>
+							<div class="w-100 d-flex align-center">
+								<div v-for="(file, index) in masterTask.files" :key="file.id" class="d-flex align-center flex-wrap" :class="[index === 0 ? 'ml-0': 'ml-2']">
+									<v-chip class="mt-2">
+										{{ file.name }}
+										<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
+									</v-chip>
+								</div>
+							</div>
+						</div>
+						<div class="d-flex justify-start align-center mt-8">
+							<v-btn class="z-btn" @click="save()">Ukončiť mastertask</v-btn>
+						</div>
+						<v-table class="mt-7 mb-5">
+							<tbody class="px-5 py-5">
+								<tr v-for="(employee, index) in masterTask.employees" :key="employee.id">
+									<td class="w-25">{{ masterTask.name }}</td>
+									<td class="d-flex align-center">
+										<p class="employee-selected-avatar d-flex justify-center align-center">
+											{{ employee.name.charAt(0) + employee.surname.charAt(0) }} 
+										</p>
+										<p class="ml-2" v-html="`${masterTask.employees[index].name} ${masterTask.employees[index].surname}`" />
+									</td>
+									<td class="task-action">
+										<div class="d-flex justify-start">
+											<img class="pencil-icon" :src="require('@/plugins/tm@dashboard/tasks/_components/_img/checkmark.svg')" alt="checkmark-icon" :style="{opacity: 0.3}">
+											<img class="pencil-icon ml-2" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" :style="{opacity: 0.3}">
+											<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" :style="{opacity: 0.3}">
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</v-table>
+						<div class="d-flex align-center ">
+							<v-btn class="subtask-btn w-100"><v-icon class="mx-1" icon="mdi-plus" />Pridať Subtask</v-btn>
+						</div>
+					</div>
+				</v-card-actions>
+			</v-card>
 		</W-loadable>
 	</v-dialog>
 </template>
@@ -127,6 +305,7 @@ import useVuelidate 	from '@vuelidate/core'
 import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
 import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+import moment 			from 'moment'
 
 const atLeastOne = (value) => value.length
 
@@ -141,6 +320,7 @@ export default {
 
 	data() {
 		return {
+			editMode: false,
 			visible: false,
 			errorUtils,
 			v$: useVuelidate(),
@@ -178,10 +358,9 @@ export default {
 	},
 
 	methods: {
-		async create(masterTask = null) {
-			if (masterTask) {
-				this.masterTask = masterTask
-				await this._load()
+		async create(masterTaskId = null, editMode = false) {
+			if (masterTaskId) {
+				await this._load(masterTaskId)
 			} else {
 				this.masterTask = {
 					project_code: null,
@@ -195,6 +374,7 @@ export default {
 				}
 			}
 
+			this.editMode = editMode || (!this.masterTask.id)
 			this.visible = true
 		},
 
@@ -221,6 +401,15 @@ export default {
 			this.masterTask = null
 		},
 
+		async _load(masterTaskId) {
+			try {
+				this.masterTask = await this.$axios.get_auth_data(`v1/master-tasks/${masterTaskId}`)
+				console.log(this.masterTask)
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		},
+
 		async _create() {
 			try {
 				await this.$axios.post_auth('v1/master-tasks')
@@ -237,6 +426,15 @@ export default {
 			}
 		},
 
+		async deleteTask(masterTaskId) {
+			try {
+				await this.$axios.delete(`v1/master-tasks/${masterTaskId}`)
+				this.close()
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		},	
+
 		employeeSelected(selectedOption) {
 			const employee = this.employees.find((empl) => empl.id == selectedOption.key)
 			this.masterTask.employees.push(employee)
@@ -292,6 +490,12 @@ export default {
 					value: `${employee.name} ${employee.surname}`,
 				}
 			})
+		},
+
+		formattedDeadline() {
+			let deadline = moment(this.masterTask.deadline)
+			let date = deadline.format('DD.MM.yyyy')
+			return date
 		}
 	},
 
@@ -351,4 +555,34 @@ export default {
 	height: 50px
 .scrolling
 	overflow: hidden !important
+
+.scroll-employees
+	overflow-x: scroll
+.trash-icon
+	padding: 10px
+	background: rgba(0, 0, 0, 0.04)
+	margin-left: 12px
+	border-radius: 50%
+	cursor: pointer
+.pencil-icon
+	padding: 10px
+	background: rgba(0, 0, 0, 0.04)
+	border-radius: 50%
+	cursor: pointer
+
+.border-bottom
+	border-bottom: 1px solid rgba(0,0,0,.1)
+
+.subtask-btn
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important
+	color: #7f39fb !important
+	height: 53px
+	text-align: center
+
+v-table, tbody
+	border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+	border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+td:not(:last-child)
+	border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
 </style>
\ No newline at end of file
diff --git a/app/src/plugins/tm@modal/sub-task/z-sub-task-modal.vue b/app/src/plugins/tm@modal/sub-task/z-sub-task-modal.vue
index 8afe71a..292633a 100644
--- a/app/src/plugins/tm@modal/sub-task/z-sub-task-modal.vue
+++ b/app/src/plugins/tm@modal/sub-task/z-sub-task-modal.vue
@@ -1,9 +1,9 @@
 <template>
 	<v-dialog v-model="visible" max-width="650" max-height="90%" height="700px">
-		<W-loadable :content="subTask" class="h-100">
-			<v-card height="100%" class="d-flex flex-column scrolling">
+		<W-loadable :content="task && employees" class="h-100">
+			<v-card v-if="editMode" height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center modal-header">
-					<h1>Vytvoriť subtask</h1>
+					<h1>{{ task.id ? 'Upraviť task' : 'Vytvoriť task'  }}</h1>
 					<v-icon
 						@click.stop="close()"
 						icon="mdi-close"
@@ -13,7 +13,7 @@
 
 				<v-card-actions class="d-flex flex-column modal-content">
 					<v-text-field
-						v-model="subTask.project_code"
+						v-model="task.project_code"
 						@focus="onInputFocus"
 						class="modal-input"
 						label="Kód projektu"
@@ -30,16 +30,16 @@
 						:items="masterTaskOptions"
 					></v-select>
 
-					<p v-if="subTask.team.employees" class="d-flex justify-start align-center w-100 mb-3 text-grey">Priradení zamestnanci</p>
+					<p v-if="task.team.employees" class="d-flex justify-start align-center w-100 mb-3 text-grey">Priradení zamestnanci</p>
 
 					<v-text-field
-						v-for="(employee, index) in subTask.employees"
+						v-for="(employee, index) in task.employees"
 						:key="employee.id"
 						@focus="onInputFocus"
 						class="modal-input"
 						:value="`${employee.name} ${employee.surname}`"
 						variant="solo"
-						v-model="subTask.employees[index].name"
+						v-model="task.employees[index].name"
 						disabled
 					>
 						<p class="employee-select-avatar d-flex justify-center align-center">
@@ -50,24 +50,24 @@
 					<Z-autocomplete
 						v-if="showAddEmployeeInput"
 						:options="employeesOptions"
-						:validations="v$.subTask.employees"
-						:class="{ error: v$.subTask.employees.$errors.length }"
+						:validations="v$.task.employees"
+						:class="{ error: v$.task.employees.$errors.length }"
 						class="modal-input"
 						@option-selected="employeeSelected"
 					/>
 
-					<v-btn class="w-100 mb-5 add-employee-btn" :disabled="!subTask.team.employees" @click="showAddEmployeeInput = true">
+					<v-btn class="w-100 mb-5 add-employee-btn" :disabled="!task.team.employees" @click="showAddEmployeeInput = true">
 						<v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
 					</v-btn>
 
 					<Datepicker
 						class="modal-input mb-5"
-						v-model="subTask.date"
+						v-model="task.date"
 						format="dd.MM.yyyy, HH:mm"
 						locale="sk"
-						:class="{ error: v$.subTask.date.$errors.length }"
+						:class="{ error: v$.task.date.$errors.length }"
 						@focus="onDateFocus"
-						:validations="v$.subTask.date"
+						:validations="v$.task.date"
 						select-text="Vybrať"
 						cancel-text="Zrušiť"
 						placeholder="Trvanie od - do"
@@ -76,16 +76,16 @@
 					/>
 
 					<v-text-field
-						v-model="subTask.duration"
+						v-model="task.duration"
 						@focus="onInputFocus"
 						class="modal-input"
 						variant="solo"
 						type="number"
 						label="Časový odhad"
-						:class="{ error: v$.subTask.duration.$errors.length }"
+						:class="{ error: v$.task.duration.$errors.length }"
 						:hint="
-							v$.subTask.duration.$errors
-								? errorUtils.parseErrors(v$.subTask.duration.$errors)
+							v$.task.duration.$errors
+								? errorUtils.parseErrors(v$.task.duration.$errors)
 								: null
 						"
 						append-inner-icon="mdi-clock-outline"
@@ -95,19 +95,198 @@
 						label="Popis"
 						class="modal-input"
 						variant="solo"
-						:class="{ error: v$.subTask.description.$errors.length }"
+						:class="{ error: v$.task.description.$errors.length }"
 						:hint="
-							v$.subTask.description.$errors
-								? errorUtils.parseErrors(v$.subTask.description.$errors)
+							v$.task.description.$errors
+								? errorUtils.parseErrors(v$.task.description.$errors)
 								: null
 						"
-						v-model="subTask.description"
+						v-model="task.description"
 					></v-textarea>
 
 					<Z-files-upload @files-uploaded="filesUploaded"/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
+				<v-btn class="z-btn" @click="save()">{{ task.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
+			</v-card>
+
+			<v-card v-else height="100%" class="d-flex flex-column scrolling">
+				<div class="d-flex justify-space-between align-center">
+					<p>{{ task.project_code }}</p>
+					<v-icon
+						@click.stop="close()"
+						icon="mdi-close"
+						size="large"
+						class="pb-5"
+					></v-icon>
+				</div>
+				<div class="d-flex justify-space-between align-center modal-header border-bottom pb-4">
+					<h1>{{ task.master_task }}</h1>
+					<div class="d-flex justify-start">
+						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="editMode = !editMode" />
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="deleteTask()"/>
+					</div>	
+				</div>
+
+				<v-card-actions class="d-flex flex-column modal-content">
+					<div class="w-100">
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-link"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Mastertask</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p class="task-badge px-4 py-2 rounded-pill">{{ task.master_task }}</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-drag-vertical"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Status</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p v-if="task.is_finished" class="status-badge px-4 py-2 rounded-pill">Ukončený</p>
+									<p v-if="!task.is_finished" class="status-badge px-4 py-2 rounded-pill">Neukončený</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-calendar-week"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Trvanie</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p v-html="`${formattedStartDate} - ${formattedEndDate}`" />
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-account-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Priradený</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2 d-flex flex-wrap">
+									<div class="d-flex align-center mb-2 me-2" v-for="(employee, index) in task.employees" :key="employee.id">
+										<p class="employee-selected-avatar d-flex justify-center align-center">
+											{{ employee.name.charAt(0) + employee.surname.charAt(0) }} 
+										</p>
+										<p class="ml-2" v-html="`${task.employees[index].name} ${task.employees[index].surname}`" />
+									</div>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-clock-time-three-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Naplánovaný čas</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p>{{ (task.duration / 60 / 60).toFixed(2) }} h</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-timer-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Odpracovaný čas</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<v-text-field
+									v-model="task.nieco"
+									class="modal-input"
+									variant="solo"
+									type="number"
+									placeholder="h"
+									></v-text-field>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<v-row no-gutters class="align-center border-bottom">
+							<v-col cols="5">
+								<v-sheet class="pa-2 ma-2">
+									<div class="d-flex align-center">
+										<v-icon
+											icon="mdi-clock-time-three-outline"
+											size="large"
+										></v-icon>
+										<p class="mx-3">Zostávajúci čas</p>
+									</div>
+								</v-sheet>
+							</v-col>
+							<v-col cols="7">
+								<v-sheet class="ma-2">
+									<p>{{ task.remaining_time }} h</p>
+								</v-sheet>
+							</v-col>
+						</v-row>
+						<div class="px-5 py-5 border-bottom">
+							<p>Popis zadania</p>
+							<section class="description-detail px-2 py-2 w-100 rounded mt-2">{{ task.description }}</section>
+							<p class="mt-5">Prílohy</p>
+							<div class="w-100 d-flex align-center">
+								<div v-for="(file, index) in task.files" :key="file.id" class="d-flex align-center flex-wrap" :class="[index === 0 ? 'ml-0': 'ml-2']">
+									<v-chip class="mt-2">
+										{{ file.name }}
+										<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
+									</v-chip>
+								</div>
+							</div>
+						</div>
+						<div class="d-flex justify-start align-center mt-8">
+							<v-btn class="done-btn">Dokončené</v-btn>
+							<v-btn class="add-employee-btn" @click="save()">Uložiť zmeny</v-btn>
+						</div>
+					</div>
+				</v-card-actions>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
@@ -120,6 +299,7 @@ import useVuelidate 	from '@vuelidate/core'
 import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
 import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+import moment 			from 'moment'
 
 const atLeastOne = (value) => value.length
 
@@ -134,8 +314,9 @@ export default {
 
 	data() {
 		return {
+			editMode: false,
 			visible: false,
-			subTask: null,
+			task: null,
 			errorUtils,
 			v$: useVuelidate(),
 			preventInputFocus: false,
@@ -148,7 +329,7 @@ export default {
 
 	validations() {
 		return {
-			subTask: {
+			task: {
 				project_code: { required },
 				date: { required },
 				team: { required },
@@ -169,12 +350,11 @@ export default {
 	},
 
 	methods: {
-		async create(subTask = null) {
-			if (subTask) {
-				this.subTask = subTask
-				await this._load()
+		async create(taskId = null, editMode = false) {
+			if (taskId) {
+				await this._load(taskId)
 			} else {
-				this.subTask = {
+				this.task = {
 					project_code: null,
 					date: null,
 					team: {},
@@ -185,6 +365,7 @@ export default {
 				}
 			}
 
+			this.editMode = editMode || (!this.task.id)
 			this.visible = true
 		},
 
@@ -193,7 +374,7 @@ export default {
 				return
 
 			try {
-				if (this.subTask.id)
+				if (this.task.id)
 					await this._update()
 				else
 					await this._create()
@@ -201,14 +382,23 @@ export default {
 				this.close()
 				this.$router.push({ name: 'Dashboard - Tasks' })
 			} catch (error) {
-				console.log(error)
+				this.$toast(error)
 			}
 		},
 
 		close() {
 			this.visible = false
-			this.$emit('close', this.subTask)
-			this.subTask = null
+			this.$emit('close', this.task)
+			this.task = null
+		},
+
+		async _load(taskId) {
+			try {
+				this.task = await this.$axios.get_auth_data(`v1/tasks/${taskId}`)
+				console.log(this.task)
+			} catch (error) {
+				this.$toast.error(error)
+			}
 		},
 
 		async _create() {
@@ -221,15 +411,24 @@ export default {
 
 		async _update() {
 			try {
-				await this.$axios.post_auth(`v1/master-tasks/${this.subTask.id}`)
+				await this.$axios.post_auth(`v1/master-tasks/${this.task.id}`)
 			} catch (error) {
 				this.$toast.error(error)
 			}
 		},
 
+		async deleteTask(taskId) {
+			try {
+				await this.$axios.delete(`v1/tasks/${taskId}`)
+				this.close()
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		},	
+
 		employeeSelected(selectedOption) {
 			const employee = this.employees.find((empl) => empl.id == selectedOption.key)
-			this.subTask.employees.push(employee)
+			this.task.employees.push(employee)
 			this.showAddEmployeeInput = false
 		},
 
@@ -248,7 +447,7 @@ export default {
 		},
 
 		filesUploaded(files) {
-			this.subTask.files = files
+			this.task.files = files
 		}
 	},
 
@@ -258,7 +457,7 @@ export default {
 		},
 
 		employeesOptions() {
-			const selectedEmployeesIds = this.subTask.employees.map(
+			const selectedEmployeesIds = this.task.employees.map(
 				(employee) => employee.id
 			)
 			const employees = this.employees.filter(
@@ -271,14 +470,26 @@ export default {
 					value: `${employee.name} ${employee.surname}`,
 				}
 			})
+		},
+
+		formattedStartDate() {
+			let startDate = moment(this.task.starts_at)
+			let date = startDate.format('DD.MM.yyyy, HH:mm') 
+			return date
+		},
+
+		formattedEndDate() {
+			let endDate = moment(this.task.ends_at)
+			let date = endDate.format('DD.MM.yyyy, HH:mm') 
+			return date
 		}
 	},
 
 	watch: {
 		selectedMasterTask() {
-			this.subTask.team 			= this.masterTasks.find(masterTask => `${masterTask.name} - ${masterTask.id}` == this.selectedMasterTask)
-			this.subTask.employees 		= this.subTask.team.employees
-			this.subTask.project_code	= this.masterTasks.filter(x => `${x.name} - ${x.id}` == this.selectedMasterTask)[0].project_code
+			this.task.team 			= this.masterTasks.find(masterTask => `${masterTask.name} - ${masterTask.id}` == this.selectedMasterTask)
+			this.task.employees 	= this.task.team.employees
+			this.task.project_code	= this.masterTasks.filter(x => `${x.name} - ${x.id}` == this.selectedMasterTask)[0].project_code
 		}
 	}
 }
@@ -322,6 +533,29 @@ export default {
 	border: 1px solid #E0E0E0
 	border-radius: 4px
 	height: 50px
+	width: 203px
 .scrolling
 	overflow: hidden !important
+
+.trash-icon
+	padding: 10px
+	background: rgba(0, 0, 0, 0.04)
+	margin-left: 12px
+	border-radius: 50%
+	cursor: pointer
+.pencil-icon
+	padding: 10px
+	background: rgba(0, 0, 0, 0.04)
+	border-radius: 50%
+	cursor: pointer
+
+.border-bottom
+	border-bottom: 1px solid rgba(0,0,0,.1)
+
+.done-btn
+	background: #7f39fb !important
+	border-radius: 4px !important
+	color: #fff !important
+	height: 50px
+	width: 203px
 </style>
\ No newline at end of file