UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: трехсекционная шкала прогресса чекеров

plane-src/apps/web/ce/components/projects/external-contours/board-item.tsx

@@ -28,6 +28,7 @@ import { useProjectState } from "@/hooks/store/use-project-state";
 import { useUserPermissions } from "@/hooks/store/user";
 import { IssueArchiveService } from "@/services/issue/issue_archive.service";
 import { IssueService } from "@/services/issue/issue.service";
+import { NodedcWorkItemProgress } from "@/components/issues/issue-layouts/shared/nodedc-work-item-card";
 import { ExternalContourDeleteModal } from "./delete-modal";
 
 type Props = {
@@ -143,6 +144,10 @@ export const ExternalContoursBoardItem = observer(function ExternalContoursBoard
     isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" : "text-white"
   );
   const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
+  const checkerBlocksTotal = issue.checker_blocks_count ?? 0;
+  const checkerItemsTotal = issue.checker_items_count ?? 0;
+  const checkerItemsCompleted = issue.checker_items_completed_count ?? 0;
+  const hasCheckerProgress = checkerBlocksTotal > 0;
   const canArchive = canEditTargetIssue && !!selectedState && ARCHIVABLE_STATE_GROUPS.includes(selectedState.group);
 
   if (!issue) return null;
@@ -459,8 +464,26 @@ export const ExternalContoursBoardItem = observer(function ExternalContoursBoard
               </div>
             </div>
 
-            <div className="flex flex-1 items-center justify-start px-1 pt-7 pb-4 text-left">
-              <div className="line-clamp-5 max-w-full text-[15px] leading-5 font-medium">{issue.name}</div>
+            <div
+              className={cn(
+                "flex flex-1 items-center pb-4",
+                hasCheckerProgress ? "justify-center px-0.5 pt-4 text-left" : "justify-start px-1 pt-7 text-left"
+              )}
+            >
+              {hasCheckerProgress ? (
+                <div className="flex w-full flex-col items-stretch gap-3">
+                  <NodedcWorkItemProgress
+                    completedCount={checkerItemsCompleted}
+                    totalCount={checkerItemsTotal}
+                    isActive={isActive}
+                  />
+                  <div className="line-clamp-4 w-full text-left text-[15px] leading-5 font-medium">
+                    {issue.name}
+                  </div>
+                </div>
+              ) : (
+                <div className="line-clamp-5 max-w-full text-[15px] leading-5 font-medium">{issue.name}</div>
+              )}
             </div>
 
             <div className="flex items-center justify-between gap-3" onClick={stopCardPropagation}>