From b7251cac58eea3e15db06708dee9144addf97626 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Fri, 17 Oct 2025 10:43:10 +0200
Subject: [PATCH] feat: task page

---
 .../app/components/StaffBlock.vue             |   6 +-
 .../app/components/TaskInfoCard.vue           |  39 ++++---
 .../app/composables/useNavigation.ts          |   4 +-
 .../pages/agreement/[agreementId]/index.vue   |   2 +-
 .../app/pages/flow/[itemId]/index.vue         |   2 +-
 apps/atrium-telegram/app/pages/navigation.vue |   4 +-
 .../app/pages/partner/[partnerId]/index.vue   |   2 +-
 .../app/pages/task/[taskId]/index.vue         | 109 ++++++++++++++++++
 .../{all-tasks/index.vue => task/all.vue}     |   9 +-
 .../pages/{tasks/index.vue => task/my.vue}    |   4 +
 .../app/pages/ticket/[ticketId]/index.vue     |   2 +-
 11 files changed, 155 insertions(+), 28 deletions(-)
 create mode 100644 apps/atrium-telegram/app/pages/task/[taskId]/index.vue
 rename apps/atrium-telegram/app/pages/{all-tasks/index.vue => task/all.vue} (96%)
 rename apps/atrium-telegram/app/pages/{tasks/index.vue => task/my.vue} (98%)

diff --git a/apps/atrium-telegram/app/components/StaffBlock.vue b/apps/atrium-telegram/app/components/StaffBlock.vue
index aad3fdd9..33de1a98 100644
--- a/apps/atrium-telegram/app/components/StaffBlock.vue
+++ b/apps/atrium-telegram/app/components/StaffBlock.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="max-w-full overflow-x-scroll overflow-y-hidden snap-x hide-scroll">
-    <div class="w-max flex flex-row flex-wrap gap-2">
+  <div class="max-w-full overflow-x-auto overflow-y-hidden snap-x hide-scroll relative">
+    <div class="flex flex-row gap-3">
       <div
         v-for="user in allUsers"
         :key="user.id"
@@ -10,7 +10,7 @@
         <div class="relative">
           <UAvatar
             :src="user?.avatarUrl ?? undefined"
-            class="size-16 border-2 border-default"
+            class="size-16 border-3 border-default"
             :class="[
               user.isOnline && 'border-primary',
             ]"
diff --git a/apps/atrium-telegram/app/components/TaskInfoCard.vue b/apps/atrium-telegram/app/components/TaskInfoCard.vue
index fc0ec0c9..4f3a9b5b 100644
--- a/apps/atrium-telegram/app/components/TaskInfoCard.vue
+++ b/apps/atrium-telegram/app/components/TaskInfoCard.vue
@@ -1,17 +1,33 @@
 <template>
-  <ActiveCard class="motion-preset-slide-left">
+  <ActiveCard>
     <Section>
       <div class="flex flex-row gap-2 items-center">
         <UAvatar :src="performer?.avatarUrl ?? undefined" class="size-8" />
 
+        <div v-if="isCompleted" class="flex flex-row gap-1 items-center text-primary">
+          <UIcon
+            name="i-lucide-check"
+            class="shrink-0 size-8 text-primary"
+          />
+          <p v-if="task.completedAt" class="text-base/5 font-semibold">
+            {{ format(new Date(task.completedAt), 'd MMMM yyyy в HH:mm', { locale: ru }) }}
+          </p>
+        </div>
         <UIcon
-          :name="isCompleted ? 'i-lucide-check' : 'i-lucide-loader-circle'"
-          class="shrink-0 size-8"
-          :class="[
-            isCompleted ? 'text-primary' : 'text-muted/50',
-            !isCompleted && 'motion-preset-spin motion-duration-4000',
-          ]"
+          v-else
+          name="i-lucide-loader-circle"
+          class="shrink-0 size-8 text-muted/50 motion-preset-spin motion-duration-4000"
         />
+
+        <div v-if="isFocused" class="flex flex-row items-center gap-1.5 text-primary">
+          <UIcon
+            name="i-lucide-goal"
+            class="shrink-0 size-8 motion-preset-seesaw"
+          />
+          <p class="max-w-22 text-sm/4 font-bold">
+            В Фокусе
+          </p>
+        </div>
       </div>
 
       <h3 class="text-xl/6 font-bold">
@@ -28,13 +44,6 @@
           {{ task.report }}
         </p>
       </div>
-
-      <div v-if="task?.completedAt" class="flex flex-row gap-2 items-start w-full">
-        <UIcon name="i-lucide-calendar" class="shrink-0 size-5 text-primary" />
-        <p class="text-base/5 font-semibold">
-          {{ format(new Date(task.completedAt), 'd MMMM yyyy в HH:mm', { locale: ru }) }}
-        </p>
-      </div>
     </Section>
   </ActiveCard>
 </template>
@@ -52,4 +61,6 @@ const userStore = useUserStore()
 
 const isCompleted = computed(() => !!task.completedAt)
 const performer = computed(() => userStore.staff.find((staff) => staff.id === task.performerId))
+
+const isFocused = computed(() => task.id === performer.value?.focusedTaskId)
 </script>
diff --git a/apps/atrium-telegram/app/composables/useNavigation.ts b/apps/atrium-telegram/app/composables/useNavigation.ts
index 79e7b8a8..c653bae0 100644
--- a/apps/atrium-telegram/app/composables/useNavigation.ts
+++ b/apps/atrium-telegram/app/composables/useNavigation.ts
@@ -17,8 +17,8 @@ function _useNavigation() {
       badge: flowStore.nowViewedItemsCount > 10 ? '10+' : flowStore.nowViewedItemsCount.toString(),
     },
     {
-      path: '/tasks',
-      names: ['tasks'],
+      path: '/task/my',
+      names: ['my-tasks'],
       title: t('app.my-tasks'),
       icon: 'i-lucide-layout-dashboard',
       badge: taskStore.myTodayTasks.length.toString(),
diff --git a/apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue b/apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue
index 4eb1bab9..3be61c4c 100644
--- a/apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue
+++ b/apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue
@@ -1,6 +1,6 @@
 <template>
   <PageContainer>
-    <Section>
+    <Section class="motion-preset-slide-left">
       <div class="flex flex-row gap-2 items-center">
         <UIcon
           name="i-lucide-scroll"
diff --git a/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue b/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue
index dca01e37..62aed66d 100644
--- a/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue
+++ b/apps/atrium-telegram/app/pages/flow/[itemId]/index.vue
@@ -1,6 +1,6 @@
 <template>
   <PageContainer>
-    <Section>
+    <Section class="motion-preset-slide-left">
       <div class="flex flex-row items-start justify-between gap-2.5">
         <UAvatar
           v-if="item?.userId"
diff --git a/apps/atrium-telegram/app/pages/navigation.vue b/apps/atrium-telegram/app/pages/navigation.vue
index 4e95a67a..117e37df 100644
--- a/apps/atrium-telegram/app/pages/navigation.vue
+++ b/apps/atrium-telegram/app/pages/navigation.vue
@@ -58,8 +58,8 @@ const items = ref([
   },
   {
     label: 'Задачи',
-    to: '/all-tasks',
-    icon: 'i-lucide-list-checks',
+    to: '/task/all',
+    icon: 'i-lucide-list-todo',
     badge: 'апдейт',
     onClick: () => vibrate(),
   },
diff --git a/apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue b/apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue
index a361c267..e6af7173 100644
--- a/apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue
+++ b/apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue
@@ -1,6 +1,6 @@
 <template>
   <PageContainer>
-    <Section>
+    <Section class="motion-preset-slide-left">
       <div class="flex flex-row gap-2 items-center">
         <UIcon
           name="i-lucide-user"
diff --git a/apps/atrium-telegram/app/pages/task/[taskId]/index.vue b/apps/atrium-telegram/app/pages/task/[taskId]/index.vue
new file mode 100644
index 00000000..92622d2b
--- /dev/null
+++ b/apps/atrium-telegram/app/pages/task/[taskId]/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <PageContainer>
+    <Section class="motion-preset-slide-left">
+      <div class="flex flex-row gap-2 items-center">
+        <UAvatar :src="performer?.avatarUrl ?? undefined" class="size-8" />
+
+        <div v-if="isCompleted" class="flex flex-row gap-1 items-center text-primary">
+          <UIcon
+            name="i-lucide-check"
+            class="shrink-0 size-8 text-primary"
+          />
+          <p v-if="task?.completedAt" class="text-base/5 font-semibold">
+            {{ format(new Date(task.completedAt), 'd MMMM yyyy в HH:mm', { locale: ru }) }}
+          </p>
+        </div>
+        <UIcon
+          v-else
+          name="i-lucide-loader-circle"
+          class="shrink-0 size-8 text-muted/50 motion-preset-spin motion-duration-4000"
+        />
+
+        <div v-if="isFocused" class="flex flex-row items-center gap-1.5 text-primary">
+          <UIcon
+            name="i-lucide-goal"
+            class="shrink-0 size-8 motion-preset-seesaw"
+          />
+          <p class="max-w-22 text-sm/4 font-bold">
+            В Фокусе
+          </p>
+        </div>
+      </div>
+
+      <SectionTitle :title="task?.name ?? ''" />
+
+      <div v-if="task?.description" class="w-full text-base/5 font-normal whitespace-pre-wrap break-words">
+        {{ task.description }}
+      </div>
+
+      <div v-if="task?.report" class="flex flex-row gap-2 items-start w-full">
+        <UIcon name="i-lucide-clipboard-pen" class="shrink-0 size-6 text-primary" />
+        <p class="text-base/5 font-semibold whitespace-pre-wrap break-words">
+          {{ task.report }}
+        </p>
+      </div>
+
+      <div v-if="task?.date" class="flex flex-row gap-2 items-start w-full">
+        <UIcon name="i-lucide-calendar" class="shrink-0 size-6 text-primary" />
+        <p class="text-base/5 font-semibold whitespace-pre-wrap break-words">
+          {{ format(new Date(task.date), 'd MMMM yyyy', { locale: ru }) }}
+        </p>
+      </div>
+
+      <div v-if="taskList" class="flex flex-row gap-2 items-start w-full">
+        <UIcon name="i-lucide-book-marked" class="shrink-0 size-6 text-primary" />
+        <p class="text-base/5 font-semibold whitespace-pre-wrap break-words">
+          {{ taskList.name }}
+        </p>
+      </div>
+
+      <div class="mt-6 flex flex-col gap-0.5">
+        <div class="text-sm text-muted">
+          Создана
+          <time
+            v-if="task?.createdAt"
+            :datetime="task.createdAt"
+            v-text="format(new Date(task.createdAt), 'd MMMM yyyy в HH:mm', { locale: ru })"
+          />
+        </div>
+
+        <div v-if="task?.updatedAt" class="text-sm text-muted">
+          Обновлена
+          <time
+            :datetime="task.updatedAt"
+            v-text="format(new Date(task.updatedAt), 'd MMMM yyyy в HH:mm', { locale: ru })"
+          />
+        </div>
+
+        <div v-if="task?.completedAt" class="text-sm text-muted">
+          Закрыта
+          <time
+            :datetime="task.completedAt"
+            v-text="format(new Date(task.completedAt), 'd MMMM yyyy в HH:mm', { locale: ru })"
+          />
+        </div>
+      </div>
+    </Section>
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+definePageMeta({
+  name: 'task-taskId',
+})
+
+const { params } = useRoute('task-taskId')
+
+const userStore = useUserStore()
+const taskStore = useTaskStore()
+const task = computed(() => taskStore.tasks.find((t) => t.id === params.taskId))
+const taskList = computed(() => taskStore.lists.find((t) => t.id === task.value?.listId))
+
+const isCompleted = computed(() => !!task.value?.completedAt)
+const performer = computed(() => userStore.staff.find((staff) => staff.id === task.value?.performerId))
+
+const isFocused = computed(() => task.value?.id === performer.value?.focusedTaskId)
+</script>
diff --git a/apps/atrium-telegram/app/pages/all-tasks/index.vue b/apps/atrium-telegram/app/pages/task/all.vue
similarity index 96%
rename from apps/atrium-telegram/app/pages/all-tasks/index.vue
rename to apps/atrium-telegram/app/pages/task/all.vue
index 17bb9162..c23fa6f4 100644
--- a/apps/atrium-telegram/app/pages/all-tasks/index.vue
+++ b/apps/atrium-telegram/app/pages/task/all.vue
@@ -57,11 +57,14 @@
 
     <div class="flex flex-col gap-2.5">
       <div class="flex flex-col gap-4">
-        <TaskInfoCard
+        <NuxtLink
           v-for="task in filteredTasks.show"
           :key="task.id"
-          :task="task"
-        />
+          :to="`/task/${task.id}`"
+          class="motion-preset-slide-left"
+        >
+          <TaskInfoCard :task="task" />
+        </NuxtLink>
 
         <UButton
           v-if="filteredTasks.canShowMore"
diff --git a/apps/atrium-telegram/app/pages/tasks/index.vue b/apps/atrium-telegram/app/pages/task/my.vue
similarity index 98%
rename from apps/atrium-telegram/app/pages/tasks/index.vue
rename to apps/atrium-telegram/app/pages/task/my.vue
index f909b706..56e11747 100644
--- a/apps/atrium-telegram/app/pages/tasks/index.vue
+++ b/apps/atrium-telegram/app/pages/task/my.vue
@@ -60,6 +60,10 @@
 <script setup lang="ts">
 import { ModalCreateTaskList, ModalUploadUserAvatar } from '#components'
 
+definePageMeta({
+  name: 'my-tasks',
+})
+
 const { vibrate } = useFeedback()
 
 const overlay = useOverlay()
diff --git a/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue b/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
index e45680a6..47f62788 100644
--- a/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
+++ b/apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue
@@ -1,6 +1,6 @@
 <template>
   <PageContainer>
-    <Section>
+    <Section class="motion-preset-slide-left">
       <div class="flex flex-row items-start justify-between gap-2.5">
         <UIcon name="i-lucide-mail-question-mark" class="size-10 text-primary" />