fix: cycle and module bug fixes and improvement (#2691)

* fix: cycle and module card issue count fix

* fix: cycle and module list progress icon fix

* fix: module card progress fix

* style: cycle & module empty date label updated

* fix: build error

space/constants/data.ts

@@ -10,12 +10,12 @@ import {
 } from "types/issue";
 // icons
 import {
-  BacklogStateIcon,
+  BacklogGroupIcon,
-  UnstartedStateIcon,
+  CancelledGroupIcon,
-  StartedStateIcon,
+  CompletedGroupIcon,
-  CompletedStateIcon,
+  StartedGroupIcon,
-  CancelledStateIcon,
+  UnstartedGroupIcon,
-} from "components/icons";
+} from "@plane/ui";
 
 // all issue views
 export const issueViews: any = {
@@ -92,35 +92,35 @@ export const issueGroups: IIssueGroup[] = [
     title: "Backlog",
     color: "#d9d9d9",
     className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
-    icon: BacklogStateIcon,
+    icon: BacklogGroupIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
     className: `text-[#3f76ff] bg-[#3f76ff]/10`,
-    icon: UnstartedStateIcon,
+    icon: UnstartedGroupIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
     className: `text-[#f59e0b] bg-[#f59e0b]/10`,
-    icon: StartedStateIcon,
+    icon: StartedGroupIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
     className: `text-[#16a34a] bg-[#16a34a]/10`,
-    icon: CompletedStateIcon,
+    icon: CompletedGroupIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
     className: `text-[#dc2626] bg-[#dc2626]/10`,
-    icon: CancelledStateIcon,
+    icon: CancelledGroupIcon,
   },
 ];
 

web/components/cycles/cycles-board-card.tsx

@@ -44,6 +44,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const isCompleted = cycleStatus === "completed";
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
+  const isDateValid = cycle.start_date || cycle.end_date;
 
   const router = useRouter();
 
@@ -64,9 +65,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     ? cycleTotalIssues === 0
       ? "0 Issue"
       : cycleTotalIssues === cycle.completed_issues
-      ? cycleTotalIssues > 1
+      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-        ? `${cycleTotalIssues} Issues`
-        : `${cycleTotalIssues} Issue`
       : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
     : "0 Issue";
 
@@ -225,10 +224,14 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
             </Tooltip>
 
             <div className="flex items-center justify-between">
-              <span className="text-xs text-custom-text-300">
+              {isDateValid ? (
-                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                <span className="text-xs text-custom-text-300">
-                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                  {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
-              </span>
+                  {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                </span>
+              ) : (
+                <span className="text-xs text-custom-text-400">No due date</span>
+              )}
               <div className="flex items-center gap-1.5 z-10">
                 {cycle.is_favorite ? (
                   <button type="button" onClick={handleRemoveFromFavorites}>

web/components/cycles/cycles-list-item.tsx

@@ -155,9 +155,11 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               <span className="flex-shrink-0">
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {isCompleted ? (
-                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    progress === 100 ? (
-                  ) : progress === 100 ? (
+                      <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
-                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                    ) : (
+                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    )
                   ) : (
                     <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
                   )}

web/components/modules/module-card-item.tsx

@@ -49,18 +49,19 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   const endDate = new Date(module.target_date ?? "");
   const startDate = new Date(module.start_date ?? "");
 
+  const isDateValid = module.target_date || module.start_date;
+
   const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
 
-  const issueCount =
+  const issueCount = module
-    moduleTotalIssues === 0
+    ? moduleTotalIssues === 0
       ? "0 Issue"
       : moduleTotalIssues === module.completed_issues
-      ? moduleTotalIssues > 1
+      ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
-        ? `${moduleTotalIssues} Issues`
+      : `${module.completed_issues}/${moduleTotalIssues} Issues`
-        : `${moduleTotalIssues} Issue`
+    : "0 Issue";
-      : `${module.completed_issues}/${moduleTotalIssues} Issues`;
 
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -200,10 +201,17 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
             </Tooltip>
 
             <div className="flex items-center justify-between">
-              <span className="text-xs text-custom-text-300">
+              {isDateValid ? (
-                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                <>
-                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                  <span className="text-xs text-custom-text-300">
-              </span>
+                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                    {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+                  </span>
+                </>
+              ) : (
+                <span className="text-xs text-custom-text-400">No due date</span>
+              )}
+
               <div className="flex items-center gap-1.5 z-10">
                 {module.is_favorite ? (
                   <button type="button" onClick={handleRemoveFromFavorites}>

web/components/modules/module-list-item.tsx

@@ -50,7 +50,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
 
   const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
 
-  const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues;
+  const completedModuleCheck = module.status === "completed";
 
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -134,9 +134,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               <span className="flex-shrink-0">
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {completedModuleCheck ? (
-                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    progress === 100 ? (
-                  ) : progress === 100 ? (
+                      <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
-                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                    ) : (
+                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    )
                   ) : (
                     <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
                   )}