@hed-hog/operations 0.0.322 → 0.0.325

package/hedhog/frontend/app/_components/my-project-summary-screen.tsx.ejs

@@ -27,6 +27,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { Progress } from '@/components/ui/progress';
 import { Textarea } from '@/components/ui/textarea';
 import {
   closestCenter,
@@ -41,14 +42,18 @@ import {
 } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
   AlarmClock,
   Archive,
   ArchiveRestore,
   FolderKanban,
+  MessageSquare,
+  Paperclip,
   Pencil,
   Plus,
   Rows3,
+  Timer,
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -84,6 +89,8 @@ type BoardTask = {
   assigneeName: string | null;
   assigneeUserPhotoId: number | null;
   assigneePersonAvatarId: number | null;
+  commentCount: number;
+  fileCount: number;
 };
 
 type TaskFormState = {
@@ -143,15 +150,20 @@ function parseColumnId(
   return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
 }
 
-function apiTaskToBoardTask(
-  row: OperationsMyProjectSummary['tasks'][number]
-): BoardTask {
-  const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
-    ? (row.status as BoardColumnId)
-    : 'todo';
-  return {
-    id: row.id,
-    name: row.name,
+function apiTaskToBoardTask(
+  row: OperationsMyProjectSummary['tasks'][number]
+): BoardTask {
+  const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
+    ? (row.status as BoardColumnId)
+    : 'todo';
+  const taskCounts = row as typeof row & {
+    commentCount?: number | null;
+    fileCount?: number | null;
+  };
+
+  return {
+    id: row.id,
+    name: row.name,
     description: row.description ?? null,
     status,
     priority: row.priority ?? 'medium',
@@ -159,11 +171,13 @@ function apiTaskToBoardTask(
     estimateHours: row.estimateHours ?? null,
     tags: row.tags ?? null,
     assigneeCollaboratorId: row.assigneeCollaboratorId ?? null,
-    assigneeName: row.assigneeName ?? null,
-    assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
-    assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
-  };
-}
+    assigneeName: row.assigneeName ?? null,
+    assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
+    assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
+    commentCount: taskCounts.commentCount ?? 0,
+    fileCount: taskCounts.fileCount ?? 0,
+  };
+}
 
 function splitTasksByColumn(tasks: BoardTask[]): BoardColumns {
   return {
@@ -225,6 +239,40 @@ function getTaskPriorityLabel(value?: string | null) {
   return labels[value ?? ''] ?? String(value ?? '');
 }
 
+function getPriorityClassName(priority?: string | null) {
+  if (priority === 'high') return 'border-rose-300 bg-rose-100 text-rose-700';
+  if (priority === 'medium') return 'border-amber-300 bg-amber-100 text-amber-700';
+  return 'border-emerald-300 bg-emerald-100 text-emerald-700';
+}
+
+function getTaskProgress(status?: string | null) {
+  const map: Record<string, number> = {
+    todo: 0,
+    doing: 33,
+    review: 66,
+    done: 100,
+  };
+  return map[status ?? ''] ?? 0;
+}
+
+function isPastDue(dueDate?: string | null) {
+  if (!dueDate) return false;
+  return new Date(dueDate) < new Date();
+}
+
+function getTaskTags(task: BoardTask) {
+  if (!task.tags) return [];
+  return task.tags.split(',').map((tag) => tag.trim()).filter(Boolean);
+}
+
+function getTaskCommentCount(task: BoardTask) {
+  return task.commentCount ?? 0;
+}
+
+function getTaskAttachmentCount(task: BoardTask) {
+  return task.fileCount ?? 0;
+}
+
 function DraggableTaskCard({
   task,
   children,
@@ -629,34 +677,54 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                       </span>
                     </div>
 
-                    <div className="space-y-2">
-                      {taskColumns[column.id].map((task) => (
+                    <div className="flex flex-1 flex-col gap-2">
+                      <AnimatePresence initial={false}>
+                      {taskColumns[column.id].map((task) => {
+                        const tags = getTaskTags(task);
+                        const comments = getTaskCommentCount(task);
+                        const attachments = getTaskAttachmentCount(task);
+                        return (
                         <DraggableTaskCard key={task.id} task={task}>
                           {(isDragging) => (
-                            <div
+                            <motion.div
+                              initial={{ opacity: 0, scale: 0.96 }}
+                              animate={{ opacity: 1, scale: 1 }}
+                              exit={{ opacity: 0, scale: 0.95, y: -4 }}
+                              transition={{ duration: 0.18 }}
+                              role="button"
+                              tabIndex={0}
                               onClick={() =>
                                 !isDragging && setSelectedTask(task)
                               }
+                              onKeyDown={(event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                  event.preventDefault();
+                                  setSelectedTask(task);
+                                }
+                              }}
                               className={[
-                                'w-full cursor-grab rounded-lg border bg-card p-3 text-left shadow-xs transition',
+                                'group w-full cursor-pointer rounded-2xl border bg-card p-3 text-left shadow-xs transition',
                                 isDragging
-                                  ? 'border-primary/50 opacity-75'
-                                  : 'hover:border-primary/40 hover:shadow-sm',
+                                  ? 'opacity-0'
+                                  : 'hover:border-primary/40 hover:shadow-lg',
                               ].join(' ')}
                             >
-                              <div className="mb-2 flex items-start justify-between gap-2">
-                                <p className="text-sm font-medium leading-snug">
-                                  {task.name}
-                                </p>
+                              <div className="mb-3 flex items-start justify-between gap-2">
+                                <div className="min-w-0 space-y-1">
+                                  <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                                    {task.name}
+                                  </p>
+                                  {task.description ? (
+                                    <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                                      {task.description.replace(/<[^>]*>/g, '')}
+                                    </p>
+                                  ) : null}
+                                </div>
                                 <div className="flex items-start gap-2">
                                   <span
                                     className={[
-                                      'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                                      task.priority === 'high'
-                                        ? 'bg-rose-100 text-rose-700'
-                                        : task.priority === 'medium'
-                                          ? 'bg-amber-100 text-amber-700'
-                                          : 'bg-emerald-100 text-emerald-700',
+                                      'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                      getPriorityClassName(task.priority),
                                     ].join(' ')}
                                   >
                                     {getTaskPriorityLabel(task.priority)}
@@ -665,7 +733,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                                     type="button"
                                     variant="ghost"
                                     size="icon"
-                                    className="size-7 shrink-0 rounded-full"
+                                    className="size-7 shrink-0 rounded-full opacity-0 transition group-hover:opacity-100"
                                     onPointerDown={(event) =>
                                       event.stopPropagation()
                                     }
@@ -679,38 +747,66 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                                 </div>
                               </div>
 
-                              {task.tags ? (
-                                <div className="mb-2 flex flex-wrap gap-1">
-                                  {task.tags.split(',').map((tag) => (
+                              {tags.length > 0 ? (
+                                <div className="mb-3 flex flex-wrap gap-1">
+                                  {tags.slice(0, 4).map((tag) => (
                                     <span
-                                      key={`${task.id}-${tag.trim()}`}
-                                      className="rounded-md bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                                      key={`${task.id}-${tag}`}
+                                      className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
                                     >
-                                      {tag.trim()}
+                                      {tag}
                                     </span>
                                   ))}
+                                  {tags.length > 4 ? (
+                                    <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                      +{tags.length - 4}
+                                    </span>
+                                  ) : null}
                                 </div>
                               ) : null}
 
-                              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                                <span className="inline-flex items-center gap-1">
-                                  <AlarmClock className="size-3.5" />
-                                  {formatDate(
-                                    task.dueDate,
-                                    getSettingValue,
-                                    currentLocaleCode
-                                  )}
-                                </span>
-                                <span>
-                                  {task.estimateHours != null
-                                    ? `${task.estimateHours}h`
-                                    : ''}
-                                </span>
+                              <div className="grid grid-cols-2 gap-2 text-xs">
+                                <div
+                                  className={[
+                                    'rounded-xl border bg-muted/20 px-2 py-1.5',
+                                    isPastDue(task.dueDate) && task.status !== 'done'
+                                      ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300'
+                                      : 'text-muted-foreground',
+                                  ].join(' ')}
+                                >
+                                  <span className="flex items-center gap-1">
+                                    <AlarmClock className="size-3.5" />
+                                    {formatDate(
+                                      task.dueDate,
+                                      getSettingValue,
+                                      currentLocaleCode
+                                    )}
+                                  </span>
+                                </div>
+                                <div className="rounded-xl border bg-muted/20 px-2 py-1.5 text-muted-foreground">
+                                  <span className="flex items-center gap-1">
+                                    <Timer className="size-3.5" />
+                                    {task.estimateHours != null
+                                      ? `${task.estimateHours}h`
+                                      : '—'}
+                                  </span>
+                                </div>
                               </div>
 
-                              {task.assigneeName ? (
-                                <div className="mt-2 flex items-center gap-1.5">
-                                  <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[9px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                              <div className="mt-3 space-y-1.5">
+                                <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                                  <span>Progresso</span>
+                                  <span>{getTaskProgress(task.status)}%</span>
+                                </div>
+                                <Progress
+                                  value={getTaskProgress(task.status)}
+                                  className="h-1.5"
+                                />
+                              </div>
+
+                              <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
+                                <div className="flex min-w-0 items-center gap-2">
+                                  <div className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
                                     {(() => {
                                       const photoUrl = getUserPhotoUrl(
                                         task.assigneeUserPhotoId
@@ -726,7 +822,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                                         // eslint-disable-next-line @next/next/no-img-element
                                         <img
                                           src={imgSrc}
-                                          alt={task.assigneeName}
+                                          alt={task.assigneeName ?? ''}
                                           className="size-full object-cover"
                                         />
                                       ) : (
@@ -735,14 +831,26 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                                     })()}
                                   </div>
                                   <span className="truncate text-[11px] text-muted-foreground">
-                                    {task.assigneeName}
+                                    {task.assigneeName ?? '—'}
                                   </span>
                                 </div>
-                              ) : null}
-                            </div>
+                                <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
+                                  <span className="inline-flex items-center gap-1">
+                                    <MessageSquare className="size-3.5" />
+                                    {comments}
+                                  </span>
+                                  <span className="inline-flex items-center gap-1">
+                                    <Paperclip className="size-3.5" />
+                                    {attachments}
+                                  </span>
+                                </div>
+                              </div>
+                            </motion.div>
                           )}
                         </DraggableTaskCard>
-                      ))}
+                        );
+                      })}
+                      </AnimatePresence>
                     </div>
                   </div>
                 )}