[WEB-2028] fix: added states to module progress bar (#5273)

* fix: added multiple states to module progress bar

* fix: refactored

web/core/components/cycles/active-cycle/progress.tsx

@@ -9,7 +9,7 @@ import { LinearProgressIndicator, Loader } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/empty-state";
 // constants
-import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
+import { PROGRESS_STATE_GROUPS_DETAILS } from "@/constants/common";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProgressProps = {
@@ -21,7 +21,7 @@ export type ActiveCycleProgressProps = {
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
   const { workspaceSlug, projectId, cycle } = props;
 
-  const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
+  const progressIndicatorData = PROGRESS_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
     name: group.title,
     value: cycle && cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
@@ -67,7 +67,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
                       <span
                         className="block h-3 w-3 rounded-full"
                         style={{
-                          backgroundColor: CYCLE_STATE_GROUPS_DETAILS[index].color,
+                          backgroundColor: PROGRESS_STATE_GROUPS_DETAILS[index].color,
                         }}
                       />
                       <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>

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

@@ -6,11 +6,13 @@ import Link from "next/link";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
 // ui
-import { FavoriteStar, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
+import { IModule } from "@plane/types";
+import { FavoriteStar, LayersIcon, LinearProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
 // components
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
+import { PROGRESS_STATE_GROUPS_DETAILS } from "@/constants/common";
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
@@ -145,8 +147,6 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     ? moduleDetails?.completed_estimate_points || 0
     : moduleDetails.completed_issues;
 
-  const completionPercentage = (moduleCompletedIssues / moduleTotalIssues) * 100;
-
   const endDate = getDate(moduleDetails.target_date);
   const startDate = getDate(moduleDetails.start_date);
 
@@ -166,6 +166,13 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
+  const progressIndicatorData = PROGRESS_STATE_GROUPS_DETAILS.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: moduleTotalIssues > 0 ? (moduleDetails[group.key as keyof IModule] as number) : 0,
+    color: group.color,
+  }));
+
   return (
     <div className="relative">
       <Link ref={parentRef} href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
@@ -210,29 +217,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                 </Tooltip>
               )}
             </div>
-
-            <Tooltip
-              isMobile={isMobile}
-              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
-              position="top-left"
-            >
-              <div className="flex w-full items-center">
-                <div
-                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
-                  style={{
-                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
-                  }}
-                >
-                  <div
-                    className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
-                    style={{
-                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
-                    }}
-                  />
-                </div>
-              </div>
-            </Tooltip>
-
+            <LinearProgressIndicator size="lg" data={progressIndicatorData} />
             <div className="flex items-center justify-between py-0.5">
               {isDateValid ? (
                 <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">

web/core/constants/common.ts

@@ -5,3 +5,26 @@ export const MARKETING_PRICING_PAGE_LINK = "https://plane.so/pricing";
 export const MARKETING_CONTACT_US_PAGE_LINK = "https://plane.so/contact";
 
 export const MARKETING_PLANE_ONE_PAGE_LINK = "https://plane.so/one";
+
+export const PROGRESS_STATE_GROUPS_DETAILS = [
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#16A34A",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#F59E0B",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#3A3A3A",
+  },
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#A3A3A3",
+  },
+];

web/core/constants/cycle.ts

@@ -91,29 +91,6 @@ export const CYCLE_STATUS: {
   },
 ];
 
-export const CYCLE_STATE_GROUPS_DETAILS = [
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#16A34A",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#F59E0B",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#3A3A3A",
-  },
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#A3A3A3",
-  },
-];
-
 export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
   {
     title: "10,000-feet view of all active cycles.",