@hed-hog/operations 0.0.331 → 0.0.332

package/hedhog/frontend/app/_lib/types.ts.ejs

@@ -414,11 +414,11 @@ export type OperationsTaskOption = {
   projectId: number;
   projectAssignmentId: number | null;
   projectName: string;
-  projectCode?: string | null;
-  dueDate?: string | null;
-  estimateHours?: number | null;
-  tags?: string | null;
-  assigneeName?: string | null;
+  projectCode?: string | null;
+  dueDate?: string | null;
+  estimateHours?: number | null;
+  tags?: string | null;
+  assigneeName?: string | null;
   assigneeUserPhotoId?: number | null;
   assigneePersonAvatarId?: number | null;
   commentCount?: number | null;
@@ -435,6 +435,7 @@ export type OperationsProject = {
   managerCollaboratorId?: number | null;
   clientPersonId?: number | null;
   clientAvatarId?: number | null;
+  clientUserPhotoId?: number | null;
   code: string;
   name: string;
   clientName?: string | null;

package/hedhog/frontend/app/_lib/utils/task-ui.ts.ejs

@@ -41,3 +41,21 @@ export function formatDurationMinutes(minutes?: number | null) {
   if (remainingMinutes <= 0) return `${hours}h`;
   return `${hours}h ${remainingMinutes}min`;
 }
+
+export function getTaskDescriptionPreview(value?: string | null) {
+  if (!value) return '';
+
+  return String(value)
+    .replace(/<br\s*\/?>/gi, ' ')
+    .replace(/<\/(p|div|li|ul|ol|h1|h2|h3|h4|h5|h6)>/gi, ' ')
+    .replace(/<li[^>]*>/gi, ' ')
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/&#39;/gi, "'")
+    .replace(/&quot;/gi, '"')
+    .replace(/\s+/g, ' ')
+    .trim();
+}

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

@@ -49,6 +49,12 @@ function getPersonAvatarUrl(avatarId?: number | null): string {
     : '/placeholder.png';
 }
 
+function getUserPhotoUrl(photoId?: number | null): string {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${photoId}`
+    : '/placeholder.png';
+}
+
 function getInitials(value?: string | null): string {
   if (!value) return '?';
   return value
@@ -293,7 +299,11 @@ export default function OperationsMyProjectsPage() {
                       </span>
                       <Avatar className="h-5 w-5 shrink-0">
                         <AvatarImage
-                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          src={
+                            project.clientUserPhotoId
+                              ? getUserPhotoUrl(project.clientUserPhotoId)
+                              : getPersonAvatarUrl(project.clientAvatarId)
+                          }
                           alt={project.clientName ?? ''}
                         />
                         <AvatarFallback className="text-[9px] font-medium">
@@ -402,7 +412,11 @@ export default function OperationsMyProjectsPage() {
                       <div className="flex min-w-0 items-center gap-1.5">
                         <Avatar className="h-6 w-6 shrink-0">
                           <AvatarImage
-                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            src={
+                              project.clientUserPhotoId
+                                ? getUserPhotoUrl(project.clientUserPhotoId)
+                                : getPersonAvatarUrl(project.clientAvatarId)
+                            }
                             alt={project.clientName ?? ''}
                           />
                           <AvatarFallback className="text-[9px] font-medium">

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

@@ -6,44 +6,45 @@ 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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
   TableHead,
   TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { RichTextEditor } from '@/components/rich-text-editor';
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import {
   closestCenter,
   DndContext,
@@ -85,16 +86,15 @@ import Link from 'next/link';
 import { useCallback, useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
-import {
-  TaskDetailSheet,
-  TaskCommentsSection,
-  type TaskDetailSheetData,
-} from '../_components/task-detail-sheet';
-import { TaskFileAttachments } from '../_components/task-file-attachments';
-import { TimesheetEntryCreateSheet } from '../_components/timesheet-entry-create-sheet';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
-import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import {
+  TaskCommentsSection,
+  TaskDetailSheet,
+  type TaskDetailSheetData,
+} from '../_components/task-detail-sheet';
+import { TaskFileAttachments } from '../_components/task-file-attachments';
+import { TimesheetEntryCreateSheet } from '../_components/timesheet-entry-create-sheet';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import type {
   OperationsCollaborator,
   OperationsProjectOption,
@@ -102,6 +102,7 @@ import type {
   PaginatedResponse,
 } from '../_lib/types';
 import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
+import { getTaskDescriptionPreview } from '../_lib/utils/task-ui';
 
 type TaskViewMode = 'table' | 'cards' | 'board';
 
@@ -168,25 +169,25 @@ function parseTaskId(value: UniqueIdentifier | null | undefined) {
   return match ? Number(match[1]) : null;
 }
 
-function parseColumnId(
-  value: UniqueIdentifier | null | undefined
-): BoardColumnId | null {
-  if (!value) return null;
-  const match = String(value).match(/^col-(.+)$/);
-  const id = match?.[1];
-  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
-}
-
-function normalizeDateInputValue(value?: string | null) {
-  if (!value) return '';
-  const match = String(value)
-    .trim()
-    .match(/^\d{4}-\d{2}-\d{2}/);
-  return match?.[0] ?? '';
-}
-
-function splitTasksByColumn(tasks: OperationsTaskOption[]): BoardColumns {
-  return {
+function parseColumnId(
+  value: UniqueIdentifier | null | undefined
+): BoardColumnId | null {
+  if (!value) return null;
+  const match = String(value).match(/^col-(.+)$/);
+  const id = match?.[1];
+  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
+}
+
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) return '';
+  const match = String(value)
+    .trim()
+    .match(/^\d{4}-\d{2}-\d{2}/);
+  return match?.[0] ?? '';
+}
+
+function splitTasksByColumn(tasks: OperationsTaskOption[]): BoardColumns {
+  return {
     todo: tasks.filter((t) => t.status === 'todo'),
     doing: tasks.filter((t) => t.status === 'doing'),
     review: tasks.filter((t) => t.status === 'review'),
@@ -334,10 +335,10 @@ export default function OperationsMyTasksPage() {
   const t = useTranslations('operations.MyTasksPage');
   const commonT = useTranslations('operations.Common');
   const detailT = useTranslations('operations.ProjectDetailsPage');
-
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const mentionItems = useMentionItems(request);
-  const [search, setSearch] = useState('');
+
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const mentionItems = useMentionItems(request);
+  const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = usePersistedPageSize({
@@ -366,11 +367,11 @@ export default function OperationsMyTasksPage() {
   const [deletePromptTask, setDeletePromptTask] =
     useState<OperationsTaskOption | null>(null);
   const [taskFormOpen, setTaskFormOpen] = useState(false);
-  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
-  const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
-  const [taskFormLoading, setTaskFormLoading] = useState(false);
-  const [taskFormData, setTaskFormData] =
-    useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
+  const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
+  const [taskFormLoading, setTaskFormLoading] = useState(false);
+  const [taskFormData, setTaskFormData] =
+    useState<TaskFormState>(EMPTY_TASK_FORM);
   const [activeDragTask, setActiveDragTask] =
     useState<OperationsTaskOption | null>(null);
   const [isTimesheetEntrySheetOpen, setIsTimesheetEntrySheetOpen] =
@@ -705,9 +706,13 @@ export default function OperationsMyTasksPage() {
     [inlineCreateName, request, refetchBoard]
   );
 
-  const openCreateTaskForm = useCallback(() => {
+  const openCreateTaskForm = useCallback((status?: BoardColumnId) => {
     setEditingTaskId(null);
     setSelectedTask(null);
+    setTaskFormData((prev) => ({
+      ...EMPTY_TASK_FORM,
+      ...(status ? { status } : { status: prev.status }),
+    }));
     setTaskFormOpen(true);
   }, []);
 
@@ -933,7 +938,7 @@ export default function OperationsMyTasksPage() {
                   {(isOver) => (
                     <div
                       className={[
-                        'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                        'flex min-h-48 max-h-160 flex-col rounded-3xl border bg-linear-to-b p-3 transition-all',
                         getColumnClassName(column.id),
                         isOver
                           ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -963,17 +968,14 @@ export default function OperationsMyTasksPage() {
                           <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('');
-                            }}
+                            onClick={() => openCreateTaskForm(column.id)}
                           >
                             <Plus className="size-3.5" />
                           </button>
                         </div>
                       </div>
 
-                      <div className="flex flex-1 flex-col gap-2">
+                      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pb-1 pr-0.5">
                         <AnimatePresence initial={false}>
                           {boardColumns[column.id].map((task) => {
                             const taskTags = task.tags
@@ -1025,9 +1027,8 @@ export default function OperationsMyTasksPage() {
                                         </p>
                                         {task.description ? (
                                           <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
-                                            {task.description.replace(
-                                              /<[^>]*>/g,
-                                              ''
+                                            {getTaskDescriptionPreview(
+                                              task.description
                                             )}
                                           </p>
                                         ) : null}
@@ -1151,76 +1152,14 @@ export default function OperationsMyTasksPage() {
                         </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>
-                      )}
+                      <button
+                        type="button"
+                        className="mt-auto flex w-full cursor-pointer items-center justify-center gap-1 rounded-2xl border border-dashed bg-background/70 px-3 py-2 text-xs text-muted-foreground transition hover:border-primary/40 hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                        onClick={() => openCreateTaskForm(column.id)}
+                      >
+                        <Plus className="size-3" />
+                        {t('actions.create')}
+                      </button>
                     </div>
                   )}
                 </DroppableColumn>
@@ -1276,7 +1215,7 @@ export default function OperationsMyTasksPage() {
 
                   {task.description ? (
                     <p className="line-clamp-3 text-sm text-muted-foreground">
-                      {task.description}
+                      {getTaskDescriptionPreview(task.description)}
                     </p>
                   ) : null}
 
@@ -1325,7 +1264,7 @@ export default function OperationsMyTasksPage() {
                         <div className="truncate font-medium">{task.name}</div>
                         {task.description ? (
                           <div className="truncate text-xs text-muted-foreground">
-                            {task.description}
+                            {getTaskDescriptionPreview(task.description)}
                           </div>
                         ) : null}
                       </div>
@@ -1526,11 +1465,10 @@ export default function OperationsMyTasksPage() {
         </DialogContent>
       </Dialog>
 
-
-      <Sheet
-        open={taskFormOpen}
-        onOpenChange={(open) => {
-          setTaskFormOpen(open);
+      <Sheet
+        open={taskFormOpen}
+        onOpenChange={(open) => {
+          setTaskFormOpen(open);
           if (!open) setEditingTaskId(null);
         }}
       >

package/hedhog/frontend/app/projects/page.tsx.ejs

@@ -194,9 +194,15 @@ function DroppableProjectColumn({
   return <div ref={setNodeRef}>{children(isOver)}</div>;
 }
 
-function getPersonAvatarUrl(avatarId?: number | null): string {
+function getPersonAvatarUrl(avatarId?: number | null) {
   return typeof avatarId === 'number' && avatarId > 0
     ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : undefined;
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${photoId}`
     : '/placeholder.png';
 }
 
@@ -506,9 +512,31 @@ export default function OperationsProjectsPage() {
     >
       <CardContent className="space-y-2 p-3">
         <div className="truncate text-sm font-semibold">{project.name}</div>
-        <div className="truncate text-xs text-muted-foreground">
-          {[project.code, project.clientName].filter(Boolean).join(' • ') ||
-            commonT('labels.notAvailable')}
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {project.clientName ? (
+            <>
+              <span className="truncate">{project.code || '—'}</span>
+              <span>•</span>
+              <Avatar className="h-4 w-4 shrink-0">
+                <AvatarImage
+                  src={
+                    project.clientUserPhotoId
+                      ? getUserPhotoUrl(project.clientUserPhotoId)
+                      : getPersonAvatarUrl(project.clientAvatarId)
+                  }
+                  alt={project.clientName}
+                />
+                <AvatarFallback className="text-[8px] font-medium">
+                  {getInitials(project.clientName)}
+                </AvatarFallback>
+              </Avatar>
+              <span className="truncate">{project.clientName}</span>
+            </>
+          ) : (
+            <span className="truncate">
+              {project.code || commonT('labels.notAvailable')}
+            </span>
+          )}
         </div>
         <div className="flex items-center justify-between gap-2 pt-1">
           <StatusBadge
@@ -758,7 +786,11 @@ export default function OperationsProjectsPage() {
                       </span>
                       <Avatar className="h-5 w-5 shrink-0">
                         <AvatarImage
-                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          src={
+                            project.clientUserPhotoId
+                              ? getUserPhotoUrl(project.clientUserPhotoId)
+                              : getPersonAvatarUrl(project.clientAvatarId)
+                          }
                           alt={project.clientName ?? ''}
                         />
                         <AvatarFallback className="text-[9px] font-medium">
@@ -963,7 +995,11 @@ export default function OperationsProjectsPage() {
                       <div className="flex min-w-0 items-center gap-1.5">
                         <Avatar className="h-6 w-6 shrink-0">
                           <AvatarImage
-                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            src={
+                              project.clientUserPhotoId
+                                ? getUserPhotoUrl(project.clientUserPhotoId)
+                                : getPersonAvatarUrl(project.clientAvatarId)
+                            }
                             alt={project.clientName ?? ''}
                           />
                           <AvatarFallback className="text-[9px] font-medium">