[WEB-1395] chore: project active cycle ui enhancements (#4608)

* chore: list item component improvement

* chore: project cycle ui enhancement

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

@@ -2,6 +2,8 @@ import React, { FC } from "react";
 import Link from "next/link";
 // ui
 import { Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 interface IListItemProps {
   title: string;
@@ -12,6 +14,7 @@ interface IListItemProps {
   actionableItems?: JSX.Element;
   isMobile?: boolean;
   parentRef: React.RefObject<HTMLDivElement>;
+  className?: string;
 }
 
 export const ListItem: FC<IListItemProps> = (props) => {
@@ -24,12 +27,18 @@ export const ListItem: FC<IListItemProps> = (props) => {
     onItemClick,
     isMobile = false,
     parentRef,
+    className = "",
   } = props;
 
   return (
     <div ref={parentRef} className="relative">
       <Link href={itemLink} onClick={onItemClick}>
-        <div className="group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row">
+        <div
+          className={cn(
+            "group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row",
+            className
+          )}
+        >
           <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
             <div className="relative flex w-full items-center gap-3 overflow-hidden">
               <div className="flex items-center gap-4 truncate">

web/components/cycles/active-cycle/productivity.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // components
@@ -8,14 +9,19 @@ import { EmptyState } from "@/components/empty-state";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProductivityProps = {
+  workspaceSlug: string;
+  projectId: string;
   cycle: ICycle;
 };
 
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props) => {
-  const { cycle } = props;
+  const { workspaceSlug, projectId, cycle } = props;
 
   return (
-    <div className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
+      className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
+    >
       <div className="flex items-center justify-between gap-4">
         <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
       </div>
@@ -53,6 +59,6 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props)
           </div>
         </>
       )}
-    </div>
+    </Link>
   );
 };

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

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // ui
@@ -10,11 +11,13 @@ import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProgressProps = {
+  workspaceSlug: string;
+  projectId: string;
   cycle: ICycle;
 };
 
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
-  const { cycle } = props;
+  const { workspaceSlug, projectId, cycle } = props;
 
   const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
@@ -31,7 +34,10 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
   };
 
   return (
-    <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
+      className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
+    >
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
           <h3 className="text-base text-custom-text-300 font-semibold">Progress</h3>
@@ -85,6 +91,6 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
           <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
         </div>
       )}
-    </div>
+    </Link>
   );
 };

web/components/cycles/active-cycle/root.tsx

@@ -62,13 +62,18 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                       cycleId={currentProjectActiveCycleId}
                       workspaceSlug={workspaceSlug}
                       projectId={projectId}
+                      className="!border-b-transparent"
                     />
                   )}
-                  <div className="bg-custom-background-90 py-6 px-8">
-                    <div className="grid grid-cols-1 bg-custom-background-90 gap-3 lg:grid-cols-2 xl:grid-cols-3">
-                      <ActiveCycleProgress cycle={activeCycle} />
-                      <ActiveCycleProductivity cycle={activeCycle} />
-                      <ActiveCycleStats cycle={activeCycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+                  <div className="bg-custom-background-100 pt-3 pb-6 px-6">
+                    <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+                      <ActiveCycleProgress workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+                      <ActiveCycleProductivity
+                        workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        cycle={activeCycle}
+                      />
+                      <ActiveCycleStats workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
                     </div>
                   </div>
                 </div>

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

@@ -22,10 +22,11 @@ type TCyclesListItem = {
   handleRemoveFromFavorites?: () => void;
   workspaceSlug: string;
   projectId: string;
+  className?: string;
 };
 
 export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
-  const { cycleId, workspaceSlug, projectId } = props;
+  const { cycleId, workspaceSlug, projectId, className = "" } = props;
   // refs
   const parentRef = useRef(null);
   // router
@@ -83,6 +84,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
       onItemClick={(e) => {
         if (cycleDetails.archived_at) openCycleOverview(e);
       }}
+      className={className}
       prependTitleElement={
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {isCompleted ? (