From 7dbc0d644765b18fa0637524a2cf3dfbefbd93cc Mon Sep 17 00:00:00 2001
From: gakshita <akshitagoyal1516@gmail.com>
Date: Tue, 30 Jul 2024 18:25:44 +0530
Subject: [PATCH 1/2] fix: added multiple states to module progress bar

---
 .../components/modules/module-card-item.tsx   | 38 ++++++-------------
 web/core/constants/module.ts                  | 23 +++++++++++
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index d8518f21a68..16ff8a223d7 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -6,13 +6,14 @@ 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 { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
+import { MODULE_STATE_GROUPS_DETAILS, MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
@@ -145,8 +146,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 +165,13 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
+  const progressIndicatorData = MODULE_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 +216,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">
diff --git a/web/core/constants/module.ts b/web/core/constants/module.ts
index bfec73dae08..cefa952860b 100644
--- a/web/core/constants/module.ts
+++ b/web/core/constants/module.ts
@@ -97,3 +97,26 @@ export const MODULE_ORDER_BY_OPTIONS: { key: TModuleOrderByOptions; label: strin
     label: "Manual",
   },
 ];
+
+export const MODULE_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",
+  },
+];

From c865d19fdabae6efac7b154403c59c9930b909e0 Mon Sep 17 00:00:00 2001
From: gakshita <akshitagoyal1516@gmail.com>
Date: Wed, 31 Jul 2024 12:44:35 +0530
Subject: [PATCH 2/2] fix: refactored

---
 .../cycles/active-cycle/progress.tsx          |  6 ++---
 .../components/modules/module-card-item.tsx   |  5 ++--
 web/core/constants/common.ts                  | 23 +++++++++++++++++++
 web/core/constants/cycle.ts                   | 23 -------------------
 web/core/constants/module.ts                  | 23 -------------------
 5 files changed, 29 insertions(+), 51 deletions(-)

diff --git a/web/core/components/cycles/active-cycle/progress.tsx b/web/core/components/cycles/active-cycle/progress.tsx
index 4f876b106e6..815aeedfbb7 100644
--- a/web/core/components/cycles/active-cycle/progress.tsx
+++ b/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>
diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 16ff8a223d7..5bae53d76a0 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -12,8 +12,9 @@ import { FavoriteStar, LayersIcon, LinearProgressIndicator, Tooltip, setPromiseT
 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_STATE_GROUPS_DETAILS, MODULE_STATUS } from "@/constants/module";
+import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
 import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
@@ -165,7 +166,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
-  const progressIndicatorData = MODULE_STATE_GROUPS_DETAILS.map((group, index) => ({
+  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,
diff --git a/web/core/constants/common.ts b/web/core/constants/common.ts
index 0c1431740d4..dccb5166da7 100644
--- a/web/core/constants/common.ts
+++ b/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",
+  },
+];
diff --git a/web/core/constants/cycle.ts b/web/core/constants/cycle.ts
index 5c6b48327c6..8ea15c5bc17 100644
--- a/web/core/constants/cycle.ts
+++ b/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.",
diff --git a/web/core/constants/module.ts b/web/core/constants/module.ts
index cefa952860b..bfec73dae08 100644
--- a/web/core/constants/module.ts
+++ b/web/core/constants/module.ts
@@ -97,26 +97,3 @@ export const MODULE_ORDER_BY_OPTIONS: { key: TModuleOrderByOptions; label: strin
     label: "Manual",
   },
 ];
-
-export const MODULE_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",
-  },
-];