feat: tasks prototype

Author: luckspt

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>

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>