@hed-hog/operations 0.0.321 → 0.0.325

package/hedhog/frontend/app/my-tasks/page.tsx.ejs

@@ -6,6 +6,7 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -33,7 +34,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
+import { Progress } from '@/components/ui/progress';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import {
   closestCenter,
@@ -48,6 +49,7 @@ 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,
@@ -59,10 +61,13 @@ import {
   LayoutGrid,
   List,
   Loader2,
+  MessageSquare,
+  Paperclip,
   Pencil,
   PlayCircle,
   Plus,
   Rows3,
+  Timer,
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -80,7 +85,7 @@ import type {
   OperationsTaskOption,
   PaginatedResponse,
 } from '../_lib/types';
-import { getStatusBadgeClass } from '../_lib/utils/format';
+import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
 
 type TaskViewMode = 'table' | 'cards' | 'board';
 
@@ -164,6 +169,28 @@ 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 getInitials(value?: string | null) {
   const parts = String(value ?? '')
     .trim()
@@ -248,7 +275,7 @@ export default function OperationsMyTasksPage() {
   const commonT = useTranslations('operations.Common');
   const detailT = useTranslations('operations.ProjectDetailsPage');
 
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
@@ -278,6 +305,10 @@ export default function OperationsMyTasksPage() {
   const [taskFormLoading, setTaskFormLoading] = useState(false);
   const [taskFormData, setTaskFormData] =
     useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [inlineCreateColumn, setInlineCreateColumn] =
+    useState<BoardColumnId | null>(null);
+  const [inlineCreateName, setInlineCreateName] = useState('');
+  const [inlineCreateLoading, setInlineCreateLoading] = useState(false);
 
   // Paginated query for table/cards views
   const { data: tasksResponse, refetch } = useQuery<
@@ -492,6 +523,32 @@ export default function OperationsMyTasksPage() {
     [request, refetchAll]
   );
 
+  const handleInlineCreateTask = useCallback(
+    async (column: BoardColumnId) => {
+      const trimmed = inlineCreateName.trim();
+      if (!trimmed) {
+        setInlineCreateColumn(null);
+        setInlineCreateName('');
+        return;
+      }
+      setInlineCreateLoading(true);
+      try {
+        await mutateOperations(request, '/operations/tasks', 'POST', {
+          name: trimmed,
+          status: column,
+          priority: 'medium',
+        });
+        setBoardOverride(null);
+        setInlineCreateColumn(null);
+        setInlineCreateName('');
+        await refetchBoard();
+      } finally {
+        setInlineCreateLoading(false);
+      }
+    },
+    [inlineCreateName, request, refetchBoard]
+  );
+
   const openCreateTaskForm = useCallback(() => {
     setEditingTaskId(null);
     setTaskFormData(EMPTY_TASK_FORM);
@@ -700,135 +757,288 @@ export default function OperationsMyTasksPage() {
                           <Rows3 className="size-4 text-muted-foreground" />
                           {column.label}
                         </div>
-                        <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
-                          {boardColumns[column.id].length}
-                        </span>
+                        <div className="flex items-center gap-1">
+                          <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
+                            {boardColumns[column.id].length}
+                          </span>
+                          <button
+                            type="button"
+                            className="flex size-5 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
+                            onClick={() => {
+                              setInlineCreateColumn(column.id);
+                              setInlineCreateName('');
+                            }}
+                          >
+                            <Plus className="size-3.5" />
+                          </button>
+                        </div>
                       </div>
 
-                      <div className="space-y-2">
-                        {boardColumns[column.id].map((task) => (
-                          <DraggableTaskCard key={task.id} task={task}>
-                            {(isDragging) => (
-                              <div
-                                onClick={() =>
-                                  !isDragging && setSelectedTask(task)
-                                }
-                                className={[
-                                  'w-full cursor-grab rounded-lg border bg-card p-3 text-left shadow-xs transition',
-                                  isDragging
-                                    ? 'border-primary/50 opacity-75'
-                                    : 'hover:border-primary/40 hover:shadow-sm',
-                                ].join(' ')}
-                              >
-                                <div className="mb-2 flex items-start justify-between gap-2">
-                                  <div className="min-w-0">
-                                    <p className="text-sm font-medium leading-snug">
-                                      {task.name}
-                                    </p>
-                                    <p className="truncate text-[11px] text-muted-foreground">
-                                      {[task.projectName, task.projectCode]
-                                        .filter(Boolean)
-                                        .join(' • ') ||
-                                        commonT('labels.notAvailable')}
-                                    </p>
-                                  </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',
-                                      ].join(' ')}
-                                    >
-                                      {getTaskPriorityLabel(task.priority)}
-                                    </span>
-                                    <Button
-                                      type="button"
-                                      variant="ghost"
-                                      size="icon"
-                                      className="size-7 shrink-0 rounded-full"
-                                      onPointerDown={(event) =>
-                                        event.stopPropagation()
+                      <div className="flex flex-1 flex-col gap-2">
+                        <AnimatePresence initial={false}>
+                          {boardColumns[column.id].map((task) => {
+                            const taskTags = task.tags
+                              ? task.tags
+                                  .split(',')
+                                  .map((t) => t.trim())
+                                  .filter(Boolean)
+                              : [];
+                            const comments = task.commentCount ?? 0;
+                            return (
+                              <DraggableTaskCard key={task.id} task={task}>
+                                {(isDragging) => (
+                                  <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);
                                       }
-                                      onClick={(event) => {
-                                        event.stopPropagation();
-                                        openEditTaskForm(task);
-                                      }}
-                                    >
-                                      <Pencil className="size-3.5" />
-                                    </Button>
-                                  </div>
-                                </div>
-
-                                {task.tags ? (
-                                  <div className="mb-2 flex flex-wrap gap-1">
-                                    {task.tags.split(',').map((tag) => (
-                                      <span
-                                        key={`${task.id}-${tag.trim()}`}
-                                        className="rounded-md bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                                    }}
+                                    className={[
+                                      'group w-full cursor-pointer rounded-2xl border bg-card p-3 text-left shadow-xs transition',
+                                      isDragging
+                                        ? 'opacity-0'
+                                        : 'hover:border-primary/40 hover:shadow-lg',
+                                    ].join(' ')}
+                                  >
+                                    <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>
+                                        <p className="truncate text-[11px] text-muted-foreground">
+                                          {[task.projectName, task.projectCode]
+                                            .filter(Boolean)
+                                            .join(' • ') ||
+                                            commonT('labels.notAvailable')}
+                                        </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 border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                            getPriorityClassName(task.priority),
+                                          ].join(' ')}
+                                        >
+                                          {getTaskPriorityLabel(task.priority)}
+                                        </span>
+                                        <Button
+                                          type="button"
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 rounded-full opacity-0 transition group-hover:opacity-100"
+                                          onPointerDown={(event) =>
+                                            event.stopPropagation()
+                                          }
+                                          onClick={(event) => {
+                                            event.stopPropagation();
+                                            openEditTaskForm(task);
+                                          }}
+                                        >
+                                          <Pencil className="size-3.5" />
+                                        </Button>
+                                      </div>
+                                    </div>
+
+                                    {taskTags.length > 0 ? (
+                                      <div className="mb-3 flex flex-wrap gap-1">
+                                        {taskTags.slice(0, 4).map((tag) => (
+                                          <span
+                                            key={`${task.id}-${tag}`}
+                                            className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
+                                          >
+                                            {tag}
+                                          </span>
+                                        ))}
+                                        {taskTags.length > 4 ? (
+                                          <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                            +{taskTags.length - 4}
+                                          </span>
+                                        ) : null}
+                                      </div>
+                                    ) : null}
+
+                                    <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(' ')}
                                       >
-                                        {tag.trim()}
-                                      </span>
-                                    ))}
-                                  </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" />
-                                    {task.dueDate
-                                      ? normalizeDateInputValue(task.dueDate)
-                                          .split('-')
-                                          .reverse()
-                                          .join('/')
-                                      : '-'}
-                                  </span>
-                                  <span>
-                                    {task.estimateHours != null
-                                      ? `${task.estimateHours}h`
-                                      : ''}
-                                  </span>
-                                </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">
-                                      {(() => {
-                                        const photoUrl = getUserPhotoUrl(
-                                          task.assigneeUserPhotoId
-                                        );
-                                        const avatarUrl =
-                                          task.assigneePersonAvatarId
-                                            ? getPersonAvatarUrl(
-                                                task.assigneePersonAvatarId
-                                              )
-                                            : null;
-                                        const imgSrc = photoUrl ?? avatarUrl;
-                                        return imgSrc ? (
-                                          // eslint-disable-next-line @next/next/no-img-element
-                                          <img
-                                            src={imgSrc}
-                                            alt={task.assigneeName}
-                                            className="size-full object-cover"
-                                          />
-                                        ) : (
-                                          getInitials(task.assigneeName)
-                                        );
-                                      })()}
+                                        <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>
+
+                                    <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
+                                            );
+                                            const avatarUrl =
+                                              task.assigneePersonAvatarId
+                                                ? getPersonAvatarUrl(
+                                                    task.assigneePersonAvatarId
+                                                  )
+                                                : null;
+                                            const imgSrc =
+                                              photoUrl ?? avatarUrl;
+                                            return imgSrc ? (
+                                              // eslint-disable-next-line @next/next/no-img-element
+                                              <img
+                                                src={imgSrc}
+                                                alt={task.assigneeName ?? ''}
+                                                className="size-full object-cover"
+                                              />
+                                            ) : (
+                                              getInitials(task.assigneeName)
+                                            );
+                                          })()}
+                                        </div>
+                                        <span className="truncate text-[11px] text-muted-foreground">
+                                          {task.assigneeName ?? '—'}
+                                        </span>
+                                      </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" />0
+                                        </span>
+                                      </div>
                                     </div>
-                                    <span className="truncate text-[11px] text-muted-foreground">
-                                      {task.assigneeName}
-                                    </span>
-                                  </div>
-                                ) : null}
-                              </div>
-                            )}
-                          </DraggableTaskCard>
-                        ))}
+                                  </motion.div>
+                                )}
+                              </DraggableTaskCard>
+                            );
+                          })}
+                        </AnimatePresence>
                       </div>
+
+                      {inlineCreateColumn === column.id ? (
+                        <div className="space-y-1.5 rounded-lg border bg-card p-2">
+                          <Input
+                            autoFocus
+                            placeholder={detailT('taskForm.namePlaceholder')}
+                            value={inlineCreateName}
+                            onChange={(e) =>
+                              setInlineCreateName(e.target.value)
+                            }
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                e.preventDefault();
+                                void handleInlineCreateTask(column.id);
+                              } else if (e.key === 'Escape') {
+                                setInlineCreateColumn(null);
+                                setInlineCreateName('');
+                              }
+                            }}
+                            onBlur={() => {
+                              if (!inlineCreateName.trim()) {
+                                setInlineCreateColumn(null);
+                                setInlineCreateName('');
+                              }
+                            }}
+                            disabled={inlineCreateLoading}
+                            className="h-8 text-sm"
+                          />
+                          <div className="flex gap-1">
+                            <Button
+                              type="button"
+                              size="sm"
+                              className="h-7 px-2 text-xs"
+                              disabled={
+                                !inlineCreateName.trim() || inlineCreateLoading
+                              }
+                              onMouseDown={(e) => e.preventDefault()}
+                              onClick={() =>
+                                void handleInlineCreateTask(column.id)
+                              }
+                            >
+                              {t('actions.create')}
+                            </Button>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 px-2 text-xs"
+                              onMouseDown={(e) => e.preventDefault()}
+                              onClick={() => {
+                                setInlineCreateColumn(null);
+                                setInlineCreateName('');
+                              }}
+                            >
+                              {commonT('actions.cancel')}
+                            </Button>
+                          </div>
+                        </div>
+                      ) : (
+                        <button
+                          type="button"
+                          className="flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-1 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground"
+                          onClick={() => {
+                            setInlineCreateColumn(column.id);
+                            setInlineCreateName('');
+                          }}
+                        >
+                          <Plus className="size-3" />
+                          {t('actions.create')}
+                        </button>
+                      )}
                     </div>
                   )}
                 </DroppableColumn>
@@ -1093,7 +1303,7 @@ export default function OperationsMyTasksPage() {
           }
         }}
       >
-        <DialogContent className="sm:max-w-lg">
+        <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>
               {editingTaskId
@@ -1149,17 +1359,14 @@ export default function OperationsMyTasksPage() {
               <Label htmlFor="task-description">
                 {detailT('taskForm.descriptionLabel')}
               </Label>
-              <Textarea
-                id="task-description"
+              <RichTextEditor
                 value={taskFormData.description}
-                onChange={(event) =>
+                onChange={(val) =>
                   setTaskFormData((prev) => ({
                     ...prev,
-                    description: event.target.value,
+                    description: val,
                   }))
                 }
-                rows={4}
-                placeholder={detailT('taskForm.descriptionPlaceholder')}
               />
             </div>