From 003525108033cc5fc63b05a5fb2eaa4dcf248bd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Tue, 14 Oct 2025 18:42:07 +0200
Subject: [PATCH] refactor(task-modals): updated timeblocks to new local dat
 format

---
 .../_components/a-task-spent-time.vue         | 342 +++++++++++-------
 .../_components/a-task-timeblocks.vue         | 127 +++++--
 .../tm@modal/task/z-complete-task-modal.vue   | 153 +++++---
 .../task/z-delete-timeblock-modal.vue         | 179 +++++----
 .../tm@modal/task/z-task-add-time-modal.vue   | 210 +++++++----
 .../plugins/tm@modal/task/z-task-modal.vue    |  30 +-
 .../task/z-unable-to-complete-task-modal.vue  | 303 ++++++++++------
 .../_components/a-ongoing-table.vue           | 312 ++++++++++------
 8 files changed, 1059 insertions(+), 597 deletions(-)

diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
index 2f94e47..34726a6 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue
@@ -1,170 +1,244 @@
 <template>
-	<v-row no-gutters>
-		<v-col cols="5">
-			<v-sheet class="py-3">
-				<div class="d-flex align-center">
-					<v-icon icon="mdi-clock-time-three-outline" size="large"></v-icon>
-					<p class="mx-3">Odpracovaný čas</p>
-				</div>
-			</v-sheet>
-		</v-col>
+  <v-row no-gutters>
+    <v-col cols="5">
+      <v-sheet class="py-3">
+        <div class="d-flex align-center">
+          <v-icon icon="mdi-clock-time-three-outline" size="large"></v-icon>
+          <p class="mx-3">Odpracovaný čas</p>
+        </div>
+      </v-sheet>
+    </v-col>
 
-		<v-col cols="7">
-			<v-sheet class="py-3">
-				<p>{{ hours }} h</p>
-			</v-sheet>
+    <v-col cols="7">
+      <v-sheet class="py-3">
+        <p>{{ hours }} h</p>
+      </v-sheet>
 
-			<v-sheet class="py-3">
-				<div class="d-flex align-center mb-3">
-					<v-icon @click="showModal = true" class="add-date cursor-pointer mr-2" icon="mdi-plus" size="medium" />
-					<p class="task-badge rounded-pill">Pridať záznam</p>
-				</div>
+      <v-sheet class="py-3">
+        <div class="d-flex align-center mb-3">
+          <v-icon
+            @click="showModal = true"
+            class="add-date cursor-pointer mr-2"
+            icon="mdi-plus"
+            size="medium"
+          />
+          <p class="task-badge rounded-pill">Pridať záznam</p>
+        </div>
 
-				<template v-if="subtask.timesheets.length">
-					<div v-for="timesheet in subtask.timesheets" :key="timesheet.id" class="d-flex align-center mb-3">
-						<v-icon @click.stop="deleteTimesheet(timesheet)" class="circle-border cursor-pointer mr-2" icon="mdi-minus" size="medium" />
+        <template v-if="subtask.timesheets.length">
+          <div
+            v-for="timesheet in subtask.timesheets"
+            :key="timesheet.id"
+            class="d-flex align-center mb-3"
+          >
+            <v-icon
+              @click.stop="deleteTimesheet(timesheet)"
+              class="circle-border cursor-pointer mr-2"
+              icon="mdi-minus"
+              size="medium"
+            />
 
-						<div class="d-flex align-center flex-start width-100">
-							<p class="task-badge rounded-pill">{{ timesheet.time }}</p>
-							<!-- <p class="ml-5">{{ timesheet.employee_name }} ({{ moment(timesheet.timestamp).format('D.M.YYYY') }})</p> -->
-							<p class="ml-5">{{ timesheet.employee_name }} ({{ timesheet.timestamp }})</p>
-						</div>
-					</div>
-				</template>
-			</v-sheet>
-		</v-col>
-	</v-row>
+            <div class="d-flex align-center flex-start width-100">
+              <p class="task-badge rounded-pill">{{ timesheet.time }}</p>
+              <!-- <p class="ml-5">{{ timesheet.employee_name }} ({{ moment(timesheet.timestamp).format('D.M.YYYY') }})</p> -->
+              <p class="ml-5">
+                {{ timesheet.employee_name }} ({{ timesheet.timestamp }})
+              </p>
+            </div>
+          </div>
+        </template>
+      </v-sheet>
+    </v-col>
+  </v-row>
 
-	<v-dialog max-width="750" v-model="showModal" persistent>
-		<v-card>
-			<div class="d-flex justify-space-between align-center">
-				<h1>Pridať odpracovaný čas</h1>
+  <v-dialog max-width="750" v-model="showModal" persistent>
+    <v-card>
+      <div class="d-flex justify-space-between align-center">
+        <h1>Pridať odpracovaný čas</h1>
 
-				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
-			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
-				<v-text-field v-model="form.hours" variant="solo" bg-color="white" type="number" :hint="v$.form.hours.$errors ? errorUtils.parseErrors(v$.form.hours.$errors) : null" :class="{ error: v$.form.hours.$errors.length }" class="mb-2" label="Odpracovaný čas" />
-			</v-card-actions>
-			<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
-		</v-card>
-	</v-dialog>
+        <v-icon
+          @click.stop="closeModal()"
+          icon="mdi-close"
+          size="large"
+        ></v-icon>
+      </div>
+      <v-card-actions class="mt-10 d-flex justify-start align-center">
+        <v-text-field
+          v-model="form.hours"
+          variant="solo"
+          bg-color="white"
+          type="number"
+          :hint="
+            v$.form.hours.$errors
+              ? errorUtils.parseErrors(v$.form.hours.$errors)
+              : null
+          "
+          :class="{ error: v$.form.hours.$errors.length }"
+          class="mb-2"
+          label="Odpracovaný čas"
+        />
+      </v-card-actions>
+      <v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-import moment 							from 'moment'
-import errorUtils 						from '@/plugins/lib@auth/_utils/error.utils'
-import useVuelidate 					from '@vuelidate/core'
-import { required, numeric, minValue } 	from '@vuelidate/validators'
-import tmUtils 							from '@/plugins/tm@_utils/tm.utils'
-import { mapGetters } 					from 'vuex'
-import modalMixin						from '@/plugins/tm@modal/_mixins/modal.mixin'
+import moment from 'moment';
+import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
+import useVuelidate from '@vuelidate/core';
+import { required, numeric, minValue } from '@vuelidate/validators';
+import tmUtils from '@/plugins/tm@_utils/tm.utils';
+import { mapGetters } from 'vuex';
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 
 export default {
-	mixins: [ modalMixin ],
-	props: {
-		hours: {
-			type: Number,
-			required: true
-		},
+  mixins: [modalMixin],
+  props: {
+    hours: {
+      type: Number,
+      required: true,
+    },
 
-		subtask: {
-			type: Object,
-			required: true
-		}
-	},
+    subtask: {
+      type: Object,
+      required: true,
+    },
+  },
 
-	data() {
-		return {
-			moment,
-			v$: useVuelidate(),
-			errorUtils,
-			showModal: false,
-			form: {
-				hours: null
-			}
-		}
-	},
+  data() {
+    return {
+      moment,
+      v$: useVuelidate(),
+      errorUtils,
+      showModal: false,
+      form: {
+        hours: null,
+      },
+    };
+  },
 
-	validations() {
-		return {
-			form: {
-				hours: {required, numeric, minValue: minValue(0.1)}
-			}
-		}
-	},
+  validations() {
+    return {
+      form: {
+        hours: { required, numeric, minValue: minValue(0.1) },
+      },
+    };
+  },
 
-	computed: {
-		...mapGetters('auth', ['user'])
-	},
+  computed: {
+    ...mapGetters('auth', ['user']),
+  },
 
-	methods: {
-		async submit() {
-			if (!await this.v$.$validate())
-				return
+  methods: {
+    async submit() {
+      if (!(await this.v$.$validate())) return;
 
-			const subtask = JSON.parse(JSON.stringify(this.subtask))
+      const subtask = JSON.parse(JSON.stringify(this.subtask));
 
-			subtask.timesheets.push({
-				id: null,
-				employee_id: this.user.id,
-				time: typeof this.form.hours == 'string' ? parseFloat(this.form.hours) : this.form.hours
-			})
+      subtask.timesheets.push({
+        id: null,
+        employee_id: this.user.id,
+        time:
+          typeof this.form.hours == 'string'
+            ? parseFloat(this.form.hours)
+            : this.form.hours,
+      });
 
-			if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(this._mergeDeadlineTimeDate())
+      if (subtask.deadline)
+        subtask.deadline = tmUtils.formatDateTimeForBackend(
+          this._mergeDeadlineTimeDate(),
+        );
 
-			this._update(subtask)
-		},
+      this._update(subtask);
+    },
 
-		async deleteTimesheet({ id }) {
-			const subtask = JSON.parse(JSON.stringify(this.subtask))
-			subtask.timesheets = subtask.timesheets.filter(timesheet => timesheet.id != id)
-			if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(this._mergeDeadlineTimeDate())
+    async deleteTimesheet({ id }) {
+      const subtask = JSON.parse(JSON.stringify(this.subtask));
+      subtask.timesheets = subtask.timesheets.filter(
+        (timesheet) => timesheet.id != id,
+      );
+      if (subtask.deadline)
+        subtask.deadline = tmUtils.formatDateTimeForBackend(
+          this._mergeDeadlineTimeDate(),
+        );
 
-			this._update(subtask)
-		},
+      this._update(subtask);
+    },
 
-		closeModal() {
-			this.form = {
-				hours: null
-			}
+    closeModal() {
+      this.form = {
+        hours: null,
+      };
 
-			this.showModal = false
-			this.$nextTick(() => this.v$.$reset())
-		},
+      this.showModal = false;
+      this.$nextTick(() => this.v$.$reset());
+    },
 
-		async _update(data) {
-			try {
-				data.timesheets = data.timesheets.map((timesheet) => {
-					delete timesheet.employee_name
-					return timesheet
-				})
-				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${data.id}`, data)
+    async _update(data) {
+      try {
+        const timesheets = data.timesheets.map((timesheet) => {
+          delete timesheet.employee_name;
+          return timesheet;
+        });
 
-				this.closeModal()
-				this.$events.emit('on-subtask-edited', subtask)
-			} catch (error) {
-				this.$toast.error(error.message || error)
+        // Convert timeblocks from internal format to BE format
+        const timeblocks = (data.timeblocks || [])
+          .filter((timeblock) => {
+            // Filter timeblocks that have either old format (date) or new format (start)
+            return timeblock.date || timeblock.start;
+          })
+          .map((timeblock) => {
+            // If already in BE format (has start field), return as is
+            if (timeblock.start && !timeblock.date) {
+              return {
+                id: timeblock.id || null,
+                start: timeblock.start,
+                end: timeblock.end,
+                is_finished: timeblock.is_finished || 0,
+              };
+            }
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[a-task-spent-time.vue] Error: ', error)
-			}
-		},
+            // Convert from internal format to BE format
+            const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+            return {
+              id: timeblock.id || null,
+              start: `${dateStr} ${timeblock.starts_at_time}:00`,
+              end: `${dateStr} ${timeblock.ends_at_time}:00`,
+              is_finished: timeblock.is_finished || 0,
+            };
+          });
 
-		_mergeDeadlineTimeDate() {
-			const date = new Date(this.subtask.deadline)
-			console.log('a-task-spent-time', this.subtask)
-			const timeParts = this.subtask._deadline_time.split(':')
+        const { subtask } = await this.$axios.put_auth(
+          `v1/subtasks/${data.id}`,
+          { ...data, timesheets, timeblocks },
+        );
 
-			date.setHours(parseInt(timeParts[0]))
-			date.setMinutes(parseInt(timeParts[1]))
+        this.closeModal();
+        this.$events.emit('on-subtask-edited', subtask);
+      } catch (error) {
+        this.$toast.error(error.message || error);
 
-			return date
-		},
-	}
-}
+        if (process.env.NODE_ENV === 'development')
+          console.log('[a-task-spent-time.vue] Error: ', error);
+      }
+    },
+
+    _mergeDeadlineTimeDate() {
+      const date = new Date(this.subtask.deadline);
+      console.log('a-task-spent-time', this.subtask);
+      const timeParts = this.subtask._deadline_time.split(':');
+
+      date.setHours(parseInt(timeParts[0]));
+      date.setMinutes(parseInt(timeParts[1]));
+
+      return date;
+    },
+  },
+};
 </script>
 
 <style lang="sass" scoped>
 .width-100
 	width: 100%
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue b/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
index c8553e8..f41da5e 100644
--- a/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
+++ b/app/src/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue
@@ -41,10 +41,8 @@
             class="task-badge rounded-pill"
             :class="{ 'strike-through': timeblock.is_finished }"
           >
-            {{ tmUtils.formatTimeblockDateTime(timeblock) }} -
-            {{
-              timeblock.ends_at_time || tmUtils.formatDateTime(timeblock.end)
-            }}
+            {{ formatTimeblockStart(timeblock) }} -
+            {{ formatTimeblockEnd(timeblock) }}
           </p>
           <v-icon
             v-if="!isOffice365Task"
@@ -212,20 +210,35 @@ export default {
   },
 
   methods: {
+    formatTimeblockStart(timeblock) {
+      // Handle internal format with date and time fields
+      if (timeblock.date && timeblock.starts_at_time) {
+        const dateStr = moment(timeblock.date).format('DD.MM.yyyy');
+        return `${dateStr}, ${timeblock.starts_at_time}`;
+      }
+      // Fallback to backend format
+      if (timeblock.start) {
+        return tmUtils.formatDateTime(timeblock.start);
+      }
+      return '';
+    },
+
+    formatTimeblockEnd(timeblock) {
+      // Handle internal format with date and time fields
+      if (timeblock.date && timeblock.ends_at_time) {
+        return timeblock.ends_at_time;
+      }
+      // Fallback to backend format
+      if (timeblock.end) {
+        return tmUtils.formatDateTime(timeblock.end);
+      }
+      return '';
+    },
+
     async submit() {
       if (!(await this.v$.$validate())) return;
 
       const subtask = JSON.parse(JSON.stringify(this.subtask));
-      const splittedStartsAtTime = this.form.starts_at_time.split(':');
-      const splittedEndsAtTime = this.form.ends_at_time.split(':');
-      const start = moment(this.form.date)
-        .hours(parseInt(splittedStartsAtTime[0]))
-        .minutes(parseInt(splittedStartsAtTime[1]))
-        .toISOString();
-      const end = moment(this.form.date)
-        .hours(parseInt(splittedEndsAtTime[0]))
-        .minutes(parseInt(splittedEndsAtTime[1]))
-        .toISOString();
 
       if (!subtask?.timeblocks) {
         subtask.timeblocks = [];
@@ -237,11 +250,13 @@ export default {
         subtask.is_finished = 0;
       }
 
+      // Add timeblock in internal format
       subtask.timeblocks.push({
-        end: tmUtils.formatDateTimeForBackend(end),
         id: null,
+        date: this.form.date,
+        starts_at_time: this.form.starts_at_time,
+        ends_at_time: this.form.ends_at_time,
         is_finished: 0,
-        start: tmUtils.formatDateTimeForBackend(start),
       });
 
       if (subtask.deadline)
@@ -256,6 +271,7 @@ export default {
       } else {
         if (!subtask.id) {
           this.$emit('update-unfinished-subtask', subtask);
+          this.closeModal();
         } else {
           this._update(subtask);
         }
@@ -264,16 +280,6 @@ export default {
 
     async confirmSubmit() {
       const subtask = JSON.parse(JSON.stringify(this.subtask));
-      const splittedStartsAtTime = this.form.starts_at_time.split(':');
-      const splittedEndsAtTime = this.form.ends_at_time.split(':');
-      const start = moment(this.form.date)
-        .hours(parseInt(splittedStartsAtTime[0]))
-        .minutes(parseInt(splittedStartsAtTime[1]))
-        .toISOString();
-      const end = moment(this.form.date)
-        .hours(parseInt(splittedEndsAtTime[0]))
-        .minutes(parseInt(splittedEndsAtTime[1]))
-        .toISOString();
 
       if (!subtask?.timeblocks) {
         subtask.timeblocks = [];
@@ -285,11 +291,13 @@ export default {
         subtask.is_finished = 0;
       }
 
+      // Add timeblock in internal format
       subtask.timeblocks.push({
-        end: tmUtils.formatDateTimeForBackend(end),
         id: null,
+        date: this.form.date,
+        starts_at_time: this.form.starts_at_time,
+        ends_at_time: this.form.ends_at_time,
         is_finished: 0,
-        start: tmUtils.formatDateTimeForBackend(start),
       });
 
       if (subtask.deadline)
@@ -309,20 +317,48 @@ export default {
 
     async toggleTimeblockIsFinished(originalTimeblock) {
       // TODO: Pridat odpracovany cas modal?
-      console.log('toggleTimeblockIsFinished 5', this.subtask);
       const subtask = JSON.parse(JSON.stringify(this.subtask));
       const timeblock = JSON.parse(JSON.stringify(originalTimeblock));
 
       timeblock.is_finished = timeblock.is_finished == 1 ? 0 : 1;
 
       try {
+        // Convert timeblock to backend format before sending
+        const timeblockForBackend = {
+          id: timeblock.id,
+          is_finished: timeblock.is_finished,
+        };
+
+        // If timeblock is in internal format, convert it
+        if (timeblock.date) {
+          const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+          timeblockForBackend.start = `${dateStr} ${timeblock.starts_at_time}:00`;
+          timeblockForBackend.end = `${dateStr} ${timeblock.ends_at_time}:00`;
+        } else {
+          // Already in backend format
+          timeblockForBackend.start = timeblock.start;
+          timeblockForBackend.end = timeblock.end;
+        }
+
         const { data: newTimeblock } = await this.$axios.put_auth(
           `v1/timeblocks/${timeblock.id}`,
-          timeblock,
+          timeblockForBackend,
         );
 
+        // Convert returned timeblock from backend format to internal format
+        const startMoment = moment(newTimeblock.start, 'YYYY-MM-DD HH:mm:ss');
+        const endMoment = moment(newTimeblock.end, 'YYYY-MM-DD HH:mm:ss');
+        const convertedTimeblock = {
+          id: newTimeblock.id,
+          date: startMoment.toDate(),
+          starts_at_time: startMoment.format('HH:mm'),
+          ends_at_time: endMoment.format('HH:mm'),
+          is_finished: newTimeblock.is_finished,
+        };
+
         subtask.timeblocks = subtask.timeblocks.map((originalTimeblock) => {
-          if (originalTimeblock.id == newTimeblock.id) return newTimeblock;
+          if (originalTimeblock.id == convertedTimeblock.id)
+            return convertedTimeblock;
 
           return originalTimeblock;
         });
@@ -365,9 +401,36 @@ export default {
           return timesheet;
         });
 
+        // Convert timeblocks from internal format to BE format
+        const timeblocks = (data.timeblocks || [])
+          .filter((timeblock) => {
+            // Filter timeblocks that have either old format (date) or new format (start)
+            return timeblock.date || timeblock.start;
+          })
+          .map((timeblock) => {
+            // If already in BE format (has start field), return as is
+            if (timeblock.start && !timeblock.date) {
+              return {
+                id: timeblock.id || null,
+                start: timeblock.start,
+                end: timeblock.end,
+                is_finished: timeblock.is_finished || 0,
+              };
+            }
+
+            // Convert from internal format to BE format
+            const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+            return {
+              id: timeblock.id || null,
+              start: `${dateStr} ${timeblock.starts_at_time}:00`,
+              end: `${dateStr} ${timeblock.ends_at_time}:00`,
+              is_finished: timeblock.is_finished || 0,
+            };
+          });
+
         const { subtask } = await this.$axios.put_auth(
           `v1/subtasks/${data.id}`,
-          { ...data, timesheets },
+          { ...data, timesheets, timeblocks },
         );
 
         this.closeModal();
diff --git a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
index aeca918..b8fefa4 100644
--- a/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-complete-task-modal.vue
@@ -1,63 +1,114 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
-		<v-card>
-			<div class="d-flex justify-space-between align-center">
-				<h1>Ste si istý, že chcete {{ subtask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} sub task, z mastertasku <b>{{ subtask?.master_task?.name || subtask.master_task }}</b>?</h1>
-				<v-icon
-					@click.stop="closeModal()"
-					icon="mdi-close"
-					size="large"
-				></v-icon>
-			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
-				<v-btn class="button primary half" variant="flat" @click="complete()">ÁNO</v-btn>
-				<v-btn class="button primary half outline" @click.stop="visible = false">ZRUŠIŤ</v-btn>
-			</v-card-actions>
-		</v-card>
-	</v-dialog>
+  <v-dialog v-model="visible" max-width="750" persistent>
+    <v-card>
+      <div class="d-flex justify-space-between align-center">
+        <h1>
+          Ste si istý, že chcete
+          {{ subtask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} sub task, z
+          mastertasku
+          <b>{{ subtask?.master_task?.name || subtask.master_task }}</b
+          >?
+        </h1>
+        <v-icon
+          @click.stop="closeModal()"
+          icon="mdi-close"
+          size="large"
+        ></v-icon>
+      </div>
+      <v-card-actions
+        class="mt-10 d-flex justify-start align-center mobile-view"
+      >
+        <v-btn class="button primary half" variant="flat" @click="complete()"
+          >ÁNO</v-btn
+        >
+        <v-btn class="button primary half outline" @click.stop="visible = false"
+          >ZRUŠIŤ</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import moment from 'moment';
 
 export default {
-	mixins: [ modalMixin ],
-	emits: ['close', 'on-subtask-edited'],
+  mixins: [modalMixin],
+  emits: ['close', 'on-subtask-edited'],
 
-	data() {
-		return {
-			visible: false,
-			subtask: null
-		}
-	},
+  data() {
+    return {
+      visible: false,
+      subtask: null,
+    };
+  },
 
-	methods: {
-		async showModal({ subtask }) {
-			this.subtask = subtask
-			this.visible = true
-		},
+  methods: {
+    async showModal({ subtask }) {
+      this.subtask = subtask;
+      this.visible = true;
+    },
 
-		async complete() {
-			try {
-				const tempSubtask 	= {...this.subtask, is_finished: this.subtask.is_finished ? 0 : 1, timesheets: this.subtask.timesheets.map((timesheet) => {
-					delete timesheet.employee_name
-					return timesheet
-				})}
-				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
+    async complete() {
+      try {
+        const timesheets = this.subtask.timesheets.map((timesheet) => {
+          delete timesheet.employee_name;
+          return timesheet;
+        });
 
-				this.visible = false
-				this.$emit('on-subtask-edited', subtask)
-			} catch (error) {
-				this.$toast.error(this.$parseError(error))
+        // Convert timeblocks from internal format to BE format
+        const timeblocks = (this.subtask.timeblocks || [])
+          .filter((timeblock) => {
+            // Filter timeblocks that have either old format (date) or new format (start)
+            return timeblock.date || timeblock.start;
+          })
+          .map((timeblock) => {
+            // If already in BE format (has start field), return as is
+            if (timeblock.start && !timeblock.date) {
+              return {
+                id: timeblock.id || null,
+                start: timeblock.start,
+                end: timeblock.end,
+                is_finished: timeblock.is_finished || 0,
+              };
+            }
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[z-complete-task-modal.vue] Error: ', error)
-			}
-		},
+            // Convert from internal format to BE format
+            const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+            return {
+              id: timeblock.id || null,
+              start: `${dateStr} ${timeblock.starts_at_time}:00`,
+              end: `${dateStr} ${timeblock.ends_at_time}:00`,
+              is_finished: timeblock.is_finished || 0,
+            };
+          });
 
-		closeModal() {
-			this.visible = false
-		}
-	}
-}
-</script>
\ No newline at end of file
+        const tempSubtask = {
+          ...this.subtask,
+          is_finished: this.subtask.is_finished ? 0 : 1,
+          timesheets,
+          timeblocks,
+        };
+
+        const { subtask } = await this.$axios.put_auth(
+          `v1/subtasks/${tempSubtask.id}`,
+          tempSubtask,
+        );
+
+        this.visible = false;
+        this.$emit('on-subtask-edited', subtask);
+      } catch (error) {
+        this.$toast.error(this.$parseError(error));
+
+        if (process.env.NODE_ENV === 'development')
+          console.log('[z-complete-task-modal.vue] Error: ', error);
+      }
+    },
+
+    closeModal() {
+      this.visible = false;
+    },
+  },
+};
+</script>
diff --git a/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue b/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
index 3e5e01f..32f7505 100644
--- a/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue
@@ -1,86 +1,139 @@
 <template>
-	<v-dialog v-model="visible" max-width="500" persistent>
-		<v-card>
-			<div class="d-flex justify-space-between align-center">
-				<h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
+  <v-dialog v-model="visible" max-width="500" persistent>
+    <v-card>
+      <div class="d-flex justify-space-between align-center">
+        <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
 
-				<v-icon
-					@click.stop="closeModal()"
-					icon="mdi-close"
-					size="large"
-				></v-icon>
-			</div>
-			<div v-for="(timeblock, index) in subtask.timeblocks" :key="timeblock.id" class="d-flex align-center justify-center mb-3 mt-3">
-				<p class="task-badge rounded-pill" :class="{'strike-through': timeblock.is_finished}">{{ tmUtils.formatDateTime(timeblock.start) }} - {{ tmUtils.formatDateTime(timeblock.end) }}</p>
-				<v-icon @click.stop="subtask.id ? deleteTimeblock(timeblock) : deleteTimeblockWithoutId(index)" class="close-icon circle-border cursor-pointer ml-3 text-red" icon="mdi-close" size="medium" />
-			</div>
-		</v-card>
-	</v-dialog>
+        <v-icon
+          @click.stop="closeModal()"
+          icon="mdi-close"
+          size="large"
+        ></v-icon>
+      </div>
+      <div
+        v-for="(timeblock, index) in subtask.timeblocks"
+        :key="timeblock.id"
+        class="d-flex align-center justify-center mb-3 mt-3"
+      >
+        <p
+          class="task-badge rounded-pill"
+          :class="{ 'strike-through': timeblock.is_finished }"
+        >
+          {{ tmUtils.formatDateTime(timeblock.start) }} -
+          {{ tmUtils.formatDateTime(timeblock.end) }}
+        </p>
+        <v-icon
+          @click.stop="
+            subtask.id
+              ? deleteTimeblock(timeblock)
+              : deleteTimeblockWithoutId(index)
+          "
+          class="close-icon circle-border cursor-pointer ml-3 text-red"
+          icon="mdi-close"
+          size="medium"
+        />
+      </div>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-import modalMixin 	from '@/plugins/tm@modal/_mixins/modal.mixin'
-import tmUtils 		from '@/plugins/tm@_utils/tm.utils'
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import tmUtils from '@/plugins/tm@_utils/tm.utils';
+import moment from 'moment';
 
 export default {
-	mixins: [ modalMixin ],
-	emits: ['on-subtask-edited'],
+  mixins: [modalMixin],
+  emits: ['on-subtask-edited'],
 
-	data() {
-		return {
-			visible: false,
-			subtask: null,
-			isDeleting: false,
-			tmUtils
-		}
-	},
+  data() {
+    return {
+      visible: false,
+      subtask: null,
+      isDeleting: false,
+      tmUtils,
+    };
+  },
 
-	methods: {
-		async showModal({ subtask }) {
-			this.subtask = subtask
-			this.visible = true
-		},
+  methods: {
+    async showModal({ subtask }) {
+      this.subtask = subtask;
+      this.visible = true;
+    },
 
-		closeModal() {
-			this.visible = false
-		},
+    closeModal() {
+      this.visible = false;
+    },
 
-		async deleteTimeblock({ id }) {
-			const subtask = JSON.parse(JSON.stringify(this.subtask))
-			subtask.timeblocks = subtask.timeblocks.filter(timeblock => timeblock.id != id)
-			if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline)
+    async deleteTimeblock({ id }) {
+      const subtask = JSON.parse(JSON.stringify(this.subtask));
+      subtask.timeblocks = subtask.timeblocks.filter(
+        (timeblock) => timeblock.id != id,
+      );
+      if (subtask.deadline)
+        subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline);
 
-			this._update(subtask)
-		},
+      this._update(subtask);
+    },
 
-		deleteTimeblockWithoutId(i) {
-			this.$emit('delete-timeblock')
-		},
+    deleteTimeblockWithoutId(i) {
+      this.$emit('delete-timeblock');
+    },
 
-		async _update(data) {
-			try {
-				const timesheets = data.timesheets.map((timesheet) => {
-					delete timesheet.employee_name
-					return timesheet
-				})
+    async _update(data) {
+      try {
+        const timesheets = data.timesheets.map((timesheet) => {
+          delete timesheet.employee_name;
+          return timesheet;
+        });
 
-				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${data.id}`, {...data, timesheets})
+        // Convert timeblocks from internal format to BE format
+        const timeblocks = (data.timeblocks || [])
+          .filter((timeblock) => {
+            // Filter timeblocks that have either old format (date) or new format (start)
+            return timeblock.date || timeblock.start;
+          })
+          .map((timeblock) => {
+            // If already in BE format (has start field), return as is
+            if (timeblock.start && !timeblock.date) {
+              return {
+                id: timeblock.id || null,
+                start: timeblock.start,
+                end: timeblock.end,
+                is_finished: timeblock.is_finished || 0,
+              };
+            }
 
-				this.closeModal()
-				this.$events.emit('on-subtask-edited', subtask)
-			} catch (error) {
-				this.$toast.error(error.message || error)
+            // Convert from internal format to BE format
+            const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+            return {
+              id: timeblock.id || null,
+              start: `${dateStr} ${timeblock.starts_at_time}:00`,
+              end: `${dateStr} ${timeblock.ends_at_time}:00`,
+              is_finished: timeblock.is_finished || 0,
+            };
+          });
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[z-delete-timeblock-modal.vue] Error: ', error)
-			}
-		},
-	}
-}
+        const { subtask } = await this.$axios.put_auth(
+          `v1/subtasks/${data.id}`,
+          { ...data, timesheets, timeblocks },
+        );
+
+        this.closeModal();
+        this.$events.emit('on-subtask-edited', subtask);
+      } catch (error) {
+        this.$toast.error(error.message || error);
+
+        if (process.env.NODE_ENV === 'development')
+          console.log('[z-delete-timeblock-modal.vue] Error: ', error);
+      }
+    },
+  },
+};
 </script>
 
 <style lang="sass" scoped>
 .close-icon:hover
 	background: red
 	color: #fff !important
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue b/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
index 3939985..c0e676a 100644
--- a/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-add-time-modal.vue
@@ -1,95 +1,151 @@
 <template>
-	<v-dialog max-width="750" v-model="visible" persistent>
-		<v-card>
-			<div class="d-flex justify-space-between align-center">
-				<h1>Pridať odpracovaný čas</h1>
+  <v-dialog max-width="750" v-model="visible" persistent>
+    <v-card>
+      <div class="d-flex justify-space-between align-center">
+        <h1>Pridať odpracovaný čas</h1>
 
-				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
-			</div>
-			<v-card-actions class="mt-10 d-flex justify-start align-center">
-				<v-text-field v-model="form.hours" variant="solo" bg-color="white" type="number" :hint="v$.form.hours.$errors ? errorUtils.parseErrors(v$.form.hours.$errors) : null" :class="{ error: v$.form.hours.$errors.length }" class="mb-2" label="Odpracovaný čas" />
-			</v-card-actions>
-			<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
-		</v-card>
-	</v-dialog>
+        <v-icon
+          @click.stop="closeModal()"
+          icon="mdi-close"
+          size="large"
+        ></v-icon>
+      </div>
+      <v-card-actions class="mt-10 d-flex justify-start align-center">
+        <v-text-field
+          v-model="form.hours"
+          variant="solo"
+          bg-color="white"
+          type="number"
+          :hint="
+            v$.form.hours.$errors
+              ? errorUtils.parseErrors(v$.form.hours.$errors)
+              : null
+          "
+          :class="{ error: v$.form.hours.$errors.length }"
+          class="mb-2"
+          label="Odpracovaný čas"
+        />
+      </v-card-actions>
+      <v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-import 			errorUtils 				from '@/plugins/lib@auth/_utils/error.utils'
-import 			useVuelidate 			from '@vuelidate/core'
-import { required, numeric, minValue } 	from '@vuelidate/validators'
-import 			modalMixin 				from '@/plugins/tm@modal/_mixins/modal.mixin'
-import 			tmUtils 				from '@/plugins/tm@_utils/tm.utils'
+import errorUtils from '@/plugins/lib@auth/_utils/error.utils';
+import useVuelidate from '@vuelidate/core';
+import { required, numeric, minValue } from '@vuelidate/validators';
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import tmUtils from '@/plugins/tm@_utils/tm.utils';
+import moment from 'moment';
 
 export default {
-	mixins: [ modalMixin ],
-	emits: ['close', 'on-subtask-edited'],
+  mixins: [modalMixin],
+  emits: ['close', 'on-subtask-edited'],
 
-	data() {
-		return {
-			v$: useVuelidate(),
-			errorUtils,
-			visible: false,
-			subtask: null,
-			form: {
-				hours: null
-			}
-		}
-	},
+  data() {
+    return {
+      v$: useVuelidate(),
+      errorUtils,
+      visible: false,
+      subtask: null,
+      form: {
+        hours: null,
+      },
+    };
+  },
 
-	validations() {
-		return {
-			form: {
-				hours: {required, numeric, minValue: minValue(0.1)}
-			}
-		}
-	},
+  validations() {
+    return {
+      form: {
+        hours: { required, numeric, minValue: minValue(0.1) },
+      },
+    };
+  },
 
-	methods: {
-		async showModal({ subtask }) {
-			this.subtask = subtask
-			this.visible = true
-			this.form.hours = null
-			this.$nextTick(() => this.v$.$reset())
-		},
+  methods: {
+    async showModal({ subtask }) {
+      this.subtask = subtask;
+      this.visible = true;
+      this.form.hours = null;
+      this.$nextTick(() => this.v$.$reset());
+    },
 
-		async submit() {
-			if (!await this.v$.$validate())
-				return
+    async submit() {
+      if (!(await this.v$.$validate())) return;
 
-			if (this.subtask.deadline) this.subtask.deadline = tmUtils.formatDateTimeForBackend(this.subtask.deadline)
+      if (this.subtask.deadline)
+        this.subtask.deadline = tmUtils.formatDateTimeForBackend(
+          this.subtask.deadline,
+        );
 
-			this.subtask.timesheets.push({
-				id: null,
-				employee_id: this.subtask.employee_id,
-				time: typeof this.form.hours == 'string' ? parseFloat(this.form.hours) : this.form.hours
-			})
+      this.subtask.timesheets.push({
+        id: null,
+        employee_id: this.subtask.employee_id,
+        time:
+          typeof this.form.hours == 'string'
+            ? parseFloat(this.form.hours)
+            : this.form.hours,
+      });
 
-			const payload = {
-				...this.subtask,
-				timesheets: this.subtask.timesheets.map((timesheet) => {
-					delete timesheet.employee_name
-					return timesheet
-				})
-			}
+      const timesheets = this.subtask.timesheets.map((timesheet) => {
+        delete timesheet.employee_name;
+        return timesheet;
+      });
 
-			try {
-				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${this.subtask.id}`, payload)
+      // Convert timeblocks from internal format to BE format
+      const timeblocks = (this.subtask.timeblocks || [])
+        .filter((timeblock) => {
+          // Filter timeblocks that have either old format (date) or new format (start)
+          return timeblock.date || timeblock.start;
+        })
+        .map((timeblock) => {
+          // If already in BE format (has start field), return as is
+          if (timeblock.start && !timeblock.date) {
+            return {
+              id: timeblock.id || null,
+              start: timeblock.start,
+              end: timeblock.end,
+              is_finished: timeblock.is_finished || 0,
+            };
+          }
 
-				this.closeModal()
-				this.$events.emit('on-subtask-edited', subtask)
-			} catch (error) {
-				this.$toast.error(error.message || error)
+          // Convert from internal format to BE format
+          const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+          return {
+            id: timeblock.id || null,
+            start: `${dateStr} ${timeblock.starts_at_time}:00`,
+            end: `${dateStr} ${timeblock.ends_at_time}:00`,
+            is_finished: timeblock.is_finished || 0,
+          };
+        });
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[z-task-add-time-modal.vue] Error: ', error)
-			}
-		},
+      const payload = {
+        ...this.subtask,
+        timesheets,
+        timeblocks,
+      };
 
-		closeModal() {
-			this.visible = false
-			this.v$.$reset()
-		}
-	}
-}
-</script>
\ No newline at end of file
+      try {
+        const { subtask } = await this.$axios.put_auth(
+          `v1/subtasks/${this.subtask.id}`,
+          payload,
+        );
+
+        this.closeModal();
+        this.$events.emit('on-subtask-edited', subtask);
+      } catch (error) {
+        this.$toast.error(error.message || error);
+
+        if (process.env.NODE_ENV === 'development')
+          console.log('[z-task-add-time-modal.vue] Error: ', error);
+      }
+    },
+
+    closeModal() {
+      this.visible = false;
+      this.v$.$reset();
+    },
+  },
+};
+</script>
diff --git a/app/src/plugins/tm@modal/task/z-task-modal.vue b/app/src/plugins/tm@modal/task/z-task-modal.vue
index 8ac4b3a..6cac85c 100644
--- a/app/src/plugins/tm@modal/task/z-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-task-modal.vue
@@ -248,7 +248,7 @@
               :on-input-focus="onInputFocus"
               :on-date-open="onDateOpen"
             />
-            <div class="end-button w-100">
+            <div class="end-button w-100" v-if="!subtask.id">
               <button @click="addTimeblock">Pridať časový blok</button>
             </div>
           </div>
@@ -466,10 +466,36 @@ export default {
 
       data.deadline = splittedDeadline[0];
       data._deadline_time = splittedDeadline[1];
+
+      // Convert BE format timeblocks to internal format
+      const convertedTimeblocks = [];
+      if (data.timeblocks && data.timeblocks.length > 0) {
+        data.timeblocks.forEach((timeblock) => {
+          // If already in internal format, keep as is
+          if (timeblock.date) {
+            convertedTimeblocks.push(timeblock);
+            return;
+          }
+
+          // Convert from BE format to internal format
+          if (timeblock.start && timeblock.end) {
+            const startMoment = moment(timeblock.start, 'YYYY-MM-DD HH:mm:ss');
+            const endMoment = moment(timeblock.end, 'YYYY-MM-DD HH:mm:ss');
+            convertedTimeblocks.push({
+              id: timeblock.id || null,
+              date: startMoment.toDate(),
+              starts_at_time: startMoment.format('HH:mm'),
+              ends_at_time: endMoment.format('HH:mm'),
+              is_finished: timeblock.is_finished || 0,
+            });
+          }
+        });
+      }
+      data.timeblocks = convertedTimeblocks;
+
       this.subtask = this._enrichTask(data);
 
       // TODO: Remove? riesil som neodstranovanie jedineho zanamu v trvani a odpracovanom case
-      console.log('2', this.subtask);
       this.$forceUpdate();
     });
 
diff --git a/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue b/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
index a8cbb0f..88b7a33 100644
--- a/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
+++ b/app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue
@@ -1,159 +1,226 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
-		<v-card>
-			<div class="d-flex justify-space-between align-center">
-				<h1>Sub Task má nedokončené úlohy</h1>
+  <v-dialog v-model="visible" max-width="750" persistent>
+    <v-card>
+      <div class="d-flex justify-space-between align-center">
+        <h1>Sub Task má nedokončené úlohy</h1>
 
-				<v-icon
-					@click.stop="closeModal()"
-					icon="mdi-close"
-					size="large"
-				></v-icon>
-			</div>
+        <v-icon
+          @click.stop="closeModal()"
+          icon="mdi-close"
+          size="large"
+        ></v-icon>
+      </div>
 
-			<div class="card-content">
-				<div v-for="(timeblock) in subtask?.timeblocks" :key="timeblock.id" class="d-flex align-center mb-3">
-					<p class="task-badge rounded-pill" :class="{'strike-through': timeblock.is_finished}">{{ tmUtils.formatDateTime(timeblock.start) }} - {{ tmUtils.formatDateTime(timeblock.end) }}</p>
-					<v-icon @click.stop="handleFinishTimeblock(timeblock)" class="finish-icon circle-border cursor-pointer ml-2" :class="{'disabled': loadingTimeblocks[timeblock.id] || loadingCloseAll, 'finished': timeblock.is_finished}" icon="mdi-check" size="medium" />
-				</div>
-			</div>
+      <div class="card-content">
+        <div
+          v-for="timeblock in subtask?.timeblocks"
+          :key="timeblock.id"
+          class="d-flex align-center mb-3"
+        >
+          <p
+            class="task-badge rounded-pill"
+            :class="{ 'strike-through': timeblock.is_finished }"
+          >
+            {{ tmUtils.formatDateTime(timeblock.start) }} -
+            {{ tmUtils.formatDateTime(timeblock.end) }}
+          </p>
+          <v-icon
+            @click.stop="handleFinishTimeblock(timeblock)"
+            class="finish-icon circle-border cursor-pointer ml-2"
+            :class="{
+              disabled: loadingTimeblocks[timeblock.id] || loadingCloseAll,
+              finished: timeblock.is_finished,
+            }"
+            icon="mdi-check"
+            size="medium"
+          />
+        </div>
+      </div>
 
-			<div class="card-actions">
-				<v-btn @click="closeModal()" class="button secondary">Zrušiť</v-btn>
-				<v-btn @click="handleFinishAllTimeblocks()" :loading="loadingCloseAll" class="button primary">Uzatvoriť všetky</v-btn>
-			</div>
-		</v-card>
-	</v-dialog>
+      <div class="card-actions">
+        <v-btn @click="closeModal()" class="button secondary">Zrušiť</v-btn>
+        <v-btn
+          @click="handleFinishAllTimeblocks()"
+          :loading="loadingCloseAll"
+          class="button primary"
+          >Uzatvoriť všetky</v-btn
+        >
+      </div>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
-import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
-import tmUtils from '@/plugins/tm@_utils/tm.utils'
+import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
+import tmUtils from '@/plugins/tm@_utils/tm.utils';
+import moment from 'moment';
 
 export default {
-	mixins: [ modalMixin ],
-	emits: ['close', 'on-subtask-edited'],
+  mixins: [modalMixin],
+  emits: ['close', 'on-subtask-edited'],
 
-	props: {
-		mode: {
-			type: String,
-			default: 'edit' // edit or delete
-		}
-	},
+  props: {
+    mode: {
+      type: String,
+      default: 'edit', // edit or delete
+    },
+  },
 
-	data() {
-		return {
-			tmUtils,
-			visible: false,
-			subtask: null,
-			loadingTimeblocks: {},
-			loadingCloseAll: false
-		}
-	},
+  data() {
+    return {
+      tmUtils,
+      visible: false,
+      subtask: null,
+      loadingTimeblocks: {},
+      loadingCloseAll: false,
+    };
+  },
 
-	methods: {
-		async showModal({ subtask }) {
-			this.subtask = subtask
-			this.visible = true
-		},
+  methods: {
+    async showModal({ subtask }) {
+      this.subtask = subtask;
+      this.visible = true;
+    },
 
-		async complete() {
-			console.log('complete')
-		},
+    async complete() {
+      console.log('complete');
+    },
 
-		closeModal() {
-			this.visible = false
-		},
+    closeModal() {
+      this.visible = false;
+    },
 
-		async handleFinishTimeblock(timeblock) {
-			const subtask = JSON.parse(JSON.stringify(this.subtask))
+    async handleFinishTimeblock(timeblock) {
+      const subtask = JSON.parse(JSON.stringify(this.subtask));
 
-			try {
-				this.loadingTimeblocks[timeblock.id] = true
-				await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
-				timeblock.is_finished = 1
+      try {
+        this.loadingTimeblocks[timeblock.id] = true;
+        await this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {
+          ...timeblock,
+          is_finished: 1,
+        });
+        timeblock.is_finished = 1;
 
-				const areAllTimeblocksFinished = subtask.timeblocks.every(timeblock => timeblock.is_finished)
+        const areAllTimeblocksFinished = subtask.timeblocks.every(
+          (timeblock) => timeblock.is_finished,
+        );
 
-				if (areAllTimeblocksFinished) {
-					await this._finishSubtask()
-					this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id)
-				}
+        if (areAllTimeblocksFinished) {
+          await this._finishSubtask();
+          this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
+        }
 
-				this.$events.emit('on-subtask-edited', subtask)
-				this.closeModal()
-			} catch (error) {
-				this.$toast.error(error.message || error)
+        this.$events.emit('on-subtask-edited', subtask);
+        this.closeModal();
+      } catch (error) {
+        this.$toast.error(error.message || error);
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[a-task-timeblocks.vue] Error: ', error)
-			} finally {
-				this.loadingTimeblocks[timeblock.id] = false
-			} 
-		},
+        if (process.env.NODE_ENV === 'development')
+          console.log('[a-task-timeblocks.vue] Error: ', error);
+      } finally {
+        this.loadingTimeblocks[timeblock.id] = false;
+      }
+    },
 
-		async handleFinishAllTimeblocks() {
-			this.loadingCloseAll = true
+    async handleFinishAllTimeblocks() {
+      this.loadingCloseAll = true;
 
-			try {
-				const promises = this.subtask.timeblocks.map(timeblock => {
-					return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {...timeblock, is_finished: 1})
-				})
+      try {
+        const promises = this.subtask.timeblocks.map((timeblock) => {
+          return this.$axios.put_auth(`v1/timeblocks/${timeblock.id}`, {
+            ...timeblock,
+            is_finished: 1,
+          });
+        });
 
-				await Promise.all(promises)
+        await Promise.all(promises);
 
-				this.subtask.timeblocks = this.subtask.timeblocks.map(timeblock => {
-					timeblock.is_finished = 1
-					return timeblock
-				})
+        this.subtask.timeblocks = this.subtask.timeblocks.map((timeblock) => {
+          timeblock.is_finished = 1;
+          return timeblock;
+        });
 
-				await this._finishSubtask()
+        await this._finishSubtask();
 
-				this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id)
-				this.$events.emit('on-subtask-edited', this.subtask)
-				this.closeModal()
-			} catch (error) {
-				this.$toast.error(error.message || error)
-			} finally {
-				this.loadingCloseAll = false
-			}
-		},
+        this.$store.dispatch('tm/removeOngoingSubtask', this.subtask.id);
+        this.$events.emit('on-subtask-edited', this.subtask);
+        this.closeModal();
+      } catch (error) {
+        this.$toast.error(error.message || error);
+      } finally {
+        this.loadingCloseAll = false;
+      }
+    },
 
-		async _finishSubtask() {
-			const tempSubtask = {...this.subtask, is_finished: 1, timesheets: this.subtask.timesheets.map((timesheet) => {
-				delete timesheet.employee_name
-				return timesheet
-			})}
+    async _finishSubtask() {
+      const timesheets = this.subtask.timesheets.map((timesheet) => {
+        delete timesheet.employee_name;
+        return timesheet;
+      });
 
-			return this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
-		}
-	}
-}
+      // Convert timeblocks from internal format to BE format
+      const timeblocks = (this.subtask.timeblocks || [])
+        .filter((timeblock) => {
+          // Filter timeblocks that have either old format (date) or new format (start)
+          return timeblock.date || timeblock.start;
+        })
+        .map((timeblock) => {
+          // If already in BE format (has start field), return as is
+          if (timeblock.start && !timeblock.date) {
+            return {
+              id: timeblock.id || null,
+              start: timeblock.start,
+              end: timeblock.end,
+              is_finished: timeblock.is_finished || 0,
+            };
+          }
+
+          // Convert from internal format to BE format
+          const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+          return {
+            id: timeblock.id || null,
+            start: `${dateStr} ${timeblock.starts_at_time}:00`,
+            end: `${dateStr} ${timeblock.ends_at_time}:00`,
+            is_finished: timeblock.is_finished || 0,
+          };
+        });
+
+      const tempSubtask = {
+        ...this.subtask,
+        is_finished: 1,
+        timesheets,
+        timeblocks,
+      };
+
+      return this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .card-content {
-	margin-top: 20px;
-	padding: 20px;
+  margin-top: 20px;
+  padding: 20px;
 }
 
 .card-actions {
-	width: 100%;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 10px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
 .finish-icon {
-	cursor: pointer;
+  cursor: pointer;
 
-	&.disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
-	&.finished {
-		background: #06dece;
-	}
+  &.finished {
+    background: #06dece;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue b/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
index 9206f52..94331eb 100644
--- a/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
+++ b/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
@@ -1,154 +1,226 @@
 <template>
-	<v-table>
-		<thead>
-			<tr>
-				<th @click="getSelectedTimeblockDeadline" class="text-left">Kód projektu</th>
-				<th class="text-left">Názov</th>
-				<th class="text-left">Deadline</th>
-				<th class="text-left">Najbližší neuzavretý</th>
-				<th class="text-left">Naplánované</th>
-				<th class="text-left">Zostávajúce</th>
-				<th class="text-left">Akcia</th>
-			</tr>
-		</thead>
+  <v-table>
+    <thead>
+      <tr>
+        <th @click="getSelectedTimeblockDeadline" class="text-left">
+          Kód projektu
+        </th>
+        <th class="text-left">Názov</th>
+        <th class="text-left">Deadline</th>
+        <th class="text-left">Najbližší neuzavretý</th>
+        <th class="text-left">Naplánované</th>
+        <th class="text-left">Zostávajúce</th>
+        <th class="text-left">Akcia</th>
+      </tr>
+    </thead>
 
-		<tbody>
-			<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
-				<td>{{ subtask.project_code }}</td>
-				<td>{{ subtask.title ?? subtask.master_task }}</td>
-				<td v-if="subtask.deadline">{{ getDeadline(subtask) }}</td>
-				<v-tooltip text="Deadline z Mastertasku" location="end">
-					<template v-slot:activator="{ props }">
-						<td v-if="!subtask.deadline" v-bind="props">{{ getDeadline(subtask) }}*</td>
-					</template>
-				</v-tooltip>
-				<td>{{ displayTimeblock(subtask) }}</td>
-				<td>{{ subtask.duration }} h</td>
-				<td>{{ (subtask.duration - subtask.spent_time).toFixed(2) }} h</td>
+    <tbody>
+      <tr
+        class="cursor-pointer"
+        v-for="subtask in subtasks"
+        :key="subtask.id"
+        @click.stop="editTask(subtask, false)"
+      >
+        <td>{{ subtask.project_code }}</td>
+        <td>{{ subtask.title ?? subtask.master_task }}</td>
+        <td v-if="subtask.deadline">{{ getDeadline(subtask) }}</td>
+        <v-tooltip text="Deadline z Mastertasku" location="end">
+          <template v-slot:activator="{ props }">
+            <td v-if="!subtask.deadline" v-bind="props">
+              {{ getDeadline(subtask) }}*
+            </td>
+          </template>
+        </v-tooltip>
+        <td>{{ displayTimeblock(subtask) }}</td>
+        <td>{{ subtask.duration }} h</td>
+        <td>{{ (subtask.duration - subtask.spent_time).toFixed(2) }} h</td>
 
-				<td class="task-action">
-					<div class="d-flex justify-start align-center">
-						<img class="pencil-icon mr-3" :class="{'disabled': loadingSubtask[subtask.id]}" :src="checkmarkDouble" @click.stop="handleCompleteTask(subtask)">
+        <td class="task-action">
+          <div class="d-flex justify-start align-center">
+            <img
+              class="pencil-icon mr-3"
+              :class="{ disabled: loadingSubtask[subtask.id] }"
+              :src="checkmarkDouble"
+              @click.stop="handleCompleteTask(subtask)"
+            />
 
-						<template v-if="subtask.type == 'office365'">
-							<img class="pencil-icon" :src="eye" @click.stop="editTask(subtask, false)">
-							<img class="office-icon" :src="office365" />
-						</template>
+            <template v-if="subtask.type == 'office365'">
+              <img
+                class="pencil-icon"
+                :src="eye"
+                @click.stop="editTask(subtask, false)"
+              />
+              <img class="office-icon" :src="office365" />
+            </template>
 
-						<template v-else>
-							<img class="pencil-icon" :src="eye" @click.stop="editTask(subtask, false)">
-							<img class="trash-icon" :src="bin" @click.stop="deleteTask(subtask)" />
-						</template>
-					</div>
-				</td>
-			</tr>
-		</tbody>
-
-
-	</v-table>
+            <template v-else>
+              <img
+                class="pencil-icon"
+                :src="eye"
+                @click.stop="editTask(subtask, false)"
+              />
+              <img
+                class="trash-icon"
+                :src="bin"
+                @click.stop="deleteTask(subtask)"
+              />
+            </template>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
 </template>
 
 <script>
-import { bin, eye, office365, checkmarkDouble } from '@/plugins/app/_img'
+import { bin, eye, office365, checkmarkDouble } from '@/plugins/app/_img';
 
-import { mapGetters } from 'vuex'
-import moment from 'moment'
+import { mapGetters } from 'vuex';
+import moment from 'moment';
 
 export default {
-	props: {
-		subtasks: {
-			type: Array,
-			required: true
-		}
-	},
+  props: {
+    subtasks: {
+      type: Array,
+      required: true,
+    },
+  },
 
-	data() {
-		return {
-			eye,
-			bin,
-			office365,
-			checkmarkDouble,
-			loadingSubtask: {}
-		}
-	},
+  data() {
+    return {
+      eye,
+      bin,
+      office365,
+      checkmarkDouble,
+      loadingSubtask: {},
+    };
+  },
 
-	computed: {
-		...mapGetters('tm', ['mastertasks'])
-	},
+  computed: {
+    ...mapGetters('tm', ['mastertasks']),
+  },
 
-	methods: {
-		editTask(subtask, editMode = false) {
-			this.$events.emit('show-subtask-modal', {subtask, editMode})
-		},
+  methods: {
+    editTask(subtask, editMode = false) {
+      this.$events.emit('show-subtask-modal', { subtask, editMode });
+    },
 
-		async handleCompleteTask(subtask) {
-			const areAllTimeBlocksFinished = subtask.timeblocks.every(tb => tb.is_finished)
+    async handleCompleteTask(subtask) {
+      const areAllTimeBlocksFinished = subtask.timeblocks.every(
+        (tb) => tb.is_finished,
+      );
 
-			if (!areAllTimeBlocksFinished) {
-				this.$events.emit('show-unable-to-complete-task-modal', { subtask })
-			} else {
-				await this._finishSubtask(subtask)
-			}
-		},
+      if (!areAllTimeBlocksFinished) {
+        this.$events.emit('show-unable-to-complete-task-modal', { subtask });
+      } else {
+        await this._finishSubtask(subtask);
+      }
+    },
 
-		deleteTask(subtask) {
-			if (subtask.type == 'office365')
-				return this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'delete' })
+    deleteTask(subtask) {
+      if (subtask.type == 'office365')
+        return this.$events.emit('show-unable-to-edit-office-task-modal', {
+          mode: 'delete',
+        });
 
-			this.$events.emit('show-delete-task-modal', {subtask})
-		},
+      this.$events.emit('show-delete-task-modal', { subtask });
+    },
 
-		getDeadline(subtask) {
-			if (subtask?.deadline)
-				return moment(subtask.deadline).format('DD.MM.yyyy')
+    getDeadline(subtask) {
+      if (subtask?.deadline)
+        return moment(subtask.deadline).format('DD.MM.yyyy');
 
-			return moment(subtask.master_task_deadline).format('DD.MM.yyyy')
-		},
+      return moment(subtask.master_task_deadline).format('DD.MM.yyyy');
+    },
 
-		getSelectedTimeblockDeadline(timeblocks) {
-			const currentDate = moment()
+    getSelectedTimeblockDeadline(timeblocks) {
+      const currentDate = moment();
 
-			const unfinishedTimeblocks = timeblocks.filter(tb => tb.is_finished === 0)
-			if (unfinishedTimeblocks.length > 0) return moment(unfinishedTimeblocks[0].end).format('DD.MM.yyyy, HH:mm')
+      const unfinishedTimeblocks = timeblocks.filter(
+        (tb) => tb.is_finished === 0,
+      );
+      if (unfinishedTimeblocks.length > 0)
+        return moment(unfinishedTimeblocks[0].end).format('DD.MM.yyyy, HH:mm');
 
-			const upcomingTimeblocks = timeblocks
-				.filter(tb => moment(tb.end).isAfter(currentDate))
-				.sort((a, b) => moment(a.end).diff(moment(b.end)))
+      const upcomingTimeblocks = timeblocks
+        .filter((tb) => moment(tb.end).isAfter(currentDate))
+        .sort((a, b) => moment(a.end).diff(moment(b.end)));
 
-			if (upcomingTimeblocks.length > 0 && upcomingTimeblocks.is_finished === 0) return moment(upcomingTimeblocks[0].end).format('DD.MM.yyyy, HH:mm')
+      if (upcomingTimeblocks.length > 0 && upcomingTimeblocks.is_finished === 0)
+        return moment(upcomingTimeblocks[0].end).format('DD.MM.yyyy, HH:mm');
 
-			return ''
-		},
+      return '';
+    },
 
-		displayTimeblock(subtask) {
-			const timeblockDeadline = this.getSelectedTimeblockDeadline(subtask.timeblocks)
+    displayTimeblock(subtask) {
+      const timeblockDeadline = this.getSelectedTimeblockDeadline(
+        subtask.timeblocks,
+      );
 
-			return timeblockDeadline !== '' ? timeblockDeadline : 'Žiadny termín'
-		},
+      return timeblockDeadline !== '' ? timeblockDeadline : 'Žiadny termín';
+    },
 
-		async _finishSubtask(subtask) {
-			const tempSubtask = {...subtask, is_finished: 1, timesheets: subtask?.timesheets.map((timesheet) => {
-				delete timesheet.employee_name
-				return timesheet
-			}) || []}
+    async _finishSubtask(subtask) {
+      const timesheets =
+        subtask?.timesheets.map((timesheet) => {
+          delete timesheet.employee_name;
+          return timesheet;
+        }) || [];
 
-			try {
-				this.loadingSubtask[subtask.id] = true
-				await this.$axios.put_auth(`v1/subtasks/${tempSubtask.id}`, tempSubtask)
+      // Convert timeblocks from internal format to BE format
+      const timeblocks = (subtask.timeblocks || [])
+        .filter((timeblock) => {
+          // Filter timeblocks that have either old format (date) or new format (start)
+          return timeblock.date || timeblock.start;
+        })
+        .map((timeblock) => {
+          // If already in BE format (has start field), return as is
+          if (timeblock.start && !timeblock.date) {
+            return {
+              id: timeblock.id || null,
+              start: timeblock.start,
+              end: timeblock.end,
+              is_finished: timeblock.is_finished || 0,
+            };
+          }
 
-				this.$store.dispatch('tm/removeOngoingSubtask', subtask.id)
-				this.$events.emit('on-subtask-edited', subtask)
-			} catch (error) {
-				this.$toast.error(error.message || error)
+          // Convert from internal format to BE format
+          const dateStr = moment(timeblock.date).format('YYYY-MM-DD');
+          return {
+            id: timeblock.id || null,
+            start: `${dateStr} ${timeblock.starts_at_time}:00`,
+            end: `${dateStr} ${timeblock.ends_at_time}:00`,
+            is_finished: timeblock.is_finished || 0,
+          };
+        });
 
-				if (process.env.NODE_ENV === 'development')
-					console.log('[a-ongoing-table.vue] Error: ', error)
-			} finally {
-				this.loadingSubtask[subtask.id] = false
-			}
-		}
-	}
-}
+      const tempSubtask = {
+        ...subtask,
+        is_finished: 1,
+        timesheets,
+        timeblocks,
+      };
+
+      try {
+        this.loadingSubtask[subtask.id] = true;
+        await this.$axios.put_auth(
+          `v1/subtasks/${tempSubtask.id}`,
+          tempSubtask,
+        );
+
+        this.$store.dispatch('tm/removeOngoingSubtask', subtask.id);
+        this.$events.emit('on-subtask-edited', subtask);
+      } catch (error) {
+        this.$toast.error(error.message || error);
+
+        if (process.env.NODE_ENV === 'development')
+          console.log('[a-ongoing-table.vue] Error: ', error);
+      } finally {
+        this.loadingSubtask[subtask.id] = false;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="sass" scoped>