@hed-hog/operations 0.0.321 → 0.0.322

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,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import {
   closestCenter,
@@ -278,6 +278,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 +496,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,9 +730,21 @@ 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">
@@ -829,6 +871,77 @@ export default function OperationsMyTasksPage() {
                           </DraggableTaskCard>
                         ))}
                       </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 +1206,7 @@ export default function OperationsMyTasksPage() {
           }
         }}
       >
-        <DialogContent className="sm:max-w-lg">
+        <DialogContent className="sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>
               {editingTaskId
@@ -1149,17 +1262,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>
 

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

@@ -6,6 +6,7 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
@@ -27,6 +28,8 @@ import {
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
+  Archive,
+  ArchiveRestore,
   CalendarDays,
   Eye,
   FileText,
@@ -53,6 +56,22 @@ const PROJECT_VIEW_STORAGE_KEY = 'operations-projects-view-mode';
 
 type ProjectViewMode = 'table' | 'cards';
 
+function getPersonAvatarUrl(avatarId?: number | null): string {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getInitials(value?: string | null): string {
+  if (!value) return '?';
+  return value
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+}
+
 function parseEditProjectId(value: string | null) {
   const parsed = Number(value);
   return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
@@ -335,6 +354,9 @@ export default function OperationsProjectsPage() {
               <Card
                 key={project.id}
                 className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+                onDoubleClick={() =>
+                  router.push(`/operations/projects/${project.id}`)
+                }
               >
                 <CardContent className="space-y-4 p-4">
                   <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
@@ -359,17 +381,39 @@ export default function OperationsProjectsPage() {
                   </div>
 
                   <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
-                    <div>
-                      <span className="font-medium text-foreground">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="shrink-0 font-medium text-foreground">
                         {commonT('labels.client')}:
-                      </span>{' '}
-                      {project.clientName || commonT('labels.notAvailable')}
+                      </span>
+                      <Avatar className="h-5 w-5 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          alt={project.clientName ?? ''}
+                        />
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {getInitials(project.clientName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">
+                        {project.clientName || commonT('labels.notAvailable')}
+                      </span>
                     </div>
-                    <div>
-                      <span className="font-medium text-foreground">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="shrink-0 font-medium text-foreground">
                         {commonT('labels.manager')}:
-                      </span>{' '}
-                      {project.managerName || commonT('labels.notAssigned')}
+                      </span>
+                      <Avatar className="h-5 w-5 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.managerAvatarId)}
+                          alt={project.managerName ?? ''}
+                        />
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {getInitials(project.managerName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">
+                        {project.managerName || commonT('labels.notAssigned')}
+                      </span>
                     </div>
                     <div>
                       <span className="font-medium text-foreground">
@@ -414,7 +458,7 @@ export default function OperationsProjectsPage() {
                     </div>
                   </div>
 
-                  <div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
+                  <div className="flex items-center justify-end gap-2 border-t border-border/60 pt-3">
                     <Button variant="outline" size="icon" asChild>
                       <Link href={`/operations/projects/${project.id}`}>
                         <Eye className="size-4" />
@@ -451,13 +495,20 @@ export default function OperationsProjectsPage() {
                     {access.isDirector ? (
                       <Button
                         variant="outline"
-                        size="sm"
+                        size="icon"
                         className="cursor-pointer"
+                        title={
+                          project.status === 'archived'
+                            ? commonT('actions.activate')
+                            : t('actions.archive')
+                        }
                         onClick={() => void toggleArchived(project)}
                       >
-                        {project.status === 'archived'
-                          ? commonT('actions.activate')
-                          : t('actions.archive')}
+                        {project.status === 'archived' ? (
+                          <ArchiveRestore className="size-4" />
+                        ) : (
+                          <Archive className="size-4" />
+                        )}
                       </Button>
                     ) : null}
                   </div>
@@ -500,6 +551,9 @@ export default function OperationsProjectsPage() {
                   <TableRow
                     key={project.id}
                     className="cursor-pointer hover:bg-muted/30"
+                    onDoubleClick={() =>
+                      router.push(`/operations/projects/${project.id}`)
+                    }
                   >
                     <TableCell>
                       <div className="min-w-0">
@@ -518,8 +572,19 @@ export default function OperationsProjectsPage() {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="truncate">
-                        {project.clientName || commonT('labels.notAvailable')}
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        <Avatar className="h-6 w-6 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            alt={project.clientName ?? ''}
+                          />
+                          <AvatarFallback className="text-[9px] font-medium">
+                            {getInitials(project.clientName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate">
+                          {project.clientName || commonT('labels.notAvailable')}
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell>
@@ -529,8 +594,19 @@ export default function OperationsProjectsPage() {
                       />
                     </TableCell>
                     <TableCell className="hidden lg:table-cell">
-                      <div className="truncate">
-                        {project.managerName || commonT('labels.notAssigned')}
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        <Avatar className="h-6 w-6 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.managerAvatarId)}
+                            alt={project.managerName ?? ''}
+                          />
+                          <AvatarFallback className="text-[9px] font-medium">
+                            {getInitials(project.managerName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate">
+                          {project.managerName || commonT('labels.notAssigned')}
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell className="hidden md:table-cell">
@@ -563,7 +639,7 @@ export default function OperationsProjectsPage() {
                       )}
                     </TableCell>
                     <TableCell>
-                      <div className="flex flex-wrap justify-end gap-1.5 sm:gap-2">
+                      <div className="flex items-center justify-end gap-1.5">
                         <Button variant="outline" size="icon" asChild>
                           <Link href={`/operations/projects/${project.id}`}>
                             <Eye className="size-4" />
@@ -600,13 +676,20 @@ export default function OperationsProjectsPage() {
                         {access.isDirector ? (
                           <Button
                             variant="outline"
-                            size="sm"
+                            size="icon"
                             className="cursor-pointer"
+                            title={
+                              project.status === 'archived'
+                                ? commonT('actions.activate')
+                                : t('actions.archive')
+                            }
                             onClick={() => void toggleArchived(project)}
                           >
-                            {project.status === 'archived'
-                              ? commonT('actions.activate')
-                              : t('actions.archive')}
+                            {project.status === 'archived' ? (
+                              <ArchiveRestore className="size-4" />
+                            ) : (
+                              <Archive className="size-4" />
+                            )}
                           </Button>
                         ) : null}
                       </div>

package/hedhog/frontend/messages/en.json

@@ -723,7 +723,69 @@
       "loggedHours": "Logged hours",
       "loggedHoursDescription": "Total hours linked to this project.",
       "allocation": "Average allocation",
-      "allocationDescription": "Average assignment allocation across linked collaborators."
+      "allocationDescription": "Average assignment allocation across linked collaborators.",
+      "lateTasks": "Late tasks",
+      "lateTasksDescription": "Open tasks with overdue deadlines.",
+      "weeklyVelocity": "Weekly velocity",
+      "weeklyVelocityDescription": "Recent or planned hours for the week.",
+      "projectHealth": "Project health",
+      "pendingTasks": "Pending tasks",
+      "pendingTasksDescription": "{overdue} overdue task(s) right now.",
+      "activeCollaborators": "Active collaborators",
+      "activeCollaboratorsDescription": "People with active allocation on this project."
+    },
+    "kpi": {
+      "indicator": "Indicator",
+      "subtitles": {
+        "health": "Visual blend of progress, pendencies, and allocation."
+      },
+      "trends": {
+        "hours": "{count} timesheet(s)",
+        "health": {
+          "good": "Positive",
+          "warning": "Warning",
+          "danger": "Critical"
+        },
+        "velocity": {
+          "active": "Moving",
+          "empty": "No recent pace"
+        },
+        "allocation": {
+          "good": "Balanced",
+          "warning": "High",
+          "critical": "Overloaded"
+        },
+        "tasks": {
+          "good": "No pendencies",
+          "warning": "Active backlog",
+          "critical": "{count} late"
+        },
+        "collaborators": {
+          "active": "Active team",
+          "empty": "No team"
+        }
+      }
+    },
+    "quickActions": {
+      "timesheet": "Timesheet",
+      "reports": "Reports",
+      "more": "More actions"
+    },
+    "executive": {
+      "team": "Team",
+      "activeTasks": "Active tasks",
+      "completedTasks": "Completed",
+      "fallbackDescription": "Track delivery, staffing, contract, and operational signals for this project.",
+      "membersCount": "{count} member(s)"
+    },
+    "breadcrumbTrail": {
+      "operations": "Operations",
+      "projects": "Projects"
+    },
+    "health": {
+      "good": "Healthy",
+      "warning": "Attention",
+      "danger": "Critical"
     },
     "sections": {
       "overview": "Overview",
@@ -752,14 +814,92 @@
       "deliveryHealthDescription": "Visual overview of team allocation and operational pace.",
       "quickRadar": "Quick radar",
       "quickRadarDescription": "Short-term decision signals.",
+      "timeline": "Operational timeline",
+      "timelineDescription": "Recent activity grouped by day, ready for filters and incremental loading.",
       "taskBoard": "Task board",
       "taskBoardDescription": "Kanban-style board with drag between columns and task side panel.",
       "archivedTasks": "Archived tasks",
       "archivedTasksDescription": "Review archived project tasks, open details, restore them, or delete them permanently."
     },
     "charts": {
+      "projectProgress": "Progress",
+      "burnup": "Burnup / progress",
+      "burnupDescription": "Accumulated logged hours against the planned operating pace.",
       "allocationByCollaborator": "Allocation by collaborator",
-      "weeklyVelocity": "Weekly velocity"
+      "allocationDescription": "Capacity distribution across project collaborators.",
+      "weeklyVelocity": "Weekly velocity",
+      "weeklyVelocityDescription": "Recent pace of hours logged by the team.",
+      "taskDistribution": "Task distribution",
+      "taskDistributionDescription": "Task volume by board stage.",
+      "operationalHealth": "Operational health",
+      "operationalHealthDescription": "Visual score calculated from progress, pendencies, and allocation.",
+      "healthScore": "Operational score",
+      "start": "Start",
+      "current": "Current",
+      "emptyTitle": "Not enough data",
+      "emptyBurnup": "The burnup will appear once there is progress or logged hours.",
+      "emptyVelocity": "No weekly velocity has been returned for this project yet.",
+      "emptyAllocation": "Allocation will appear when collaborators are assigned.",
+      "emptyTasks": "Tasks will appear once the board has items."
+    },
+    "kanban": {
+      "items": "items",
+      "progress": "Progress",
+      "searchPlaceholder": "Search task, tag, assignee...",
+      "filters": "Filters",
+      "allPriorities": "All priorities",
+      "groupStatus": "Group by status",
+      "noEstimate": "No est.",
+      "emptyColumn": "No tasks in this column.",
+      "noFilteredTasks": "No tasks match the filters."
+    },
+    "timeline": {
+      "projectStarted": "Project started",
+      "projectStartedDescription": "{project} entered execution.",
+      "taskCreated": "Task created",
+      "taskCompleted": "Task completed",
+      "commentAdded": "Comment recorded",
+      "timesheetLogged": "Timesheet logged",
+      "timesheetLoggedDescription": "{count} timesheet(s), totaling {hours}.",
+      "approvalPending": "Approval pending",
+      "approvalPendingDescription": "{count} item(s) waiting for review.",
+      "completedTasks": "Completed tasks",
+      "completedTasksDescription": "{count} task(s) completed",
+      "pendingTimesheets": "Pending timesheets",
+      "pendingTimesheetsDescription": "{count} timesheet(s) waiting for review",
+      "targetDate": "Target date",
+      "targetDateDescription": "Operational project deadline.",
+      "loadMore": "Load more events",
+      "emptyTitle": "No activity to show",
+      "empty": "There is not enough operational activity yet to build a timeline.",
+      "filters": {
+        "all": "All events",
+        "task": "Tasks",
+        "status": "Status",
+        "timesheet": "Timesheets",
+        "approval": "Approvals",
+        "comment": "Comments"
+      },
+      "types": {
+        "task": "Task",
+        "timesheet": "Timesheet",
+        "approval": "Approval",
+        "comment": "Comment",
+        "status": "Status"
+      }
+    },
+    "teamPanel": {
+      "available": "Available",
+      "highAllocation": "High allocation",
+      "overload": "Overload",
+      "usedHours": "Used hours",
+      "availability": "Availability",
+      "overloadWarning": "{value}% above recommended capacity.",
+      "status": {
+        "available": "Available",
+        "high": "High load",
+        "overload": "Overload"
+      }
     },
     "quickRadar": {
       "activeAssignments": "Active assignments",
@@ -779,6 +919,7 @@
       "estimateLabel": "Estimate (h)",
       "tagsLabel": "Tags",
       "tagsPlaceholder": "planning, client, design (comma-separated)",
+      "attachmentsLabel": "Attachments",
       "saving": "Saving..."
     },
     "dialogs": {