From 3e1c260eaedf0bd06ab3740b9b05ebf43108b8d8 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:18:48 +0000
Subject: [PATCH 01/39] chore: status toggle badge

---
 .../components/tasks/StatusToggleBadge.vue    | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 frontend/src/components/tasks/StatusToggleBadge.vue

diff --git a/frontend/src/components/tasks/StatusToggleBadge.vue b/frontend/src/components/tasks/StatusToggleBadge.vue
new file mode 100644
index 00000000..069ced72
--- /dev/null
+++ b/frontend/src/components/tasks/StatusToggleBadge.vue
@@ -0,0 +1,63 @@
+<template>
+  <Popover v-model:open="isPopoverOpen">
+    <PopoverTrigger as-child>
+      <Badge
+        :variant="modelValue ? 'default' : 'outline'"
+        class="cursor-pointer hover:opacity-80 transition-opacity"
+      >
+        {{ modelValue ? activeLabel : inactiveLabel }}
+      </Badge>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-3">
+      <div class="grid gap-3" style="grid-template-columns: min-content">
+        <p class="text-sm font-medium whitespace-nowrap">Update status</p>
+        <p class="text-xs text-muted-foreground">
+          {{ description }}
+        </p>
+        <div class="flex gap-2 w-max">
+          <Button size="sm" @click="setStatus(true)">
+            {{ activeLabel }}
+          </Button>
+          <Button size="sm" variant="outline" @click="setStatus(false)">
+            {{ inactiveLabel }}
+          </Button>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface Props {
+  modelValue: boolean;
+  activeLabel?: string;
+  inactiveLabel?: string;
+  description?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  activeLabel: "Requested",
+  inactiveLabel: "Not Requested",
+  description: "Update the status.",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const isPopoverOpen = ref(false);
+
+const setStatus = (value: boolean) => {
+  emit("update:modelValue", value);
+  isPopoverOpen.value = false;
+};
+</script>

From 236dc55de05b130c3a41b9947588bb7dab91c1e6 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:19:13 +0000
Subject: [PATCH 02/39] chore: date-picker component

---
 .../components/ui/date-picker/DatePicker.vue  | 230 ++++++++++++++++++
 .../src/components/ui/date-picker/index.ts    |   1 +
 2 files changed, 231 insertions(+)
 create mode 100644 frontend/src/components/ui/date-picker/DatePicker.vue
 create mode 100644 frontend/src/components/ui/date-picker/index.ts

diff --git a/frontend/src/components/ui/date-picker/DatePicker.vue b/frontend/src/components/ui/date-picker/DatePicker.vue
new file mode 100644
index 00000000..3fc50560
--- /dev/null
+++ b/frontend/src/components/ui/date-picker/DatePicker.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, ref, watch } from "vue";
+import {
+  CalendarDate,
+  CalendarDateTime,
+  getLocalTimeZone,
+  today,
+} from "@internationalized/date";
+import { useVModel } from "@vueuse/core";
+import { CalendarIcon, Loader2 } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  modelValue?: Date | null;
+  placeholder?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  showTime?: boolean;
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: "Pick a date",
+  loading: false,
+  disabled: false,
+  showTime: false,
+  class: "",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: Date | null];
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: null,
+});
+
+const isOpen = ref(false);
+
+// Convert Date to CalendarDate/CalendarDateTime for the Calendar component
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const calendarValue = ref<any>(null);
+
+const updateCalendarValue = () => {
+  if (!modelValue.value) {
+    calendarValue.value = null;
+    return;
+  }
+  const d = modelValue.value;
+  if (props.showTime) {
+    calendarValue.value = new CalendarDateTime(
+      d.getFullYear(),
+      d.getMonth() + 1,
+      d.getDate(),
+      d.getHours(),
+      d.getMinutes(),
+    );
+  } else {
+    calendarValue.value = new CalendarDate(
+      d.getFullYear(),
+      d.getMonth() + 1,
+      d.getDate(),
+    );
+  }
+};
+
+// Initialize calendar value
+updateCalendarValue();
+
+// Watch for external modelValue changes
+watch(
+  () => modelValue.value,
+  () => updateCalendarValue(),
+);
+
+// Time inputs
+const hours = ref(
+  modelValue.value?.getHours().toString().padStart(2, "0") ?? "00",
+);
+const minutes = ref(
+  modelValue.value?.getMinutes().toString().padStart(2, "0") ?? "00",
+);
+
+// Update time when modelValue changes externally
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    if (newVal) {
+      hours.value = newVal.getHours().toString().padStart(2, "0");
+      minutes.value = newVal.getMinutes().toString().padStart(2, "0");
+    }
+  },
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const onCalendarChange = (value: any) => {
+  if (!value) {
+    modelValue.value = null;
+    return;
+  }
+  const dateVal = Array.isArray(value) ? value[0] : value;
+  if (!dateVal) {
+    modelValue.value = null;
+    return;
+  }
+
+  if (props.showTime) {
+    const h = parseInt(hours.value) || 0;
+    const m = parseInt(minutes.value) || 0;
+    const newDate = new Date(
+      dateVal.year,
+      dateVal.month - 1,
+      dateVal.day,
+      h,
+      m,
+    );
+    modelValue.value = newDate;
+  } else {
+    const newDate = dateVal.toDate(getLocalTimeZone());
+    modelValue.value = newDate;
+    isOpen.value = false;
+  }
+};
+
+const onTimeChange = () => {
+  if (!modelValue.value) return;
+
+  const h = Math.max(0, Math.min(23, parseInt(hours.value) || 0));
+  const m = Math.max(0, Math.min(59, parseInt(minutes.value) || 0));
+
+  hours.value = h.toString().padStart(2, "0");
+  minutes.value = m.toString().padStart(2, "0");
+
+  const newDate = new Date(modelValue.value);
+  newDate.setHours(h, m);
+  modelValue.value = newDate;
+};
+
+const displayValue = computed(() => {
+  if (!modelValue.value) return "";
+  const d = modelValue.value;
+
+  const dateStr = d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  if (props.showTime) {
+    const timeStr = d.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+    return `${dateStr} ${timeStr}`;
+  }
+
+  return dateStr;
+});
+
+const defaultPlaceholder = today(getLocalTimeZone());
+</script>
+
+<template>
+  <Popover v-model:open="isOpen">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :disabled="props.disabled || props.loading"
+        :class="
+          cn(
+            'w-full justify-start text-left font-normal',
+            !modelValue && 'text-muted-foreground',
+            props.class,
+          )
+        "
+      >
+        <Loader2 v-if="props.loading" class="mr-2 h-4 w-4 animate-spin" />
+        <CalendarIcon v-else class="mr-2 h-4 w-4" />
+        {{ displayValue || placeholder }}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0" align="start">
+      <Calendar
+        v-model="calendarValue"
+        :initial-focus="true"
+        :default-placeholder="defaultPlaceholder"
+        layout="month-and-year"
+        @update:model-value="onCalendarChange"
+      />
+      <div v-if="showTime" class="border-t p-3">
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-muted-foreground">Time:</span>
+          <Input
+            v-model="hours"
+            type="text"
+            inputmode="numeric"
+            maxlength="2"
+            class="w-14 text-center"
+            placeholder="HH"
+            @blur="onTimeChange"
+            @keyup.enter="onTimeChange"
+          />
+          <span class="text-muted-foreground">:</span>
+          <Input
+            v-model="minutes"
+            type="text"
+            inputmode="numeric"
+            maxlength="2"
+            class="w-14 text-center"
+            placeholder="MM"
+            @blur="onTimeChange"
+            @keyup.enter="onTimeChange"
+          />
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/frontend/src/components/ui/date-picker/index.ts b/frontend/src/components/ui/date-picker/index.ts
new file mode 100644
index 00000000..0591cff8
--- /dev/null
+++ b/frontend/src/components/ui/date-picker/index.ts
@@ -0,0 +1 @@
+export { default as DatePicker } from "./DatePicker.vue";

From 3748641bffc8694792487ffdf619cf3086e255d5 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:21:49 +0000
Subject: [PATCH 03/39] chore: calendar component

---
 .../src/components/ui/calendar/Calendar.vue   | 227 ++++++++++++++++++
 .../components/ui/calendar/CalendarCell.vue   |  30 +++
 .../ui/calendar/CalendarCellTrigger.vue       |  45 ++++
 .../components/ui/calendar/CalendarGrid.vue   |  25 ++
 .../ui/calendar/CalendarGridBody.vue          |  12 +
 .../ui/calendar/CalendarGridHead.vue          |  15 ++
 .../ui/calendar/CalendarGridRow.vue           |  25 ++
 .../ui/calendar/CalendarHeadCell.vue          |  30 +++
 .../components/ui/calendar/CalendarHeader.vue |  30 +++
 .../ui/calendar/CalendarHeading.vue           |  33 +++
 .../ui/calendar/CalendarNextButton.vue        |  35 +++
 .../ui/calendar/CalendarPrevButton.vue        |  35 +++
 frontend/src/components/ui/calendar/index.ts  |  18 ++
 13 files changed, 560 insertions(+)
 create mode 100644 frontend/src/components/ui/calendar/Calendar.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarCell.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarCellTrigger.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarGrid.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarGridBody.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarGridHead.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarGridRow.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarHeadCell.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarHeader.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarHeading.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarNextButton.vue
 create mode 100644 frontend/src/components/ui/calendar/CalendarPrevButton.vue
 create mode 100644 frontend/src/components/ui/calendar/index.ts

diff --git a/frontend/src/components/ui/calendar/Calendar.vue b/frontend/src/components/ui/calendar/Calendar.vue
new file mode 100644
index 00000000..02cd0d21
--- /dev/null
+++ b/frontend/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui";
+import type { HTMLAttributes, Ref } from "vue";
+import type { LayoutTypes } from ".";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core";
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
+import { createYear, createYearRange, toDate } from "reka-ui/date";
+import { computed, toRaw } from "vue";
+import { cn } from "@/lib/utils";
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/components/ui/native-select";
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton,
+} from ".";
+
+const props = withDefaults(
+  defineProps<
+    CalendarRootProps & {
+      class?: HTMLAttributes["class"];
+      layout?: LayoutTypes;
+      yearRange?: DateValue[];
+    }
+  >(),
+  {
+    modelValue: undefined,
+    layout: undefined,
+    class: undefined,
+    yearRange: undefined,
+  },
+);
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder");
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  passive: true,
+  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>;
+
+const formatter = useDateFormatter(props.locale ?? "en");
+
+const yearRange = computed(() => {
+  return (
+    props.yearRange ??
+    createYearRange({
+      start:
+        props?.minValue ??
+        (
+          toRaw(props.placeholder) ??
+          props.defaultPlaceholder ??
+          today(getLocalTimeZone())
+        ).cycle("year", -100),
+
+      end:
+        props?.maxValue ??
+        (
+          toRaw(props.placeholder) ??
+          props.defaultPlaceholder ??
+          today(getLocalTimeZone())
+        ).cycle("year", 10),
+    })
+  );
+});
+
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{
+  date: DateValue;
+}>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{
+  date: DateValue;
+}>();
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DefineMonthTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div
+          class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
+        >
+          {{ formatter.custom(toDate(date), { month: "short" }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                month: Number((e?.target as any)?.value),
+              });
+            }
+          "
+        >
+          <NativeSelectOption
+            v-for="month in createYear({ dateObj: date })"
+            :key="month.toString()"
+            :value="month.month"
+            :selected="date.month === month.month"
+          >
+            {{ formatter.custom(toDate(month), { month: "short" }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineMonthTemplate>
+
+  <DefineYearTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div
+          class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
+        >
+          {{ formatter.custom(toDate(date), { year: "numeric" }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                year: Number((e?.target as any)?.value),
+              });
+            }
+          "
+        >
+          <NativeSelectOption
+            v-for="year in yearRange"
+            :key="year.toString()"
+            :value="year.year"
+            :selected="date.year === year.year"
+          >
+            {{ formatter.custom(toDate(year), { year: "numeric" }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineYearTemplate>
+
+  <CalendarRoot
+    v-slot="{ grid, weekDays, date }"
+    v-bind="forwarded"
+    v-model:placeholder="placeholder"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader class="pt-0">
+      <nav
+        class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between"
+      >
+        <CalendarPrevButton>
+          <slot name="calendar-prev-icon" />
+        </CalendarPrevButton>
+        <CalendarNextButton>
+          <slot name="calendar-next-icon" />
+        </CalendarNextButton>
+      </nav>
+
+      <slot
+        name="calendar-heading"
+        :date="date"
+        :month="ReuseMonthTemplate"
+        :year="ReuseYearTemplate"
+      >
+        <template v-if="layout === 'month-and-year'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else-if="layout === 'month-only'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            {{ formatter.custom(toDate(date), { year: "numeric" }) }}
+          </div>
+        </template>
+        <template v-else-if="layout === 'year-only'">
+          <div class="flex items-center justify-center gap-1">
+            {{ formatter.custom(toDate(date), { month: "short" }) }}
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else>
+          <CalendarHeading />
+        </template>
+      </slot>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarCell.vue b/frontend/src/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 00000000..a802ee9e
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarCellProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarCellTrigger.vue b/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 00000000..01490dab
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCellTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = withDefaults(
+  defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    as: "button",
+    class: undefined,
+  },
+);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGrid.vue b/frontend/src/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 00000000..0268f026
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGrid, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarGridProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridBody.vue b/frontend/src/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 00000000..3460fbcf
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui";
+import { CalendarGridBody } from "reka-ui";
+
+const props = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+  <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridHead.vue b/frontend/src/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 00000000..ecb481da
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { CalendarGridHead } from "reka-ui";
+
+const props = defineProps<
+  CalendarGridHeadProps & { class?: HTMLAttributes["class"] }
+>();
+</script>
+
+<template>
+  <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridRow.vue b/frontend/src/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 00000000..32be664f
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGridRow, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarGridRowProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeadCell.vue b/frontend/src/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 00000000..afcd2392
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarHeadCellProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="
+      cn(
+        'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeader.vue b/frontend/src/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 00000000..b7dac037
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarHeaderProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="
+      cn(
+        'flex justify-center pt-1 relative items-center w-full px-8',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeading.vue b/frontend/src/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 00000000..c9483a46
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarHeadingProps & { class?: HTMLAttributes["class"] }
+>();
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: { headingValue: string }) => any;
+}>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarNextButton.vue b/frontend/src/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 00000000..4334d32a
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import { CalendarNext, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps<
+  CalendarNextProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarPrevButton.vue b/frontend/src/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 00000000..2c87bfbb
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronLeft } from "lucide-vue-next";
+import { CalendarPrev, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps<
+  CalendarPrevProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/frontend/src/components/ui/calendar/index.ts b/frontend/src/components/ui/calendar/index.ts
new file mode 100644
index 00000000..52d8f669
--- /dev/null
+++ b/frontend/src/components/ui/calendar/index.ts
@@ -0,0 +1,18 @@
+export { default as Calendar } from "./Calendar.vue";
+export { default as CalendarCell } from "./CalendarCell.vue";
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
+export { default as CalendarGrid } from "./CalendarGrid.vue";
+export { default as CalendarGridBody } from "./CalendarGridBody.vue";
+export { default as CalendarGridHead } from "./CalendarGridHead.vue";
+export { default as CalendarGridRow } from "./CalendarGridRow.vue";
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
+export { default as CalendarHeader } from "./CalendarHeader.vue";
+export { default as CalendarHeading } from "./CalendarHeading.vue";
+export { default as CalendarNextButton } from "./CalendarNextButton.vue";
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";
+
+export type LayoutTypes =
+  | "month-and-year"
+  | "month-only"
+  | "year-only"
+  | undefined;

From 059eddfc9707b221c8ba06bd612007c48b1afc8a Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:22:06 +0000
Subject: [PATCH 04/39] chore: native select

---
 .../ui/native-select/NativeSelect.vue         | 55 +++++++++++++++++++
 .../ui/native-select/NativeSelectOptGroup.vue | 18 ++++++
 .../ui/native-select/NativeSelectOption.vue   | 18 ++++++
 .../src/components/ui/native-select/index.ts  |  3 +
 4 files changed, 94 insertions(+)
 create mode 100644 frontend/src/components/ui/native-select/NativeSelect.vue
 create mode 100644 frontend/src/components/ui/native-select/NativeSelectOptGroup.vue
 create mode 100644 frontend/src/components/ui/native-select/NativeSelectOption.vue
 create mode 100644 frontend/src/components/ui/native-select/index.ts

diff --git a/frontend/src/components/ui/native-select/NativeSelect.vue b/frontend/src/components/ui/native-select/NativeSelect.vue
new file mode 100644
index 00000000..2c8a145f
--- /dev/null
+++ b/frontend/src/components/ui/native-select/NativeSelect.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit, useVModel } from "@vueuse/core";
+import { ChevronDownIcon } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<{
+  modelValue?: AcceptableValue | AcceptableValue[];
+  class?: HTMLAttributes["class"];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="
+        cn(
+          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/native-select/NativeSelectOptGroup.vue b/frontend/src/components/ui/native-select/NativeSelectOptGroup.vue
new file mode 100644
index 00000000..0dff281f
--- /dev/null
+++ b/frontend/src/components/ui/native-select/NativeSelectOptGroup.vue
@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <optgroup
+    data-slot="native-select-optgroup"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </optgroup>
+</template>
diff --git a/frontend/src/components/ui/native-select/NativeSelectOption.vue b/frontend/src/components/ui/native-select/NativeSelectOption.vue
new file mode 100644
index 00000000..d67fc9b3
--- /dev/null
+++ b/frontend/src/components/ui/native-select/NativeSelectOption.vue
@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <option
+    data-slot="native-select-option"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </option>
+</template>
diff --git a/frontend/src/components/ui/native-select/index.ts b/frontend/src/components/ui/native-select/index.ts
new file mode 100644
index 00000000..7ebf6049
--- /dev/null
+++ b/frontend/src/components/ui/native-select/index.ts
@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue";
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue";
+export { default as NativeSelectOption } from "./NativeSelectOption.vue";

From 3136ab90aee1f10bab365150f4fab91bdf1fb0b2 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:22:38 +0000
Subject: [PATCH 05/39] chore: remove unneeded text

---
 .../src/components/companies/EditableCompanyParticipation.vue   | 2 +-
 .../views/Dashboard/ContractTemplates/UploadTemplateForm.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/companies/EditableCompanyParticipation.vue b/frontend/src/components/companies/EditableCompanyParticipation.vue
index 3458026e..80c69655 100644
--- a/frontend/src/components/companies/EditableCompanyParticipation.vue
+++ b/frontend/src/components/companies/EditableCompanyParticipation.vue
@@ -147,7 +147,7 @@
             <div>
               <Select v-model="selectedPackageId">
                 <SelectTrigger>
-                  <SelectValue placeholder="-- Select package --" />
+                  <SelectValue placeholder="Select package" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem
diff --git a/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue b/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue
index 3fa07d31..9fb6ab8a 100644
--- a/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue
+++ b/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue
@@ -71,7 +71,7 @@ async function submit() {
       <label class="block text-sm text-gray-600">Template record</label>
       <Select v-model="selectedTemplate" :disabled="!props.eventId">
         <SelectTrigger class="mt-1 w-full border rounded px-2 py-1">
-          <SelectValue placeholder="-- select template --" />
+          <SelectValue placeholder="Select template" />
         </SelectTrigger>
         <SelectContent>
           <SelectItem v-for="t in definedTemplates" :key="t.id" :value="t.id">

From dcc238b4c7d50986b129f030894210f0969c3d4d Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:24:08 +0000
Subject: [PATCH 06/39] chore: accordion collapsed by default on mobile

---
 .../views/Dashboard/Companies/CompanyView.vue | 75 ++++++++++++++-----
 1 file changed, 57 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/Dashboard/Companies/CompanyView.vue b/frontend/src/views/Dashboard/Companies/CompanyView.vue
index 7a07a2e3..2970a68b 100644
--- a/frontend/src/views/Dashboard/Companies/CompanyView.vue
+++ b/frontend/src/views/Dashboard/Companies/CompanyView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="companyWithParticipation" class="flex flex-col lg:flex-row gap-6">
     <!-- Company information section -->
-    <div class="space-y-6 w-full lg:w-96 lg:flex-shrink-0">
+    <div class="space-y-4 w-full lg:w-96 lg:flex-shrink-0">
       <!-- Company Card -->
       <CompanyCard
         :company="companyWithParticipation"
@@ -15,24 +15,59 @@
         button-class="w-full"
       />
 
-      <!-- Company Billing Information -->
-      <CompanyBillingInfo
-        :company="company?.data"
-        @updated="handleCompanyUpdated"
-      />
+      <!-- Mobile: Accordion for Billing Info and Contacts -->
+      <Accordion type="multiple" class="lg:hidden" collapsible>
+        <AccordionItem value="billing">
+          <AccordionTrigger>Billing Information</AccordionTrigger>
+          <AccordionContent>
+            <CompanyBillingInfo
+              :company="company?.data"
+              @updated="handleCompanyUpdated"
+            />
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="contacts">
+          <AccordionTrigger>Contacts</AccordionTrigger>
+          <AccordionContent>
+            <!-- prettier-ignore -->
+            <CompanyContacts
+              v-if="representatives"
+              :representatives="representatives"
+              :company-id="(companyId as string)"
+            />
+            <div
+              v-else-if="isRepresentativesLoading"
+              class="flex items-center justify-center p-8"
+            >
+              <div class="text-muted-foreground">
+                Loading representatives...
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
 
-      <!-- Company Contacts -->
-      <!-- prettier-ignore -->
-      <CompanyContacts
-        v-if="representatives"
-        :representatives="representatives"
-        :company-id="(companyId as string)"
-      />
-      <div
-        v-else-if="isRepresentativesLoading"
-        class="flex items-center justify-center p-8"
-      >
-        <div class="text-muted-foreground">Loading representatives...</div>
+      <!-- Desktop: Regular display for Billing Info and Contacts -->
+      <div class="hidden lg:block space-y-6">
+        <!-- Company Billing Information -->
+        <CompanyBillingInfo
+          :company="company?.data"
+          @updated="handleCompanyUpdated"
+        />
+
+        <!-- Company Contacts -->
+        <!-- prettier-ignore -->
+        <CompanyContacts
+          v-if="representatives"
+          :representatives="representatives"
+          :company-id="(companyId as string)"
+        />
+        <div
+          v-else-if="isRepresentativesLoading"
+          class="flex items-center justify-center p-8"
+        >
+          <div class="text-muted-foreground">Loading representatives...</div>
+        </div>
       </div>
     </div>
 
@@ -67,6 +102,10 @@ import { useEventStore } from "@/stores/event";
 import { useQuery, useQueryCache } from "@pinia/colada";
 import { computed } from "vue";
 import { useRoute } from "vue-router";
+import Accordion from "@/components/ui/accordion/Accordion.vue";
+import AccordionItem from "@/components/ui/accordion/AccordionItem.vue";
+import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.vue";
+import AccordionContent from "@/components/ui/accordion/AccordionContent.vue";
 
 const route = useRoute();
 const queryCache = useQueryCache();

From 57abf9dfa13a822aba85ced6cf266a76b6d6578a Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:24:27 +0000
Subject: [PATCH 07/39] chore: mutate async for await loading

---
 frontend/src/mutations/companies.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/mutations/companies.ts b/frontend/src/mutations/companies.ts
index 27a7834a..a975e7ea 100644
--- a/frontend/src/mutations/companies.ts
+++ b/frontend/src/mutations/companies.ts
@@ -32,7 +32,7 @@ export const useCompanyParticipationMutation = defineMutation(() => {
   const data = ref<UpdateCompanyParticipationData>();
   const queryCache = useQueryCache();
 
-  const { mutate, ...mutation } = useMutation({
+  const { mutate, mutateAsync, ...mutation } = useMutation({
     mutation: () => updateCompanyParticipation(companyId.value!, data.value!),
     onSettled: () => {
       queryCache.invalidateQueries({ key: ["company", companyId.value!] });
@@ -43,6 +43,7 @@ export const useCompanyParticipationMutation = defineMutation(() => {
 
   return {
     mutate,
+    mutateAsync,
     ...mutation,
     companyId,
     data,
@@ -185,7 +186,7 @@ export const useCompanyParticipationPackageMutation = defineMutation(() => {
   const packageId = ref<string>();
   const queryCache = useQueryCache();
 
-  const { mutate, ...mutation } = useMutation({
+  const { mutate, mutateAsync, ...mutation } = useMutation({
     mutation: () =>
       updateCompanyParticipationPackage(companyId.value!, packageId.value!),
     onSettled: () => {
@@ -196,6 +197,7 @@ export const useCompanyParticipationPackageMutation = defineMutation(() => {
 
   return {
     mutate,
+    mutateAsync,
     ...mutation,
     companyId,
     packageId,

From ccffe13b3fe5bc67cc6cc6df1e96ad34bd677e39 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:25:25 +0000
Subject: [PATCH 08/39] chore: info/tasks tabs on company

---
 .../views/Dashboard/Companies/CompanyView.vue | 34 ++++++++++++-------
 .../views/Dashboard/Companies/Info/Info.vue   | 22 ++++++++++++
 2 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/views/Dashboard/Companies/Info/Info.vue

diff --git a/frontend/src/views/Dashboard/Companies/CompanyView.vue b/frontend/src/views/Dashboard/Companies/CompanyView.vue
index 2970a68b..5403430a 100644
--- a/frontend/src/views/Dashboard/Companies/CompanyView.vue
+++ b/frontend/src/views/Dashboard/Companies/CompanyView.vue
@@ -71,18 +71,21 @@
       </div>
     </div>
 
-    <!-- Communications section -->
+    <!-- Info/Tasks section -->
     <div class="flex-1 min-w-0">
-      <!-- prettier-ignore -->
-      <ParticipationsCard
-        v-if="companyWithParticipation?.participations"
-        :participations="companyWithParticipation.participations"
-        :entity-id="(companyId as string)"
-        entity-type="company"
-        class="mb-5"
-      />
+      <Tabs v-model="activeTab" default-value="info" class="w-full">
+        <TabsList class="grid w-full grid-cols-2 max-w-md">
+          <TabsTrigger value="info"> Info </TabsTrigger>
+          <TabsTrigger value="tasks"> Tasks </TabsTrigger>
+        </TabsList>
 
-      <CompanyCommunications :company="companyWithParticipation" />
+        <TabsContent value="info">
+          <Info :company-with-participation="companyWithParticipation" />
+        </TabsContent>
+        <TabsContent value="tasks">
+          <Tasks :company-with-participation="companyWithParticipation" />
+        </TabsContent>
+      </Tabs>
     </div>
   </div>
 </template>
@@ -92,16 +95,20 @@ import { getCompanyById, getCompanyRepresentatives } from "@/api/companies";
 import CompanyCard from "@/components/cards/CompanyCard.vue";
 import CompanyBillingInfo from "@/components/companies/CompanyBillingInfo.vue";
 import CompanyContacts from "@/components/companies/CompanyContacts.vue";
-import CompanyCommunications from "@/components/companies/CompanyCommunications.vue";
-import ParticipationsCard from "@/components/ParticipationsCard.vue";
 import DirectEmailDialogTrigger from "@/components/DirectEmailDialogTrigger.vue";
 import type { CompanyWithParticipation } from "@/dto/companies";
 import { withCurrentParticipation } from "@/lib/utils";
 import { useEventStore } from "@/stores/event";
 
 import { useQuery, useQueryCache } from "@pinia/colada";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
+import Info from "./Info/Info.vue";
+import TabsList from "@/components/ui/tabs/TabsList.vue";
+import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
+import TabsContent from "@/components/ui/tabs/TabsContent.vue";
+import Tabs from "@/components/ui/tabs/Tabs.vue";
+import Tasks from "./Tasks/Tasks.vue";
 import Accordion from "@/components/ui/accordion/Accordion.vue";
 import AccordionItem from "@/components/ui/accordion/AccordionItem.vue";
 import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.vue";
@@ -109,6 +116,7 @@ import AccordionContent from "@/components/ui/accordion/AccordionContent.vue";
 
 const route = useRoute();
 const queryCache = useQueryCache();
+const activeTab = ref("info");
 
 const companyId = route.params.companyId;
 const { data: company } = useQuery({
diff --git a/frontend/src/views/Dashboard/Companies/Info/Info.vue b/frontend/src/views/Dashboard/Companies/Info/Info.vue
new file mode 100644
index 00000000..2015566e
--- /dev/null
+++ b/frontend/src/views/Dashboard/Companies/Info/Info.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- prettier-ignore -->
+  <ParticipationsCard
+      v-if="companyWithParticipation?.participations"
+      :participations="companyWithParticipation.participations"
+      :entity-id="companyWithParticipation.id"
+      entity-type="company"
+      class="mb-5"
+    />
+
+  <CompanyCommunications :company="companyWithParticipation" />
+</template>
+
+<script setup lang="ts">
+import CompanyCommunications from "@/components/companies/CompanyCommunications.vue";
+import ParticipationsCard from "@/components/ParticipationsCard.vue";
+import type { CompanyWithParticipation } from "@/dto/companies";
+
+defineProps<{
+  companyWithParticipation: CompanyWithParticipation;
+}>();
+</script>

From 6ec47cae26d449a0044872e9f37a70eb2b276a90 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:25:59 +0000
Subject: [PATCH 09/39] chore: billing and logos task

---
 .../src/components/tasks/TaskBillingLogos.vue | 191 ++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskBillingLogos.vue

diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
new file mode 100644
index 00000000..d062ebad
--- /dev/null
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -0,0 +1,191 @@
+<template>
+  <TaskTimelineItem
+    :step-number="2"
+    title="Billing & Logos"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Receipt class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasAskedForBillingInfo"
+        description="Mark whether you've asked the company for billing info and logos."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Billing Section -->
+      <div class="space-y-2">
+        <!-- Billing Header -->
+        <div class="flex items-center justify-between">
+          <span class="text-sm font-medium">Billing Information</span>
+
+          <Button
+            v-if="hasBillingInfo && !isEditingBilling"
+            variant="outline"
+            size="sm"
+            class="h-7 text-xs"
+            @click="startEditingBilling"
+          >
+            Edit
+          </Button>
+        </div>
+
+        <!-- Billing Info Display -->
+        <div
+          v-if="hasBillingInfo && !isEditingBilling"
+          class="p-3 bg-muted/50 rounded-md space-y-1"
+        >
+          <p class="text-sm">
+            <span class="font-medium">Name:</span>
+            {{ billingInfo?.name }}
+          </p>
+          <p class="text-sm">
+            <span class="font-medium">Address:</span>
+            {{ billingInfo?.address }}
+          </p>
+          <p class="text-sm">
+            <span class="font-medium">TIN:</span>
+            {{ billingInfo?.tin }}
+          </p>
+        </div>
+
+        <!-- Billing Form (for editing) -->
+        <div v-else-if="isEditingBilling" class="border rounded-md p-3">
+          <BillingForm
+            :initial-data="billingInfo"
+            :is-loading="isUpdatingBilling"
+            :mode="hasBillingInfo ? 'edit' : 'create'"
+            @submit="handleBillingSubmit"
+            @cancel="cancelEditingBilling"
+          />
+        </div>
+
+        <!-- Empty State -->
+        <EmptyStateCard
+          v-else
+          title="Click here to add billing information"
+          @click="startEditingBilling"
+        />
+      </div>
+
+      <!-- Separator -->
+      <Separator />
+
+      <!-- Logos Section -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Logos</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="logos-received" v-model="logosReceived" />
+          <Label for="logos-received" class="text-sm"> Logos received </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="needs-reviewing" v-model="logosNeedReviewing" />
+          <Label for="needs-reviewing" class="text-sm flex items-center gap-1">
+            Needs reviewing
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Info class="w-3 h-3 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    Check this if the company wants to review their logos before
+                    publishing
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Info, Receipt } from "lucide-vue-next";
+import type { CompanyBillingInfo } from "@/dto/companies";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import BillingForm from "@/components/companies/BillingForm.vue";
+import Button from "@/components/ui/button/Button.vue";
+import EmptyStateCard from "@/components/ui/EmptyStateCard.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { useCompanyBillingMutation } from "@/mutations/companies";
+
+interface Props {
+  billingInfo?: CompanyBillingInfo;
+  companyId?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  billingUpdated: [];
+}>();
+
+// Billing info
+const hasBillingInfo = computed(() => {
+  if (!props.billingInfo) return false;
+  return !!(
+    props.billingInfo.name?.trim() ||
+    props.billingInfo.address?.trim() ||
+    props.billingInfo.tin?.trim()
+  );
+});
+
+// Billing editing state
+const isEditingBilling = ref(false);
+const billingMutation = useCompanyBillingMutation();
+const { mutate: updateBilling, isLoading: isUpdatingBilling } = billingMutation;
+
+const startEditingBilling = () => {
+  isEditingBilling.value = true;
+};
+
+const cancelEditingBilling = () => {
+  isEditingBilling.value = false;
+};
+
+const handleBillingSubmit = async (data: CompanyBillingInfo) => {
+  if (!props.companyId) return;
+
+  billingMutation.companyId.value = props.companyId;
+  billingMutation.billingInfo.value = data;
+
+  try {
+    await updateBilling();
+    isEditingBilling.value = false;
+    emit("billingUpdated");
+  } catch (error) {
+    console.error("Failed to update billing information:", error);
+  }
+};
+
+// Task states (these would be persisted in the backend in a real implementation)
+const hasAskedForBillingInfo = ref(false);
+const logosReceived = ref(false);
+const logosNeedReviewing = ref(false);
+
+// Completion state
+const isComplete = computed(() => {
+  return hasBillingInfo.value && logosReceived.value;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>

From ad0023c5ef1bc01db55256d88e15923f661bcf01 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:26:08 +0000
Subject: [PATCH 10/39] chore: confirmation task

---
 .../src/components/tasks/TaskConfirmation.vue | 252 ++++++++++++++++++
 1 file changed, 252 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskConfirmation.vue

diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
new file mode 100644
index 00000000..948260dd
--- /dev/null
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -0,0 +1,252 @@
+<template>
+  <TaskTimelineItem
+    :step-number="1"
+    title="Confirmation"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <CalendarCheck class="w-4 h-4" />
+    </template>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Package Selection -->
+      <div class="space-y-2">
+        <Label for="package-select">Package</Label>
+        <Select
+          v-model="selectedPackageId"
+          :disabled="isPackageUpdating"
+          @update:model-value="onPackageChange"
+        >
+          <SelectTrigger :loading="isPackageUpdating">
+            <SelectValue placeholder="Select a package" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="pkg in packageOptions"
+              :key="pkg.id"
+              :value="pkg.id"
+            >
+              {{ pkg.name }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Confirmation Date -->
+      <div class="space-y-2">
+        <Label for="confirmed-date">Confirmation Date</Label>
+        <DatePicker
+          v-model="confirmedDate"
+          :loading="isDateUpdating"
+          placeholder="Pick a date"
+          show-time
+          @update:model-value="onConfirmedDateChange"
+        />
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuery } from "@pinia/colada";
+import { getAllEvents } from "@/api/events";
+import { getItemById } from "@/api/items";
+import type { Item } from "@/dto/item";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DatePicker } from "@/components/ui/date-picker";
+import type { CompanyParticipation } from "@/dto/companies";
+import type { Package } from "@/dto/packages";
+import {
+  useCompanyParticipationPackageMutation,
+  useCompanyParticipationMutation,
+} from "@/mutations/companies";
+import { usePackagesQuery } from "@/mutations/packages";
+import useToast from "@/lib/toast";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { CalendarCheck } from "lucide-vue-next";
+
+interface Props {
+  companyId: string;
+  participation?: CompanyParticipation;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  packageChanged: [packageName: string, packageItems: Item[]];
+}>();
+
+const { toast } = useToast();
+
+// Package data
+const { data: packagesData } = usePackagesQuery();
+const { data: eventsData } = useQuery({
+  key: () => ["events"],
+  query: () => getAllEvents(),
+});
+
+const packageOptions = computed(() => {
+  const allPkgs = (packagesData.value || []) as Package[];
+  const eventId = props.participation?.event;
+  if (!eventId) return [];
+
+  const ev = eventsData.value?.data?.find((e) => e.id === eventId);
+  if (!ev) return allPkgs.map((p) => ({ id: String(p.id), name: p.name }));
+
+  const name = String(ev.name || "");
+  const pkgs = allPkgs.filter((ap) => String(ap.name || "").startsWith(name));
+
+  return pkgs.map((p) => ({ id: String(p.id), name: p.name }));
+});
+
+// Package mutation
+const packageMutation = useCompanyParticipationPackageMutation();
+packageMutation.companyId.value = props.companyId;
+
+const selectedPackageId = ref<string>(
+  props.participation?.package ? String(props.participation.package) : "",
+);
+const isPackageUpdating = ref(false);
+
+// Get package name from the packages data
+const currentPackageName = computed(() => {
+  if (!selectedPackageId.value || !packagesData.value) return "";
+  const pkg = (packagesData.value as Package[]).find(
+    (p) => String(p.id) === selectedPackageId.value,
+  );
+  return pkg?.name?.toLowerCase() || "";
+});
+
+// Get current package items
+const currentPackage = computed(() => {
+  if (!selectedPackageId.value || !packagesData.value) return null;
+  return (
+    (packagesData.value as Package[]).find(
+      (p) => String(p.id) === selectedPackageId.value,
+    ) || null
+  );
+});
+
+// Fetch full item details for the current package
+const packageItemsWithDetails = ref<Item[]>([]);
+
+const fetchPackageItems = async () => {
+  const pkg = currentPackage.value;
+  if (!pkg || !pkg.items || pkg.items.length === 0) {
+    packageItemsWithDetails.value = [];
+    return;
+  }
+
+  try {
+    const itemPromises = pkg.items.map((pi) => getItemById(String(pi.item)));
+    packageItemsWithDetails.value = await Promise.all(itemPromises);
+  } catch (err) {
+    console.error("Failed to fetch package items:", err);
+    packageItemsWithDetails.value = [];
+  }
+};
+
+// Watch for package changes and fetch items
+watch(
+  currentPackage,
+  () => {
+    fetchPackageItems();
+  },
+  { immediate: true },
+);
+
+// Emit package name and items changes
+watch(
+  [currentPackageName, packageItemsWithDetails],
+  ([newName, newItems]) => {
+    emit("packageChanged", newName, newItems);
+  },
+  { immediate: true },
+);
+
+// Confirmation date
+const parseIsoToDate = (isoString: string | null): Date | null => {
+  if (!isoString) return null;
+  try {
+    return new Date(isoString);
+  } catch {
+    return null;
+  }
+};
+
+const confirmedDate = ref<Date | null>(
+  parseIsoToDate(props.participation?.confirmed || null),
+);
+const isDateUpdating = ref(false);
+
+// Participation mutation for updating confirmed date
+const participationMutation = useCompanyParticipationMutation();
+participationMutation.companyId.value = props.companyId;
+
+const onConfirmedDateChange = async (newValue: Date | null) => {
+  if (!newValue) return;
+  try {
+    isDateUpdating.value = true;
+    const isoDate = newValue.toISOString();
+    participationMutation.data.value = {
+      ...props.participation,
+      confirmed: isoDate,
+    };
+    await participationMutation.mutateAsync();
+    toast.success({ title: "Confirmation date updated" });
+  } catch (err) {
+    console.error("Failed to update confirmation date:", err);
+    toast.error({ title: "Failed to update confirmation date" });
+  } finally {
+    isDateUpdating.value = false;
+  }
+};
+
+const onPackageChange = async (newValue: unknown) => {
+  const v = newValue == null ? "" : String(newValue);
+  if (!v) return;
+  try {
+    isPackageUpdating.value = true;
+    packageMutation.packageId.value = v;
+    await packageMutation.mutateAsync();
+    toast.success({ title: "Package updated" });
+  } catch (err) {
+    console.error("Failed to update package:", err);
+    toast.error({ title: "Failed to update package" });
+  } finally {
+    isPackageUpdating.value = false;
+  }
+};
+
+// Watch for participation changes to sync local state from props
+watch(
+  () => props.participation?.package,
+  (newVal) => {
+    selectedPackageId.value = newVal ? String(newVal) : "";
+  },
+);
+
+watch(
+  () => props.participation?.confirmed,
+  (newVal) => {
+    confirmedDate.value = parseIsoToDate(newVal || null);
+  },
+);
+
+// Completion state
+const isComplete = computed(() => {
+  return !!selectedPackageId.value && !!confirmedDate.value;
+});
+
+defineExpose({
+  isComplete,
+  currentPackageName,
+});
+</script>

From a1f29e068fde8410d73c21614acd0b28c580f1cd Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:26:22 +0000
Subject: [PATCH 11/39] chore: corlief task

---
 frontend/src/components/tasks/TaskCorlief.vue | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskCorlief.vue

diff --git a/frontend/src/components/tasks/TaskCorlief.vue b/frontend/src/components/tasks/TaskCorlief.vue
new file mode 100644
index 00000000..dadc94b0
--- /dev/null
+++ b/frontend/src/components/tasks/TaskCorlief.vue
@@ -0,0 +1,61 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Corlief"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Building2 class="w-4 h-4" />
+    </template>
+    <div class="space-y-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox id="corlief-pre-notice" v-model="hasPreNotice" />
+        <Label for="corlief-pre-notice" class="text-sm">Pre notice</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="corlief-scheduled" v-model="hasScheduled" />
+        <Label for="corlief-scheduled" class="text-sm">Scheduled</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="corlief-reserved" v-model="hasReserved" />
+        <Label for="corlief-reserved" class="text-sm">Company reserved</Label>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Building2 } from "lucide-vue-next";
+
+interface Props {
+  companyId: string;
+  stepNumber?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  stepNumber: 5,
+});
+
+// Corlief states
+const hasPreNotice = ref<boolean>(false);
+const hasScheduled = ref<boolean>(false);
+const hasReserved = ref<boolean>(false);
+
+const isComplete = computed(() => {
+  return (
+    hasPreNotice.value === true &&
+    hasScheduled.value === true &&
+    hasReserved.value === true
+  );
+});
+
+defineExpose({
+  isComplete,
+});
+</script>

From e3b45e335763b221cdabe5fcd591de519645bf3a Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:26:39 +0000
Subject: [PATCH 12/39] chore: contract task

---
 .../src/components/tasks/TaskContract.vue     | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskContract.vue

diff --git a/frontend/src/components/tasks/TaskContract.vue b/frontend/src/components/tasks/TaskContract.vue
new file mode 100644
index 00000000..7ee2422d
--- /dev/null
+++ b/frontend/src/components/tasks/TaskContract.vue
@@ -0,0 +1,67 @@
+<template>
+  <TaskTimelineItem :step-number="3" title="Contract" :is-complete="isComplete">
+    <template #icon>
+      <FileText class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasSentContract"
+        active-label="Sent"
+        inactive-label="Not Sent"
+        description="Mark whether you've sent the contract to the company."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox id="contract-created" v-model="hasCreatedContract" />
+        <Label for="contract-created" class="text-sm"
+          >Contract and invoice created</Label
+        >
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="has-signed" v-model="hasSigned" />
+        <Label for="has-signed" class="text-sm">Has signed</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="receipt-sent" v-model="hasReceiptSent" />
+        <Label for="receipt-sent" class="text-sm">Receipt sent</Label>
+      </div>
+
+      <ContractDownload :company-id="props.companyId" />
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { FileText } from "lucide-vue-next";
+import ContractDownload from "../companies/ContractDownload.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
+const props = defineProps<{ companyId: string }>();
+
+// Contract states
+const hasCreatedContract = ref(false);
+const hasSentContract = ref(false);
+const hasSigned = ref(false);
+const hasReceiptSent = ref(false);
+
+const isComplete = computed(() => {
+  return (
+    hasCreatedContract.value &&
+    hasSentContract.value &&
+    hasSigned.value &&
+    hasReceiptSent.value
+  );
+});
+
+defineExpose({
+  isComplete,
+});
+</script>

From 839dcd3a6bb2f0bae6862baf9ffff7f1791fd8a0 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:27:34 +0000
Subject: [PATCH 13/39] chore: logistics task

---
 .../src/components/tasks/TaskLogistics.vue    | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskLogistics.vue

diff --git a/frontend/src/components/tasks/TaskLogistics.vue b/frontend/src/components/tasks/TaskLogistics.vue
new file mode 100644
index 00000000..afee7b68
--- /dev/null
+++ b/frontend/src/components/tasks/TaskLogistics.vue
@@ -0,0 +1,95 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Logistics"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <Truck class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedInfo"
+        description="Mark whether you've asked the company for logistics info."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Car Load/Unload Selection -->
+      <div class="space-y-2">
+        <Label for="car-status">Car for Loading/Unloading</Label>
+        <div class="flex gap-4">
+          <Select v-model="carStatus">
+            <SelectTrigger class="w-[200px]">
+              <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="not_responded">Didn't respond</SelectItem>
+              <SelectItem value="wants">Wants to bring a car</SelectItem>
+              <SelectItem value="not_wants"
+                >Doesn't want to bring a car</SelectItem
+              >
+            </SelectContent>
+          </Select>
+
+          <!-- License Plate Input (shown only when they want to bring a car) -->
+          <Input
+            v-if="carStatus === 'wants'"
+            id="license-plate"
+            v-model="licensePlate"
+            placeholder="License plate"
+            class="flex-1"
+          />
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Truck } from "lucide-vue-next";
+
+interface Props {
+  companyId: string;
+  stepNumber?: number;
+  isLast?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  stepNumber: 6,
+  isLast: false,
+});
+
+type CarStatus = "not_responded" | "wants" | "not_wants";
+
+// Request status (whether email was sent)
+const hasRequestedInfo = ref<boolean>(false);
+
+// Form data
+const carStatus = ref<CarStatus>("not_responded");
+const licensePlate = ref<string>("");
+
+const isComplete = computed(() => {
+  if (carStatus.value === "not_responded") return false;
+  if (carStatus.value === "not_wants") return true;
+  // If they want a car, they need to provide a license plate
+  return carStatus.value === "wants" && licensePlate.value.trim() !== "";
+});
+
+defineExpose({
+  isComplete,
+});
+</script>

From ce31ce2b3662d258e3eec244d57e9bc19f2c69b5 Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:27:51 +0000
Subject: [PATCH 14/39] chore: session titles task

---
 .../components/tasks/TaskSessionTitles.vue    | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskSessionTitles.vue

diff --git a/frontend/src/components/tasks/TaskSessionTitles.vue b/frontend/src/components/tasks/TaskSessionTitles.vue
new file mode 100644
index 00000000..55941f31
--- /dev/null
+++ b/frontend/src/components/tasks/TaskSessionTitles.vue
@@ -0,0 +1,107 @@
+<template>
+  <TaskTimelineItem
+    :step-number="4"
+    title="Session Titles"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Presentation class="w-4 h-4" />
+    </template>
+    <div class="space-y-4">
+      <!-- Presentation Title (if package includes presentation item) -->
+      <div v-if="hasPresentation" class="space-y-2">
+        <Label for="presentation-title">Presentation Title</Label>
+        <Input
+          id="presentation-title"
+          v-model="presentationTitle"
+          placeholder="Enter presentation title"
+          :class="{ 'border-destructive': isPresentationTitleTooLong }"
+        />
+        <div class="flex items-center justify-between">
+          <p
+            v-if="isPresentationTitleTooLong"
+            class="text-xs text-destructive flex items-center gap-1"
+          >
+            <AlertTriangle class="w-3 h-3" />
+            Title exceeds 30 characters ({{ presentationTitle.length }}/30)
+          </p>
+          <p v-else class="text-xs text-muted-foreground">
+            {{ presentationTitle.length }}/30 characters
+          </p>
+        </div>
+      </div>
+
+      <!-- Workshop Title (if package includes workshop item) -->
+      <div v-if="hasWorkshop" class="space-y-2">
+        <Label for="workshop-title">Workshop Title</Label>
+        <Input
+          id="workshop-title"
+          v-model="workshopTitle"
+          placeholder="Enter workshop title"
+          :class="{ 'border-destructive': isWorkshopTitleTooLong }"
+        />
+        <div class="flex items-center justify-between">
+          <p
+            v-if="isWorkshopTitleTooLong"
+            class="text-xs text-destructive flex items-center gap-1"
+          >
+            <AlertTriangle class="w-3 h-3" />
+            Title exceeds 30 characters ({{ workshopTitle.length }}/30)
+          </p>
+          <p v-else class="text-xs text-muted-foreground">
+            {{ workshopTitle.length }}/30 characters
+          </p>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { AlertTriangle, Presentation } from "lucide-vue-next";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import type { Item } from "@/dto/item";
+
+interface Props {
+  packageItems: Item[];
+}
+
+const props = defineProps<Props>();
+
+// Check if package includes presentation or workshop items by type
+const hasPresentation = computed(() =>
+  props.packageItems.some(
+    (item) => item.name?.toLowerCase() === "presentation",
+  ),
+);
+const hasWorkshop = computed(() =>
+  props.packageItems.some((item) => item.name?.toLowerCase() === "workshop"),
+);
+
+// Session titles
+const presentationTitle = ref("");
+const workshopTitle = ref("");
+
+const isPresentationTitleTooLong = computed(
+  () => presentationTitle.value.length > 30,
+);
+const isWorkshopTitleTooLong = computed(() => workshopTitle.value.length > 30);
+
+// Completion state
+const isComplete = computed(() => {
+  const presentationComplete =
+    !hasPresentation.value ||
+    (presentationTitle.value.length > 0 && !isPresentationTitleTooLong.value);
+  const workshopComplete =
+    !hasWorkshop.value ||
+    (workshopTitle.value.length > 0 && !isWorkshopTitleTooLong.value);
+  return presentationComplete && workshopComplete;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>

From 96b7e0dcfdfe859fef4357c603508bf88f53618d Mon Sep 17 00:00:00 2001
From: Lucas Pinto <github@lucks.pt>
Date: Fri, 6 Feb 2026 00:28:01 +0000
Subject: [PATCH 15/39] feat: tasks prototype

---
 .../src/components/tasks/TaskTimelineItem.vue | 72 ++++++++++++++++
 .../views/Dashboard/Companies/Tasks/Tasks.vue | 85 +++++++++++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskTimelineItem.vue
 create mode 100644 frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue

diff --git a/frontend/src/components/tasks/TaskTimelineItem.vue b/frontend/src/components/tasks/TaskTimelineItem.vue
new file mode 100644
index 00000000..e3f4f529
--- /dev/null
+++ b/frontend/src/components/tasks/TaskTimelineItem.vue
@@ -0,0 +1,72 @@
+<template>
+  <StepperItem
+    :step="stepNumber"
+    class="flex gap-4 items-stretch"
+    :completed="!isComplete"
+  >
+    <div class="flex flex-col items-center">
+      <StepperIndicator class="shrink-0">
+        <slot name="icon" />
+      </StepperIndicator>
+      <StepperSeparator
+        v-if="!isLast"
+        class="flex-1 w-0.5 min-h-4 my-1 !bg-muted"
+      />
+    </div>
+    <div class="flex-1" :class="{ 'pb-4': !isLast }">
+      <Collapsible v-model:open="isOpen" class="w-full">
+        <Card class="p-4">
+          <div
+            class="flex items-center justify-between cursor-pointer"
+            @click="isOpen = !isOpen"
+          >
+            <h3 class="font-medium flex items-center gap-2">
+              {{ title }}
+            </h3>
+            <div class="flex items-center gap-2">
+              <div @click.stop>
+                <slot name="header-actions" />
+              </div>
+              <Badge v-if="isComplete" variant="default"> Complete </Badge>
+              <Badge v-else variant="secondary"> Pending </Badge>
+              <ChevronDown
+                class="h-4 w-4 transition-transform duration-200"
+                :class="{ 'rotate-180': isOpen }"
+              />
+            </div>
+          </div>
+          <CollapsibleContent class="mt-4">
+            <slot />
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+    </div>
+  </StepperItem>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  StepperItem,
+  StepperIndicator,
+  StepperSeparator,
+} from "@/components/ui/stepper";
+import { ChevronDown } from "lucide-vue-next";
+
+interface Props {
+  stepNumber: number;
+  title: string;
+  isComplete: boolean;
+  isLast?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLast: false,
+});
+
+// Start collapsed if complete, open if incomplete
+const isOpen = ref(!props.isComplete);
+</script>
diff --git a/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
new file mode 100644
index 00000000..db4c38e2
--- /dev/null
+++ b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="p-4 space-y-6">
+    <h2 class="text-lg font-semibold">Company Tasks Timeline</h2>
+
+    <!-- Stepper Container -->
+    <Stepper
+      v-model="currentStep"
+      orientation="vertical"
+      :linear="false"
+      class="flex flex-col"
+    >
+      <TaskConfirmation
+        :company-id="companyWithParticipation.id"
+        :participation="currentParticipation"
+        @package-changed="onPackageChanged"
+      />
+
+      <TaskBillingLogos
+        :billing-info="companyWithParticipation.billingInfo"
+        :company-id="companyWithParticipation.id"
+      />
+
+      <TaskContract :company-id="companyWithParticipation.id" />
+
+      <TaskSessionTitles
+        v-if="showSessionTitles"
+        :package-items="packageItems"
+      />
+
+      <TaskCorlief
+        :company-id="companyWithParticipation.id"
+        :step-number="showSessionTitles ? 5 : 4"
+      />
+
+      <TaskLogistics
+        :company-id="companyWithParticipation.id"
+        :step-number="showSessionTitles ? 6 : 5"
+        :is-last="true"
+      />
+    </Stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { CompanyWithParticipation } from "@/dto/companies";
+import type { Item } from "@/dto/item";
+import { Stepper } from "@/components/ui/stepper";
+import TaskConfirmation from "../../../../components/tasks/TaskConfirmation.vue";
+import TaskBillingLogos from "../../../../components/tasks/TaskBillingLogos.vue";
+import TaskContract from "../../../../components/tasks/TaskContract.vue";
+import TaskSessionTitles from "../../../../components/tasks/TaskSessionTitles.vue";
+import TaskCorlief from "../../../../components/tasks/TaskCorlief.vue";
+import TaskLogistics from "../../../../components/tasks/TaskLogistics.vue";
+
+interface Props {
+  companyWithParticipation: CompanyWithParticipation;
+}
+
+const props = defineProps<Props>();
+
+// Get current participation
+const currentParticipation = computed(
+  () => props.companyWithParticipation?.participation,
+);
+
+// Package items for session titles
+const packageItems = ref<Item[]>([]);
+
+const onPackageChanged = (_name: string, items: Item[]) => {
+  packageItems.value = items;
+};
+
+// Show session titles only if package has presentation or workshop items
+const showSessionTitles = computed(() => {
+  return packageItems.value.some(
+    (item) =>
+      item.name?.toLowerCase() === "presentation" ||
+      item.name?.toLowerCase() === "workshop",
+  );
+});
+
+// Set current step to 0 so the stepper doesn't auto-mark any steps as completed
+const currentStep = ref(0);
+</script>

From c44f5a8c479621a9b549c975ed0fd3fe4dbf3572 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 23:37:29 +0000
Subject: [PATCH 16/39] feat: refactor task components to support entity type
 differentiation

---
 .../src/components/tasks/TaskBillingLogos.vue | 133 ++++++++++--------
 .../src/components/tasks/TaskConfirmation.vue |  78 +++++++---
 .../src/components/tasks/TaskContract.vue     |  13 +-
 frontend/src/components/tasks/TaskCorlief.vue |   2 +-
 .../src/components/tasks/TaskLogistics.vue    |   2 +-
 frontend/src/components/tasks/Tasks.vue       |  94 +++++++++++++
 frontend/src/dto/tasks.ts                     |  25 ++++
 .../views/Dashboard/Companies/Tasks/Tasks.vue |  77 ++--------
 .../views/Dashboard/Speakers/SpeakerView.vue  |  41 ++++--
 9 files changed, 301 insertions(+), 164 deletions(-)
 create mode 100644 frontend/src/components/tasks/Tasks.vue
 create mode 100644 frontend/src/dto/tasks.ts

diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
index d062ebad..ec22a7ef 100644
--- a/frontend/src/components/tasks/TaskBillingLogos.vue
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -1,7 +1,7 @@
 <template>
   <TaskTimelineItem
     :step-number="2"
-    title="Billing & Logos"
+    :title="entityType === 'company' ? 'Billing & Logos' : 'Logos'"
     :is-complete="isComplete"
   >
     <template #icon>
@@ -10,68 +10,74 @@
     <template #header-actions>
       <StatusToggleBadge
         v-model="hasAskedForBillingInfo"
-        description="Mark whether you've asked the company for billing info and logos."
+        :description="
+          entityType === 'company'
+            ? 'Mark whether you\'ve asked the company for billing info and logos.'
+            : 'Mark whether you\'ve asked the speaker for logos.'
+        "
       />
     </template>
 
     <div class="space-y-4">
-      <!-- Billing Section -->
-      <div class="space-y-2">
-        <!-- Billing Header -->
-        <div class="flex items-center justify-between">
-          <span class="text-sm font-medium">Billing Information</span>
-
-          <Button
+      <!-- Billing Section (companies only) -->
+      <template v-if="entityType === 'company'">
+        <div class="space-y-2">
+          <!-- Billing Header -->
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-medium">Billing Information</span>
+
+            <Button
+              v-if="hasBillingInfo && !isEditingBilling"
+              variant="outline"
+              size="sm"
+              class="h-7 text-xs"
+              @click="startEditingBilling"
+            >
+              Edit
+            </Button>
+          </div>
+
+          <!-- Billing Info Display -->
+          <div
             v-if="hasBillingInfo && !isEditingBilling"
-            variant="outline"
-            size="sm"
-            class="h-7 text-xs"
-            @click="startEditingBilling"
+            class="p-3 bg-muted/50 rounded-md space-y-1"
           >
-            Edit
-          </Button>
-        </div>
-
-        <!-- Billing Info Display -->
-        <div
-          v-if="hasBillingInfo && !isEditingBilling"
-          class="p-3 bg-muted/50 rounded-md space-y-1"
-        >
-          <p class="text-sm">
-            <span class="font-medium">Name:</span>
-            {{ billingInfo?.name }}
-          </p>
-          <p class="text-sm">
-            <span class="font-medium">Address:</span>
-            {{ billingInfo?.address }}
-          </p>
-          <p class="text-sm">
-            <span class="font-medium">TIN:</span>
-            {{ billingInfo?.tin }}
-          </p>
-        </div>
-
-        <!-- Billing Form (for editing) -->
-        <div v-else-if="isEditingBilling" class="border rounded-md p-3">
-          <BillingForm
-            :initial-data="billingInfo"
-            :is-loading="isUpdatingBilling"
-            :mode="hasBillingInfo ? 'edit' : 'create'"
-            @submit="handleBillingSubmit"
-            @cancel="cancelEditingBilling"
+            <p class="text-sm">
+              <span class="font-medium">Name:</span>
+              {{ billingInfo?.name }}
+            </p>
+            <p class="text-sm">
+              <span class="font-medium">Address:</span>
+              {{ billingInfo?.address }}
+            </p>
+            <p class="text-sm">
+              <span class="font-medium">TIN:</span>
+              {{ billingInfo?.tin }}
+            </p>
+          </div>
+
+          <!-- Billing Form (for editing) -->
+          <div v-else-if="isEditingBilling" class="border rounded-md p-3">
+            <BillingForm
+              :initial-data="billingInfo"
+              :is-loading="isUpdatingBilling"
+              :mode="hasBillingInfo ? 'edit' : 'create'"
+              @submit="handleBillingSubmit"
+              @cancel="cancelEditingBilling"
+            />
+          </div>
+
+          <!-- Empty State -->
+          <EmptyStateCard
+            v-else
+            title="Click here to add billing information"
+            @click="startEditingBilling"
           />
         </div>
 
-        <!-- Empty State -->
-        <EmptyStateCard
-          v-else
-          title="Click here to add billing information"
-          @click="startEditingBilling"
-        />
-      </div>
-
-      <!-- Separator -->
-      <Separator />
+        <!-- Separator -->
+        <Separator />
+      </template>
 
       <!-- Logos Section -->
       <div class="space-y-3">
@@ -93,8 +99,9 @@
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>
-                    Check this if the company wants to review their logos before
-                    publishing
+                    Check this if the
+                    {{ entityType === "company" ? "company" : "speaker" }} wants
+                    to review their logos before publishing
                   </p>
                 </TooltipContent>
               </Tooltip>
@@ -119,6 +126,7 @@ import {
 } from "@/components/ui/tooltip";
 import { Info, Receipt } from "lucide-vue-next";
 import type { CompanyBillingInfo } from "@/dto/companies";
+import type { EntityType } from "@/dto/tasks";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import BillingForm from "@/components/companies/BillingForm.vue";
 import Button from "@/components/ui/button/Button.vue";
@@ -127,8 +135,9 @@ import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { useCompanyBillingMutation } from "@/mutations/companies";
 
 interface Props {
+  entityType: EntityType;
   billingInfo?: CompanyBillingInfo;
-  companyId?: string;
+  entityId?: string;
 }
 
 const props = defineProps<Props>();
@@ -161,9 +170,9 @@ const cancelEditingBilling = () => {
 };
 
 const handleBillingSubmit = async (data: CompanyBillingInfo) => {
-  if (!props.companyId) return;
+  if (!props.entityId) return;
 
-  billingMutation.companyId.value = props.companyId;
+  billingMutation.companyId.value = props.entityId;
   billingMutation.billingInfo.value = data;
 
   try {
@@ -182,7 +191,11 @@ const logosNeedReviewing = ref(false);
 
 // Completion state
 const isComplete = computed(() => {
-  return hasBillingInfo.value && logosReceived.value;
+  if (props.entityType === "company") {
+    return hasBillingInfo.value && logosReceived.value;
+  }
+  // For speakers, only logos matter
+  return logosReceived.value;
 });
 
 defineExpose({
diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
index 948260dd..3523af52 100644
--- a/frontend/src/components/tasks/TaskConfirmation.vue
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -8,8 +8,8 @@
       <CalendarCheck class="w-4 h-4" />
     </template>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <!-- Package Selection -->
-      <div class="space-y-2">
+      <!-- Package Selection (companies only) -->
+      <div v-if="entityType === 'company'" class="space-y-2">
         <Label for="package-select">Package</Label>
         <Select
           v-model="selectedPackageId"
@@ -62,19 +62,23 @@ import {
 } from "@/components/ui/select";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { CompanyParticipation } from "@/dto/companies";
+import type { SpeakerParticipation } from "@/dto/speakers";
+import type { EntityType } from "@/dto/tasks";
 import type { Package } from "@/dto/packages";
 import {
   useCompanyParticipationPackageMutation,
   useCompanyParticipationMutation,
 } from "@/mutations/companies";
+import { useSpeakerParticipationMutation } from "@/mutations/speakers";
 import { usePackagesQuery } from "@/mutations/packages";
 import useToast from "@/lib/toast";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import { CalendarCheck } from "lucide-vue-next";
 
 interface Props {
-  companyId: string;
-  participation?: CompanyParticipation;
+  entityId: string;
+  entityType: EntityType;
+  participation?: CompanyParticipation | SpeakerParticipation;
 }
 
 const props = defineProps<Props>();
@@ -85,7 +89,14 @@ const emit = defineEmits<{
 
 const { toast } = useToast();
 
-// Package data
+// Helper to check if participation is company type
+const isCompanyParticipation = (
+  p?: CompanyParticipation | SpeakerParticipation,
+): p is CompanyParticipation => {
+  return !!p && "confirmed" in p;
+};
+
+// Package data (only used for companies)
 const { data: packagesData } = usePackagesQuery();
 const { data: eventsData } = useQuery({
   key: () => ["events"],
@@ -93,6 +104,7 @@ const { data: eventsData } = useQuery({
 });
 
 const packageOptions = computed(() => {
+  if (props.entityType !== "company") return [];
   const allPkgs = (packagesData.value || []) as Package[];
   const eventId = props.participation?.event;
   if (!eventId) return [];
@@ -106,17 +118,20 @@ const packageOptions = computed(() => {
   return pkgs.map((p) => ({ id: String(p.id), name: p.name }));
 });
 
-// Package mutation
+// Package mutation (companies only)
 const packageMutation = useCompanyParticipationPackageMutation();
-packageMutation.companyId.value = props.companyId;
+packageMutation.companyId.value = props.entityId;
 
 const selectedPackageId = ref<string>(
-  props.participation?.package ? String(props.participation.package) : "",
+  isCompanyParticipation(props.participation) && props.participation?.package
+    ? String(props.participation.package)
+    : "",
 );
 const isPackageUpdating = ref(false);
 
 // Get package name from the packages data
 const currentPackageName = computed(() => {
+  if (props.entityType !== "company") return "";
   if (!selectedPackageId.value || !packagesData.value) return "";
   const pkg = (packagesData.value as Package[]).find(
     (p) => String(p.id) === selectedPackageId.value,
@@ -126,6 +141,7 @@ const currentPackageName = computed(() => {
 
 // Get current package items
 const currentPackage = computed(() => {
+  if (props.entityType !== "company") return null;
   if (!selectedPackageId.value || !packagesData.value) return null;
   return (
     (packagesData.value as Package[]).find(
@@ -182,24 +198,36 @@ const parseIsoToDate = (isoString: string | null): Date | null => {
 };
 
 const confirmedDate = ref<Date | null>(
-  parseIsoToDate(props.participation?.confirmed || null),
+  isCompanyParticipation(props.participation)
+    ? parseIsoToDate(props.participation?.confirmed || null)
+    : null,
 );
 const isDateUpdating = ref(false);
 
-// Participation mutation for updating confirmed date
-const participationMutation = useCompanyParticipationMutation();
-participationMutation.companyId.value = props.companyId;
+// Participation mutations for updating confirmed date
+const companyParticipationMutation = useCompanyParticipationMutation();
+companyParticipationMutation.companyId.value = props.entityId;
+
+const speakerParticipationMutation = useSpeakerParticipationMutation();
+speakerParticipationMutation.speakerId.value = props.entityId;
 
 const onConfirmedDateChange = async (newValue: Date | null) => {
   if (!newValue) return;
   try {
     isDateUpdating.value = true;
     const isoDate = newValue.toISOString();
-    participationMutation.data.value = {
-      ...props.participation,
-      confirmed: isoDate,
-    };
-    await participationMutation.mutateAsync();
+
+    if (props.entityType === "company") {
+      companyParticipationMutation.data.value = {
+        ...props.participation,
+        confirmed: isoDate,
+      };
+      await companyParticipationMutation.mutateAsync();
+    } else {
+      // Speakers don't have a confirmed field in the API,
+      // but we store the date locally
+    }
+
     toast.success({ title: "Confirmation date updated" });
   } catch (err) {
     console.error("Failed to update confirmation date:", err);
@@ -227,14 +255,20 @@ const onPackageChange = async (newValue: unknown) => {
 
 // Watch for participation changes to sync local state from props
 watch(
-  () => props.participation?.package,
+  () =>
+    isCompanyParticipation(props.participation)
+      ? props.participation?.package
+      : undefined,
   (newVal) => {
     selectedPackageId.value = newVal ? String(newVal) : "";
   },
 );
 
 watch(
-  () => props.participation?.confirmed,
+  () =>
+    isCompanyParticipation(props.participation)
+      ? props.participation?.confirmed
+      : undefined,
   (newVal) => {
     confirmedDate.value = parseIsoToDate(newVal || null);
   },
@@ -242,7 +276,11 @@ watch(
 
 // Completion state
 const isComplete = computed(() => {
-  return !!selectedPackageId.value && !!confirmedDate.value;
+  if (props.entityType === "company") {
+    return !!selectedPackageId.value && !!confirmedDate.value;
+  }
+  // For speakers, just the date is enough
+  return !!confirmedDate.value;
 });
 
 defineExpose({
diff --git a/frontend/src/components/tasks/TaskContract.vue b/frontend/src/components/tasks/TaskContract.vue
index 7ee2422d..86aaaa06 100644
--- a/frontend/src/components/tasks/TaskContract.vue
+++ b/frontend/src/components/tasks/TaskContract.vue
@@ -8,7 +8,7 @@
         v-model="hasSentContract"
         active-label="Sent"
         inactive-label="Not Sent"
-        description="Mark whether you've sent the contract to the company."
+        :description="`Mark whether you've sent the contract to the ${entityType}.`"
       />
     </template>
 
@@ -30,7 +30,10 @@
         <Label for="receipt-sent" class="text-sm">Receipt sent</Label>
       </div>
 
-      <ContractDownload :company-id="props.companyId" />
+      <ContractDownload
+        v-if="entityType === 'company'"
+        :company-id="props.entityId"
+      />
     </div>
   </TaskTimelineItem>
 </template>
@@ -43,8 +46,12 @@ import { FileText } from "lucide-vue-next";
 import ContractDownload from "../companies/ContractDownload.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import type { EntityType } from "@/dto/tasks";
 
-const props = defineProps<{ companyId: string }>();
+const props = defineProps<{
+  entityId: string;
+  entityType: EntityType;
+}>();
 
 // Contract states
 const hasCreatedContract = ref(false);
diff --git a/frontend/src/components/tasks/TaskCorlief.vue b/frontend/src/components/tasks/TaskCorlief.vue
index dadc94b0..5277e9e0 100644
--- a/frontend/src/components/tasks/TaskCorlief.vue
+++ b/frontend/src/components/tasks/TaskCorlief.vue
@@ -34,7 +34,7 @@ import { Label } from "@/components/ui/label";
 import { Building2 } from "lucide-vue-next";
 
 interface Props {
-  companyId: string;
+  entityId: string;
   stepNumber?: number;
 }
 
diff --git a/frontend/src/components/tasks/TaskLogistics.vue b/frontend/src/components/tasks/TaskLogistics.vue
index afee7b68..6e0569de 100644
--- a/frontend/src/components/tasks/TaskLogistics.vue
+++ b/frontend/src/components/tasks/TaskLogistics.vue
@@ -63,7 +63,7 @@ import {
 import { Truck } from "lucide-vue-next";
 
 interface Props {
-  companyId: string;
+  entityId: string;
   stepNumber?: number;
   isLast?: boolean;
 }
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
new file mode 100644
index 00000000..d098f199
--- /dev/null
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="p-4 space-y-6">
+    <h2 class="text-lg font-semibold">
+      {{ entityType === "company" ? "Company" : "Speaker" }} Tasks Timeline
+    </h2>
+
+    <!-- Stepper Container -->
+    <Stepper
+      v-model="currentStep"
+      orientation="vertical"
+      :linear="false"
+      class="flex flex-col"
+    >
+      <TaskConfirmation
+        :entity-id="entityId"
+        :entity-type="entityType"
+        :participation="currentParticipation"
+        @package-changed="onPackageChanged"
+      />
+
+      <TaskBillingLogos
+        :entity-type="entityType"
+        :billing-info="billingInfo"
+        :entity-id="entityId"
+      />
+
+      <TaskContract :entity-type="entityType" :entity-id="entityId" />
+
+      <TaskSessionTitles
+        v-if="showSessionTitles"
+        :package-items="packageItems"
+      />
+
+      <TaskCorlief
+        :entity-id="entityId"
+        :step-number="showSessionTitles ? 5 : 4"
+      />
+
+      <TaskLogistics
+        :entity-id="entityId"
+        :step-number="showSessionTitles ? 6 : 5"
+        :is-last="true"
+      />
+    </Stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { EntityType } from "@/dto/tasks";
+import type { CompanyBillingInfo, CompanyParticipation } from "@/dto/companies";
+import type { SpeakerParticipation } from "@/dto/speakers";
+import type { Item } from "@/dto/item";
+import { Stepper } from "@/components/ui/stepper";
+import TaskConfirmation from "./TaskConfirmation.vue";
+import TaskBillingLogos from "./TaskBillingLogos.vue";
+import TaskContract from "./TaskContract.vue";
+import TaskSessionTitles from "./TaskSessionTitles.vue";
+import TaskCorlief from "./TaskCorlief.vue";
+import TaskLogistics from "./TaskLogistics.vue";
+
+interface Props {
+  entityType: EntityType;
+  entityId: string;
+  participation?: CompanyParticipation | SpeakerParticipation;
+  billingInfo?: CompanyBillingInfo;
+}
+
+const props = defineProps<Props>();
+
+// Get current participation
+const currentParticipation = computed(() => props.participation);
+
+// Package items for session titles
+const packageItems = ref<Item[]>([]);
+
+const onPackageChanged = (_name: string, items: Item[]) => {
+  packageItems.value = items;
+};
+
+// Show session titles only if package has presentation or workshop items
+// (only relevant for companies that have packages)
+const showSessionTitles = computed(() => {
+  if (props.entityType !== "company") return false;
+  return packageItems.value.some(
+    (item) =>
+      item.name?.toLowerCase() === "presentation" ||
+      item.name?.toLowerCase() === "workshop",
+  );
+});
+
+// Set current step to 0 so the stepper doesn't auto-mark any steps as completed
+const currentStep = ref(0);
+</script>
diff --git a/frontend/src/dto/tasks.ts b/frontend/src/dto/tasks.ts
new file mode 100644
index 00000000..6d080255
--- /dev/null
+++ b/frontend/src/dto/tasks.ts
@@ -0,0 +1,25 @@
+import type { Participation, ObjectID } from ".";
+import type { CompanyBillingInfo, CompanyParticipation } from "./companies";
+import type { SpeakerParticipation } from "./speakers";
+
+/**
+ * Discriminator for entity types that share the Tasks timeline.
+ */
+export type EntityType = "company" | "speaker";
+
+/**
+ * A unified participation type used across task components.
+ * Company participations carry extra fields (package, billing, confirmed, etc.)
+ * while speaker participations carry their own (feedback, flights, room, etc.).
+ */
+export type AnyParticipation = CompanyParticipation | SpeakerParticipation;
+
+/**
+ * Minimal shape every entity must satisfy to be used in the Tasks view.
+ */
+export interface TaskEntity {
+  id: ObjectID;
+  name: string;
+  participation?: Participation;
+  billingInfo?: CompanyBillingInfo;
+}
diff --git a/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
index db4c38e2..37d98716 100644
--- a/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
+++ b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
@@ -1,57 +1,16 @@
 <template>
-  <div class="p-4 space-y-6">
-    <h2 class="text-lg font-semibold">Company Tasks Timeline</h2>
-
-    <!-- Stepper Container -->
-    <Stepper
-      v-model="currentStep"
-      orientation="vertical"
-      :linear="false"
-      class="flex flex-col"
-    >
-      <TaskConfirmation
-        :company-id="companyWithParticipation.id"
-        :participation="currentParticipation"
-        @package-changed="onPackageChanged"
-      />
-
-      <TaskBillingLogos
-        :billing-info="companyWithParticipation.billingInfo"
-        :company-id="companyWithParticipation.id"
-      />
-
-      <TaskContract :company-id="companyWithParticipation.id" />
-
-      <TaskSessionTitles
-        v-if="showSessionTitles"
-        :package-items="packageItems"
-      />
-
-      <TaskCorlief
-        :company-id="companyWithParticipation.id"
-        :step-number="showSessionTitles ? 5 : 4"
-      />
-
-      <TaskLogistics
-        :company-id="companyWithParticipation.id"
-        :step-number="showSessionTitles ? 6 : 5"
-        :is-last="true"
-      />
-    </Stepper>
-  </div>
+  <Tasks
+    entity-type="company"
+    :entity-id="companyWithParticipation.id"
+    :participation="currentParticipation"
+    :billing-info="companyWithParticipation.billingInfo"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { computed } from "vue";
 import type { CompanyWithParticipation } from "@/dto/companies";
-import type { Item } from "@/dto/item";
-import { Stepper } from "@/components/ui/stepper";
-import TaskConfirmation from "../../../../components/tasks/TaskConfirmation.vue";
-import TaskBillingLogos from "../../../../components/tasks/TaskBillingLogos.vue";
-import TaskContract from "../../../../components/tasks/TaskContract.vue";
-import TaskSessionTitles from "../../../../components/tasks/TaskSessionTitles.vue";
-import TaskCorlief from "../../../../components/tasks/TaskCorlief.vue";
-import TaskLogistics from "../../../../components/tasks/TaskLogistics.vue";
+import Tasks from "@/components/tasks/Tasks.vue";
 
 interface Props {
   companyWithParticipation: CompanyWithParticipation;
@@ -59,27 +18,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// Get current participation
 const currentParticipation = computed(
   () => props.companyWithParticipation?.participation,
 );
-
-// Package items for session titles
-const packageItems = ref<Item[]>([]);
-
-const onPackageChanged = (_name: string, items: Item[]) => {
-  packageItems.value = items;
-};
-
-// Show session titles only if package has presentation or workshop items
-const showSessionTitles = computed(() => {
-  return packageItems.value.some(
-    (item) =>
-      item.name?.toLowerCase() === "presentation" ||
-      item.name?.toLowerCase() === "workshop",
-  );
-});
-
-// Set current step to 0 so the stepper doesn't auto-mark any steps as completed
-const currentStep = ref(0);
 </script>
diff --git a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
index 89481a18..a6da4382 100644
--- a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
+++ b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
@@ -25,17 +25,35 @@
       />
     </div>
 
-    <!-- Communications section -->
+    <!-- Info/Tasks section -->
     <div class="flex-1 min-w-0">
-      <ParticipationsCard
-        v-if="speakerWithParticipation?.participations"
-        :participations="speakerWithParticipation.participations"
-        :entity-id="speakerId as string"
-        entity-type="speaker"
-        class="mb-5"
-      />
+      <Tabs v-model="activeTab" default-value="info" class="w-full">
+        <TabsList class="grid w-full grid-cols-2 max-w-md">
+          <TabsTrigger value="info"> Info </TabsTrigger>
+          <TabsTrigger value="tasks"> Tasks </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="info">
+          <div class="space-y-5">
+            <ParticipationsCard
+              v-if="speakerWithParticipation?.participations"
+              :participations="speakerWithParticipation.participations"
+              :entity-id="speakerId as string"
+              entity-type="speaker"
+            />
+
+            <SpeakerCommunications :speaker="speakerWithParticipation" />
+          </div>
+        </TabsContent>
 
-      <SpeakerCommunications :speaker="speakerWithParticipation" />
+        <TabsContent value="tasks">
+          <Tasks
+            entity-type="speaker"
+            :entity-id="speakerWithParticipation.id"
+            :participation="speakerWithParticipation.participation"
+          />
+        </TabsContent>
+      </Tabs>
     </div>
   </div>
 </template>
@@ -46,6 +64,7 @@ import SpeakerCard from "@/components/cards/SpeakerCard.vue";
 import ContactCard from "@/components/ContactCard.vue";
 import ParticipationsCard from "@/components/ParticipationsCard.vue";
 import DirectEmailDialogTrigger from "@/components/DirectEmailDialogTrigger.vue";
+import Tasks from "@/components/tasks/Tasks.vue";
 import type {
   SpeakerWithContactObject,
   SpeakerWithParticipation,
@@ -54,12 +73,14 @@ import { withCurrentParticipation } from "@/lib/utils";
 import { useEventStore } from "@/stores/event";
 
 import { useQuery, useQueryCache } from "@pinia/colada";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import SpeakerCommunications from "@/components/speakers/SpeakerCommunications.vue";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
 const route = useRoute();
 const queryCache = useQueryCache();
+const activeTab = ref("info");
 
 const speakerId = route.params.speakerId;
 const { data: speaker } = useQuery({

From 2a38de8558433a84e1ad4f5cd96335ef5c74ebf5 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 23:37:45 +0000
Subject: [PATCH 17/39] feat: add task components for flights, hotel, and
 materials

---
 frontend/src/components/tasks/TaskFlights.vue | 109 ++++++++++++++++++
 frontend/src/components/tasks/TaskHotel.vue   |  59 ++++++++++
 .../src/components/tasks/TaskMaterials.vue    |  58 ++++++++++
 frontend/src/components/tasks/Tasks.vue       |  41 ++++---
 4 files changed, 254 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/tasks/TaskFlights.vue
 create mode 100644 frontend/src/components/tasks/TaskHotel.vue
 create mode 100644 frontend/src/components/tasks/TaskMaterials.vue

diff --git a/frontend/src/components/tasks/TaskFlights.vue b/frontend/src/components/tasks/TaskFlights.vue
new file mode 100644
index 00000000..065c2122
--- /dev/null
+++ b/frontend/src/components/tasks/TaskFlights.vue
@@ -0,0 +1,109 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Flights"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Plane class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedFlights"
+        active-label="Requested"
+        inactive-label="Not Requested"
+        description="Mark whether you've asked the speaker for flight info."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Flight booking flow -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Booking</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="flights-received" v-model="flightsReceived" />
+          <Label for="flights-received" class="text-sm">
+            Flights info received
+          </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="flights-approved" v-model="flightsApproved" />
+          <Label for="flights-approved" class="text-sm">
+            Flights approved
+          </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="flights-bought" v-model="flightsBought" />
+          <Label for="flights-bought" class="text-sm"> Flights bought </Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Refund flow -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Refund</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="receipt-requested" v-model="receiptRequested" />
+          <Label for="receipt-requested" class="text-sm">
+            Receipt requested
+          </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="refund-info-requested" v-model="refundInfoRequested" />
+          <Label for="refund-info-requested" class="text-sm">
+            Refund info requested
+          </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="refund-done" v-model="refundDone" />
+          <Label for="refund-done" class="text-sm"> Refund done </Label>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Plane } from "lucide-vue-next";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  stepNumber: 4,
+});
+
+// Flight booking states
+const hasRequestedFlights = ref<boolean>(false);
+const flightsReceived = ref<boolean>(false);
+const flightsApproved = ref<boolean>(false);
+const flightsBought = ref<boolean>(false);
+
+// Refund states
+const receiptRequested = ref<boolean>(false);
+const refundInfoRequested = ref<boolean>(false);
+const refundDone = ref<boolean>(false);
+
+const isComplete = computed(() => {
+  return flightsBought.value === true && refundDone.value === true;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskHotel.vue b/frontend/src/components/tasks/TaskHotel.vue
new file mode 100644
index 00000000..4b63eac2
--- /dev/null
+++ b/frontend/src/components/tasks/TaskHotel.vue
@@ -0,0 +1,59 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Hotel"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <Hotel class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedHotelInfo"
+        active-label="Requested"
+        inactive-label="Not Requested"
+        description="Mark whether you've asked the speaker for hotel info."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox id="hotel-booked" v-model="hotelBooked" />
+        <Label for="hotel-booked" class="text-sm"> Hotel booked </Label>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Hotel } from "lucide-vue-next";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  isLast?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  stepNumber: 6,
+  isLast: false,
+});
+
+// Hotel states
+const hasRequestedHotelInfo = ref<boolean>(false);
+const hotelBooked = ref<boolean>(false);
+
+const isComplete = computed(() => {
+  return hotelBooked.value === true;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskMaterials.vue b/frontend/src/components/tasks/TaskMaterials.vue
new file mode 100644
index 00000000..61d5fb59
--- /dev/null
+++ b/frontend/src/components/tasks/TaskMaterials.vue
@@ -0,0 +1,58 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Materials"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Package class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedMaterials"
+        active-label="Requested"
+        inactive-label="Not Requested"
+        description="Mark whether you've asked the speaker for materials."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox id="materials-received" v-model="materialsReceived" />
+        <Label for="materials-received" class="text-sm">
+          Materials received
+        </Label>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Package } from "lucide-vue-next";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  stepNumber: 5,
+});
+
+// Materials states
+const hasRequestedMaterials = ref<boolean>(false);
+const materialsReceived = ref<boolean>(false);
+
+const isComplete = computed(() => {
+  return materialsReceived.value === true;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
index d098f199..4ac768d2 100644
--- a/frontend/src/components/tasks/Tasks.vue
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -26,21 +26,33 @@
 
       <TaskContract :entity-type="entityType" :entity-id="entityId" />
 
-      <TaskSessionTitles
-        v-if="showSessionTitles"
-        :package-items="packageItems"
-      />
+      <!-- Company-only steps -->
+      <template v-if="entityType === 'company'">
+        <TaskSessionTitles
+          v-if="showSessionTitles"
+          :package-items="packageItems"
+        />
 
-      <TaskCorlief
-        :entity-id="entityId"
-        :step-number="showSessionTitles ? 5 : 4"
-      />
+        <TaskCorlief
+          :entity-id="entityId"
+          :step-number="showSessionTitles ? 5 : 4"
+        />
 
-      <TaskLogistics
-        :entity-id="entityId"
-        :step-number="showSessionTitles ? 6 : 5"
-        :is-last="true"
-      />
+        <TaskLogistics
+          :entity-id="entityId"
+          :step-number="showSessionTitles ? 6 : 5"
+          :is-last="true"
+        />
+      </template>
+
+      <!-- Speaker-only steps -->
+      <template v-if="entityType === 'speaker'">
+        <TaskFlights :entity-id="entityId" :step-number="4" />
+
+        <TaskMaterials :entity-id="entityId" :step-number="5" />
+
+        <TaskHotel :entity-id="entityId" :step-number="6" :is-last="true" />
+      </template>
     </Stepper>
   </div>
 </template>
@@ -58,6 +70,9 @@ import TaskContract from "./TaskContract.vue";
 import TaskSessionTitles from "./TaskSessionTitles.vue";
 import TaskCorlief from "./TaskCorlief.vue";
 import TaskLogistics from "./TaskLogistics.vue";
+import TaskFlights from "./TaskFlights.vue";
+import TaskMaterials from "./TaskMaterials.vue";
+import TaskHotel from "./TaskHotel.vue";
 
 interface Props {
   entityType: EntityType;

From 25144bcd26a6815d851ee92ccc9a7f80f63dcae3 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 23:43:33 +0000
Subject: [PATCH 18/39] feat: add speaker-specific fields and coverage task
 components

---
 .../src/components/tasks/TaskBillingLogos.vue | 27 +++++++
 .../src/components/tasks/TaskConfirmation.vue | 30 ++++++++
 .../src/components/tasks/TaskCoverage.vue     | 77 +++++++++++++++++++
 .../src/components/tasks/TaskMaterials.vue    | 77 +++++++++++++++++--
 frontend/src/components/tasks/Tasks.vue       |  7 +-
 5 files changed, 210 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/tasks/TaskCoverage.vue

diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
index ec22a7ef..8bd9dd92 100644
--- a/frontend/src/components/tasks/TaskBillingLogos.vue
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -109,6 +109,28 @@
           </Label>
         </div>
       </div>
+
+      <!-- LinkedIn Section (speakers only) -->
+      <template v-if="entityType === 'speaker'">
+        <Separator />
+
+        <div class="space-y-2">
+          <Label for="linkedin-url" class="text-sm font-medium">
+            LinkedIn
+          </Label>
+          <Input
+            id="linkedin-url"
+            v-model="linkedinUrl"
+            placeholder="LinkedIn profile URL (for tagging)"
+          />
+          <div class="flex items-center space-x-2">
+            <Checkbox id="wants-linkedin-tag" v-model="wantsLinkedinTag" />
+            <Label for="wants-linkedin-tag" class="text-sm">
+              Wants to be tagged
+            </Label>
+          </div>
+        </div>
+      </template>
     </div>
   </TaskTimelineItem>
 </template>
@@ -130,6 +152,7 @@ import type { EntityType } from "@/dto/tasks";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import BillingForm from "@/components/companies/BillingForm.vue";
 import Button from "@/components/ui/button/Button.vue";
+import { Input } from "@/components/ui/input";
 import EmptyStateCard from "@/components/ui/EmptyStateCard.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { useCompanyBillingMutation } from "@/mutations/companies";
@@ -189,6 +212,10 @@ const hasAskedForBillingInfo = ref(false);
 const logosReceived = ref(false);
 const logosNeedReviewing = ref(false);
 
+// LinkedIn (speakers only)
+const linkedinUrl = ref<string>("");
+const wantsLinkedinTag = ref<boolean>(false);
+
 // Completion state
 const isComplete = computed(() => {
   if (props.entityType === "company") {
diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
index 3523af52..ac2feff5 100644
--- a/frontend/src/components/tasks/TaskConfirmation.vue
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -43,6 +43,30 @@
         />
       </div>
     </div>
+
+    <!-- Speaker-only fields -->
+    <template v-if="entityType === 'speaker'">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        <div class="space-y-2">
+          <Label for="speaker-phone">Phone</Label>
+          <Input
+            id="speaker-phone"
+            v-model="speakerPhone"
+            placeholder="Phone number"
+          />
+        </div>
+      </div>
+
+      <div class="space-y-2 mt-4">
+        <Label for="speaker-observations">Observations</Label>
+        <Textarea
+          id="speaker-observations"
+          v-model="speakerObservations"
+          placeholder="Any observations about the speaker"
+          :rows="3"
+        />
+      </div>
+    </template>
   </TaskTimelineItem>
 </template>
 
@@ -61,6 +85,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { DatePicker } from "@/components/ui/date-picker";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import type { CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
 import type { EntityType } from "@/dto/tasks";
@@ -283,6 +309,10 @@ const isComplete = computed(() => {
   return !!confirmedDate.value;
 });
 
+// Speaker-only fields
+const speakerPhone = ref<string>("");
+const speakerObservations = ref<string>("");
+
 defineExpose({
   isComplete,
   currentPackageName,
diff --git a/frontend/src/components/tasks/TaskCoverage.vue b/frontend/src/components/tasks/TaskCoverage.vue
new file mode 100644
index 00000000..c4311e28
--- /dev/null
+++ b/frontend/src/components/tasks/TaskCoverage.vue
@@ -0,0 +1,77 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Coverage"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Camera class="w-4 h-4" />
+    </template>
+
+    <div class="space-y-4">
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Video</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="video-coverage" v-model="videoCoverage" />
+          <Label for="video-coverage" class="text-sm">
+            Video coverage confirmed
+          </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="streaming" v-model="streaming" />
+          <Label for="streaming" class="text-sm"> Streaming confirmed </Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Photo</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="photo-coverage" v-model="photoCoverage" />
+          <Label for="photo-coverage" class="text-sm">
+            Photo coverage confirmed
+          </Label>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Camera } from "lucide-vue-next";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  stepNumber: 5,
+});
+
+// Coverage states
+const videoCoverage = ref<boolean>(false);
+const streaming = ref<boolean>(false);
+const photoCoverage = ref<boolean>(false);
+
+const isComplete = computed(() => {
+  return (
+    videoCoverage.value === true &&
+    streaming.value === true &&
+    photoCoverage.value === true
+  );
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskMaterials.vue b/frontend/src/components/tasks/TaskMaterials.vue
index 61d5fb59..957e5cd9 100644
--- a/frontend/src/components/tasks/TaskMaterials.vue
+++ b/frontend/src/components/tasks/TaskMaterials.vue
@@ -17,11 +17,65 @@
     </template>
 
     <div class="space-y-4">
-      <div class="flex items-center space-x-2">
-        <Checkbox id="materials-received" v-model="materialsReceived" />
-        <Label for="materials-received" class="text-sm">
-          Materials received
-        </Label>
+      <!-- Talk Info -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Talk Info</span>
+
+        <div class="space-y-2">
+          <Label for="talk-title" class="text-sm">Talk Title</Label>
+          <Input
+            id="talk-title"
+            v-model="talkTitle"
+            placeholder="Title of the talk"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="talk-description" class="text-sm">
+            Talk Description
+          </Label>
+          <Textarea
+            id="talk-description"
+            v-model="talkDescription"
+            placeholder="Description of the talk"
+            :rows="3"
+          />
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Materials -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Materials</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="materials-received" v-model="materialsReceived" />
+          <Label for="materials-received" class="text-sm">
+            Materials received
+          </Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Test Schedule -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Test Schedule</span>
+
+        <div class="space-y-2">
+          <Label for="test-schedule" class="text-sm">Schedule</Label>
+          <Input
+            id="test-schedule"
+            v-model="testSchedule"
+            placeholder="e.g. Monday 14:00"
+          />
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="test-done" v-model="testDone" />
+          <Label for="test-done" class="text-sm"> Test completed </Label>
+        </div>
       </div>
     </div>
   </TaskTimelineItem>
@@ -33,6 +87,9 @@ import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
 import { Package } from "lucide-vue-next";
 
 interface Props {
@@ -48,8 +105,16 @@ withDefaults(defineProps<Props>(), {
 const hasRequestedMaterials = ref<boolean>(false);
 const materialsReceived = ref<boolean>(false);
 
+// Talk info
+const talkTitle = ref<string>("");
+const talkDescription = ref<string>("");
+
+// Test schedule
+const testSchedule = ref<string>("");
+const testDone = ref<boolean>(false);
+
 const isComplete = computed(() => {
-  return materialsReceived.value === true;
+  return materialsReceived.value === true && testDone.value === true;
 });
 
 defineExpose({
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
index 4ac768d2..a76bd917 100644
--- a/frontend/src/components/tasks/Tasks.vue
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -49,9 +49,11 @@
       <template v-if="entityType === 'speaker'">
         <TaskFlights :entity-id="entityId" :step-number="4" />
 
-        <TaskMaterials :entity-id="entityId" :step-number="5" />
+        <TaskCoverage :entity-id="entityId" :step-number="5" />
 
-        <TaskHotel :entity-id="entityId" :step-number="6" :is-last="true" />
+        <TaskMaterials :entity-id="entityId" :step-number="6" />
+
+        <TaskHotel :entity-id="entityId" :step-number="7" :is-last="true" />
       </template>
     </Stepper>
   </div>
@@ -71,6 +73,7 @@ import TaskSessionTitles from "./TaskSessionTitles.vue";
 import TaskCorlief from "./TaskCorlief.vue";
 import TaskLogistics from "./TaskLogistics.vue";
 import TaskFlights from "./TaskFlights.vue";
+import TaskCoverage from "./TaskCoverage.vue";
 import TaskMaterials from "./TaskMaterials.vue";
 import TaskHotel from "./TaskHotel.vue";
 

From d9efbe1c6ecb15f5e9676c090ce920bedac72ae3 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 23:50:20 +0000
Subject: [PATCH 19/39] feat: update task components to include LinkedIn fields
 and enhance hotel and flight details

---
 .../src/components/tasks/TaskBillingLogos.vue |  27 --
 .../src/components/tasks/TaskConfirmation.vue |  18 ++
 frontend/src/components/tasks/TaskFlights.vue | 236 ++++++++++++++----
 frontend/src/components/tasks/TaskHotel.vue   | 133 +++++++++-
 frontend/src/components/tasks/Tasks.vue       |  14 +-
 5 files changed, 345 insertions(+), 83 deletions(-)

diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
index 8bd9dd92..ec22a7ef 100644
--- a/frontend/src/components/tasks/TaskBillingLogos.vue
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -109,28 +109,6 @@
           </Label>
         </div>
       </div>
-
-      <!-- LinkedIn Section (speakers only) -->
-      <template v-if="entityType === 'speaker'">
-        <Separator />
-
-        <div class="space-y-2">
-          <Label for="linkedin-url" class="text-sm font-medium">
-            LinkedIn
-          </Label>
-          <Input
-            id="linkedin-url"
-            v-model="linkedinUrl"
-            placeholder="LinkedIn profile URL (for tagging)"
-          />
-          <div class="flex items-center space-x-2">
-            <Checkbox id="wants-linkedin-tag" v-model="wantsLinkedinTag" />
-            <Label for="wants-linkedin-tag" class="text-sm">
-              Wants to be tagged
-            </Label>
-          </div>
-        </div>
-      </template>
     </div>
   </TaskTimelineItem>
 </template>
@@ -152,7 +130,6 @@ import type { EntityType } from "@/dto/tasks";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import BillingForm from "@/components/companies/BillingForm.vue";
 import Button from "@/components/ui/button/Button.vue";
-import { Input } from "@/components/ui/input";
 import EmptyStateCard from "@/components/ui/EmptyStateCard.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { useCompanyBillingMutation } from "@/mutations/companies";
@@ -212,10 +189,6 @@ const hasAskedForBillingInfo = ref(false);
 const logosReceived = ref(false);
 const logosNeedReviewing = ref(false);
 
-// LinkedIn (speakers only)
-const linkedinUrl = ref<string>("");
-const wantsLinkedinTag = ref<boolean>(false);
-
 // Completion state
 const isComplete = computed(() => {
   if (props.entityType === "company") {
diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
index ac2feff5..bfe3b1d0 100644
--- a/frontend/src/components/tasks/TaskConfirmation.vue
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -55,6 +55,21 @@
             placeholder="Phone number"
           />
         </div>
+
+        <div class="space-y-2">
+          <Label for="linkedin-url">LinkedIn</Label>
+          <Input
+            id="linkedin-url"
+            v-model="linkedinUrl"
+            placeholder="LinkedIn profile URL"
+          />
+          <div class="flex items-center space-x-2">
+            <Checkbox id="wants-linkedin-tag" v-model="wantsLinkedinTag" />
+            <Label for="wants-linkedin-tag" class="text-sm">
+              Wants to be tagged
+            </Label>
+          </div>
+        </div>
       </div>
 
       <div class="space-y-2 mt-4">
@@ -87,6 +102,7 @@ import {
 import { DatePicker } from "@/components/ui/date-picker";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
 import type { CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
 import type { EntityType } from "@/dto/tasks";
@@ -312,6 +328,8 @@ const isComplete = computed(() => {
 // Speaker-only fields
 const speakerPhone = ref<string>("");
 const speakerObservations = ref<string>("");
+const linkedinUrl = ref<string>("");
+const wantsLinkedinTag = ref<boolean>(false);
 
 defineExpose({
   isComplete,
diff --git a/frontend/src/components/tasks/TaskFlights.vue b/frontend/src/components/tasks/TaskFlights.vue
index 065c2122..a20824a1 100644
--- a/frontend/src/components/tasks/TaskFlights.vue
+++ b/frontend/src/components/tasks/TaskFlights.vue
@@ -17,53 +17,175 @@
     </template>
 
     <div class="space-y-4">
-      <!-- Flight booking flow -->
+      <!-- Arrival -->
       <div class="space-y-3">
-        <span class="text-sm font-medium">Booking</span>
-
-        <div class="flex items-center space-x-2">
-          <Checkbox id="flights-received" v-model="flightsReceived" />
-          <Label for="flights-received" class="text-sm">
-            Flights info received
-          </Label>
+        <span class="text-sm font-medium">Arrival</span>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="space-y-1">
+            <Label for="arrival-airport" class="text-xs"
+              >Airport (origin)</Label
+            >
+            <Input
+              id="arrival-airport"
+              v-model="arrivalAirport"
+              placeholder="e.g. JFK"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="arrival-flight" class="text-xs">Flight Nº</Label>
+            <Input
+              id="arrival-flight"
+              v-model="arrivalFlightNumber"
+              placeholder="e.g. TP1234"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="arrival-date" class="text-xs">Date (arrival LIS)</Label>
+            <DatePicker v-model="arrivalDate" placeholder="Pick a date" />
+          </div>
+          <div class="space-y-1">
+            <Label for="arrival-time" class="text-xs">Time (arrival LIS)</Label>
+            <Input
+              id="arrival-time"
+              v-model="arrivalTime"
+              placeholder="e.g. 14:30"
+            />
+          </div>
         </div>
+      </div>
 
-        <div class="flex items-center space-x-2">
-          <Checkbox id="flights-approved" v-model="flightsApproved" />
-          <Label for="flights-approved" class="text-sm">
-            Flights approved
-          </Label>
-        </div>
+      <Separator />
 
-        <div class="flex items-center space-x-2">
-          <Checkbox id="flights-bought" v-model="flightsBought" />
-          <Label for="flights-bought" class="text-sm"> Flights bought </Label>
+      <!-- Departure -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Departure</span>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="space-y-1">
+            <Label for="departure-airport" class="text-xs"
+              >Airport (destination)</Label
+            >
+            <Input
+              id="departure-airport"
+              v-model="departureAirport"
+              placeholder="e.g. JFK"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="departure-flight" class="text-xs">Flight Nº</Label>
+            <Input
+              id="departure-flight"
+              v-model="departureFlightNumber"
+              placeholder="e.g. TP1235"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="departure-date" class="text-xs">Date (from LIS)</Label>
+            <DatePicker v-model="departureDate" placeholder="Pick a date" />
+          </div>
+          <div class="space-y-1">
+            <Label for="departure-time" class="text-xs">Time (from LIS)</Label>
+            <Input
+              id="departure-time"
+              v-model="departureTime"
+              placeholder="e.g. 10:00"
+            />
+          </div>
         </div>
       </div>
 
       <Separator />
 
-      <!-- Refund flow -->
+      <!-- Details -->
       <div class="space-y-3">
-        <span class="text-sm font-medium">Refund</span>
-
-        <div class="flex items-center space-x-2">
-          <Checkbox id="receipt-requested" v-model="receiptRequested" />
-          <Label for="receipt-requested" class="text-sm">
-            Receipt requested
-          </Label>
+        <span class="text-sm font-medium">Details</span>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="space-y-1">
+            <Label for="flight-price" class="text-xs">Price</Label>
+            <Input
+              id="flight-price"
+              v-model="flightPrice"
+              placeholder="e.g. 350.00"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="flight-status" class="text-xs">Status</Label>
+            <Select v-model="flightStatus">
+              <SelectTrigger>
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="pending">Pending</SelectItem>
+                <SelectItem value="received">Info Received</SelectItem>
+                <SelectItem value="approved">Approved</SelectItem>
+                <SelectItem value="bought">Bought</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="space-y-1">
+            <Label for="flight-link" class="text-xs">Link (if we buy)</Label>
+            <Input
+              id="flight-link"
+              v-model="flightLink"
+              placeholder="Booking link"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="flight-booking-ref" class="text-xs">Booking Ref</Label>
+            <Input
+              id="flight-booking-ref"
+              v-model="flightBookingRef"
+              placeholder="Reference code"
+            />
+          </div>
         </div>
+      </div>
 
-        <div class="flex items-center space-x-2">
-          <Checkbox id="refund-info-requested" v-model="refundInfoRequested" />
-          <Label for="refund-info-requested" class="text-sm">
-            Refund info requested
-          </Label>
-        </div>
+      <Separator />
 
-        <div class="flex items-center space-x-2">
-          <Checkbox id="refund-done" v-model="refundDone" />
-          <Label for="refund-done" class="text-sm"> Refund done </Label>
+      <!-- Refund -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Refund</span>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="space-y-1">
+            <Label for="refund-amount" class="text-xs">Amount (EUR)</Label>
+            <Input
+              id="refund-amount"
+              v-model="refundAmount"
+              placeholder="e.g. 350.00"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="refund-method" class="text-xs">Method</Label>
+            <Input
+              id="refund-method"
+              v-model="refundMethod"
+              placeholder="e.g. Bank transfer"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="refund-info" class="text-xs">Info needed</Label>
+            <Input
+              id="refund-info"
+              v-model="refundInfoNeeded"
+              placeholder="e.g. IBAN"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="refund-status" class="text-xs">Status</Label>
+            <Select v-model="refundStatus">
+              <SelectTrigger>
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="not_started">Not started</SelectItem>
+                <SelectItem value="receipt_requested"
+                  >Receipt requested</SelectItem
+                >
+                <SelectItem value="info_requested">Info requested</SelectItem>
+                <SelectItem value="done">Done</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </div>
     </div>
@@ -74,9 +196,17 @@
 import { ref, computed } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DatePicker } from "@/components/ui/date-picker";
 import { Plane } from "lucide-vue-next";
 
 interface Props {
@@ -85,22 +215,38 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  stepNumber: 4,
+  stepNumber: 3,
 });
 
-// Flight booking states
+// Request status
 const hasRequestedFlights = ref<boolean>(false);
-const flightsReceived = ref<boolean>(false);
-const flightsApproved = ref<boolean>(false);
-const flightsBought = ref<boolean>(false);
 
-// Refund states
-const receiptRequested = ref<boolean>(false);
-const refundInfoRequested = ref<boolean>(false);
-const refundDone = ref<boolean>(false);
+// Arrival
+const arrivalAirport = ref<string>("");
+const arrivalFlightNumber = ref<string>("");
+const arrivalDate = ref<Date | null>(null);
+const arrivalTime = ref<string>("");
+
+// Departure
+const departureAirport = ref<string>("");
+const departureFlightNumber = ref<string>("");
+const departureDate = ref<Date | null>(null);
+const departureTime = ref<string>("");
+
+// Details
+const flightPrice = ref<string>("");
+const flightStatus = ref<string>("pending");
+const flightLink = ref<string>("");
+const flightBookingRef = ref<string>("");
+
+// Refund
+const refundAmount = ref<string>("");
+const refundMethod = ref<string>("");
+const refundInfoNeeded = ref<string>("");
+const refundStatus = ref<string>("not_started");
 
 const isComplete = computed(() => {
-  return flightsBought.value === true && refundDone.value === true;
+  return flightStatus.value === "bought";
 });
 
 defineExpose({
diff --git a/frontend/src/components/tasks/TaskHotel.vue b/frontend/src/components/tasks/TaskHotel.vue
index 4b63eac2..937ffbd4 100644
--- a/frontend/src/components/tasks/TaskHotel.vue
+++ b/frontend/src/components/tasks/TaskHotel.vue
@@ -18,9 +18,103 @@
     </template>
 
     <div class="space-y-4">
-      <div class="flex items-center space-x-2">
-        <Checkbox id="hotel-booked" v-model="hotelBooked" />
-        <Label for="hotel-booked" class="text-sm"> Hotel booked </Label>
+      <!-- Hotel Details -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Details</span>
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+          <div class="space-y-1">
+            <Label for="hotel-name" class="text-xs">Hotel Name</Label>
+            <Input
+              id="hotel-name"
+              v-model="hotelName"
+              placeholder="e.g. Hotel Marques"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="room-type" class="text-xs">Room Type</Label>
+            <Input
+              id="room-type"
+              v-model="roomType"
+              placeholder="e.g. Single, Double"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="hotel-price" class="text-xs">Price</Label>
+            <Input
+              id="hotel-price"
+              v-model="hotelPrice"
+              placeholder="e.g. 120.00"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Booking -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Booking</span>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="space-y-1">
+            <Label for="check-in" class="text-xs">Check-In</Label>
+            <DatePicker v-model="checkInDate" placeholder="Check-in date" />
+          </div>
+          <div class="space-y-1">
+            <Label for="check-out" class="text-xs">Check-Out</Label>
+            <DatePicker v-model="checkOutDate" placeholder="Check-out date" />
+          </div>
+          <div class="space-y-1">
+            <Label for="num-nights" class="text-xs">Nº of Nights</Label>
+            <Input id="num-nights" v-model="numNights" placeholder="e.g. 3" />
+          </div>
+          <div class="space-y-1">
+            <Label for="num-guests" class="text-xs">Nº of Guests</Label>
+            <Input id="num-guests" v-model="numGuests" placeholder="e.g. 1" />
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div class="space-y-1">
+            <Label for="guest-names" class="text-xs">Guest Name(s)</Label>
+            <Input
+              id="guest-names"
+              v-model="guestNames"
+              placeholder="Name of guest(s)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Payment -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Payment</span>
+        <div class="flex items-center gap-6">
+          <div class="flex items-center space-x-2">
+            <Checkbox id="hotel-invoice" v-model="hasInvoice" />
+            <Label for="hotel-invoice" class="text-sm">Invoice</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <Checkbox id="hotel-paid" v-model="isPaid" />
+            <Label for="hotel-paid" class="text-sm">Paid</Label>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Observations & Notes -->
+      <div class="space-y-2">
+        <Label for="hotel-notes" class="text-sm font-medium">
+          Observations & Notes
+        </Label>
+        <Textarea
+          id="hotel-notes"
+          v-model="hotelNotes"
+          placeholder="Any observations or notes"
+          :rows="3"
+        />
       </div>
     </div>
   </TaskTimelineItem>
@@ -32,6 +126,10 @@ import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { DatePicker } from "@/components/ui/date-picker";
 import { Hotel } from "lucide-vue-next";
 
 interface Props {
@@ -45,12 +143,35 @@ withDefaults(defineProps<Props>(), {
   isLast: false,
 });
 
-// Hotel states
+// Request status
 const hasRequestedHotelInfo = ref<boolean>(false);
-const hotelBooked = ref<boolean>(false);
+
+// Hotel details
+const hotelName = ref<string>("");
+const roomType = ref<string>("");
+const hotelPrice = ref<string>("");
+
+// Booking
+const checkInDate = ref<Date | null>(null);
+const checkOutDate = ref<Date | null>(null);
+const numNights = ref<string>("");
+const numGuests = ref<string>("");
+const guestNames = ref<string>("");
+
+// Payment
+const hasInvoice = ref<boolean>(false);
+const isPaid = ref<boolean>(false);
+
+// Notes
+const hotelNotes = ref<string>("");
 
 const isComplete = computed(() => {
-  return hotelBooked.value === true;
+  return (
+    !!hotelName.value.trim() &&
+    checkInDate.value !== null &&
+    checkOutDate.value !== null &&
+    isPaid.value === true
+  );
 });
 
 defineExpose({
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
index a76bd917..119e1fbd 100644
--- a/frontend/src/components/tasks/Tasks.vue
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -24,7 +24,11 @@
         :entity-id="entityId"
       />
 
-      <TaskContract :entity-type="entityType" :entity-id="entityId" />
+      <TaskContract
+        v-if="entityType === 'company'"
+        :entity-type="entityType"
+        :entity-id="entityId"
+      />
 
       <!-- Company-only steps -->
       <template v-if="entityType === 'company'">
@@ -47,13 +51,13 @@
 
       <!-- Speaker-only steps -->
       <template v-if="entityType === 'speaker'">
-        <TaskFlights :entity-id="entityId" :step-number="4" />
+        <TaskFlights :entity-id="entityId" :step-number="3" />
 
-        <TaskCoverage :entity-id="entityId" :step-number="5" />
+        <TaskCoverage :entity-id="entityId" :step-number="4" />
 
-        <TaskMaterials :entity-id="entityId" :step-number="6" />
+        <TaskMaterials :entity-id="entityId" :step-number="5" />
 
-        <TaskHotel :entity-id="entityId" :step-number="7" :is-last="true" />
+        <TaskHotel :entity-id="entityId" :step-number="6" :is-last="true" />
       </template>
     </Stepper>
   </div>

From b11c8ee78722bdc1386f4925de0b2fa77d4b4467 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sat, 28 Feb 2026 23:55:13 +0000
Subject: [PATCH 20/39] feat: add contact prop to TaskConfirmation and Tasks
 components for speaker details

---
 .../src/components/tasks/TaskConfirmation.vue | 27 ++++++++++++++++---
 frontend/src/components/tasks/Tasks.vue       |  3 +++
 .../views/Dashboard/Speakers/SpeakerView.vue  |  1 +
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
index bfe3b1d0..d2148031 100644
--- a/frontend/src/components/tasks/TaskConfirmation.vue
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -105,6 +105,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox";
 import type { CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
+import type { Contact } from "@/dto/contacts";
 import type { EntityType } from "@/dto/tasks";
 import type { Package } from "@/dto/packages";
 import {
@@ -121,6 +122,7 @@ interface Props {
   entityId: string;
   entityType: EntityType;
   participation?: CompanyParticipation | SpeakerParticipation;
+  contact?: Contact;
 }
 
 const props = defineProps<Props>();
@@ -325,12 +327,31 @@ const isComplete = computed(() => {
   return !!confirmedDate.value;
 });
 
-// Speaker-only fields
-const speakerPhone = ref<string>("");
+// Speaker-only fields (synced from contact)
+const speakerPhone = ref<string>(props.contact?.phones?.[0]?.phone ?? "");
 const speakerObservations = ref<string>("");
-const linkedinUrl = ref<string>("");
+const linkedinUrl = ref<string>(props.contact?.socials?.linkedin ?? "");
 const wantsLinkedinTag = ref<boolean>(false);
 
+// Keep phone and linkedin in sync when contact prop changes
+watch(
+  () => props.contact?.phones?.[0]?.phone,
+  (newVal) => {
+    if (newVal !== undefined) {
+      speakerPhone.value = newVal;
+    }
+  },
+);
+
+watch(
+  () => props.contact?.socials?.linkedin,
+  (newVal) => {
+    if (newVal !== undefined) {
+      linkedinUrl.value = newVal;
+    }
+  },
+);
+
 defineExpose({
   isComplete,
   currentPackageName,
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
index 119e1fbd..0b1666f2 100644
--- a/frontend/src/components/tasks/Tasks.vue
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -15,6 +15,7 @@
         :entity-id="entityId"
         :entity-type="entityType"
         :participation="currentParticipation"
+        :contact="contact"
         @package-changed="onPackageChanged"
       />
 
@@ -68,6 +69,7 @@ import { ref, computed } from "vue";
 import type { EntityType } from "@/dto/tasks";
 import type { CompanyBillingInfo, CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
+import type { Contact } from "@/dto/contacts";
 import type { Item } from "@/dto/item";
 import { Stepper } from "@/components/ui/stepper";
 import TaskConfirmation from "./TaskConfirmation.vue";
@@ -86,6 +88,7 @@ interface Props {
   entityId: string;
   participation?: CompanyParticipation | SpeakerParticipation;
   billingInfo?: CompanyBillingInfo;
+  contact?: Contact;
 }
 
 const props = defineProps<Props>();
diff --git a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
index a6da4382..f9cbe40b 100644
--- a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
+++ b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
@@ -51,6 +51,7 @@
             entity-type="speaker"
             :entity-id="speakerWithParticipation.id"
             :participation="speakerWithParticipation.participation"
+            :contact="speakerWithParticipation.contactObject"
           />
         </TabsContent>
       </Tabs>

From 68a2b9d38d817fb06586600929965deec84f95f1 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 00:24:11 +0000
Subject: [PATCH 21/39] feat: implement task management for companies and
 speakers with associated API endpoints

---
 backend/src/models/company.go |  38 +++++----
 backend/src/models/speaker.go |  15 ++--
 backend/src/models/task.go    | 149 ++++++++++++++++++++++++++++++++++
 backend/src/mongodb/task.go   | 107 ++++++++++++++++++++++++
 backend/src/router/init.go    |   2 +
 backend/src/router/task.go    |  91 +++++++++++++++++++++
 6 files changed, 378 insertions(+), 24 deletions(-)
 create mode 100644 backend/src/models/task.go
 create mode 100644 backend/src/mongodb/task.go
 create mode 100644 backend/src/router/task.go

diff --git a/backend/src/models/company.go b/backend/src/models/company.go
index cb3930db..96f5ab76 100644
--- a/backend/src/models/company.go
+++ b/backend/src/models/company.go
@@ -43,31 +43,33 @@ type CompanyParticipation struct {
 	// These are used to sync communications with Gmail.
 	GmailThreadIds []string `json:"gmailThreadIds,omitempty" bson:"gmailThreadIds,omitempty"`
 
-  // Stand details
-  StandDetails StandDetails `json:"standDetails,omitempty" bson:"standDetails,omitempty"`
+	// Stand details
+	StandDetails StandDetails `json:"standDetails,omitempty" bson:"standDetails,omitempty"`
 
-  // Stand and days at the venue
-  Stands []Stand `json:"stands,omitempty" bson:"stands,omitempty"`
+	// Stand and days at the venue
+	Stands []Stand `json:"stands,omitempty" bson:"stands,omitempty"`
 
+	// Tasks tracks the company's task pipeline progress.
+	Tasks CompanyTasks `json:"tasks" bson:"tasks"`
 }
 
 type Stand struct {
-  // Stand identifier
-  StandID string  `json:"standId" bson:"standId"`
+	// Stand identifier
+	StandID string `json:"standId" bson:"standId"`
 
-  // Day at the venue
-  Date *time.Time `json:"date,omitempty" bson:"date,omitempty"`
+	// Day at the venue
+	Date *time.Time `json:"date,omitempty" bson:"date,omitempty"`
 }
 
 type StandDetails struct {
-  // Number of chairs required by the company
-  Chairs int `json:"chairs" bson:"chairs"`
+	// Number of chairs required by the company
+	Chairs int `json:"chairs" bson:"chairs"`
 
-  // Require front table
-  Table bool `json:"table" bson:"table"`
+	// Require front table
+	Table bool `json:"table" bson:"table"`
 
-  // Require lettering
-  Lettering bool `json:"lettering" bson:"lettering"`
+	// Require lettering
+	Lettering bool `json:"lettering" bson:"lettering"`
 }
 
 // CompanyBillingInfo of company
@@ -132,11 +134,11 @@ type CompanyParticipationPublic struct {
 	// Participation's package is a Package _id (see models.Package).
 	Package PackagePublic `json:"package,omitempty"`
 
-  // Stand details
-  StandDetails StandDetails `json:"standDetails,omitempty"`
+	// Stand details
+	StandDetails StandDetails `json:"standDetails,omitempty"`
 
-  // Days at the venue
-  Stands []Stand `json:"stands,omitempty"`
+	// Days at the venue
+	Stands []Stand `json:"stands,omitempty"`
 }
 
 // CompanyPublic represents a company to be contacted by the team, that will hopefully participate
diff --git a/backend/src/models/speaker.go b/backend/src/models/speaker.go
index a7295e2b..501fe7ea 100644
--- a/backend/src/models/speaker.go
+++ b/backend/src/models/speaker.go
@@ -44,6 +44,9 @@ type SpeakerParticipation struct {
 	// GmailThreadIds is an array of Gmail thread IDs linked to this participation.
 	// These are used to sync communications with Gmail.
 	GmailThreadIds []string `json:"gmailThreadIds,omitempty" bson:"gmailThreadIds,omitempty"`
+
+	// Tasks tracks the speaker's task pipeline progress.
+	Tasks SpeakerTasks `json:"tasks" bson:"tasks"`
 }
 
 type SpeakerImages struct {
@@ -68,8 +71,8 @@ type Speaker struct {
 	Name string `json:"name" bson:"name"`
 
 	// Contact is an _id of Contact (see models.Contact).
-	Contact *primitive.ObjectID `json:"contact,omitempty" bson:"contact"`
-	ContactObject *Contact `json:"contactObject,omitempty" bson:"contactObject"`
+	Contact       *primitive.ObjectID `json:"contact,omitempty" bson:"contact"`
+	ContactObject *Contact            `json:"contactObject,omitempty" bson:"contactObject"`
 
 	// Title of the speaker (CEO @ HugeCorportation, for example).
 	Title string `json:"title" bson:"title"`
@@ -77,8 +80,8 @@ type Speaker struct {
 	// Bio of the speaker. Careful, this will be visible on our website!
 	Bio string `json:"bio" bson:"bio"`
 
-  	// Company name
-  	CompanyName string `json:"companyName" bson:"companyName"`
+	// Company name
+	CompanyName string `json:"companyName" bson:"companyName"`
 
 	// This is only visible by the team. Praise and trash talk at will.
 	Notes          string                 `json:"notes" bson:"notes"`
@@ -120,8 +123,8 @@ type SpeakerPublic struct {
 	// Bio of the speaker. Careful, this will be visible on our website!
 	Bio string `json:"bio" bson:"bio"`
 
-  // Company name
-  CompanyName string `json:"companyName,omitempty" bson:"companyName"`
+	// Company name
+	CompanyName string `json:"companyName,omitempty" bson:"companyName"`
 
 	Images         SpeakerImagesPublic          `json:"imgs" bson:"imgs"`
 	Participations []SpeakerParticipationPublic `json:"participation" bson:"participations"`
diff --git a/backend/src/models/task.go b/backend/src/models/task.go
new file mode 100644
index 00000000..3f2596c6
--- /dev/null
+++ b/backend/src/models/task.go
@@ -0,0 +1,149 @@
+package models
+
+import "time"
+
+// ============================================================
+// Shared task fields (used by both companies and speakers)
+// ============================================================
+
+// TaskLogos tracks logo delivery status.
+type TaskLogos struct {
+	Received       bool `json:"received" bson:"received"`
+	NeedsReviewing bool `json:"needsReviewing" bson:"needsReviewing"`
+}
+
+// ============================================================
+// Company-specific task types
+// ============================================================
+
+// CompanyTaskConfirmation tracks confirmation-related progress for a company.
+type CompanyTaskConfirmation struct {
+	AskedForInfo bool `json:"askedForInfo" bson:"askedForInfo"`
+}
+
+// CompanyTaskContract tracks contract lifecycle.
+type CompanyTaskContract struct {
+	Sent        bool `json:"sent" bson:"sent"`
+	Created     bool `json:"created" bson:"created"`
+	Signed      bool `json:"signed" bson:"signed"`
+	ReceiptSent bool `json:"receiptSent" bson:"receiptSent"`
+}
+
+// CompanyTaskSessionTitles tracks session / workshop titles.
+type CompanyTaskSessionTitles struct {
+	PresentationTitle string `json:"presentationTitle" bson:"presentationTitle"`
+	WorkshopTitle     string `json:"workshopTitle" bson:"workshopTitle"`
+}
+
+// CompanyTaskCorlief tracks Corlief-related steps.
+type CompanyTaskCorlief struct {
+	PreNotice bool `json:"preNotice" bson:"preNotice"`
+	Scheduled bool `json:"scheduled" bson:"scheduled"`
+	Reserved  bool `json:"reserved" bson:"reserved"`
+}
+
+// CompanyTaskLogistics tracks logistics info.
+type CompanyTaskLogistics struct {
+	RequestedInfo bool   `json:"requestedInfo" bson:"requestedInfo"`
+	CarStatus     string `json:"carStatus" bson:"carStatus"` // "not_responded", "wants", "not_wants"
+	LicensePlate  string `json:"licensePlate" bson:"licensePlate"`
+}
+
+// CompanyTasks is the top-level task object embedded in CompanyParticipation.
+type CompanyTasks struct {
+	Confirmation  CompanyTaskConfirmation  `json:"confirmation" bson:"confirmation"`
+	Logos         TaskLogos                `json:"logos" bson:"logos"`
+	Contract      CompanyTaskContract      `json:"contract" bson:"contract"`
+	SessionTitles CompanyTaskSessionTitles `json:"sessionTitles" bson:"sessionTitles"`
+	Corlief       CompanyTaskCorlief       `json:"corlief" bson:"corlief"`
+	Logistics     CompanyTaskLogistics     `json:"logistics" bson:"logistics"`
+}
+
+// ============================================================
+// Speaker-specific task types
+// ============================================================
+
+// SpeakerTaskConfirmation tracks confirmation-related progress for a speaker.
+type SpeakerTaskConfirmation struct {
+	Phone         string `json:"phone" bson:"phone"`
+	LinkedIn      string `json:"linkedin" bson:"linkedin"`
+	WantsLinkedIn bool   `json:"wantsLinkedinTag" bson:"wantsLinkedinTag"`
+	Observations  string `json:"observations" bson:"observations"`
+}
+
+// SpeakerTaskFlightLeg stores one leg (arrival or departure).
+type SpeakerTaskFlightLeg struct {
+	Airport      string     `json:"airport" bson:"airport"`
+	FlightNumber string     `json:"flightNumber" bson:"flightNumber"`
+	Date         *time.Time `json:"date,omitempty" bson:"date,omitempty"`
+	Time         string     `json:"time" bson:"time"`
+}
+
+// SpeakerTaskFlightDetails stores pricing / status / booking info.
+type SpeakerTaskFlightDetails struct {
+	Price      string `json:"price" bson:"price"`
+	Status     string `json:"status" bson:"status"` // "pending", "received", "approved", "bought"
+	Link       string `json:"link" bson:"link"`
+	BookingRef string `json:"bookingRef" bson:"bookingRef"`
+}
+
+// SpeakerTaskFlightRefund stores refund info.
+type SpeakerTaskFlightRefund struct {
+	Amount     string `json:"amount" bson:"amount"`
+	Method     string `json:"method" bson:"method"`
+	InfoNeeded string `json:"infoNeeded" bson:"infoNeeded"`
+	Status     string `json:"status" bson:"status"` // "not_started", "receipt_requested", "info_requested", "done"
+}
+
+// SpeakerTaskFlights stores everything flight-related.
+type SpeakerTaskFlights struct {
+	Requested bool                     `json:"requested" bson:"requested"`
+	Arrival   SpeakerTaskFlightLeg     `json:"arrival" bson:"arrival"`
+	Departure SpeakerTaskFlightLeg     `json:"departure" bson:"departure"`
+	Details   SpeakerTaskFlightDetails `json:"details" bson:"details"`
+	Refund    SpeakerTaskFlightRefund  `json:"refund" bson:"refund"`
+}
+
+// SpeakerTaskCoverage tracks video/photo coverage confirmation.
+type SpeakerTaskCoverage struct {
+	Video     bool `json:"video" bson:"video"`
+	Streaming bool `json:"streaming" bson:"streaming"`
+	Photo     bool `json:"photo" bson:"photo"`
+}
+
+// SpeakerTaskMaterials tracks talk info and materials delivery.
+type SpeakerTaskMaterials struct {
+	Requested       bool   `json:"requested" bson:"requested"`
+	TalkTitle       string `json:"talkTitle" bson:"talkTitle"`
+	TalkDescription string `json:"talkDescription" bson:"talkDescription"`
+	Received        bool   `json:"received" bson:"received"`
+	TestSchedule    string `json:"testSchedule" bson:"testSchedule"`
+	TestDone        bool   `json:"testDone" bson:"testDone"`
+}
+
+// SpeakerTaskHotel stores hotel / booking / payment info.
+type SpeakerTaskHotel struct {
+	Requested  bool       `json:"requested" bson:"requested"`
+	HotelName  string     `json:"hotelName" bson:"hotelName"`
+	RoomType   string     `json:"roomType" bson:"roomType"`
+	Price      string     `json:"price" bson:"price"`
+	CheckIn    *time.Time `json:"checkIn,omitempty" bson:"checkIn,omitempty"`
+	CheckOut   *time.Time `json:"checkOut,omitempty" bson:"checkOut,omitempty"`
+	NumNights  string     `json:"numNights" bson:"numNights"`
+	NumGuests  string     `json:"numGuests" bson:"numGuests"`
+	GuestNames string     `json:"guestNames" bson:"guestNames"`
+	Invoice    bool       `json:"invoice" bson:"invoice"`
+	Paid       bool       `json:"paid" bson:"paid"`
+	Notes      string     `json:"notes" bson:"notes"`
+}
+
+// SpeakerTasks is the top-level task object embedded in SpeakerParticipation.
+type SpeakerTasks struct {
+	Confirmation SpeakerTaskConfirmation `json:"confirmation" bson:"confirmation"`
+	Logos        TaskLogos               `json:"logos" bson:"logos"`
+	AskedForInfo bool                    `json:"askedForInfo" bson:"askedForInfo"`
+	Flights      SpeakerTaskFlights      `json:"flights" bson:"flights"`
+	Coverage     SpeakerTaskCoverage     `json:"coverage" bson:"coverage"`
+	Materials    SpeakerTaskMaterials    `json:"materials" bson:"materials"`
+	Hotel        SpeakerTaskHotel        `json:"hotel" bson:"hotel"`
+}
diff --git a/backend/src/mongodb/task.go b/backend/src/mongodb/task.go
new file mode 100644
index 00000000..0ca31076
--- /dev/null
+++ b/backend/src/mongodb/task.go
@@ -0,0 +1,107 @@
+package mongodb
+
+import (
+	"context"
+	"encoding/json"
+	"io"
+	"log"
+
+	"github.com/sinfo/deck2/src/models"
+	"go.mongodb.org/mongo-driver/bson"
+	"go.mongodb.org/mongo-driver/bson/primitive"
+	"go.mongodb.org/mongo-driver/mongo/options"
+)
+
+// ============================================================
+// Company Tasks
+// ============================================================
+
+// UpdateCompanyTasksData holds the payload sent by the frontend.
+type UpdateCompanyTasksData struct {
+	Tasks *models.CompanyTasks `json:"tasks"`
+}
+
+// ParseBody fills the UpdateCompanyTasksData from a request body.
+func (d *UpdateCompanyTasksData) ParseBody(body io.Reader) error {
+	if err := json.NewDecoder(body).Decode(d); err != nil {
+		return err
+	}
+	return nil
+}
+
+// UpdateCompanyTasks persists the task data on the company's current-event participation.
+func (c *CompaniesType) UpdateCompanyTasks(companyID primitive.ObjectID, data UpdateCompanyTasksData) (*models.Company, error) {
+	ctx := context.Background()
+	var updatedCompany models.Company
+
+	currentEvent, err := Events.GetCurrentEvent()
+	if err != nil {
+		return nil, err
+	}
+
+	setFields := bson.M{
+		"participations.$.tasks": data.Tasks,
+	}
+
+	updateQuery := bson.M{"$set": setFields}
+	filterQuery := bson.M{"_id": companyID, "participations.event": currentEvent.ID}
+
+	optionsQuery := options.FindOneAndUpdate()
+	optionsQuery.SetReturnDocument(options.After)
+
+	if err := c.Collection.FindOneAndUpdate(ctx, filterQuery, updateQuery, optionsQuery).Decode(&updatedCompany); err != nil {
+		log.Println("Error updating company tasks:", err)
+		return nil, err
+	}
+
+	ResetCurrentPublicCompanies()
+
+	return &updatedCompany, nil
+}
+
+// ============================================================
+// Speaker Tasks
+// ============================================================
+
+// UpdateSpeakerTasksData holds the payload sent by the frontend.
+type UpdateSpeakerTasksData struct {
+	Tasks *models.SpeakerTasks `json:"tasks"`
+}
+
+// ParseBody fills the UpdateSpeakerTasksData from a request body.
+func (d *UpdateSpeakerTasksData) ParseBody(body io.Reader) error {
+	if err := json.NewDecoder(body).Decode(d); err != nil {
+		return err
+	}
+	return nil
+}
+
+// UpdateSpeakerTasks persists the task data on the speaker's current-event participation.
+func (s *SpeakersType) UpdateSpeakerTasks(speakerID primitive.ObjectID, data UpdateSpeakerTasksData) (*models.Speaker, error) {
+	ctx := context.Background()
+	var updatedSpeaker models.Speaker
+
+	currentEvent, err := Events.GetCurrentEvent()
+	if err != nil {
+		return nil, err
+	}
+
+	setFields := bson.M{
+		"participations.$.tasks": data.Tasks,
+	}
+
+	updateQuery := bson.M{"$set": setFields}
+	filterQuery := bson.M{"_id": speakerID, "participations.event": currentEvent.ID}
+
+	optionsQuery := options.FindOneAndUpdate()
+	optionsQuery.SetReturnDocument(options.After)
+
+	if err := s.Collection.FindOneAndUpdate(ctx, filterQuery, updateQuery, optionsQuery).Decode(&updatedSpeaker); err != nil {
+		log.Println("Error updating speaker tasks:", err)
+		return nil, err
+	}
+
+	ResetCurrentPublicSpeakers()
+
+	return &updatedSpeaker, nil
+}
diff --git a/backend/src/router/init.go b/backend/src/router/init.go
index 6ec20f23..07d4f71c 100644
--- a/backend/src/router/init.go
+++ b/backend/src/router/init.go
@@ -182,6 +182,7 @@ func InitializeRouter() {
 	companyRouter.HandleFunc("/{id}/employer", authMember(addEmployer)).Methods("POST")
 	companyRouter.HandleFunc("/{id}/employer/{rep}", authMember(removeEmployer)).Methods("DELETE")
 	companyRouter.HandleFunc("/{id}/contract/docx", authCoordinator(generateCompanyContractDocx)).Methods("POST")
+	companyRouter.HandleFunc("/{id}/participation/tasks", authMember(updateCompanyTasks)).Methods("PUT")
 
 	// speaker handlers
 	speakerRouter := r.PathPrefix("/speakers").Subrouter()
@@ -210,6 +211,7 @@ func InitializeRouter() {
 	speakerRouter.HandleFunc("/{id}/participation/gmail-threads", authMember(updateSpeakerGmailThreadIds)).Methods("PUT")
 	speakerRouter.HandleFunc("/{id}/participation/gmail-sync", authMember(syncSpeakerGmailMessages)).Methods("POST")
 	speakerRouter.HandleFunc("/{id}/participation", authCoordinator(removeSpeakerParticipation)).Methods("DELETE")
+	speakerRouter.HandleFunc("/{id}/participation/tasks", authMember(updateSpeakerTasks)).Methods("PUT")
 
 	// flightInfo handlers
 	flightInfoRouter := r.PathPrefix("/flightInfo").Subrouter()
diff --git a/backend/src/router/task.go b/backend/src/router/task.go
new file mode 100644
index 00000000..5f5f79da
--- /dev/null
+++ b/backend/src/router/task.go
@@ -0,0 +1,91 @@
+package router
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"github.com/gorilla/mux"
+	"github.com/sinfo/deck2/src/models"
+	"github.com/sinfo/deck2/src/mongodb"
+	"go.mongodb.org/mongo-driver/bson/primitive"
+)
+
+// ============================================================
+// Company Tasks
+// ============================================================
+
+func updateCompanyTasks(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	params := mux.Vars(r)
+	companyID, _ := primitive.ObjectIDFromHex(params["id"])
+
+	if _, err := mongodb.Companies.GetCompany(companyID); err != nil {
+		http.Error(w, "Invalid company ID: "+err.Error(), http.StatusNotFound)
+		return
+	}
+
+	var data = &mongodb.UpdateCompanyTasksData{}
+
+	if err := data.ParseBody(r.Body); err != nil {
+		http.Error(w, "Could not parse body: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	updatedCompany, err := mongodb.Companies.UpdateCompanyTasks(companyID, *data)
+
+	if err != nil {
+		http.Error(w, "Could not update company tasks: "+err.Error(), http.StatusExpectationFailed)
+		return
+	}
+
+	json.NewEncoder(w).Encode(updatedCompany)
+
+	// notify
+	if credentials, ok := r.Context().Value(credentialsKey).(models.AuthorizationCredentials); ok {
+		mongodb.Notifications.Notify(credentials.ID, mongodb.CreateNotificationData{
+			Kind:    models.NotificationKindUpdated,
+			Company: &updatedCompany.ID,
+		})
+	}
+}
+
+// ============================================================
+// Speaker Tasks
+// ============================================================
+
+func updateSpeakerTasks(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	params := mux.Vars(r)
+	speakerID, _ := primitive.ObjectIDFromHex(params["id"])
+
+	if _, err := mongodb.Speakers.GetSpeaker(speakerID); err != nil {
+		http.Error(w, "Invalid speaker ID: "+err.Error(), http.StatusNotFound)
+		return
+	}
+
+	var data = &mongodb.UpdateSpeakerTasksData{}
+
+	if err := data.ParseBody(r.Body); err != nil {
+		http.Error(w, "Could not parse body: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	updatedSpeaker, err := mongodb.Speakers.UpdateSpeakerTasks(speakerID, *data)
+
+	if err != nil {
+		http.Error(w, "Could not update speaker tasks: "+err.Error(), http.StatusExpectationFailed)
+		return
+	}
+
+	json.NewEncoder(w).Encode(updatedSpeaker)
+
+	// notify
+	if credentials, ok := r.Context().Value(credentialsKey).(models.AuthorizationCredentials); ok {
+		mongodb.Notifications.Notify(credentials.ID, mongodb.CreateNotificationData{
+			Kind:    models.NotificationKindUpdated,
+			Speaker: &updatedSpeaker.ID,
+		})
+	}
+}

From b5205513ead7bb3d22949188fa231e6b2a19e035 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 00:25:15 +0000
Subject: [PATCH 22/39] feat: implement task management for speakers and
 companies

---
 frontend/src/api/companies.ts                 |   4 +
 frontend/src/api/speakers.ts                  |   4 +
 .../src/components/tasks/TaskBillingLogos.vue |  43 +++-
 .../src/components/tasks/TaskConfirmation.vue |  55 ++++-
 .../src/components/tasks/TaskContract.vue     |  30 ++-
 frontend/src/components/tasks/TaskCorlief.vue |  31 ++-
 .../src/components/tasks/TaskCoverage.vue     |  31 ++-
 frontend/src/components/tasks/TaskFlights.vue | 141 ++++++++++--
 frontend/src/components/tasks/TaskHotel.vue   |  85 +++++--
 .../src/components/tasks/TaskLogistics.vue    |  31 ++-
 .../src/components/tasks/TaskMaterials.vue    |  52 ++++-
 .../components/tasks/TaskSessionTitles.vue    |  23 +-
 frontend/src/components/tasks/Tasks.vue       | 217 ++++++++++++++++--
 frontend/src/dto/companies.ts                 |   2 +
 frontend/src/dto/speakers.ts                  |   2 +
 frontend/src/dto/tasks.ts                     | 197 ++++++++++++++++
 frontend/src/mutations/companies.ts           |  24 ++
 frontend/src/mutations/speakers.ts            |  24 ++
 18 files changed, 902 insertions(+), 94 deletions(-)

diff --git a/frontend/src/api/companies.ts b/frontend/src/api/companies.ts
index d730029b..8863f322 100644
--- a/frontend/src/api/companies.ts
+++ b/frontend/src/api/companies.ts
@@ -10,6 +10,7 @@ import type {
   UpdateCompanyData,
   UpdateCompanyParticipationData,
 } from "@/dto/companies";
+import type { CompanyTasks } from "@/dto/tasks";
 import type {
   CreateThread,
   ParticipationCommunications,
@@ -144,3 +145,6 @@ export const generateCompanyContract = (
     responseType: "blob",
   });
 };
+
+export const updateCompanyTasks = (id: string, tasks: CompanyTasks) =>
+  instance.put<Company>(`/companies/${id}/participation/tasks`, { tasks });
diff --git a/frontend/src/api/speakers.ts b/frontend/src/api/speakers.ts
index 130c50c3..65a979b9 100644
--- a/frontend/src/api/speakers.ts
+++ b/frontend/src/api/speakers.ts
@@ -6,6 +6,7 @@ import type {
   UpdateSpeakerData,
   UpdateSpeakerParticipationData,
 } from "@/dto/speakers";
+import type { SpeakerTasks } from "@/dto/tasks";
 import { instance } from ".";
 import {
   type ParticipationCommunications,
@@ -85,3 +86,6 @@ export const syncSpeakerGmailMessages = (
   instance.post<SyncGmailResponse>(`/speakers/${id}/participation/gmail-sync`, {
     messages,
   });
+
+export const updateSpeakerTasks = (id: string, tasks: SpeakerTasks) =>
+  instance.put<Speaker>(`/speakers/${id}/participation/tasks`, { tasks });
diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
index ec22a7ef..320dab4b 100644
--- a/frontend/src/components/tasks/TaskBillingLogos.vue
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -114,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Separator } from "@/components/ui/separator";
@@ -126,7 +126,12 @@ import {
 } from "@/components/ui/tooltip";
 import { Info, Receipt } from "lucide-vue-next";
 import type { CompanyBillingInfo } from "@/dto/companies";
-import type { EntityType } from "@/dto/tasks";
+import type {
+  EntityType,
+  CompanyTasks,
+  SpeakerTasks,
+  TaskLogos,
+} from "@/dto/tasks";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import BillingForm from "@/components/companies/BillingForm.vue";
 import Button from "@/components/ui/button/Button.vue";
@@ -138,12 +143,16 @@ interface Props {
   entityType: EntityType;
   billingInfo?: CompanyBillingInfo;
   entityId?: string;
+  companyTasks?: CompanyTasks;
+  speakerTasks?: SpeakerTasks;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
   billingUpdated: [];
+  "update:logos": [value: TaskLogos];
+  "update:askedForInfo": [value: boolean];
 }>();
 
 // Billing info
@@ -184,10 +193,32 @@ const handleBillingSubmit = async (data: CompanyBillingInfo) => {
   }
 };
 
-// Task states (these would be persisted in the backend in a real implementation)
-const hasAskedForBillingInfo = ref(false);
-const logosReceived = ref(false);
-const logosNeedReviewing = ref(false);
+// Initialise from saved tasks
+const savedLogos =
+  props.entityType === "company"
+    ? props.companyTasks?.logos
+    : props.speakerTasks?.logos;
+
+const savedAsked =
+  props.entityType === "company"
+    ? props.companyTasks?.confirmation?.askedForInfo
+    : props.speakerTasks?.askedForInfo;
+
+// Task states
+const hasAskedForBillingInfo = ref(savedAsked ?? false);
+const logosReceived = ref(savedLogos?.received ?? false);
+const logosNeedReviewing = ref(savedLogos?.needsReviewing ?? false);
+
+watch(hasAskedForBillingInfo, (v) => {
+  emit("update:askedForInfo", v);
+});
+
+watch([logosReceived, logosNeedReviewing], () => {
+  emit("update:logos", {
+    received: logosReceived.value,
+    needsReviewing: logosNeedReviewing.value,
+  });
+});
 
 // Completion state
 const isComplete = computed(() => {
diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
index d2148031..7c51ad36 100644
--- a/frontend/src/components/tasks/TaskConfirmation.vue
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -106,7 +106,13 @@ import { Checkbox } from "@/components/ui/checkbox";
 import type { CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
 import type { Contact } from "@/dto/contacts";
-import type { EntityType } from "@/dto/tasks";
+import type {
+  EntityType,
+  CompanyTasks,
+  SpeakerTasks,
+  CompanyTaskConfirmation,
+  SpeakerTaskConfirmation,
+} from "@/dto/tasks";
 import type { Package } from "@/dto/packages";
 import {
   useCompanyParticipationPackageMutation,
@@ -123,12 +129,16 @@ interface Props {
   entityType: EntityType;
   participation?: CompanyParticipation | SpeakerParticipation;
   contact?: Contact;
+  companyTasks?: CompanyTasks;
+  speakerTasks?: SpeakerTasks;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
   packageChanged: [packageName: string, packageItems: Item[]];
+  "update:companyConfirmation": [value: CompanyTaskConfirmation];
+  "update:speakerConfirmation": [value: SpeakerTaskConfirmation];
 }>();
 
 const { toast } = useToast();
@@ -327,17 +337,29 @@ const isComplete = computed(() => {
   return !!confirmedDate.value;
 });
 
-// Speaker-only fields (synced from contact)
-const speakerPhone = ref<string>(props.contact?.phones?.[0]?.phone ?? "");
-const speakerObservations = ref<string>("");
-const linkedinUrl = ref<string>(props.contact?.socials?.linkedin ?? "");
-const wantsLinkedinTag = ref<boolean>(false);
+// Speaker-only fields (synced from saved tasks first, fallback to contact)
+const speakerPhone = ref<string>(
+  props.speakerTasks?.confirmation?.phone ||
+    props.contact?.phones?.[0]?.phone ||
+    "",
+);
+const speakerObservations = ref<string>(
+  props.speakerTasks?.confirmation?.observations ?? "",
+);
+const linkedinUrl = ref<string>(
+  props.speakerTasks?.confirmation?.linkedin ||
+    props.contact?.socials?.linkedin ||
+    "",
+);
+const wantsLinkedinTag = ref<boolean>(
+  props.speakerTasks?.confirmation?.wantsLinkedinTag ?? false,
+);
 
-// Keep phone and linkedin in sync when contact prop changes
+// Keep phone and linkedin in sync when contact prop changes (only if empty)
 watch(
   () => props.contact?.phones?.[0]?.phone,
   (newVal) => {
-    if (newVal !== undefined) {
+    if (newVal !== undefined && !speakerPhone.value) {
       speakerPhone.value = newVal;
     }
   },
@@ -346,12 +368,27 @@ watch(
 watch(
   () => props.contact?.socials?.linkedin,
   (newVal) => {
-    if (newVal !== undefined) {
+    if (newVal !== undefined && !linkedinUrl.value) {
       linkedinUrl.value = newVal;
     }
   },
 );
 
+// Emit speaker confirmation changes
+watch(
+  [speakerPhone, linkedinUrl, wantsLinkedinTag, speakerObservations],
+  () => {
+    if (props.entityType === "speaker") {
+      emit("update:speakerConfirmation", {
+        phone: speakerPhone.value,
+        linkedin: linkedinUrl.value,
+        wantsLinkedinTag: wantsLinkedinTag.value,
+        observations: speakerObservations.value,
+      });
+    }
+  },
+);
+
 defineExpose({
   isComplete,
   currentPackageName,
diff --git a/frontend/src/components/tasks/TaskContract.vue b/frontend/src/components/tasks/TaskContract.vue
index 86aaaa06..e563bb24 100644
--- a/frontend/src/components/tasks/TaskContract.vue
+++ b/frontend/src/components/tasks/TaskContract.vue
@@ -39,25 +39,43 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { FileText } from "lucide-vue-next";
 import ContractDownload from "../companies/ContractDownload.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import type { EntityType } from "@/dto/tasks";
+import type {
+  EntityType,
+  CompanyTasks,
+  CompanyTaskContract,
+} from "@/dto/tasks";
 
 const props = defineProps<{
   entityId: string;
   entityType: EntityType;
+  companyTasks?: CompanyTasks;
+}>();
+
+const emit = defineEmits<{
+  "update:contract": [value: CompanyTaskContract];
 }>();
 
 // Contract states
-const hasCreatedContract = ref(false);
-const hasSentContract = ref(false);
-const hasSigned = ref(false);
-const hasReceiptSent = ref(false);
+const hasCreatedContract = ref(props.companyTasks?.contract?.created ?? false);
+const hasSentContract = ref(props.companyTasks?.contract?.sent ?? false);
+const hasSigned = ref(props.companyTasks?.contract?.signed ?? false);
+const hasReceiptSent = ref(props.companyTasks?.contract?.receiptSent ?? false);
+
+watch([hasCreatedContract, hasSentContract, hasSigned, hasReceiptSent], () => {
+  emit("update:contract", {
+    created: hasCreatedContract.value,
+    sent: hasSentContract.value,
+    signed: hasSigned.value,
+    receiptSent: hasReceiptSent.value,
+  });
+});
 
 const isComplete = computed(() => {
   return (
diff --git a/frontend/src/components/tasks/TaskCorlief.vue b/frontend/src/components/tasks/TaskCorlief.vue
index 5277e9e0..27a881de 100644
--- a/frontend/src/components/tasks/TaskCorlief.vue
+++ b/frontend/src/components/tasks/TaskCorlief.vue
@@ -27,25 +27,46 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Building2 } from "lucide-vue-next";
+import type { CompanyTasks, CompanyTaskCorlief } from "@/dto/tasks";
 
 interface Props {
   entityId: string;
   stepNumber?: number;
+  companyTasks?: CompanyTasks;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   stepNumber: 5,
+  companyTasks: undefined,
 });
 
+const emit = defineEmits<{
+  "update:corlief": [value: CompanyTaskCorlief];
+}>();
+
 // Corlief states
-const hasPreNotice = ref<boolean>(false);
-const hasScheduled = ref<boolean>(false);
-const hasReserved = ref<boolean>(false);
+const hasPreNotice = ref<boolean>(
+  props.companyTasks?.corlief?.preNotice ?? false,
+);
+const hasScheduled = ref<boolean>(
+  props.companyTasks?.corlief?.scheduled ?? false,
+);
+const hasReserved = ref<boolean>(
+  props.companyTasks?.corlief?.reserved ?? false,
+);
+
+watch([hasPreNotice, hasScheduled, hasReserved], () => {
+  emit("update:corlief", {
+    preNotice: hasPreNotice.value,
+    scheduled: hasScheduled.value,
+    reserved: hasReserved.value,
+  });
+});
 
 const isComplete = computed(() => {
   return (
diff --git a/frontend/src/components/tasks/TaskCoverage.vue b/frontend/src/components/tasks/TaskCoverage.vue
index c4311e28..a578ac27 100644
--- a/frontend/src/components/tasks/TaskCoverage.vue
+++ b/frontend/src/components/tasks/TaskCoverage.vue
@@ -42,26 +42,47 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Camera } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskCoverage } from "@/dto/tasks";
 
 interface Props {
   entityId: string;
   stepNumber?: number;
+  speakerTasks?: SpeakerTasks;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   stepNumber: 5,
+  speakerTasks: undefined,
 });
 
+const emit = defineEmits<{
+  "update:coverage": [value: SpeakerTaskCoverage];
+}>();
+
 // Coverage states
-const videoCoverage = ref<boolean>(false);
-const streaming = ref<boolean>(false);
-const photoCoverage = ref<boolean>(false);
+const videoCoverage = ref<boolean>(
+  props.speakerTasks?.coverage?.video ?? false,
+);
+const streaming = ref<boolean>(
+  props.speakerTasks?.coverage?.streaming ?? false,
+);
+const photoCoverage = ref<boolean>(
+  props.speakerTasks?.coverage?.photo ?? false,
+);
+
+watch([videoCoverage, streaming, photoCoverage], () => {
+  emit("update:coverage", {
+    video: videoCoverage.value,
+    streaming: streaming.value,
+    photo: photoCoverage.value,
+  });
+});
 
 const isComplete = computed(() => {
   return (
diff --git a/frontend/src/components/tasks/TaskFlights.vue b/frontend/src/components/tasks/TaskFlights.vue
index a20824a1..8b6728ba 100644
--- a/frontend/src/components/tasks/TaskFlights.vue
+++ b/frontend/src/components/tasks/TaskFlights.vue
@@ -193,7 +193,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Label } from "@/components/ui/label";
@@ -208,42 +208,145 @@ import {
 } from "@/components/ui/select";
 import { DatePicker } from "@/components/ui/date-picker";
 import { Plane } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskFlights } from "@/dto/tasks";
 
 interface Props {
   entityId: string;
   stepNumber?: number;
+  speakerTasks?: SpeakerTasks;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   stepNumber: 3,
+  speakerTasks: undefined,
 });
 
+const emit = defineEmits<{
+  "update:flights": [value: SpeakerTaskFlights];
+}>();
+
+const parseDate = (v: string | null | undefined): Date | null => {
+  if (!v) return null;
+  try {
+    return new Date(v);
+  } catch {
+    return null;
+  }
+};
+
 // Request status
-const hasRequestedFlights = ref<boolean>(false);
+const hasRequestedFlights = ref<boolean>(
+  props.speakerTasks?.flights?.requested ?? false,
+);
 
 // Arrival
-const arrivalAirport = ref<string>("");
-const arrivalFlightNumber = ref<string>("");
-const arrivalDate = ref<Date | null>(null);
-const arrivalTime = ref<string>("");
+const arrivalAirport = ref<string>(
+  props.speakerTasks?.flights?.arrival?.airport ?? "",
+);
+const arrivalFlightNumber = ref<string>(
+  props.speakerTasks?.flights?.arrival?.flightNumber ?? "",
+);
+const arrivalDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.flights?.arrival?.date),
+);
+const arrivalTime = ref<string>(
+  props.speakerTasks?.flights?.arrival?.time ?? "",
+);
 
 // Departure
-const departureAirport = ref<string>("");
-const departureFlightNumber = ref<string>("");
-const departureDate = ref<Date | null>(null);
-const departureTime = ref<string>("");
+const departureAirport = ref<string>(
+  props.speakerTasks?.flights?.departure?.airport ?? "",
+);
+const departureFlightNumber = ref<string>(
+  props.speakerTasks?.flights?.departure?.flightNumber ?? "",
+);
+const departureDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.flights?.departure?.date),
+);
+const departureTime = ref<string>(
+  props.speakerTasks?.flights?.departure?.time ?? "",
+);
 
 // Details
-const flightPrice = ref<string>("");
-const flightStatus = ref<string>("pending");
-const flightLink = ref<string>("");
-const flightBookingRef = ref<string>("");
+const flightPrice = ref<string>(
+  props.speakerTasks?.flights?.details?.price ?? "",
+);
+const flightStatus = ref<string>(
+  props.speakerTasks?.flights?.details?.status ?? "pending",
+);
+const flightLink = ref<string>(
+  props.speakerTasks?.flights?.details?.link ?? "",
+);
+const flightBookingRef = ref<string>(
+  props.speakerTasks?.flights?.details?.bookingRef ?? "",
+);
 
 // Refund
-const refundAmount = ref<string>("");
-const refundMethod = ref<string>("");
-const refundInfoNeeded = ref<string>("");
-const refundStatus = ref<string>("not_started");
+const refundAmount = ref<string>(
+  props.speakerTasks?.flights?.refund?.amount ?? "",
+);
+const refundMethod = ref<string>(
+  props.speakerTasks?.flights?.refund?.method ?? "",
+);
+const refundInfoNeeded = ref<string>(
+  props.speakerTasks?.flights?.refund?.infoNeeded ?? "",
+);
+const refundStatus = ref<string>(
+  props.speakerTasks?.flights?.refund?.status ?? "not_started",
+);
+
+function emitFlights() {
+  emit("update:flights", {
+    requested: hasRequestedFlights.value,
+    arrival: {
+      airport: arrivalAirport.value,
+      flightNumber: arrivalFlightNumber.value,
+      date: arrivalDate.value?.toISOString() ?? null,
+      time: arrivalTime.value,
+    },
+    departure: {
+      airport: departureAirport.value,
+      flightNumber: departureFlightNumber.value,
+      date: departureDate.value?.toISOString() ?? null,
+      time: departureTime.value,
+    },
+    details: {
+      price: flightPrice.value,
+      status: flightStatus.value,
+      link: flightLink.value,
+      bookingRef: flightBookingRef.value,
+    },
+    refund: {
+      amount: refundAmount.value,
+      method: refundMethod.value,
+      infoNeeded: refundInfoNeeded.value,
+      status: refundStatus.value,
+    },
+  });
+}
+
+watch(
+  [
+    hasRequestedFlights,
+    arrivalAirport,
+    arrivalFlightNumber,
+    arrivalDate,
+    arrivalTime,
+    departureAirport,
+    departureFlightNumber,
+    departureDate,
+    departureTime,
+    flightPrice,
+    flightStatus,
+    flightLink,
+    flightBookingRef,
+    refundAmount,
+    refundMethod,
+    refundInfoNeeded,
+    refundStatus,
+  ],
+  emitFlights,
+);
 
 const isComplete = computed(() => {
   return flightStatus.value === "bought";
diff --git a/frontend/src/components/tasks/TaskHotel.vue b/frontend/src/components/tasks/TaskHotel.vue
index 937ffbd4..ddb27f6c 100644
--- a/frontend/src/components/tasks/TaskHotel.vue
+++ b/frontend/src/components/tasks/TaskHotel.vue
@@ -121,7 +121,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -131,39 +131,96 @@ import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
 import { DatePicker } from "@/components/ui/date-picker";
 import { Hotel } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskHotel } from "@/dto/tasks";
 
 interface Props {
   entityId: string;
   stepNumber?: number;
   isLast?: boolean;
+  speakerTasks?: SpeakerTasks;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   stepNumber: 6,
   isLast: false,
+  speakerTasks: undefined,
 });
 
+const emit = defineEmits<{
+  "update:hotel": [value: SpeakerTaskHotel];
+}>();
+
+const parseDate = (v: string | null | undefined): Date | null => {
+  if (!v) return null;
+  try {
+    return new Date(v);
+  } catch {
+    return null;
+  }
+};
+
 // Request status
-const hasRequestedHotelInfo = ref<boolean>(false);
+const hasRequestedHotelInfo = ref<boolean>(
+  props.speakerTasks?.hotel?.requested ?? false,
+);
 
 // Hotel details
-const hotelName = ref<string>("");
-const roomType = ref<string>("");
-const hotelPrice = ref<string>("");
+const hotelName = ref<string>(props.speakerTasks?.hotel?.hotelName ?? "");
+const roomType = ref<string>(props.speakerTasks?.hotel?.roomType ?? "");
+const hotelPrice = ref<string>(props.speakerTasks?.hotel?.price ?? "");
 
 // Booking
-const checkInDate = ref<Date | null>(null);
-const checkOutDate = ref<Date | null>(null);
-const numNights = ref<string>("");
-const numGuests = ref<string>("");
-const guestNames = ref<string>("");
+const checkInDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.hotel?.checkIn),
+);
+const checkOutDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.hotel?.checkOut),
+);
+const numNights = ref<string>(props.speakerTasks?.hotel?.numNights ?? "");
+const numGuests = ref<string>(props.speakerTasks?.hotel?.numGuests ?? "");
+const guestNames = ref<string>(props.speakerTasks?.hotel?.guestNames ?? "");
 
 // Payment
-const hasInvoice = ref<boolean>(false);
-const isPaid = ref<boolean>(false);
+const hasInvoice = ref<boolean>(props.speakerTasks?.hotel?.invoice ?? false);
+const isPaid = ref<boolean>(props.speakerTasks?.hotel?.paid ?? false);
 
 // Notes
-const hotelNotes = ref<string>("");
+const hotelNotes = ref<string>(props.speakerTasks?.hotel?.notes ?? "");
+
+function emitHotel() {
+  emit("update:hotel", {
+    requested: hasRequestedHotelInfo.value,
+    hotelName: hotelName.value,
+    roomType: roomType.value,
+    price: hotelPrice.value,
+    checkIn: checkInDate.value?.toISOString() ?? null,
+    checkOut: checkOutDate.value?.toISOString() ?? null,
+    numNights: numNights.value,
+    numGuests: numGuests.value,
+    guestNames: guestNames.value,
+    invoice: hasInvoice.value,
+    paid: isPaid.value,
+    notes: hotelNotes.value,
+  });
+}
+
+watch(
+  [
+    hasRequestedHotelInfo,
+    hotelName,
+    roomType,
+    hotelPrice,
+    checkInDate,
+    checkOutDate,
+    numNights,
+    numGuests,
+    guestNames,
+    hasInvoice,
+    isPaid,
+    hotelNotes,
+  ],
+  emitHotel,
+);
 
 const isComplete = computed(() => {
   return (
diff --git a/frontend/src/components/tasks/TaskLogistics.vue b/frontend/src/components/tasks/TaskLogistics.vue
index 6e0569de..1cb93993 100644
--- a/frontend/src/components/tasks/TaskLogistics.vue
+++ b/frontend/src/components/tasks/TaskLogistics.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Label } from "@/components/ui/label";
@@ -61,26 +61,47 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Truck } from "lucide-vue-next";
+import type { CompanyTasks, CompanyTaskLogistics } from "@/dto/tasks";
 
 interface Props {
   entityId: string;
   stepNumber?: number;
   isLast?: boolean;
+  companyTasks?: CompanyTasks;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   stepNumber: 6,
   isLast: false,
+  companyTasks: undefined,
 });
 
+const emit = defineEmits<{
+  "update:logistics": [value: CompanyTaskLogistics];
+}>();
+
 type CarStatus = "not_responded" | "wants" | "not_wants";
 
 // Request status (whether email was sent)
-const hasRequestedInfo = ref<boolean>(false);
+const hasRequestedInfo = ref<boolean>(
+  props.companyTasks?.logistics?.requestedInfo ?? false,
+);
 
 // Form data
-const carStatus = ref<CarStatus>("not_responded");
-const licensePlate = ref<string>("");
+const carStatus = ref<CarStatus>(
+  (props.companyTasks?.logistics?.carStatus as CarStatus) ?? "not_responded",
+);
+const licensePlate = ref<string>(
+  props.companyTasks?.logistics?.licensePlate ?? "",
+);
+
+watch([hasRequestedInfo, carStatus, licensePlate], () => {
+  emit("update:logistics", {
+    requestedInfo: hasRequestedInfo.value,
+    carStatus: carStatus.value,
+    licensePlate: licensePlate.value,
+  });
+});
 
 const isComplete = computed(() => {
   if (carStatus.value === "not_responded") return false;
diff --git a/frontend/src/components/tasks/TaskMaterials.vue b/frontend/src/components/tasks/TaskMaterials.vue
index 957e5cd9..898b918d 100644
--- a/frontend/src/components/tasks/TaskMaterials.vue
+++ b/frontend/src/components/tasks/TaskMaterials.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -91,27 +91,63 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
 import { Package } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskMaterials } from "@/dto/tasks";
 
 interface Props {
   entityId: string;
   stepNumber?: number;
+  speakerTasks?: SpeakerTasks;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   stepNumber: 5,
+  speakerTasks: undefined,
 });
 
+const emit = defineEmits<{
+  "update:materials": [value: SpeakerTaskMaterials];
+}>();
+
 // Materials states
-const hasRequestedMaterials = ref<boolean>(false);
-const materialsReceived = ref<boolean>(false);
+const hasRequestedMaterials = ref<boolean>(
+  props.speakerTasks?.materials?.requested ?? false,
+);
+const materialsReceived = ref<boolean>(
+  props.speakerTasks?.materials?.received ?? false,
+);
 
 // Talk info
-const talkTitle = ref<string>("");
-const talkDescription = ref<string>("");
+const talkTitle = ref<string>(props.speakerTasks?.materials?.talkTitle ?? "");
+const talkDescription = ref<string>(
+  props.speakerTasks?.materials?.talkDescription ?? "",
+);
 
 // Test schedule
-const testSchedule = ref<string>("");
-const testDone = ref<boolean>(false);
+const testSchedule = ref<string>(
+  props.speakerTasks?.materials?.testSchedule ?? "",
+);
+const testDone = ref<boolean>(props.speakerTasks?.materials?.testDone ?? false);
+
+watch(
+  [
+    hasRequestedMaterials,
+    materialsReceived,
+    talkTitle,
+    talkDescription,
+    testSchedule,
+    testDone,
+  ],
+  () => {
+    emit("update:materials", {
+      requested: hasRequestedMaterials.value,
+      received: materialsReceived.value,
+      talkTitle: talkTitle.value,
+      talkDescription: talkDescription.value,
+      testSchedule: testSchedule.value,
+      testDone: testDone.value,
+    });
+  },
+);
 
 const isComplete = computed(() => {
   return materialsReceived.value === true && testDone.value === true;
diff --git a/frontend/src/components/tasks/TaskSessionTitles.vue b/frontend/src/components/tasks/TaskSessionTitles.vue
index 55941f31..18d15230 100644
--- a/frontend/src/components/tasks/TaskSessionTitles.vue
+++ b/frontend/src/components/tasks/TaskSessionTitles.vue
@@ -58,19 +58,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { AlertTriangle, Presentation } from "lucide-vue-next";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import type { Item } from "@/dto/item";
+import type { CompanyTasks, CompanyTaskSessionTitles } from "@/dto/tasks";
 
 interface Props {
   packageItems: Item[];
+  companyTasks?: CompanyTasks;
 }
 
 const props = defineProps<Props>();
 
+const emit = defineEmits<{
+  "update:sessionTitles": [value: CompanyTaskSessionTitles];
+}>();
+
 // Check if package includes presentation or workshop items by type
 const hasPresentation = computed(() =>
   props.packageItems.some(
@@ -82,8 +88,19 @@ const hasWorkshop = computed(() =>
 );
 
 // Session titles
-const presentationTitle = ref("");
-const workshopTitle = ref("");
+const presentationTitle = ref(
+  props.companyTasks?.sessionTitles?.presentationTitle ?? "",
+);
+const workshopTitle = ref(
+  props.companyTasks?.sessionTitles?.workshopTitle ?? "",
+);
+
+watch([presentationTitle, workshopTitle], () => {
+  emit("update:sessionTitles", {
+    presentationTitle: presentationTitle.value,
+    workshopTitle: workshopTitle.value,
+  });
+});
 
 const isPresentationTitleTooLong = computed(
   () => presentationTitle.value.length > 30,
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
index 0b1666f2..eb50af8f 100644
--- a/frontend/src/components/tasks/Tasks.vue
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -1,8 +1,19 @@
 <template>
   <div class="p-4 space-y-6">
-    <h2 class="text-lg font-semibold">
-      {{ entityType === "company" ? "Company" : "Speaker" }} Tasks Timeline
-    </h2>
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-semibold">
+        {{ entityType === "company" ? "Company" : "Speaker" }} Tasks Timeline
+      </h2>
+      <Button
+        variant="default"
+        size="sm"
+        :disabled="isSaving"
+        @click="saveTasks"
+      >
+        <Save class="w-4 h-4 mr-1" />
+        {{ isSaving ? "Saving…" : "Save Tasks" }}
+      </Button>
+    </div>
 
     <!-- Stepper Container -->
     <Stepper
@@ -16,19 +27,29 @@
         :entity-type="entityType"
         :participation="currentParticipation"
         :contact="contact"
+        :company-tasks="companyTasks"
+        :speaker-tasks="speakerTasks"
         @package-changed="onPackageChanged"
+        @update:company-confirmation="onCompanyConfirmationUpdate"
+        @update:speaker-confirmation="onSpeakerConfirmationUpdate"
       />
 
       <TaskBillingLogos
         :entity-type="entityType"
         :billing-info="billingInfo"
         :entity-id="entityId"
+        :company-tasks="companyTasks"
+        :speaker-tasks="speakerTasks"
+        @update:logos="onLogosUpdate"
+        @update:asked-for-info="onAskedForInfoUpdate"
       />
 
       <TaskContract
         v-if="entityType === 'company'"
         :entity-type="entityType"
         :entity-id="entityId"
+        :company-tasks="companyTasks"
+        @update:contract="onContractUpdate"
       />
 
       <!-- Company-only steps -->
@@ -36,42 +57,91 @@
         <TaskSessionTitles
           v-if="showSessionTitles"
           :package-items="packageItems"
+          :company-tasks="companyTasks"
+          @update:session-titles="onSessionTitlesUpdate"
         />
 
         <TaskCorlief
           :entity-id="entityId"
           :step-number="showSessionTitles ? 5 : 4"
+          :company-tasks="companyTasks"
+          @update:corlief="onCorliefUpdate"
         />
 
         <TaskLogistics
           :entity-id="entityId"
           :step-number="showSessionTitles ? 6 : 5"
           :is-last="true"
+          :company-tasks="companyTasks"
+          @update:logistics="onLogisticsUpdate"
         />
       </template>
 
       <!-- Speaker-only steps -->
       <template v-if="entityType === 'speaker'">
-        <TaskFlights :entity-id="entityId" :step-number="3" />
+        <TaskFlights
+          :entity-id="entityId"
+          :step-number="3"
+          :speaker-tasks="speakerTasks"
+          @update:flights="onFlightsUpdate"
+        />
 
-        <TaskCoverage :entity-id="entityId" :step-number="4" />
+        <TaskCoverage
+          :entity-id="entityId"
+          :step-number="4"
+          :speaker-tasks="speakerTasks"
+          @update:coverage="onCoverageUpdate"
+        />
 
-        <TaskMaterials :entity-id="entityId" :step-number="5" />
+        <TaskMaterials
+          :entity-id="entityId"
+          :step-number="5"
+          :speaker-tasks="speakerTasks"
+          @update:materials="onMaterialsUpdate"
+        />
 
-        <TaskHotel :entity-id="entityId" :step-number="6" :is-last="true" />
+        <TaskHotel
+          :entity-id="entityId"
+          :step-number="6"
+          :is-last="true"
+          :speaker-tasks="speakerTasks"
+          @update:hotel="onHotelUpdate"
+        />
       </template>
     </Stepper>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, reactive, watch } from "vue";
 import type { EntityType } from "@/dto/tasks";
+import {
+  type CompanyTasks,
+  type SpeakerTasks,
+  type TaskLogos,
+  type CompanyTaskConfirmation,
+  type CompanyTaskContract,
+  type CompanyTaskSessionTitles,
+  type CompanyTaskCorlief,
+  type CompanyTaskLogistics,
+  type SpeakerTaskConfirmation,
+  type SpeakerTaskFlights,
+  type SpeakerTaskCoverage,
+  type SpeakerTaskMaterials,
+  type SpeakerTaskHotel,
+  emptyCompanyTasks,
+  emptySpeakerTasks,
+} from "@/dto/tasks";
 import type { CompanyBillingInfo, CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
 import type { Contact } from "@/dto/contacts";
 import type { Item } from "@/dto/item";
+import { Button } from "@/components/ui/button";
 import { Stepper } from "@/components/ui/stepper";
+import { Save } from "lucide-vue-next";
+import { useCompanyTasksMutation } from "@/mutations/companies";
+import { useSpeakerTasksMutation } from "@/mutations/speakers";
+import useToast from "@/lib/toast";
 import TaskConfirmation from "./TaskConfirmation.vue";
 import TaskBillingLogos from "./TaskBillingLogos.vue";
 import TaskContract from "./TaskContract.vue";
@@ -93,18 +163,138 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// Get current participation
-const currentParticipation = computed(() => props.participation);
+const { toast } = useToast();
+
+// ——————————————————————————————————————
+// Reactive task state — initialised from participation
+// ——————————————————————————————————————
+const companyTasks = reactive<CompanyTasks>(
+  props.entityType === "company"
+    ? {
+        ...emptyCompanyTasks(),
+        ...((props.participation as CompanyParticipation)?.tasks ?? {}),
+      }
+    : emptyCompanyTasks(),
+);
+
+const speakerTasks = reactive<SpeakerTasks>(
+  props.entityType === "speaker"
+    ? {
+        ...emptySpeakerTasks(),
+        ...((props.participation as SpeakerParticipation)?.tasks ?? {}),
+      }
+    : emptySpeakerTasks(),
+);
+
+// Sync when participation changes externally
+watch(
+  () => props.participation,
+  (p) => {
+    if (props.entityType === "company" && p) {
+      const saved = (p as CompanyParticipation).tasks;
+      if (saved) Object.assign(companyTasks, saved);
+    }
+    if (props.entityType === "speaker" && p) {
+      const saved = (p as SpeakerParticipation).tasks;
+      if (saved) Object.assign(speakerTasks, saved);
+    }
+  },
+);
+
+// ——————————————————————————————————————
+// Save mutations
+// ——————————————————————————————————————
+const companyMutation = useCompanyTasksMutation();
+companyMutation.companyId.value = props.entityId;
+
+const speakerMutation = useSpeakerTasksMutation();
+speakerMutation.speakerId.value = props.entityId;
+
+const isSaving = ref(false);
+
+async function saveTasks() {
+  isSaving.value = true;
+  try {
+    if (props.entityType === "company") {
+      await companyMutation.mutate({ ...companyTasks });
+    } else {
+      await speakerMutation.mutate({ ...speakerTasks });
+    }
+    toast.success({ title: "Tasks saved" });
+  } catch (err) {
+    console.error("Failed to save tasks:", err);
+    toast.error({ title: "Failed to save tasks" });
+  } finally {
+    isSaving.value = false;
+  }
+}
 
-// Package items for session titles
+// ——————————————————————————————————————
+// Child update handlers (company)
+// ——————————————————————————————————————
+function onCompanyConfirmationUpdate(v: CompanyTaskConfirmation) {
+  Object.assign(companyTasks.confirmation, v);
+}
+function onContractUpdate(v: CompanyTaskContract) {
+  Object.assign(companyTasks.contract, v);
+}
+function onSessionTitlesUpdate(v: CompanyTaskSessionTitles) {
+  Object.assign(companyTasks.sessionTitles, v);
+}
+function onCorliefUpdate(v: CompanyTaskCorlief) {
+  Object.assign(companyTasks.corlief, v);
+}
+function onLogisticsUpdate(v: CompanyTaskLogistics) {
+  Object.assign(companyTasks.logistics, v);
+}
+
+// ——————————————————————————————————————
+// Child update handlers (speaker)
+// ——————————————————————————————————————
+function onSpeakerConfirmationUpdate(v: SpeakerTaskConfirmation) {
+  Object.assign(speakerTasks.confirmation, v);
+}
+function onFlightsUpdate(v: SpeakerTaskFlights) {
+  Object.assign(speakerTasks.flights, v);
+}
+function onCoverageUpdate(v: SpeakerTaskCoverage) {
+  Object.assign(speakerTasks.coverage, v);
+}
+function onMaterialsUpdate(v: SpeakerTaskMaterials) {
+  Object.assign(speakerTasks.materials, v);
+}
+function onHotelUpdate(v: SpeakerTaskHotel) {
+  Object.assign(speakerTasks.hotel, v);
+}
+
+// ——————————————————————————————————————
+// Shared update handlers (logos / askedForInfo)
+// ——————————————————————————————————————
+function onLogosUpdate(v: TaskLogos) {
+  if (props.entityType === "company") {
+    Object.assign(companyTasks.logos, v);
+  } else {
+    Object.assign(speakerTasks.logos, v);
+  }
+}
+function onAskedForInfoUpdate(v: boolean) {
+  if (props.entityType === "company") {
+    companyTasks.confirmation.askedForInfo = v;
+  } else {
+    speakerTasks.askedForInfo = v;
+  }
+}
+
+// ——————————————————————————————————————
+// Package items (company session titles logic)
+// ——————————————————————————————————————
+const currentParticipation = computed(() => props.participation);
 const packageItems = ref<Item[]>([]);
 
 const onPackageChanged = (_name: string, items: Item[]) => {
   packageItems.value = items;
 };
 
-// Show session titles only if package has presentation or workshop items
-// (only relevant for companies that have packages)
 const showSessionTitles = computed(() => {
   if (props.entityType !== "company") return false;
   return packageItems.value.some(
@@ -114,6 +304,5 @@ const showSessionTitles = computed(() => {
   );
 });
 
-// Set current step to 0 so the stepper doesn't auto-mark any steps as completed
 const currentStep = ref(0);
 </script>
diff --git a/frontend/src/dto/companies.ts b/frontend/src/dto/companies.ts
index 0b614a7d..3d32cdc0 100644
--- a/frontend/src/dto/companies.ts
+++ b/frontend/src/dto/companies.ts
@@ -1,6 +1,7 @@
 import type { ImplementsParticipationStatus, ObjectID, Participation } from ".";
 import type { Contact, CreateContactData } from "./contacts";
 import type { PackagePublic } from "./packages";
+import type { CompanyTasks } from "./tasks";
 
 export interface CompanyParticipation
   extends ImplementsParticipationStatus,
@@ -15,6 +16,7 @@ export interface CompanyParticipation
   notes: string;
   standDetails?: StandDetails;
   stands?: Stand[];
+  tasks?: CompanyTasks;
 }
 
 export interface Stand {
diff --git a/frontend/src/dto/speakers.ts b/frontend/src/dto/speakers.ts
index b47e7f3d..9361e5e5 100644
--- a/frontend/src/dto/speakers.ts
+++ b/frontend/src/dto/speakers.ts
@@ -1,5 +1,6 @@
 import type { ImplementsParticipationStatus, ObjectID, Participation } from ".";
 import type { Contact, CreateContactData } from "./contacts";
+import type { SpeakerTasks } from "./tasks";
 
 export interface SpeakerParticipationRoom {
   type: string;
@@ -16,6 +17,7 @@ export interface SpeakerParticipation
   feedback: string;
   flights: ObjectID[];
   room: SpeakerParticipationRoom;
+  tasks?: SpeakerTasks;
 }
 
 export interface SpeakerImages {
diff --git a/frontend/src/dto/tasks.ts b/frontend/src/dto/tasks.ts
index 6d080255..4b1ed1a6 100644
--- a/frontend/src/dto/tasks.ts
+++ b/frontend/src/dto/tasks.ts
@@ -23,3 +23,200 @@ export interface TaskEntity {
   participation?: Participation;
   billingInfo?: CompanyBillingInfo;
 }
+
+// ============================================================
+// Shared
+// ============================================================
+
+export interface TaskLogos {
+  received: boolean;
+  needsReviewing: boolean;
+}
+
+// ============================================================
+// Company task types
+// ============================================================
+
+export interface CompanyTaskConfirmation {
+  askedForInfo: boolean;
+}
+
+export interface CompanyTaskContract {
+  sent: boolean;
+  created: boolean;
+  signed: boolean;
+  receiptSent: boolean;
+}
+
+export interface CompanyTaskSessionTitles {
+  presentationTitle: string;
+  workshopTitle: string;
+}
+
+export interface CompanyTaskCorlief {
+  preNotice: boolean;
+  scheduled: boolean;
+  reserved: boolean;
+}
+
+export interface CompanyTaskLogistics {
+  requestedInfo: boolean;
+  carStatus: string; // "not_responded" | "wants" | "not_wants"
+  licensePlate: string;
+}
+
+export interface CompanyTasks {
+  confirmation: CompanyTaskConfirmation;
+  logos: TaskLogos;
+  contract: CompanyTaskContract;
+  sessionTitles: CompanyTaskSessionTitles;
+  corlief: CompanyTaskCorlief;
+  logistics: CompanyTaskLogistics;
+}
+
+// ============================================================
+// Speaker task types
+// ============================================================
+
+export interface SpeakerTaskConfirmation {
+  phone: string;
+  linkedin: string;
+  wantsLinkedinTag: boolean;
+  observations: string;
+}
+
+export interface SpeakerTaskFlightLeg {
+  airport: string;
+  flightNumber: string;
+  date: string | null;
+  time: string;
+}
+
+export interface SpeakerTaskFlightDetails {
+  price: string;
+  status: string; // "pending" | "received" | "approved" | "bought"
+  link: string;
+  bookingRef: string;
+}
+
+export interface SpeakerTaskFlightRefund {
+  amount: string;
+  method: string;
+  infoNeeded: string;
+  status: string; // "not_started" | "receipt_requested" | "info_requested" | "done"
+}
+
+export interface SpeakerTaskFlights {
+  requested: boolean;
+  arrival: SpeakerTaskFlightLeg;
+  departure: SpeakerTaskFlightLeg;
+  details: SpeakerTaskFlightDetails;
+  refund: SpeakerTaskFlightRefund;
+}
+
+export interface SpeakerTaskCoverage {
+  video: boolean;
+  streaming: boolean;
+  photo: boolean;
+}
+
+export interface SpeakerTaskMaterials {
+  requested: boolean;
+  talkTitle: string;
+  talkDescription: string;
+  received: boolean;
+  testSchedule: string;
+  testDone: boolean;
+}
+
+export interface SpeakerTaskHotel {
+  requested: boolean;
+  hotelName: string;
+  roomType: string;
+  price: string;
+  checkIn: string | null;
+  checkOut: string | null;
+  numNights: string;
+  numGuests: string;
+  guestNames: string;
+  invoice: boolean;
+  paid: boolean;
+  notes: string;
+}
+
+export interface SpeakerTasks {
+  confirmation: SpeakerTaskConfirmation;
+  logos: TaskLogos;
+  askedForInfo: boolean;
+  flights: SpeakerTaskFlights;
+  coverage: SpeakerTaskCoverage;
+  materials: SpeakerTaskMaterials;
+  hotel: SpeakerTaskHotel;
+}
+
+// ============================================================
+// Helpers – build zero-value task objects
+// ============================================================
+
+export function emptyCompanyTasks(): CompanyTasks {
+  return {
+    confirmation: { askedForInfo: false },
+    logos: { received: false, needsReviewing: false },
+    contract: {
+      sent: false,
+      created: false,
+      signed: false,
+      receiptSent: false,
+    },
+    sessionTitles: { presentationTitle: "", workshopTitle: "" },
+    corlief: { preNotice: false, scheduled: false, reserved: false },
+    logistics: {
+      requestedInfo: false,
+      carStatus: "not_responded",
+      licensePlate: "",
+    },
+  };
+}
+
+export function emptySpeakerTasks(): SpeakerTasks {
+  return {
+    confirmation: {
+      phone: "",
+      linkedin: "",
+      wantsLinkedinTag: false,
+      observations: "",
+    },
+    logos: { received: false, needsReviewing: false },
+    askedForInfo: false,
+    flights: {
+      requested: false,
+      arrival: { airport: "", flightNumber: "", date: null, time: "" },
+      departure: { airport: "", flightNumber: "", date: null, time: "" },
+      details: { price: "", status: "pending", link: "", bookingRef: "" },
+      refund: { amount: "", method: "", infoNeeded: "", status: "not_started" },
+    },
+    coverage: { video: false, streaming: false, photo: false },
+    materials: {
+      requested: false,
+      talkTitle: "",
+      talkDescription: "",
+      received: false,
+      testSchedule: "",
+      testDone: false,
+    },
+    hotel: {
+      requested: false,
+      hotelName: "",
+      roomType: "",
+      price: "",
+      checkIn: null,
+      checkOut: null,
+      numNights: "",
+      numGuests: "",
+      guestNames: "",
+      invoice: false,
+      paid: false,
+      notes: "",
+    },
+  };
+}
diff --git a/frontend/src/mutations/companies.ts b/frontend/src/mutations/companies.ts
index a975e7ea..c8ba3087 100644
--- a/frontend/src/mutations/companies.ts
+++ b/frontend/src/mutations/companies.ts
@@ -8,6 +8,7 @@ import {
   postThread,
   uploadCompanyInternalImage,
   updateRepresentativeOrder,
+  updateCompanyTasks,
 } from "@/api/companies";
 import type { ParticipationStatus } from "@/dto";
 import type {
@@ -16,6 +17,7 @@ import type {
   AddParticipationData,
   CompanyBillingInfo,
 } from "@/dto/companies";
+import type { CompanyTasks } from "@/dto/tasks";
 import {
   ThreadStatus,
   type CreateThread,
@@ -351,3 +353,25 @@ export const useUpdateRepresentativeOrderMutation = defineMutation(() => {
     representativeIds,
   };
 });
+
+export const useCompanyTasksMutation = defineMutation(() => {
+  const companyId = ref<string>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: (tasks: CompanyTasks) =>
+      updateCompanyTasks(companyId.value!, tasks),
+    onSettled: () => {
+      if (companyId.value) {
+        queryCache.invalidateQueries({ key: ["company", companyId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["companies"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    companyId,
+  };
+});
diff --git a/frontend/src/mutations/speakers.ts b/frontend/src/mutations/speakers.ts
index 81137603..a123efb2 100644
--- a/frontend/src/mutations/speakers.ts
+++ b/frontend/src/mutations/speakers.ts
@@ -6,11 +6,13 @@ import {
   postSpeakerThread,
   uploadSpeakerInternalImage,
   updateSpeakerParticipationStatus,
+  updateSpeakerTasks,
 } from "@/api/speakers";
 import type {
   UpdateSpeakerData,
   UpdateSpeakerParticipationData,
 } from "@/dto/speakers";
+import type { SpeakerTasks } from "@/dto/tasks";
 import {
   ThreadStatus,
   type CreateThread,
@@ -259,3 +261,25 @@ export const useSpeakerImageUploadMutation = defineMutation(() => {
     imageData,
   };
 });
+
+export const useSpeakerTasksMutation = defineMutation(() => {
+  const speakerId = ref<string>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: (tasks: SpeakerTasks) =>
+      updateSpeakerTasks(speakerId.value!, tasks),
+    onSettled: () => {
+      if (speakerId.value) {
+        queryCache.invalidateQueries({ key: ["speaker", speakerId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["speakers"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    speakerId,
+  };
+});

From 4e043d7f4458e6f7a9b1829c86a3f0a612cff170 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:00:39 +0000
Subject: [PATCH 23/39] feat: enhance task models with new fields and BSON
 handling for LinkedIn and coverage

---
 backend/src/models/task.go | 136 ++++++++++++++++++++++++++++++++++---
 1 file changed, 126 insertions(+), 10 deletions(-)

diff --git a/backend/src/models/task.go b/backend/src/models/task.go
index 3f2596c6..32db689b 100644
--- a/backend/src/models/task.go
+++ b/backend/src/models/task.go
@@ -1,6 +1,11 @@
 package models
 
-import "time"
+import (
+	"time"
+
+	"go.mongodb.org/mongo-driver/bson"
+	"go.mongodb.org/mongo-driver/bson/bsontype"
+)
 
 // ============================================================
 // Shared task fields (used by both companies and speakers)
@@ -27,6 +32,7 @@ type CompanyTaskContract struct {
 	Created     bool `json:"created" bson:"created"`
 	Signed      bool `json:"signed" bson:"signed"`
 	ReceiptSent bool `json:"receiptSent" bson:"receiptSent"`
+	Paid        bool `json:"paid" bson:"paid"`
 }
 
 // CompanyTaskSessionTitles tracks session / workshop titles.
@@ -57,6 +63,7 @@ type CompanyTasks struct {
 	SessionTitles CompanyTaskSessionTitles `json:"sessionTitles" bson:"sessionTitles"`
 	Corlief       CompanyTaskCorlief       `json:"corlief" bson:"corlief"`
 	Logistics     CompanyTaskLogistics     `json:"logistics" bson:"logistics"`
+	PO            string                   `json:"po" bson:"po"`
 }
 
 // ============================================================
@@ -67,10 +74,63 @@ type CompanyTasks struct {
 type SpeakerTaskConfirmation struct {
 	Phone         string `json:"phone" bson:"phone"`
 	LinkedIn      string `json:"linkedin" bson:"linkedin"`
-	WantsLinkedIn bool   `json:"wantsLinkedinTag" bson:"wantsLinkedinTag"`
+	WantsLinkedIn string `json:"wantsLinkedinTag" bson:"wantsLinkedinTag"` // "not_responded", "yes", "no"
 	Observations  string `json:"observations" bson:"observations"`
 }
 
+// UnmarshalBSON handles legacy bool values stored for WantsLinkedIn.
+func (s *SpeakerTaskConfirmation) UnmarshalBSON(data []byte) error {
+	var raw bson.Raw
+	if err := bson.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+
+	decodeString := func(key string) string {
+		val, err := raw.LookupErr(key)
+		if err != nil {
+			return ""
+		}
+		if val.Type == bsontype.String {
+			v, _ := val.StringValueOK()
+			return v
+		}
+		return ""
+	}
+
+	decodeLinkedIn := func(key string) string {
+		val, err := raw.LookupErr(key)
+		if err != nil {
+			return "not_responded"
+		}
+		switch val.Type {
+		case bsontype.Boolean:
+			b, _ := val.BooleanOK()
+			return boolToString(b)
+		case bsontype.String:
+			v, _ := val.StringValueOK()
+			return v
+		default:
+			return "not_responded"
+		}
+	}
+
+	s.Phone = decodeString("phone")
+	s.LinkedIn = decodeString("linkedin")
+	s.WantsLinkedIn = decodeLinkedIn("wantsLinkedinTag")
+	s.Observations = decodeString("observations")
+	return nil
+}
+
+// MarshalBSON always writes string values.
+func (s SpeakerTaskConfirmation) MarshalBSON() ([]byte, error) {
+	return bson.Marshal(bson.D{
+		{Key: "phone", Value: s.Phone},
+		{Key: "linkedin", Value: s.LinkedIn},
+		{Key: "wantsLinkedinTag", Value: s.WantsLinkedIn},
+		{Key: "observations", Value: s.Observations},
+	})
+}
+
 // SpeakerTaskFlightLeg stores one leg (arrival or departure).
 type SpeakerTaskFlightLeg struct {
 	Airport      string     `json:"airport" bson:"airport"`
@@ -97,18 +157,73 @@ type SpeakerTaskFlightRefund struct {
 
 // SpeakerTaskFlights stores everything flight-related.
 type SpeakerTaskFlights struct {
-	Requested bool                     `json:"requested" bson:"requested"`
-	Arrival   SpeakerTaskFlightLeg     `json:"arrival" bson:"arrival"`
-	Departure SpeakerTaskFlightLeg     `json:"departure" bson:"departure"`
-	Details   SpeakerTaskFlightDetails `json:"details" bson:"details"`
-	Refund    SpeakerTaskFlightRefund  `json:"refund" bson:"refund"`
+	NeedsFlights string                   `json:"needsFlights" bson:"needsFlights"` // "not_responded", "yes", "no"
+	Requested    bool                     `json:"requested" bson:"requested"`
+	Arrival      SpeakerTaskFlightLeg     `json:"arrival" bson:"arrival"`
+	Departure    SpeakerTaskFlightLeg     `json:"departure" bson:"departure"`
+	Details      SpeakerTaskFlightDetails `json:"details" bson:"details"`
+	Refund       SpeakerTaskFlightRefund  `json:"refund" bson:"refund"`
 }
 
 // SpeakerTaskCoverage tracks video/photo coverage confirmation.
 type SpeakerTaskCoverage struct {
-	Video     bool `json:"video" bson:"video"`
-	Streaming bool `json:"streaming" bson:"streaming"`
-	Photo     bool `json:"photo" bson:"photo"`
+	Video     string `json:"video" bson:"video"`         // "not_responded", "yes", "no"
+	Streaming string `json:"streaming" bson:"streaming"` // "not_responded", "yes", "no"
+	Photo     string `json:"photo" bson:"photo"`         // "not_responded", "yes", "no"
+}
+
+// boolToString converts legacy boolean values to the new string format.
+func boolToString(v interface{}) string {
+	switch b := v.(type) {
+	case bool:
+		if b {
+			return "yes"
+		}
+		return "no"
+	case string:
+		return b
+	default:
+		return "not_responded"
+	}
+}
+
+// UnmarshalBSON handles legacy boolean fields being decoded into string fields.
+func (c *SpeakerTaskCoverage) UnmarshalBSON(data []byte) error {
+	var raw bson.Raw
+	if err := bson.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+
+	decodeField := func(key string) string {
+		val, err := raw.LookupErr(key)
+		if err != nil {
+			return "not_responded"
+		}
+		switch val.Type {
+		case bsontype.Boolean:
+			b, _ := val.BooleanOK()
+			return boolToString(b)
+		case bsontype.String:
+			s, _ := val.StringValueOK()
+			return s
+		default:
+			return "not_responded"
+		}
+	}
+
+	c.Video = decodeField("video")
+	c.Streaming = decodeField("streaming")
+	c.Photo = decodeField("photo")
+	return nil
+}
+
+// MarshalBSON always writes string values.
+func (c SpeakerTaskCoverage) MarshalBSON() ([]byte, error) {
+	return bson.Marshal(bson.D{
+		{Key: "video", Value: c.Video},
+		{Key: "streaming", Value: c.Streaming},
+		{Key: "photo", Value: c.Photo},
+	})
 }
 
 // SpeakerTaskMaterials tracks talk info and materials delivery.
@@ -123,6 +238,7 @@ type SpeakerTaskMaterials struct {
 
 // SpeakerTaskHotel stores hotel / booking / payment info.
 type SpeakerTaskHotel struct {
+	NeedsHotel string     `json:"needsHotel" bson:"needsHotel"` // "not_responded", "yes", "no"
 	Requested  bool       `json:"requested" bson:"requested"`
 	HotelName  string     `json:"hotelName" bson:"hotelName"`
 	RoomType   string     `json:"roomType" bson:"roomType"`

From 6c2c606c844f734389dea46498877a660b98de28 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:01:42 +0000
Subject: [PATCH 24/39] feat: add public image upload functionality for
 companies and speakers

---
 frontend/src/api/companies.ts | 3 +++
 frontend/src/api/speakers.ts  | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/frontend/src/api/companies.ts b/frontend/src/api/companies.ts
index 8863f322..035d1e4f 100644
--- a/frontend/src/api/companies.ts
+++ b/frontend/src/api/companies.ts
@@ -92,6 +92,9 @@ export const updateRepresentativeOrder = (
 export const uploadCompanyInternalImage = (id: string, data: FormData) =>
   instance.post<Company>(`/companies/${id}/image/internal`, data);
 
+export const uploadCompanyPublicImage = (id: string, data: FormData) =>
+  instance.post<Company>(`/companies/${id}/image/public`, data);
+
 export const deleteCompany = (id: string) =>
   instance.delete<Company>(`/companies/${id}`);
 
diff --git a/frontend/src/api/speakers.ts b/frontend/src/api/speakers.ts
index 65a979b9..8586a286 100644
--- a/frontend/src/api/speakers.ts
+++ b/frontend/src/api/speakers.ts
@@ -52,6 +52,12 @@ export const createSpeaker = (data: CreateSpeakerData) =>
 export const uploadSpeakerInternalImage = (id: string, data: FormData) =>
   instance.post<Speaker>(`/speakers/${id}/image/internal`, data);
 
+export const uploadSpeakerPublicImage = (id: string, data: FormData) =>
+  instance.post<Speaker>(`/speakers/${id}/image/public/speaker`, data);
+
+export const uploadSpeakerCompanyImage = (id: string, data: FormData) =>
+  instance.post<Speaker>(`/speakers/${id}/image/public/company`, data);
+
 export const deleteSpeaker = (id: string) =>
   instance.delete<Speaker>(`/speakers/${id}`);
 

From a74decf8dde9d98995d266b11dcbb6b8a763bf85 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:02:49 +0000
Subject: [PATCH 25/39] feat: add image handling for companies and speakers in
 Tasks component

---
 .../views/Dashboard/Companies/Tasks/Tasks.vue  |  1 +
 .../views/Dashboard/Speakers/SpeakerView.vue   | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
index 37d98716..70fcfe06 100644
--- a/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
+++ b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
@@ -4,6 +4,7 @@
     :entity-id="companyWithParticipation.id"
     :participation="currentParticipation"
     :billing-info="companyWithParticipation.billingInfo"
+    :company-imgs="companyWithParticipation.imgs"
   />
 </template>
 
diff --git a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
index f9cbe40b..ab673303 100644
--- a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
+++ b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
@@ -52,6 +52,7 @@
             :entity-id="speakerWithParticipation.id"
             :participation="speakerWithParticipation.participation"
             :contact="speakerWithParticipation.contactObject"
+            :speaker-imgs="speakerWithParticipation.imgs"
           />
         </TabsContent>
       </Tabs>
@@ -74,14 +75,25 @@ import { withCurrentParticipation } from "@/lib/utils";
 import { useEventStore } from "@/stores/event";
 
 import { useQuery, useQueryCache } from "@pinia/colada";
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import SpeakerCommunications from "@/components/speakers/SpeakerCommunications.vue";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
 const route = useRoute();
+const router = useRouter();
 const queryCache = useQueryCache();
-const activeTab = ref("info");
+
+const validTabs = ["info", "tasks"] as const;
+type TabValue = (typeof validTabs)[number];
+const activeTab = ref<TabValue>(
+  validTabs.includes(route.query.tab as TabValue)
+    ? (route.query.tab as TabValue)
+    : "info",
+);
+watch(activeTab, (tab) => {
+  router.replace({ query: { ...route.query, tab } });
+});
 
 const speakerId = route.params.speakerId;
 const { data: speaker } = useQuery({

From 19370619496595685cbd67ba7f33788788bf4b65 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:03:01 +0000
Subject: [PATCH 26/39] feat: add initialUrl prop to ImageUpload component for
 preview seeding

---
 frontend/src/components/ImageUpload.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/ImageUpload.vue b/frontend/src/components/ImageUpload.vue
index a5619ede..fdccf3d3 100644
--- a/frontend/src/components/ImageUpload.vue
+++ b/frontend/src/components/ImageUpload.vue
@@ -76,6 +76,7 @@ interface Props {
   previewAlt?: string;
   previewSize?: "sm" | "md";
   disabled?: boolean;
+  initialUrl?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -85,6 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
   previewAlt: "Image preview",
   previewSize: "md",
   disabled: false,
+  initialUrl: undefined,
 });
 
 const emit = defineEmits<{
@@ -102,6 +104,11 @@ const {
   handleUrlChange,
 } = useImageUpload();
 
+// Seed the preview from the prop if no new file has been chosen yet
+if (props.initialUrl) {
+  imagePreview.value = props.initialUrl;
+}
+
 const previewSizeClass = props.previewSize === "sm" ? "w-20 h-20" : "w-24 h-24";
 
 // Emit the selected file when it changes

From c259a8b85209222d2d7c3b8ced834b180615d5d7 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:12:18 +0000
Subject: [PATCH 27/39] feat: enhance tab management in CompanyView component
 with dynamic routing

---
 .../views/Dashboard/Companies/CompanyView.vue   | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Dashboard/Companies/CompanyView.vue b/frontend/src/views/Dashboard/Companies/CompanyView.vue
index 5403430a..e782740e 100644
--- a/frontend/src/views/Dashboard/Companies/CompanyView.vue
+++ b/frontend/src/views/Dashboard/Companies/CompanyView.vue
@@ -101,8 +101,8 @@ import { withCurrentParticipation } from "@/lib/utils";
 import { useEventStore } from "@/stores/event";
 
 import { useQuery, useQueryCache } from "@pinia/colada";
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import Info from "./Info/Info.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
 import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
@@ -115,8 +115,19 @@ import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.vue";
 import AccordionContent from "@/components/ui/accordion/AccordionContent.vue";
 
 const route = useRoute();
+const router = useRouter();
 const queryCache = useQueryCache();
-const activeTab = ref("info");
+
+const validTabs = ["info", "tasks"] as const;
+type TabValue = (typeof validTabs)[number];
+const activeTab = ref<TabValue>(
+  validTabs.includes(route.query.tab as TabValue)
+    ? (route.query.tab as TabValue)
+    : "info",
+);
+watch(activeTab, (tab) => {
+  router.replace({ query: { ...route.query, tab } });
+});
 
 const companyId = route.params.companyId;
 const { data: company } = useQuery({

From 7ef8b884ca4507942d078c9461d73446a04a957e Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:13:57 +0000
Subject: [PATCH 28/39] feat: add public image upload functionality for
 companies and speakers with new mutations

---
 frontend/src/composables/useTasksSaving.ts |  5 ++
 frontend/src/dto/tasks.ts                  | 24 +++++++---
 frontend/src/mutations/companies.ts        | 28 +++++++++++-
 frontend/src/mutations/speakers.ts         | 53 +++++++++++++++++++++-
 4 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/composables/useTasksSaving.ts

diff --git a/frontend/src/composables/useTasksSaving.ts b/frontend/src/composables/useTasksSaving.ts
new file mode 100644
index 00000000..088a556a
--- /dev/null
+++ b/frontend/src/composables/useTasksSaving.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from "vue";
+
+/** Injection key used by Tasks.vue to provide the isSaving state to child task components. */
+export const TASKS_SAVING_KEY: InjectionKey<Ref<boolean>> =
+  Symbol("tasksSaving");
diff --git a/frontend/src/dto/tasks.ts b/frontend/src/dto/tasks.ts
index 4b1ed1a6..830fc2e0 100644
--- a/frontend/src/dto/tasks.ts
+++ b/frontend/src/dto/tasks.ts
@@ -46,6 +46,7 @@ export interface CompanyTaskContract {
   created: boolean;
   signed: boolean;
   receiptSent: boolean;
+  paid: boolean;
 }
 
 export interface CompanyTaskSessionTitles {
@@ -72,6 +73,7 @@ export interface CompanyTasks {
   sessionTitles: CompanyTaskSessionTitles;
   corlief: CompanyTaskCorlief;
   logistics: CompanyTaskLogistics;
+  po: string;
 }
 
 // ============================================================
@@ -81,7 +83,7 @@ export interface CompanyTasks {
 export interface SpeakerTaskConfirmation {
   phone: string;
   linkedin: string;
-  wantsLinkedinTag: boolean;
+  wantsLinkedinTag: string; // "not_responded" | "yes" | "no"
   observations: string;
 }
 
@@ -107,6 +109,7 @@ export interface SpeakerTaskFlightRefund {
 }
 
 export interface SpeakerTaskFlights {
+  needsFlights: string; // "not_responded" | "yes" | "no"
   requested: boolean;
   arrival: SpeakerTaskFlightLeg;
   departure: SpeakerTaskFlightLeg;
@@ -115,9 +118,9 @@ export interface SpeakerTaskFlights {
 }
 
 export interface SpeakerTaskCoverage {
-  video: boolean;
-  streaming: boolean;
-  photo: boolean;
+  video: string; // "not_responded" | "yes" | "no"
+  streaming: string; // "not_responded" | "yes" | "no"
+  photo: string; // "not_responded" | "yes" | "no"
 }
 
 export interface SpeakerTaskMaterials {
@@ -130,6 +133,7 @@ export interface SpeakerTaskMaterials {
 }
 
 export interface SpeakerTaskHotel {
+  needsHotel: string; // "not_responded" | "yes" | "no"
   requested: boolean;
   hotelName: string;
   roomType: string;
@@ -167,6 +171,7 @@ export function emptyCompanyTasks(): CompanyTasks {
       created: false,
       signed: false,
       receiptSent: false,
+      paid: false,
     },
     sessionTitles: { presentationTitle: "", workshopTitle: "" },
     corlief: { preNotice: false, scheduled: false, reserved: false },
@@ -175,6 +180,7 @@ export function emptyCompanyTasks(): CompanyTasks {
       carStatus: "not_responded",
       licensePlate: "",
     },
+    po: "",
   };
 }
 
@@ -183,19 +189,24 @@ export function emptySpeakerTasks(): SpeakerTasks {
     confirmation: {
       phone: "",
       linkedin: "",
-      wantsLinkedinTag: false,
+      wantsLinkedinTag: "not_responded",
       observations: "",
     },
     logos: { received: false, needsReviewing: false },
     askedForInfo: false,
     flights: {
+      needsFlights: "not_responded",
       requested: false,
       arrival: { airport: "", flightNumber: "", date: null, time: "" },
       departure: { airport: "", flightNumber: "", date: null, time: "" },
       details: { price: "", status: "pending", link: "", bookingRef: "" },
       refund: { amount: "", method: "", infoNeeded: "", status: "not_started" },
     },
-    coverage: { video: false, streaming: false, photo: false },
+    coverage: {
+      video: "not_responded",
+      streaming: "not_responded",
+      photo: "not_responded",
+    },
     materials: {
       requested: false,
       talkTitle: "",
@@ -205,6 +216,7 @@ export function emptySpeakerTasks(): SpeakerTasks {
       testDone: false,
     },
     hotel: {
+      needsHotel: "not_responded",
       requested: false,
       hotelName: "",
       roomType: "",
diff --git a/frontend/src/mutations/companies.ts b/frontend/src/mutations/companies.ts
index c8ba3087..37c61023 100644
--- a/frontend/src/mutations/companies.ts
+++ b/frontend/src/mutations/companies.ts
@@ -7,6 +7,7 @@ import {
   createCompanyParticipation,
   postThread,
   uploadCompanyInternalImage,
+  uploadCompanyPublicImage,
   updateRepresentativeOrder,
   updateCompanyTasks,
 } from "@/api/companies";
@@ -330,6 +331,30 @@ export const useCompanyImageUploadMutation = defineMutation(() => {
   };
 });
 
+export const useCompanyPublicImageUploadMutation = defineMutation(() => {
+  const companyId = ref<string>();
+  const imageData = ref<FormData>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: () =>
+      uploadCompanyPublicImage(companyId.value!, imageData.value!),
+    onSettled: () => {
+      if (companyId.value) {
+        queryCache.invalidateQueries({ key: ["company", companyId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["companies"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    companyId,
+    imageData,
+  };
+});
+
 export const useUpdateRepresentativeOrderMutation = defineMutation(() => {
   const companyId = ref<string>();
   const representativeIds = ref<string[]>();
@@ -358,7 +383,7 @@ export const useCompanyTasksMutation = defineMutation(() => {
   const companyId = ref<string>();
   const queryCache = useQueryCache();
 
-  const { mutate, ...mutation } = useMutation({
+  const { mutate, mutateAsync, ...mutation } = useMutation({
     mutation: (tasks: CompanyTasks) =>
       updateCompanyTasks(companyId.value!, tasks),
     onSettled: () => {
@@ -371,6 +396,7 @@ export const useCompanyTasksMutation = defineMutation(() => {
 
   return {
     mutate,
+    mutateAsync,
     ...mutation,
     companyId,
   };
diff --git a/frontend/src/mutations/speakers.ts b/frontend/src/mutations/speakers.ts
index a123efb2..bbee1fa4 100644
--- a/frontend/src/mutations/speakers.ts
+++ b/frontend/src/mutations/speakers.ts
@@ -5,6 +5,8 @@ import {
   createSpeakerParticipation,
   postSpeakerThread,
   uploadSpeakerInternalImage,
+  uploadSpeakerPublicImage,
+  uploadSpeakerCompanyImage,
   updateSpeakerParticipationStatus,
   updateSpeakerTasks,
 } from "@/api/speakers";
@@ -262,11 +264,59 @@ export const useSpeakerImageUploadMutation = defineMutation(() => {
   };
 });
 
-export const useSpeakerTasksMutation = defineMutation(() => {
+export const useSpeakerPublicImageUploadMutation = defineMutation(() => {
   const speakerId = ref<string>();
+  const imageData = ref<FormData>();
   const queryCache = useQueryCache();
 
   const { mutate, ...mutation } = useMutation({
+    mutation: () =>
+      uploadSpeakerPublicImage(speakerId.value!, imageData.value!),
+    onSettled: () => {
+      if (speakerId.value) {
+        queryCache.invalidateQueries({ key: ["speaker", speakerId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["speakers"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    speakerId,
+    imageData,
+  };
+});
+
+export const useSpeakerCompanyImageUploadMutation = defineMutation(() => {
+  const speakerId = ref<string>();
+  const imageData = ref<FormData>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: () =>
+      uploadSpeakerCompanyImage(speakerId.value!, imageData.value!),
+    onSettled: () => {
+      if (speakerId.value) {
+        queryCache.invalidateQueries({ key: ["speaker", speakerId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["speakers"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    speakerId,
+    imageData,
+  };
+});
+
+export const useSpeakerTasksMutation = defineMutation(() => {
+  const speakerId = ref<string>();
+  const queryCache = useQueryCache();
+
+  const { mutate, mutateAsync, ...mutation } = useMutation({
     mutation: (tasks: SpeakerTasks) =>
       updateSpeakerTasks(speakerId.value!, tasks),
     onSettled: () => {
@@ -279,6 +329,7 @@ export const useSpeakerTasksMutation = defineMutation(() => {
 
   return {
     mutate,
+    mutateAsync,
     ...mutation,
     speakerId,
   };

From f08adee5c57742208ccc388fa272d976afc03304 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:14:42 +0000
Subject: [PATCH 29/39] feat: add PO number input and update handling in
 TaskBillingLogos component

---
 frontend/src/components/tasks/TaskBillingLogos.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
index 320dab4b..b86d8b3e 100644
--- a/frontend/src/components/tasks/TaskBillingLogos.vue
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -55,7 +55,6 @@
               {{ billingInfo?.tin }}
             </p>
           </div>
-
           <!-- Billing Form (for editing) -->
           <div v-else-if="isEditingBilling" class="border rounded-md p-3">
             <BillingForm
@@ -75,6 +74,12 @@
           />
         </div>
 
+        <!-- PO Number -->
+        <div class="space-y-1">
+          <Label class="text-sm font-medium">Purchase Order (PO)</Label>
+          <Input v-model="poNumber" placeholder="PO number" />
+        </div>
+
         <!-- Separator -->
         <Separator />
       </template>
@@ -118,6 +123,7 @@ import { ref, computed, watch } from "vue";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Separator } from "@/components/ui/separator";
+import { Input } from "@/components/ui/input";
 import {
   Tooltip,
   TooltipContent,
@@ -153,6 +159,7 @@ const emit = defineEmits<{
   billingUpdated: [];
   "update:logos": [value: TaskLogos];
   "update:askedForInfo": [value: boolean];
+  "update:po": [value: string];
 }>();
 
 // Billing info
@@ -208,6 +215,7 @@ const savedAsked =
 const hasAskedForBillingInfo = ref(savedAsked ?? false);
 const logosReceived = ref(savedLogos?.received ?? false);
 const logosNeedReviewing = ref(savedLogos?.needsReviewing ?? false);
+const poNumber = ref(props.companyTasks?.po ?? "");
 
 watch(hasAskedForBillingInfo, (v) => {
   emit("update:askedForInfo", v);
@@ -220,6 +228,10 @@ watch([logosReceived, logosNeedReviewing], () => {
   });
 });
 
+watch(poNumber, (v) => {
+  emit("update:po", v);
+});
+
 // Completion state
 const isComplete = computed(() => {
   if (props.entityType === "company") {

From e62068ff0cc40c9348702bfc9f686bd2f7a50d1a Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:15:02 +0000
Subject: [PATCH 30/39] feat: add 'Company has paid' checkbox and update
 contract state handling in TaskContract component

---
 .../src/components/tasks/TaskContract.vue     | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/tasks/TaskContract.vue b/frontend/src/components/tasks/TaskContract.vue
index e563bb24..04ce8262 100644
--- a/frontend/src/components/tasks/TaskContract.vue
+++ b/frontend/src/components/tasks/TaskContract.vue
@@ -30,6 +30,11 @@
         <Label for="receipt-sent" class="text-sm">Receipt sent</Label>
       </div>
 
+      <div class="flex items-center space-x-2">
+        <Checkbox id="company-paid" v-model="hasPaid" />
+        <Label for="company-paid" class="text-sm">Company has paid</Label>
+      </div>
+
       <ContractDownload
         v-if="entityType === 'company'"
         :company-id="props.entityId"
@@ -67,15 +72,20 @@ const hasCreatedContract = ref(props.companyTasks?.contract?.created ?? false);
 const hasSentContract = ref(props.companyTasks?.contract?.sent ?? false);
 const hasSigned = ref(props.companyTasks?.contract?.signed ?? false);
 const hasReceiptSent = ref(props.companyTasks?.contract?.receiptSent ?? false);
+const hasPaid = ref(props.companyTasks?.contract?.paid ?? false);
 
-watch([hasCreatedContract, hasSentContract, hasSigned, hasReceiptSent], () => {
-  emit("update:contract", {
-    created: hasCreatedContract.value,
-    sent: hasSentContract.value,
-    signed: hasSigned.value,
-    receiptSent: hasReceiptSent.value,
-  });
-});
+watch(
+  [hasCreatedContract, hasSentContract, hasSigned, hasReceiptSent, hasPaid],
+  () => {
+    emit("update:contract", {
+      created: hasCreatedContract.value,
+      sent: hasSentContract.value,
+      signed: hasSigned.value,
+      receiptSent: hasReceiptSent.value,
+      paid: hasPaid.value,
+    });
+  },
+);
 
 const isComplete = computed(() => {
   return (

From f9c7734b86b4eb428af0a67901c0e5984d094568 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:15:24 +0000
Subject: [PATCH 31/39] feat: enhance speaker contact details management with
 editable fields and save functionality

---
 .../src/components/tasks/TaskConfirmation.vue | 195 ++++++++++--------
 1 file changed, 110 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
index 7c51ad36..2d9b41af 100644
--- a/frontend/src/components/tasks/TaskConfirmation.vue
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -31,8 +31,8 @@
         </Select>
       </div>
 
-      <!-- Confirmation Date -->
-      <div class="space-y-2">
+      <!-- Confirmation Date (companies only) -->
+      <div v-if="entityType === 'company'" class="space-y-2">
         <Label for="confirmed-date">Confirmation Date</Label>
         <DatePicker
           v-model="confirmedDate"
@@ -46,30 +46,48 @@
 
     <!-- Speaker-only fields -->
     <template v-if="entityType === 'speaker'">
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-        <div class="space-y-2">
-          <Label for="speaker-phone">Phone</Label>
-          <Input
-            id="speaker-phone"
-            v-model="speakerPhone"
-            placeholder="Phone number"
-          />
-        </div>
-
-        <div class="space-y-2">
-          <Label for="linkedin-url">LinkedIn</Label>
-          <Input
-            id="linkedin-url"
-            v-model="linkedinUrl"
-            placeholder="LinkedIn profile URL"
-          />
-          <div class="flex items-center space-x-2">
-            <Checkbox id="wants-linkedin-tag" v-model="wantsLinkedinTag" />
-            <Label for="wants-linkedin-tag" class="text-sm">
-              Wants to be tagged
-            </Label>
+      <!-- Phone & LinkedIn editable, saved to contact -->
+      <div class="mt-4 space-y-2">
+        <span class="text-sm font-medium">Contact Details</span>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div class="space-y-1">
+            <Label for="speaker-phone" class="text-xs">Phone</Label>
+            <Input
+              id="speaker-phone"
+              v-model="speakerPhone"
+              placeholder="+351 900 000 000"
+              @blur="saveContact"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="speaker-linkedin" class="text-xs">LinkedIn</Label>
+            <Input
+              id="speaker-linkedin"
+              v-model="speakerLinkedin"
+              placeholder="username or profile URL"
+              @blur="saveContact"
+            />
           </div>
         </div>
+        <p v-if="isSavingContact" class="text-xs text-muted-foreground">
+          Saving…
+        </p>
+      </div>
+
+      <div class="space-y-1 mt-4">
+        <Label class="text-sm font-medium"
+          >Wants to be tagged on LinkedIn</Label
+        >
+        <Select v-model="wantsLinkedinTag">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue placeholder="Select…" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="not_responded">Didn't respond</SelectItem>
+            <SelectItem value="yes">Yes</SelectItem>
+            <SelectItem value="no">No</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
       <div class="space-y-2 mt-4">
@@ -92,6 +110,7 @@ import { getAllEvents } from "@/api/events";
 import { getItemById } from "@/api/items";
 import type { Item } from "@/dto/item";
 import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -100,9 +119,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { DatePicker } from "@/components/ui/date-picker";
-import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Checkbox } from "@/components/ui/checkbox";
 import type { CompanyParticipation } from "@/dto/companies";
 import type { SpeakerParticipation } from "@/dto/speakers";
 import type { Contact } from "@/dto/contacts";
@@ -118,8 +135,8 @@ import {
   useCompanyParticipationPackageMutation,
   useCompanyParticipationMutation,
 } from "@/mutations/companies";
-import { useSpeakerParticipationMutation } from "@/mutations/speakers";
 import { usePackagesQuery } from "@/mutations/packages";
+import { updateContact } from "@/api/contacts";
 import useToast from "@/lib/toast";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
 import { CalendarCheck } from "lucide-vue-next";
@@ -258,30 +275,20 @@ const confirmedDate = ref<Date | null>(
 );
 const isDateUpdating = ref(false);
 
-// Participation mutations for updating confirmed date
+// Participation mutation for updating confirmed date (companies only)
 const companyParticipationMutation = useCompanyParticipationMutation();
 companyParticipationMutation.companyId.value = props.entityId;
 
-const speakerParticipationMutation = useSpeakerParticipationMutation();
-speakerParticipationMutation.speakerId.value = props.entityId;
-
 const onConfirmedDateChange = async (newValue: Date | null) => {
   if (!newValue) return;
   try {
     isDateUpdating.value = true;
     const isoDate = newValue.toISOString();
-
-    if (props.entityType === "company") {
-      companyParticipationMutation.data.value = {
-        ...props.participation,
-        confirmed: isoDate,
-      };
-      await companyParticipationMutation.mutateAsync();
-    } else {
-      // Speakers don't have a confirmed field in the API,
-      // but we store the date locally
-    }
-
+    companyParticipationMutation.data.value = {
+      ...props.participation,
+      confirmed: isoDate,
+    };
+    await companyParticipationMutation.mutateAsync();
     toast.success({ title: "Confirmation date updated" });
   } catch (err) {
     console.error("Failed to update confirmation date:", err);
@@ -333,61 +340,79 @@ const isComplete = computed(() => {
   if (props.entityType === "company") {
     return !!selectedPackageId.value && !!confirmedDate.value;
   }
-  // For speakers, just the date is enough
-  return !!confirmedDate.value;
+  // For speakers, no date needed
+  return true;
 });
 
-// Speaker-only fields (synced from saved tasks first, fallback to contact)
-const speakerPhone = ref<string>(
-  props.speakerTasks?.confirmation?.phone ||
-    props.contact?.phones?.[0]?.phone ||
-    "",
-);
+// Speaker-only fields
 const speakerObservations = ref<string>(
   props.speakerTasks?.confirmation?.observations ?? "",
 );
-const linkedinUrl = ref<string>(
-  props.speakerTasks?.confirmation?.linkedin ||
-    props.contact?.socials?.linkedin ||
-    "",
-);
-const wantsLinkedinTag = ref<boolean>(
-  props.speakerTasks?.confirmation?.wantsLinkedinTag ?? false,
+const wantsLinkedinTag = ref<string>(
+  props.speakerTasks?.confirmation?.wantsLinkedinTag ?? "not_responded",
 );
 
-// Keep phone and linkedin in sync when contact prop changes (only if empty)
-watch(
-  () => props.contact?.phones?.[0]?.phone,
-  (newVal) => {
-    if (newVal !== undefined && !speakerPhone.value) {
-      speakerPhone.value = newVal;
-    }
-  },
-);
+// Speaker contact detail shortcuts — editable, saved back to contact
+const speakerPhone = ref<string>(props.contact?.phones?.[0]?.phone ?? "");
+const speakerLinkedin = ref<string>(props.contact?.socials?.linkedin ?? "");
+const isSavingContact = ref(false);
 
+// Sync if contact prop changes externally
 watch(
-  () => props.contact?.socials?.linkedin,
-  (newVal) => {
-    if (newVal !== undefined && !linkedinUrl.value) {
-      linkedinUrl.value = newVal;
-    }
+  () => props.contact,
+  (c) => {
+    speakerPhone.value = c?.phones?.[0]?.phone ?? "";
+    speakerLinkedin.value = c?.socials?.linkedin ?? "";
   },
 );
 
+const saveContact = async () => {
+  if (!props.contact?.id) return;
+  // Only save if something actually changed
+  const origPhone = props.contact?.phones?.[0]?.phone ?? "";
+  const origLinkedin = props.contact?.socials?.linkedin ?? "";
+  if (
+    speakerPhone.value === origPhone &&
+    speakerLinkedin.value === origLinkedin
+  )
+    return;
+
+  isSavingContact.value = true;
+  try {
+    // Build updated contact data, preserving all other fields
+    const phones = speakerPhone.value.trim()
+      ? [{ phone: speakerPhone.value.trim() }]
+      : (props.contact.phones ?? []);
+    await updateContact(String(props.contact.id), {
+      gender: props.contact.gender,
+      language: props.contact.language,
+      mails: props.contact.mails ?? [],
+      phones,
+      socials: {
+        ...props.contact.socials,
+        linkedin: speakerLinkedin.value.trim() || undefined,
+      },
+    });
+    toast.success({ title: "Contact details saved" });
+  } catch (err) {
+    console.error("Failed to save contact:", err);
+    toast.error({ title: "Failed to save contact details" });
+  } finally {
+    isSavingContact.value = false;
+  }
+};
+
 // Emit speaker confirmation changes
-watch(
-  [speakerPhone, linkedinUrl, wantsLinkedinTag, speakerObservations],
-  () => {
-    if (props.entityType === "speaker") {
-      emit("update:speakerConfirmation", {
-        phone: speakerPhone.value,
-        linkedin: linkedinUrl.value,
-        wantsLinkedinTag: wantsLinkedinTag.value,
-        observations: speakerObservations.value,
-      });
-    }
-  },
-);
+watch([wantsLinkedinTag, speakerObservations], () => {
+  if (props.entityType === "speaker") {
+    emit("update:speakerConfirmation", {
+      phone: speakerPhone.value,
+      linkedin: speakerLinkedin.value,
+      wantsLinkedinTag: wantsLinkedinTag.value,
+      observations: speakerObservations.value,
+    });
+  }
+});
 
 defineExpose({
   isComplete,

From 7a24f98f305f0df904f4fa0801ec2d34614d2470 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:16:35 +0000
Subject: [PATCH 32/39] feat: replace checkboxes with select inputs for media
 coverage

---
 .../src/components/tasks/TaskCoverage.vue     | 87 ++++++++++++-------
 1 file changed, 58 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/tasks/TaskCoverage.vue b/frontend/src/components/tasks/TaskCoverage.vue
index a578ac27..9c9d8e66 100644
--- a/frontend/src/components/tasks/TaskCoverage.vue
+++ b/frontend/src/components/tasks/TaskCoverage.vue
@@ -11,17 +11,33 @@
     <div class="space-y-4">
       <div class="space-y-3">
         <span class="text-sm font-medium">Video</span>
-
-        <div class="flex items-center space-x-2">
-          <Checkbox id="video-coverage" v-model="videoCoverage" />
-          <Label for="video-coverage" class="text-sm">
-            Video coverage confirmed
-          </Label>
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <Checkbox id="streaming" v-model="streaming" />
-          <Label for="streaming" class="text-sm"> Streaming confirmed </Label>
+        <div class="flex flex-wrap gap-4">
+          <div class="space-y-1">
+            <Label class="text-xs">Video Coverage</Label>
+            <Select v-model="videoCoverage">
+              <SelectTrigger class="w-[160px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="not_responded">Didn't respond</SelectItem>
+                <SelectItem value="yes">Yes</SelectItem>
+                <SelectItem value="no">No</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="space-y-1">
+            <Label class="text-xs">Streaming</Label>
+            <Select v-model="streaming">
+              <SelectTrigger class="w-[160px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="not_responded">Didn't respond</SelectItem>
+                <SelectItem value="yes">Yes</SelectItem>
+                <SelectItem value="no">No</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </div>
 
@@ -29,12 +45,18 @@
 
       <div class="space-y-3">
         <span class="text-sm font-medium">Photo</span>
-
-        <div class="flex items-center space-x-2">
-          <Checkbox id="photo-coverage" v-model="photoCoverage" />
-          <Label for="photo-coverage" class="text-sm">
-            Photo coverage confirmed
-          </Label>
+        <div class="space-y-1">
+          <Label class="text-xs">Photo Coverage</Label>
+          <Select v-model="photoCoverage">
+            <SelectTrigger class="w-[160px]">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="not_responded">Didn't respond</SelectItem>
+              <SelectItem value="yes">Yes</SelectItem>
+              <SelectItem value="no">No</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     </div>
@@ -44,9 +66,15 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import TaskTimelineItem from "./TaskTimelineItem.vue";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Camera } from "lucide-vue-next";
 import type { SpeakerTasks, SpeakerTaskCoverage } from "@/dto/tasks";
 
@@ -57,7 +85,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  stepNumber: 5,
+  stepNumber: 4,
   speakerTasks: undefined,
 });
 
@@ -65,15 +93,16 @@ const emit = defineEmits<{
   "update:coverage": [value: SpeakerTaskCoverage];
 }>();
 
-// Coverage states
-const videoCoverage = ref<boolean>(
-  props.speakerTasks?.coverage?.video ?? false,
+type CoverageValue = "not_responded" | "yes" | "no";
+
+const videoCoverage = ref<CoverageValue>(
+  (props.speakerTasks?.coverage?.video as CoverageValue) ?? "not_responded",
 );
-const streaming = ref<boolean>(
-  props.speakerTasks?.coverage?.streaming ?? false,
+const streaming = ref<CoverageValue>(
+  (props.speakerTasks?.coverage?.streaming as CoverageValue) ?? "not_responded",
 );
-const photoCoverage = ref<boolean>(
-  props.speakerTasks?.coverage?.photo ?? false,
+const photoCoverage = ref<CoverageValue>(
+  (props.speakerTasks?.coverage?.photo as CoverageValue) ?? "not_responded",
 );
 
 watch([videoCoverage, streaming, photoCoverage], () => {
@@ -86,9 +115,9 @@ watch([videoCoverage, streaming, photoCoverage], () => {
 
 const isComplete = computed(() => {
   return (
-    videoCoverage.value === true &&
-    streaming.value === true &&
-    photoCoverage.value === true
+    videoCoverage.value !== "not_responded" &&
+    streaming.value !== "not_responded" &&
+    photoCoverage.value !== "not_responded"
   );
 });
 

From 7665fca16b1b82d0fa9b07d78b1bc3058de76234 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:17:06 +0000
Subject: [PATCH 33/39] feat: add needs flights selector and conditional flight
 details display in TaskFlights component

---
 frontend/src/components/tasks/TaskFlights.vue | 359 ++++++++++--------
 1 file changed, 201 insertions(+), 158 deletions(-)

diff --git a/frontend/src/components/tasks/TaskFlights.vue b/frontend/src/components/tasks/TaskFlights.vue
index 8b6728ba..9b4baab6 100644
--- a/frontend/src/components/tasks/TaskFlights.vue
+++ b/frontend/src/components/tasks/TaskFlights.vue
@@ -17,177 +17,209 @@
     </template>
 
     <div class="space-y-4">
-      <!-- Arrival -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Arrival</span>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <div class="space-y-1">
-            <Label for="arrival-airport" class="text-xs"
-              >Airport (origin)</Label
-            >
-            <Input
-              id="arrival-airport"
-              v-model="arrivalAirport"
-              placeholder="e.g. JFK"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="arrival-flight" class="text-xs">Flight Nº</Label>
-            <Input
-              id="arrival-flight"
-              v-model="arrivalFlightNumber"
-              placeholder="e.g. TP1234"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="arrival-date" class="text-xs">Date (arrival LIS)</Label>
-            <DatePicker v-model="arrivalDate" placeholder="Pick a date" />
-          </div>
-          <div class="space-y-1">
-            <Label for="arrival-time" class="text-xs">Time (arrival LIS)</Label>
-            <Input
-              id="arrival-time"
-              v-model="arrivalTime"
-              placeholder="e.g. 14:30"
-            />
-          </div>
-        </div>
+      <!-- Needs flights selector -->
+      <div class="space-y-2">
+        <Label class="text-sm font-medium"
+          >Does the speaker need flights?</Label
+        >
+        <Select v-model="needsFlights">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="not_responded">Didn't respond</SelectItem>
+            <SelectItem value="yes">Yes</SelectItem>
+            <SelectItem value="no">No</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
-      <Separator />
+      <!-- Flight details (only when needs flights = yes) -->
+      <template v-if="needsFlights === 'yes'">
+        <Separator />
 
-      <!-- Departure -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Departure</span>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <div class="space-y-1">
-            <Label for="departure-airport" class="text-xs"
-              >Airport (destination)</Label
-            >
-            <Input
-              id="departure-airport"
-              v-model="departureAirport"
-              placeholder="e.g. JFK"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="departure-flight" class="text-xs">Flight Nº</Label>
-            <Input
-              id="departure-flight"
-              v-model="departureFlightNumber"
-              placeholder="e.g. TP1235"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="departure-date" class="text-xs">Date (from LIS)</Label>
-            <DatePicker v-model="departureDate" placeholder="Pick a date" />
-          </div>
-          <div class="space-y-1">
-            <Label for="departure-time" class="text-xs">Time (from LIS)</Label>
-            <Input
-              id="departure-time"
-              v-model="departureTime"
-              placeholder="e.g. 10:00"
-            />
+        <!-- Arrival -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Arrival</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="arrival-airport" class="text-xs"
+                >Airport (origin)</Label
+              >
+              <Input
+                id="arrival-airport"
+                v-model="arrivalAirport"
+                placeholder="e.g. JFK"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="arrival-flight" class="text-xs">Flight Nº</Label>
+              <Input
+                id="arrival-flight"
+                v-model="arrivalFlightNumber"
+                placeholder="e.g. TP1234"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="arrival-date" class="text-xs"
+                >Date (arrival LIS)</Label
+              >
+              <DatePicker v-model="arrivalDate" placeholder="Pick a date" />
+            </div>
+            <div class="space-y-1">
+              <Label for="arrival-time" class="text-xs"
+                >Time (arrival LIS)</Label
+              >
+              <Input
+                id="arrival-time"
+                v-model="arrivalTime"
+                placeholder="e.g. 14:30"
+              />
+            </div>
           </div>
         </div>
-      </div>
 
-      <Separator />
+        <Separator />
 
-      <!-- Details -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Details</span>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <div class="space-y-1">
-            <Label for="flight-price" class="text-xs">Price</Label>
-            <Input
-              id="flight-price"
-              v-model="flightPrice"
-              placeholder="e.g. 350.00"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="flight-status" class="text-xs">Status</Label>
-            <Select v-model="flightStatus">
-              <SelectTrigger>
-                <SelectValue placeholder="Select status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="pending">Pending</SelectItem>
-                <SelectItem value="received">Info Received</SelectItem>
-                <SelectItem value="approved">Approved</SelectItem>
-                <SelectItem value="bought">Bought</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="space-y-1">
-            <Label for="flight-link" class="text-xs">Link (if we buy)</Label>
-            <Input
-              id="flight-link"
-              v-model="flightLink"
-              placeholder="Booking link"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="flight-booking-ref" class="text-xs">Booking Ref</Label>
-            <Input
-              id="flight-booking-ref"
-              v-model="flightBookingRef"
-              placeholder="Reference code"
-            />
+        <!-- Departure -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Departure</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="departure-airport" class="text-xs"
+                >Airport (destination)</Label
+              >
+              <Input
+                id="departure-airport"
+                v-model="departureAirport"
+                placeholder="e.g. JFK"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="departure-flight" class="text-xs">Flight Nº</Label>
+              <Input
+                id="departure-flight"
+                v-model="departureFlightNumber"
+                placeholder="e.g. TP1235"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="departure-date" class="text-xs"
+                >Date (from LIS)</Label
+              >
+              <DatePicker v-model="departureDate" placeholder="Pick a date" />
+            </div>
+            <div class="space-y-1">
+              <Label for="departure-time" class="text-xs"
+                >Time (from LIS)</Label
+              >
+              <Input
+                id="departure-time"
+                v-model="departureTime"
+                placeholder="e.g. 10:00"
+              />
+            </div>
           </div>
         </div>
-      </div>
 
-      <Separator />
+        <Separator />
 
-      <!-- Refund -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Refund</span>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <div class="space-y-1">
-            <Label for="refund-amount" class="text-xs">Amount (EUR)</Label>
-            <Input
-              id="refund-amount"
-              v-model="refundAmount"
-              placeholder="e.g. 350.00"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="refund-method" class="text-xs">Method</Label>
-            <Input
-              id="refund-method"
-              v-model="refundMethod"
-              placeholder="e.g. Bank transfer"
-            />
+        <!-- Details -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Details</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="flight-price" class="text-xs">Price</Label>
+              <Input
+                id="flight-price"
+                v-model="flightPrice"
+                placeholder="e.g. 350.00"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="flight-status" class="text-xs">Status</Label>
+              <Select v-model="flightStatus">
+                <SelectTrigger>
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="pending">Pending</SelectItem>
+                  <SelectItem value="received">Info Received</SelectItem>
+                  <SelectItem value="approved">Approved</SelectItem>
+                  <SelectItem value="bought">Bought</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div class="space-y-1">
+              <Label for="flight-link" class="text-xs">Link (if we buy)</Label>
+              <Input
+                id="flight-link"
+                v-model="flightLink"
+                placeholder="Booking link"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="flight-booking-ref" class="text-xs"
+                >Booking Ref</Label
+              >
+              <Input
+                id="flight-booking-ref"
+                v-model="flightBookingRef"
+                placeholder="Reference code"
+              />
+            </div>
           </div>
-          <div class="space-y-1">
-            <Label for="refund-info" class="text-xs">Info needed</Label>
-            <Input
-              id="refund-info"
-              v-model="refundInfoNeeded"
-              placeholder="e.g. IBAN"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="refund-status" class="text-xs">Status</Label>
-            <Select v-model="refundStatus">
-              <SelectTrigger>
-                <SelectValue placeholder="Select status" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="not_started">Not started</SelectItem>
-                <SelectItem value="receipt_requested"
-                  >Receipt requested</SelectItem
-                >
-                <SelectItem value="info_requested">Info requested</SelectItem>
-                <SelectItem value="done">Done</SelectItem>
-              </SelectContent>
-            </Select>
+        </div>
+
+        <Separator />
+
+        <!-- Refund -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Refund</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="refund-amount" class="text-xs">Amount (EUR)</Label>
+              <Input
+                id="refund-amount"
+                v-model="refundAmount"
+                placeholder="e.g. 350.00"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="refund-method" class="text-xs">Method</Label>
+              <Input
+                id="refund-method"
+                v-model="refundMethod"
+                placeholder="e.g. Bank transfer"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="refund-info" class="text-xs">Info needed</Label>
+              <Input
+                id="refund-info"
+                v-model="refundInfoNeeded"
+                placeholder="e.g. IBAN"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="refund-status" class="text-xs">Status</Label>
+              <Select v-model="refundStatus">
+                <SelectTrigger>
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="not_started">Not started</SelectItem>
+                  <SelectItem value="receipt_requested"
+                    >Receipt requested</SelectItem
+                  >
+                  <SelectItem value="info_requested">Info requested</SelectItem>
+                  <SelectItem value="done">Done</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
     </div>
   </TaskTimelineItem>
 </template>
@@ -239,6 +271,13 @@ const hasRequestedFlights = ref<boolean>(
   props.speakerTasks?.flights?.requested ?? false,
 );
 
+// Needs flights selector
+type NeedsFlights = "not_responded" | "yes" | "no";
+const needsFlights = ref<NeedsFlights>(
+  (props.speakerTasks?.flights?.needsFlights as NeedsFlights) ??
+    "not_responded",
+);
+
 // Arrival
 const arrivalAirport = ref<string>(
   props.speakerTasks?.flights?.arrival?.airport ?? "",
@@ -297,6 +336,7 @@ const refundStatus = ref<string>(
 
 function emitFlights() {
   emit("update:flights", {
+    needsFlights: needsFlights.value,
     requested: hasRequestedFlights.value,
     arrival: {
       airport: arrivalAirport.value,
@@ -328,6 +368,7 @@ function emitFlights() {
 watch(
   [
     hasRequestedFlights,
+    needsFlights,
     arrivalAirport,
     arrivalFlightNumber,
     arrivalDate,
@@ -349,7 +390,9 @@ watch(
 );
 
 const isComplete = computed(() => {
-  return flightStatus.value === "bought";
+  if (needsFlights.value === "no") return true;
+  if (needsFlights.value === "yes") return flightStatus.value === "bought";
+  return false;
 });
 
 defineExpose({

From 3e25e15893fa732dd3d7320ad8db028ce9c78a5f Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:17:38 +0000
Subject: [PATCH 34/39] feat: add needs hotel selector and conditional display
 of hotel details in TaskHotel component

---
 frontend/src/components/tasks/TaskHotel.vue | 240 ++++++++++++--------
 1 file changed, 147 insertions(+), 93 deletions(-)

diff --git a/frontend/src/components/tasks/TaskHotel.vue b/frontend/src/components/tasks/TaskHotel.vue
index ddb27f6c..a66c3b77 100644
--- a/frontend/src/components/tasks/TaskHotel.vue
+++ b/frontend/src/components/tasks/TaskHotel.vue
@@ -18,104 +18,130 @@
     </template>
 
     <div class="space-y-4">
-      <!-- Hotel Details -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Details</span>
-        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
-          <div class="space-y-1">
-            <Label for="hotel-name" class="text-xs">Hotel Name</Label>
-            <Input
-              id="hotel-name"
-              v-model="hotelName"
-              placeholder="e.g. Hotel Marques"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="room-type" class="text-xs">Room Type</Label>
-            <Input
-              id="room-type"
-              v-model="roomType"
-              placeholder="e.g. Single, Double"
-            />
-          </div>
-          <div class="space-y-1">
-            <Label for="hotel-price" class="text-xs">Price</Label>
-            <Input
-              id="hotel-price"
-              v-model="hotelPrice"
-              placeholder="e.g. 120.00"
-            />
-          </div>
-        </div>
+      <!-- Needs hotel selector -->
+      <div class="space-y-2">
+        <Label class="text-sm font-medium"
+          >Does the speaker need a hotel?</Label
+        >
+        <Select v-model="needsHotel">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="not_responded">Didn't respond</SelectItem>
+            <SelectItem value="yes">Yes</SelectItem>
+            <SelectItem value="no">No</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
-      <Separator />
+      <!-- Hotel details (only when needs hotel = yes) -->
+      <template v-if="needsHotel === 'yes'">
+        <Separator />
 
-      <!-- Booking -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Booking</span>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <div class="space-y-1">
-            <Label for="check-in" class="text-xs">Check-In</Label>
-            <DatePicker v-model="checkInDate" placeholder="Check-in date" />
-          </div>
-          <div class="space-y-1">
-            <Label for="check-out" class="text-xs">Check-Out</Label>
-            <DatePicker v-model="checkOutDate" placeholder="Check-out date" />
-          </div>
-          <div class="space-y-1">
-            <Label for="num-nights" class="text-xs">Nº of Nights</Label>
-            <Input id="num-nights" v-model="numNights" placeholder="e.g. 3" />
-          </div>
-          <div class="space-y-1">
-            <Label for="num-guests" class="text-xs">Nº of Guests</Label>
-            <Input id="num-guests" v-model="numGuests" placeholder="e.g. 1" />
+        <!-- Hotel Details -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Details</span>
+          <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+            <div class="space-y-1">
+              <Label for="hotel-name" class="text-xs">Hotel Name</Label>
+              <Input
+                id="hotel-name"
+                v-model="hotelName"
+                placeholder="e.g. Hotel Marques"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="room-type" class="text-xs">Room Type</Label>
+              <Input
+                id="room-type"
+                v-model="roomType"
+                placeholder="e.g. Single, Double"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="hotel-price" class="text-xs">Price</Label>
+              <Input
+                id="hotel-price"
+                v-model="hotelPrice"
+                placeholder="e.g. 120.00"
+              />
+            </div>
           </div>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <div class="space-y-1">
-            <Label for="guest-names" class="text-xs">Guest Name(s)</Label>
-            <Input
-              id="guest-names"
-              v-model="guestNames"
-              placeholder="Name of guest(s)"
-            />
+        <Separator />
+
+        <!-- Booking -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Booking</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="check-in" class="text-xs">Check-In</Label>
+              <DatePicker v-model="checkInDate" placeholder="Check-in date" />
+            </div>
+            <div class="space-y-1">
+              <Label for="check-out" class="text-xs">Check-Out</Label>
+              <DatePicker v-model="checkOutDate" placeholder="Check-out date" />
+            </div>
+            <div class="space-y-1">
+              <Label class="text-xs">Nº of Nights</Label>
+              <div
+                class="flex items-center h-9 px-3 rounded-md border bg-muted text-sm text-muted-foreground"
+              >
+                {{ numNights !== null ? numNights : "—" }}
+              </div>
+            </div>
+            <div class="space-y-1">
+              <Label for="num-guests" class="text-xs">Nº of Guests</Label>
+              <Input id="num-guests" v-model="numGuests" placeholder="e.g. 1" />
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div class="space-y-1">
+              <Label for="guest-names" class="text-xs">Guest Name(s)</Label>
+              <Input
+                id="guest-names"
+                v-model="guestNames"
+                placeholder="Name of guest(s)"
+              />
+            </div>
           </div>
         </div>
-      </div>
 
-      <Separator />
+        <Separator />
 
-      <!-- Payment -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Payment</span>
-        <div class="flex items-center gap-6">
-          <div class="flex items-center space-x-2">
-            <Checkbox id="hotel-invoice" v-model="hasInvoice" />
-            <Label for="hotel-invoice" class="text-sm">Invoice</Label>
-          </div>
-          <div class="flex items-center space-x-2">
-            <Checkbox id="hotel-paid" v-model="isPaid" />
-            <Label for="hotel-paid" class="text-sm">Paid</Label>
+        <!-- Payment -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Payment</span>
+          <div class="flex items-center gap-6">
+            <div class="flex items-center space-x-2">
+              <Checkbox id="hotel-invoice" v-model="hasInvoice" />
+              <Label for="hotel-invoice" class="text-sm">Invoice</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <Checkbox id="hotel-paid" v-model="isPaid" />
+              <Label for="hotel-paid" class="text-sm">Paid</Label>
+            </div>
           </div>
         </div>
-      </div>
 
-      <Separator />
+        <Separator />
 
-      <!-- Observations & Notes -->
-      <div class="space-y-2">
-        <Label for="hotel-notes" class="text-sm font-medium">
-          Observations & Notes
-        </Label>
-        <Textarea
-          id="hotel-notes"
-          v-model="hotelNotes"
-          placeholder="Any observations or notes"
-          :rows="3"
-        />
-      </div>
+        <!-- Observations & Notes -->
+        <div class="space-y-2">
+          <Label for="hotel-notes" class="text-sm font-medium">
+            Observations & Notes
+          </Label>
+          <Textarea
+            id="hotel-notes"
+            v-model="hotelNotes"
+            placeholder="Any observations or notes"
+            :rows="3"
+          />
+        </div>
+      </template>
     </div>
   </TaskTimelineItem>
 </template>
@@ -130,6 +156,13 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
 import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Hotel } from "lucide-vue-next";
 import type { SpeakerTasks, SpeakerTaskHotel } from "@/dto/tasks";
 
@@ -164,6 +197,12 @@ const hasRequestedHotelInfo = ref<boolean>(
   props.speakerTasks?.hotel?.requested ?? false,
 );
 
+// Needs hotel selector
+type NeedsHotel = "not_responded" | "yes" | "no";
+const needsHotel = ref<NeedsHotel>(
+  (props.speakerTasks?.hotel?.needsHotel as NeedsHotel) ?? "not_responded",
+);
+
 // Hotel details
 const hotelName = ref<string>(props.speakerTasks?.hotel?.hotelName ?? "");
 const roomType = ref<string>(props.speakerTasks?.hotel?.roomType ?? "");
@@ -176,7 +215,17 @@ const checkInDate = ref<Date | null>(
 const checkOutDate = ref<Date | null>(
   parseDate(props.speakerTasks?.hotel?.checkOut),
 );
-const numNights = ref<string>(props.speakerTasks?.hotel?.numNights ?? "");
+
+// Auto-calculate number of nights from dates
+const numNights = computed<number | null>(() => {
+  if (!checkInDate.value || !checkOutDate.value) return null;
+  const msPerDay = 1000 * 60 * 60 * 24;
+  const diff = Math.round(
+    (checkOutDate.value.getTime() - checkInDate.value.getTime()) / msPerDay,
+  );
+  return diff > 0 ? diff : null;
+});
+
 const numGuests = ref<string>(props.speakerTasks?.hotel?.numGuests ?? "");
 const guestNames = ref<string>(props.speakerTasks?.hotel?.guestNames ?? "");
 
@@ -189,13 +238,14 @@ const hotelNotes = ref<string>(props.speakerTasks?.hotel?.notes ?? "");
 
 function emitHotel() {
   emit("update:hotel", {
+    needsHotel: needsHotel.value,
     requested: hasRequestedHotelInfo.value,
     hotelName: hotelName.value,
     roomType: roomType.value,
     price: hotelPrice.value,
     checkIn: checkInDate.value?.toISOString() ?? null,
     checkOut: checkOutDate.value?.toISOString() ?? null,
-    numNights: numNights.value,
+    numNights: numNights.value !== null ? String(numNights.value) : "",
     numGuests: numGuests.value,
     guestNames: guestNames.value,
     invoice: hasInvoice.value,
@@ -206,13 +256,13 @@ function emitHotel() {
 
 watch(
   [
+    needsHotel,
     hasRequestedHotelInfo,
     hotelName,
     roomType,
     hotelPrice,
     checkInDate,
     checkOutDate,
-    numNights,
     numGuests,
     guestNames,
     hasInvoice,
@@ -223,12 +273,16 @@ watch(
 );
 
 const isComplete = computed(() => {
-  return (
-    !!hotelName.value.trim() &&
-    checkInDate.value !== null &&
-    checkOutDate.value !== null &&
-    isPaid.value === true
-  );
+  if (needsHotel.value === "no") return true;
+  if (needsHotel.value === "yes") {
+    return (
+      !!hotelName.value.trim() &&
+      checkInDate.value !== null &&
+      checkOutDate.value !== null &&
+      isPaid.value === true
+    );
+  }
+  return false;
 });
 
 defineExpose({

From b12f41115c3f39bba98938120a98fa35660dcdac Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:17:54 +0000
Subject: [PATCH 35/39] feat: add image upload functionality for company and
 speaker in TaskImages component

---
 frontend/src/components/tasks/TaskImages.vue | 192 +++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskImages.vue

diff --git a/frontend/src/components/tasks/TaskImages.vue b/frontend/src/components/tasks/TaskImages.vue
new file mode 100644
index 00000000..034618c7
--- /dev/null
+++ b/frontend/src/components/tasks/TaskImages.vue
@@ -0,0 +1,192 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Images"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <ImageIcon class="w-4 h-4" />
+    </template>
+
+    <div class="space-y-6">
+      <!-- Company: public logo -->
+      <template v-if="entityType === 'company'">
+        <div class="space-y-2">
+          <span class="text-sm font-medium">Public Logo</span>
+          <p class="text-xs text-muted-foreground">
+            This image is shown publicly on the website.
+          </p>
+          <ImageUpload
+            label=""
+            input-id="company-public-image"
+            url-placeholder="https://example.com/logo.png"
+            preview-alt="Company public logo"
+            preview-size="sm"
+            :initial-url="companyPublicImgUrl"
+            :disabled="isUploading"
+            @file-selected="handleCompanyPublicFile"
+          />
+          <p
+            v-if="isUploading"
+            class="text-xs text-muted-foreground flex items-center gap-1"
+          >
+            <Loader2 class="w-3 h-3 animate-spin" /> Uploading…
+          </p>
+        </div>
+      </template>
+
+      <!-- Speaker: public photo + company logo -->
+      <template v-if="entityType === 'speaker'">
+        <div class="space-y-2">
+          <span class="text-sm font-medium">Speaker Photo</span>
+          <p class="text-xs text-muted-foreground">
+            Public photo of the speaker shown on the website.
+          </p>
+          <ImageUpload
+            label=""
+            input-id="speaker-public-image"
+            url-placeholder="https://example.com/photo.jpg"
+            preview-alt="Speaker public photo"
+            preview-size="sm"
+            :initial-url="speakerImgUrl"
+            :disabled="isSpeakerUploading"
+            @file-selected="handleSpeakerPublicFile"
+          />
+          <p
+            v-if="isSpeakerUploading"
+            class="text-xs text-muted-foreground flex items-center gap-1"
+          >
+            <Loader2 class="w-3 h-3 animate-spin" /> Uploading…
+          </p>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-2">
+          <span class="text-sm font-medium">Speaker's Company Logo</span>
+          <p class="text-xs text-muted-foreground">
+            Logo of the speaker's company, shown publicly.
+          </p>
+          <ImageUpload
+            label=""
+            input-id="speaker-company-image"
+            url-placeholder="https://example.com/company-logo.png"
+            preview-alt="Speaker company logo"
+            preview-size="sm"
+            :initial-url="speakerCompanyImgUrl"
+            :disabled="isCompanyUploading"
+            @file-selected="handleSpeakerCompanyFile"
+          />
+          <p
+            v-if="isCompanyUploading"
+            class="text-xs text-muted-foreground flex items-center gap-1"
+          >
+            <Loader2 class="w-3 h-3 animate-spin" /> Uploading…
+          </p>
+        </div>
+      </template>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
+import { Separator } from "@/components/ui/separator";
+import { ImageIcon, Loader2 } from "lucide-vue-next";
+import type { EntityType } from "@/dto/tasks";
+import { useCompanyPublicImageUploadMutation } from "@/mutations/companies";
+import {
+  useSpeakerPublicImageUploadMutation,
+  useSpeakerCompanyImageUploadMutation,
+} from "@/mutations/speakers";
+import useToast from "@/lib/toast";
+
+interface Props {
+  entityId: string;
+  entityType: EntityType;
+  stepNumber?: number;
+  isLast?: boolean;
+  /** Existing image URLs for preview on load */
+  companyPublicImgUrl?: string;
+  speakerImgUrl?: string;
+  speakerCompanyImgUrl?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 7,
+  isLast: false,
+  companyPublicImgUrl: undefined,
+  speakerImgUrl: undefined,
+  speakerCompanyImgUrl: undefined,
+});
+
+const { toast } = useToast();
+
+// ── Company public image ────────────────────────────────────
+const companyPublicMutation = useCompanyPublicImageUploadMutation();
+companyPublicMutation.companyId.value = props.entityId;
+
+const isUploading = ref(false);
+
+async function handleCompanyPublicFile(file: File) {
+  const fd = new FormData();
+  fd.append("image", file);
+  companyPublicMutation.imageData.value = fd;
+  isUploading.value = true;
+  try {
+    await companyPublicMutation.mutate();
+    toast.success({ title: "Public logo uploaded" });
+  } catch {
+    toast.error({ title: "Failed to upload public logo" });
+  } finally {
+    isUploading.value = false;
+  }
+}
+
+// ── Speaker public image ────────────────────────────────────
+const speakerPublicMutation = useSpeakerPublicImageUploadMutation();
+speakerPublicMutation.speakerId.value = props.entityId;
+
+const isSpeakerUploading = ref(false);
+
+async function handleSpeakerPublicFile(file: File) {
+  const fd = new FormData();
+  fd.append("image", file);
+  speakerPublicMutation.imageData.value = fd;
+  isSpeakerUploading.value = true;
+  try {
+    await speakerPublicMutation.mutate();
+    toast.success({ title: "Speaker photo uploaded" });
+  } catch {
+    toast.error({ title: "Failed to upload speaker photo" });
+  } finally {
+    isSpeakerUploading.value = false;
+  }
+}
+
+// ── Speaker company image ───────────────────────────────────
+const speakerCompanyMutation = useSpeakerCompanyImageUploadMutation();
+speakerCompanyMutation.speakerId.value = props.entityId;
+
+const isCompanyUploading = ref(false);
+
+async function handleSpeakerCompanyFile(file: File) {
+  const fd = new FormData();
+  fd.append("image", file);
+  speakerCompanyMutation.imageData.value = fd;
+  isCompanyUploading.value = true;
+  try {
+    await speakerCompanyMutation.mutate();
+    toast.success({ title: "Company logo uploaded" });
+  } catch {
+    toast.error({ title: "Failed to upload company logo" });
+  } finally {
+    isCompanyUploading.value = false;
+  }
+}
+
+const isComplete = computed(() => false); // image upload is always optional
+</script>

From 3676f675e10259e5a52187ddac7dcfe55b8211a0 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:18:19 +0000
Subject: [PATCH 36/39] feat: remove test schedule and completion fields from
 TaskMaterials component

---
 .../src/components/tasks/TaskMaterials.vue    | 43 ++-----------------
 1 file changed, 4 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/tasks/TaskMaterials.vue b/frontend/src/components/tasks/TaskMaterials.vue
index 898b918d..c979c1a3 100644
--- a/frontend/src/components/tasks/TaskMaterials.vue
+++ b/frontend/src/components/tasks/TaskMaterials.vue
@@ -56,27 +56,6 @@
           </Label>
         </div>
       </div>
-
-      <Separator />
-
-      <!-- Test Schedule -->
-      <div class="space-y-3">
-        <span class="text-sm font-medium">Test Schedule</span>
-
-        <div class="space-y-2">
-          <Label for="test-schedule" class="text-sm">Schedule</Label>
-          <Input
-            id="test-schedule"
-            v-model="testSchedule"
-            placeholder="e.g. Monday 14:00"
-          />
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <Checkbox id="test-done" v-model="testDone" />
-          <Label for="test-done" class="text-sm"> Test completed </Label>
-        </div>
-      </div>
     </div>
   </TaskTimelineItem>
 </template>
@@ -87,7 +66,6 @@ import TaskTimelineItem from "./TaskTimelineItem.vue";
 import StatusToggleBadge from "./StatusToggleBadge.vue";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
 import { Package } from "lucide-vue-next";
@@ -122,35 +100,22 @@ const talkDescription = ref<string>(
   props.speakerTasks?.materials?.talkDescription ?? "",
 );
 
-// Test schedule
-const testSchedule = ref<string>(
-  props.speakerTasks?.materials?.testSchedule ?? "",
-);
-const testDone = ref<boolean>(props.speakerTasks?.materials?.testDone ?? false);
-
 watch(
-  [
-    hasRequestedMaterials,
-    materialsReceived,
-    talkTitle,
-    talkDescription,
-    testSchedule,
-    testDone,
-  ],
+  [hasRequestedMaterials, materialsReceived, talkTitle, talkDescription],
   () => {
     emit("update:materials", {
       requested: hasRequestedMaterials.value,
       received: materialsReceived.value,
       talkTitle: talkTitle.value,
       talkDescription: talkDescription.value,
-      testSchedule: testSchedule.value,
-      testDone: testDone.value,
+      testSchedule: props.speakerTasks?.materials?.testSchedule ?? "",
+      testDone: props.speakerTasks?.materials?.testDone ?? false,
     });
   },
 );
 
 const isComplete = computed(() => {
-  return materialsReceived.value === true && testDone.value === true;
+  return materialsReceived.value === true;
 });
 
 defineExpose({

From 47479f9737bf08f3098de144c2fb0f6eeefeade3 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:19:01 +0000
Subject: [PATCH 37/39] feat: implement auto-save functionality for tasks and
 update UI indicators

---
 frontend/src/components/tasks/Tasks.vue | 157 ++++++++++++++++++------
 1 file changed, 118 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
index eb50af8f..e4411513 100644
--- a/frontend/src/components/tasks/Tasks.vue
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -4,15 +4,13 @@
       <h2 class="text-lg font-semibold">
         {{ entityType === "company" ? "Company" : "Speaker" }} Tasks Timeline
       </h2>
-      <Button
-        variant="default"
-        size="sm"
-        :disabled="isSaving"
-        @click="saveTasks"
+      <span
+        v-if="isSaving"
+        class="text-xs text-muted-foreground flex items-center gap-1"
       >
-        <Save class="w-4 h-4 mr-1" />
-        {{ isSaving ? "Saving…" : "Save Tasks" }}
-      </Button>
+        <Loader2 class="w-3 h-3 animate-spin" /> Saving…
+      </span>
+      <span v-else class="text-xs text-muted-foreground">Auto-saved</span>
     </div>
 
     <!-- Stepper Container -->
@@ -42,6 +40,7 @@
         :speaker-tasks="speakerTasks"
         @update:logos="onLogosUpdate"
         @update:asked-for-info="onAskedForInfoUpdate"
+        @update:po="onPoUpdate"
       />
 
       <TaskContract
@@ -71,7 +70,6 @@
         <TaskLogistics
           :entity-id="entityId"
           :step-number="showSessionTitles ? 6 : 5"
-          :is-last="true"
           :company-tasks="companyTasks"
           @update:logistics="onLogisticsUpdate"
         />
@@ -103,17 +101,48 @@
         <TaskHotel
           :entity-id="entityId"
           :step-number="6"
-          :is-last="true"
           :speaker-tasks="speakerTasks"
           @update:hotel="onHotelUpdate"
         />
+
+        <TaskTestSchedule
+          :entity-id="entityId"
+          :step-number="7"
+          :speaker-tasks="speakerTasks"
+          @update:test-schedule="onTestScheduleUpdate"
+        />
       </template>
+
+      <!-- Images (both entities) -->
+      <TaskImages
+        :entity-id="entityId"
+        :entity-type="entityType"
+        :step-number="
+          entityType === 'company' ? (showSessionTitles ? 7 : 6) : 8
+        "
+        :is-last="true"
+        :company-public-img-url="
+          entityType === 'company'
+            ? (companyImgs?.public ?? undefined)
+            : undefined
+        "
+        :speaker-img-url="
+          entityType === 'speaker'
+            ? (speakerImgs?.speaker ?? undefined)
+            : undefined
+        "
+        :speaker-company-img-url="
+          entityType === 'speaker'
+            ? (speakerImgs?.company ?? undefined)
+            : undefined
+        "
+      />
     </Stepper>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, watch } from "vue";
+import { ref, computed, reactive, watch, provide } from "vue";
 import type { EntityType } from "@/dto/tasks";
 import {
   type CompanyTasks,
@@ -132,15 +161,19 @@ import {
   emptyCompanyTasks,
   emptySpeakerTasks,
 } from "@/dto/tasks";
-import type { CompanyBillingInfo, CompanyParticipation } from "@/dto/companies";
-import type { SpeakerParticipation } from "@/dto/speakers";
+import type {
+  CompanyBillingInfo,
+  CompanyImages,
+  CompanyParticipation,
+} from "@/dto/companies";
+import type { SpeakerImages, SpeakerParticipation } from "@/dto/speakers";
 import type { Contact } from "@/dto/contacts";
 import type { Item } from "@/dto/item";
-import { Button } from "@/components/ui/button";
 import { Stepper } from "@/components/ui/stepper";
-import { Save } from "lucide-vue-next";
+import { Loader2 } from "lucide-vue-next";
 import { useCompanyTasksMutation } from "@/mutations/companies";
 import { useSpeakerTasksMutation } from "@/mutations/speakers";
+import { TASKS_SAVING_KEY } from "@/composables/useTasksSaving";
 import useToast from "@/lib/toast";
 import TaskConfirmation from "./TaskConfirmation.vue";
 import TaskBillingLogos from "./TaskBillingLogos.vue";
@@ -152,6 +185,8 @@ import TaskFlights from "./TaskFlights.vue";
 import TaskCoverage from "./TaskCoverage.vue";
 import TaskMaterials from "./TaskMaterials.vue";
 import TaskHotel from "./TaskHotel.vue";
+import TaskTestSchedule from "./TaskTestSchedule.vue";
+import TaskImages from "./TaskImages.vue";
 
 interface Props {
   entityType: EntityType;
@@ -159,6 +194,8 @@ interface Props {
   participation?: CompanyParticipation | SpeakerParticipation;
   billingInfo?: CompanyBillingInfo;
   contact?: Contact;
+  companyImgs?: CompanyImages;
+  speakerImgs?: SpeakerImages;
 }
 
 const props = defineProps<Props>();
@@ -186,10 +223,31 @@ const speakerTasks = reactive<SpeakerTasks>(
     : emptySpeakerTasks(),
 );
 
-// Sync when participation changes externally
+// ——————————————————————————————————————
+// Save mutations
+// ——————————————————————————————————————
+const companyMutation = useCompanyTasksMutation();
+companyMutation.companyId.value = props.entityId;
+
+const speakerMutation = useSpeakerTasksMutation();
+speakerMutation.speakerId.value = props.entityId;
+
+const isSaving = ref(false);
+
+// Provide saving state to all child task components so they can disable themselves
+provide(TASKS_SAVING_KEY, isSaving);
+
+// ——————————————————————————————————————
+// Sync when participation refreshes from server (post-save cache invalidation)
+// Guard with isSaving to avoid triggering the save watcher (infinite loop)
+// ——————————————————————————————————————
+let isSyncing = false;
+
 watch(
   () => props.participation,
   (p) => {
+    if (isSaving.value) return; // server refresh caused by our own save — ignore
+    isSyncing = true;
     if (props.entityType === "company" && p) {
       const saved = (p as CompanyParticipation).tasks;
       if (saved) Object.assign(companyTasks, saved);
@@ -198,37 +256,51 @@ watch(
       const saved = (p as SpeakerParticipation).tasks;
       if (saved) Object.assign(speakerTasks, saved);
     }
+    // Use nextTick boundary — reset flag after the watch flush
+    setTimeout(() => {
+      isSyncing = false;
+    }, 0);
   },
 );
 
 // ——————————————————————————————————————
-// Save mutations
+// Debounced auto-save
 // ——————————————————————————————————————
-const companyMutation = useCompanyTasksMutation();
-companyMutation.companyId.value = props.entityId;
-
-const speakerMutation = useSpeakerTasksMutation();
-speakerMutation.speakerId.value = props.entityId;
-
-const isSaving = ref(false);
+let saveTimer: ReturnType<typeof setTimeout> | null = null;
 
-async function saveTasks() {
-  isSaving.value = true;
-  try {
-    if (props.entityType === "company") {
-      await companyMutation.mutate({ ...companyTasks });
-    } else {
-      await speakerMutation.mutate({ ...speakerTasks });
+function scheduleSave(delayMs = 600) {
+  if (isSyncing) return; // don't schedule while applying server data
+  if (saveTimer) clearTimeout(saveTimer);
+  saveTimer = setTimeout(async () => {
+    saveTimer = null;
+    if (isSaving.value) return; // already saving
+    isSaving.value = true;
+    try {
+      if (props.entityType === "company") {
+        await companyMutation.mutateAsync({ ...companyTasks });
+      } else {
+        await speakerMutation.mutateAsync({ ...speakerTasks });
+      }
+    } catch (err) {
+      console.error("Auto-save failed:", err);
+      toast.error({ title: "Auto-save failed" });
+    } finally {
+      isSaving.value = false;
     }
-    toast.success({ title: "Tasks saved" });
-  } catch (err) {
-    console.error("Failed to save tasks:", err);
-    toast.error({ title: "Failed to save tasks" });
-  } finally {
-    isSaving.value = false;
-  }
+  }, delayMs);
 }
 
+watch(
+  () => JSON.stringify(companyTasks),
+  () => scheduleSave(600),
+  { deep: true },
+);
+watch(
+  () => JSON.stringify(speakerTasks),
+  () => scheduleSave(600),
+  { deep: true },
+);
+
 // ——————————————————————————————————————
 // Child update handlers (company)
 // ——————————————————————————————————————
@@ -266,9 +338,13 @@ function onMaterialsUpdate(v: SpeakerTaskMaterials) {
 function onHotelUpdate(v: SpeakerTaskHotel) {
   Object.assign(speakerTasks.hotel, v);
 }
+function onTestScheduleUpdate(schedule: string, done: boolean) {
+  speakerTasks.materials.testSchedule = schedule;
+  speakerTasks.materials.testDone = done;
+}
 
 // ——————————————————————————————————————
-// Shared update handlers (logos / askedForInfo)
+// Shared update handlers
 // ——————————————————————————————————————
 function onLogosUpdate(v: TaskLogos) {
   if (props.entityType === "company") {
@@ -284,6 +360,9 @@ function onAskedForInfoUpdate(v: boolean) {
     speakerTasks.askedForInfo = v;
   }
 }
+function onPoUpdate(v: string) {
+  companyTasks.po = v;
+}
 
 // ——————————————————————————————————————
 // Package items (company session titles logic)

From b2b8f57ab9235c2ae5a816d45848dc1f354797d4 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:19:13 +0000
Subject: [PATCH 38/39] feat: add Test Schedule component with scheduling and
 completion functionality

---
 .../src/components/tasks/TaskTestSchedule.vue | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 frontend/src/components/tasks/TaskTestSchedule.vue

diff --git a/frontend/src/components/tasks/TaskTestSchedule.vue b/frontend/src/components/tasks/TaskTestSchedule.vue
new file mode 100644
index 00000000..16ce0426
--- /dev/null
+++ b/frontend/src/components/tasks/TaskTestSchedule.vue
@@ -0,0 +1,68 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Test Schedule"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <ClipboardCheck class="w-4 h-4" />
+    </template>
+
+    <div class="space-y-4">
+      <div class="space-y-2">
+        <Label for="test-schedule" class="text-sm">Scheduled Time</Label>
+        <Input
+          id="test-schedule"
+          v-model="testSchedule"
+          placeholder="e.g. Monday 14:00"
+        />
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="test-done" v-model="testDone" />
+        <Label for="test-done" class="text-sm">Test completed</Label>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { ClipboardCheck } from "lucide-vue-next";
+import type { SpeakerTasks } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  isLast?: boolean;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 8,
+  isLast: false,
+  speakerTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:testSchedule": [schedule: string, done: boolean];
+}>();
+
+const testSchedule = ref<string>(
+  props.speakerTasks?.materials?.testSchedule ?? "",
+);
+const testDone = ref<boolean>(props.speakerTasks?.materials?.testDone ?? false);
+
+watch([testSchedule, testDone], () => {
+  emit("update:testSchedule", testSchedule.value, testDone.value);
+});
+
+const isComplete = computed(() => testDone.value === true);
+
+defineExpose({ isComplete });
+</script>

From cd6d2aa252ec27996e3531b47ba16e586d659b87 Mon Sep 17 00:00:00 2001
From: Francisca Almeida <francisca.vicente.de.almeida@tecnico.ulisboa.pt>
Date: Sun, 1 Mar 2026 02:19:32 +0000
Subject: [PATCH 39/39] feat: add loading indicator for saving state in
 TaskTimelineItem component

---
 .../src/components/tasks/TaskTimelineItem.vue     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tasks/TaskTimelineItem.vue b/frontend/src/components/tasks/TaskTimelineItem.vue
index e3f4f529..15df5cdb 100644
--- a/frontend/src/components/tasks/TaskTimelineItem.vue
+++ b/frontend/src/components/tasks/TaskTimelineItem.vue
@@ -22,6 +22,10 @@
           >
             <h3 class="font-medium flex items-center gap-2">
               {{ title }}
+              <Loader2
+                v-if="isSaving"
+                class="w-3 h-3 animate-spin text-muted-foreground"
+              />
             </h3>
             <div class="flex items-center gap-2">
               <div @click.stop>
@@ -36,7 +40,9 @@
             </div>
           </div>
           <CollapsibleContent class="mt-4">
-            <slot />
+            <div :class="{ 'pointer-events-none opacity-50': isSaving }">
+              <slot />
+            </div>
           </CollapsibleContent>
         </Card>
       </Collapsible>
@@ -54,7 +60,9 @@ import {
   StepperIndicator,
   StepperSeparator,
 } from "@/components/ui/stepper";
-import { ChevronDown } from "lucide-vue-next";
+import { ChevronDown, Loader2 } from "lucide-vue-next";
+import { inject } from "vue";
+import { TASKS_SAVING_KEY } from "@/composables/useTasksSaving";
 
 interface Props {
   stepNumber: number;
@@ -67,6 +75,9 @@ const props = withDefaults(defineProps<Props>(), {
   isLast: false,
 });
 
+// Injected from Tasks.vue — undefined outside the tasks context
+const isSaving = inject(TASKS_SAVING_KEY);
+
 // Start collapsed if complete, open if incomplete
 const isOpen = ref(!props.isComplete);
 </script>