[subTask, masterTask detail-modal]

2026-10-21 14:29:34 +00:00 · 2023-01-11 12:10:24 +01:00
1 parent f237ba05bf
commit 258b13c92a
@@ -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",
@@ -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",
@@ -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
 }
@@ -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
 }
@@ -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')
+					}
 				]
 			}
 		]
@@ -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: ''
 		}
 	},

@@ -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 */
@@ -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"}
@@ -0,0 +1,5 @@
+.z-btn {
+  background: #7f39fb !important;
+  border-radius: 4px !important;
+  color: #fff !important;
+}/*# sourceMappingURL=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"}
@@ -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 */
@@ -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"}
@@ -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 */
@@ -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"}
@@ -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

@@ -0,0 +1,4 @@
+.v-dialog h1 {
+  font-size: 26px;
+  font-weight: 500;
+}/*# sourceMappingURL=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"}
@@ -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 */
@@ -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"}
@@ -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 */
@@ -0,0 +1 @@
+{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"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","file":"styles.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 */
@@ -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"}
@@ -0,0 +1,10 @@
+<template>
+	<div>
+
+	</div>
+</template>
+
+<script>
+export default {
+}
+</script>
@@ -1,4 +1,34 @@
 <template>
-	<div>
-	</div>
+	<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>
@@ -1,17 +1,25 @@
 <template>
  <div id="calendar" class="mb-12">
    <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 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>
@@ -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%
@@ -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,
@@ -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>
@@ -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>
@@ -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,7 +411,16 @@ 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)
 			}
@@ -229,7 +428,7 @@ export default {

 		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>
				`@@ -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"}`
				`@@ -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"}`
				`@@ -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"}`
				`@@ -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"}
				`@@ -0,0 +1 @@`
				`{"version":3,"sources":["v-dialog.sass","v-dialog.css"],"names":[],"mappings":"AACC;EACC,eAAA;EACA,gBAAA;ACAF","file":"v-dialog.css"}`
				`@@ -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"}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAOA;EACE,YAAA;EACA,+CAAA;ACNF;ADSE;EAAG,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACNL;ADQE;EACE,2BAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACNJ;ADWE;EAAY,eAAA;ACRd;ADUE;EAA2C,iBAAA;ACP7C;ADQE;EACE,YAAA;EACA,wBAAA;EACA,gBAAA;ACNJ;ADSE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,yBAAA;EACA,WAAA;ACPJ;ADWE;EAAW,gBAAA;ACRb;ADUE;EACE,aAAA;EACA,mBAAA;ACRJ;ADUI;EACE,sBAAA;EACA,cAAA;ACRN;ADWI;EACE,cAAA;EACA,WAAA;ACTN;ADYI;EACE,eAAA;ACVN;ADiBI;EAAkC,aAAA;ACdtC;ADgBI;EAA4C,gBAjE3B;ACoDrB;ADcI;EAA8C,gBAnE9B;EAmE8D,aAAA;ACVlF;ADWI;EAAkE,gBAlE/C;AC0DvB;ADUI;EACE,aAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;ACRN;ADWI;EAAoF,aA1EhE;ACkExB;ADaE;EACE,kBAAA;EACA,gBAAA;ACXJ;ADcE;EACE,iBAAA;EACA,mBAAA;EACA,cAAA;ACZJ;ADcI;EACE,UA/Fc;EAgGd,sBAAA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,cAAA;EACA,mBAAA;EACA,yBAAA;EACA,6BAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;ACZN;ADcM;EACE,iBAAA;EACA,iBAAA;EACA,gBAAA;ACZR;ADeI;EAA+B,UA9GZ;ACkGvB;ADeE;EACE,cAAA;EACA,kBAAA;EACA,iCAAA;EACA,gBAAA;EACA,kBAAA;EACA,WAAA;ACbJ;ADiBE;EACE,aAAA;EACA,cAAA;EACA,cAAA;ACfJ;ADkBE;EACE,UAnIiB;EAoIjB,yBAAA;AChBJ;ADkBI;EACE,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uBAAA;AChBN;ADoBE;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,gBAAA;EACA,kBAAA;EACA,WAAA;AClBJ;ADoBI;EAAO,YAAA;ACjBX;ADoBE;EACE,UA9JgB;EA+JhB,YAAA;EACA,cAAA;AClBJ;ADoBI;EACE,UAjKiB;EAkKjB,gBAAA;AClBN;ADqBI;EACE,eArKqB;EAsKrB,0CAAA;ACnBN;ADsBI;EACE,iBAzKiC;ACqJvC;ADsBI;EAAoE,iBA1KhD;ACuJxB;ADqBI;EACE,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;ACnBN;ADsBI;EACE,WAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,8CAAA;ACpBN;AD0BE;EACE,mBAAA;ACxBJ;ADyBI;EAAwC,SAAA;ACtB5C;ADwBI;EAAsD,YAAA;ACrB1D;ADuBI;EAEE,iBAAA;EACA,cAAA;ACtBN;;AD6BA;;EAEE,0BAAA;AC1BF;;AD6BA;;EAEE,4BAAA;EACA,UAAA;AC1BF;;AD6BA;;EAEE,2BAAA;EACA,UAAA;AC1BF;;AD6BA;;EACiC,6BAAA;EAA8B,YAAA;ACxB/D;;ADyBA;;EACoD,OAAA;EAAQ,QAAA;EAAS,YAAA;ACnBrE;;ADoBA;;EACkD,aAAA;EAAc,mBAAA;ACfhE;;ADoBE;EAA2C,yBAAA;EAA0B,WAAA;ACfvE;ADgBE;EAAoB,yBAAA;ACbtB;ADcE;EAA8C,0CAAA;ACXhD;ADYE;EAAkD,0CAAA;ACTpD;ADUE;EAAgC,qCAAA;ACPlC;ADQE;;EACkC,0CAAA;ACLpC;ADME;;;EAEgC,2CAAA;ACHlC;;ADOE;EAA2C,yCAAA;EAA0C,WAAA;ACFvF;ADGE;EAAoB,wCAAA;ACAtB;ADCE;EAA8C,0CAAA;ACEhD;ADDE;EAAkD,0CAAA;ACIpD;ADHE;EAAgC,sCAAA;ACMlC;ADLE;;EACkC,yCAAA;ACQpC;ADPE;;;EAEgC,yCAAA;ACUlC;;ADLE;EAA4B,YAAA;ACS9B;ADRE;EAAqC,gBAAA;EAAiB,YAAA;ACYxD;ADXE;EAA6B,YAAA;ACc/B;ADbE;EACE,WAAA;EACA,YAAA;EACA,YAAA;EACA,6BAAA;EACA,mBAAA;EACA,WAAA;ACeJ;ADbE;EAA0C,WAAA;EAAY,gBAAA;ACiBxD;ADhBE;EAAmC,aAAA;ACmBrC;ADlBE;EAA2C,WAAA;ACqB7C;ADpBE;EAA4C,WAAA;ACuB9C;ADtBE;EAAe,wCAAA;ACyBjB;ADtBI;EAAgD,yBAAA;ACyBpD;ADxBI;EAAqE,yBAAA;EAA0B,WAAA;AC4BnG;AD3BI;EAA+C,0CAAA;AC8BnD;AD7BI;EAAwE,qBAAA;ACgC5E;AD/BI;;EACkC,0CAAA;ACkCtC;AD9BI;EAAgD,0CAAA;ACiCpD;ADhCI;EAAqE,yBAAA;EAA0B,WAAA;ACoCnG;ADnCI;EAA+C,0CAAA;ACsCnD;ADrCI;EAAwE,qBAAA;ACwC5E;ADvCI;;EACkC,yCAAA;AC0CtC;;ADrCE;EAAoB,gBAAA;ACyCtB;ADxCE;EAAkB,aAAA;EAAc,gBAAA;EAAiB,YAAA;AC6CnD;AD5CE;EAA4B,YAAA;AC+C9B;AD9CE;EAAe,gBAAA;ACiDjB;ADhDE;EAAqC,gBAAA;EAAiB,YAAA;ACoDxD;ADnDE;EACE,YAAA;EACA,YAAA;EACA,6BAAA;EACA,mBAAA;EACA,mEAAA;ACqDJ;ADnDE;EAA4C,OAAA;EAAQ,cAAA;EAAe,YAAA;ACwDrE;ADvDE;EAA2C,OAAA;EAAQ,eAAA;AC2DrD;AD1DE;EAA4C,WAAA;AC6D9C;AD3DE;EAAsD,oCAAA;AC8DxD;AD7DE;EAAwE,yBAAA;EAA0B,WAAA;ACiEpG;ADhEE;EACqE,qBAAA;ACkEvE","file":"styles.css"}
				`@@ -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"}