chore: workspace active cycles upgrade page implementation (#3454)

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/constants/cycle.ts

@@ -1,4 +1,15 @@
-import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+import {
+  GanttChartSquare,
+  LayoutGrid,
+  List,
+  AlertOctagon,
+  BarChart4,
+  CircleDashed,
+  Folder,
+  Microscope,
+  Search,
+} from "lucide-react";
+
 // types
 import { TCycleLayout, TCycleView } from "@plane/types";
 
@@ -115,6 +126,43 @@ export const CYCLE_STATE_GROUPS_DETAILS = [
   },
 ];
 
+export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
+  {
+    title: "10,000-feet view of all active cycles.",
+    description:
+      "Zoom out to see running cycles across all your projects at once instead of going from Cycle to Cycle in each project.",
+    icon: Folder,
+  },
+  {
+    title: "Get a snapshot of each active cycle.",
+    description:
+      "Track high-level metrics for all active cycles, see their state of progress, and get a sense of scope against deadlines.",
+    icon: CircleDashed,
+  },
+  {
+    title: "Compare burndowns.",
+    description: "Monitor how each of your teams are performing with a peek into each cycle’s burndown report.",
+    icon: BarChart4,
+  },
+  {
+    title: "Quickly see make-or-break issues. ",
+    description:
+      "Preview high-priority issues for each cycle against due dates. See all of them per cycle in one click.",
+    icon: AlertOctagon,
+  },
+  {
+    title: "Zoom into cycles that need attention. ",
+    description: "Investigate the state of any cycle that doesn’t conform to expectations in one click.",
+    icon: Search,
+  },
+  {
+    title: "Stay ahead of blockers.",
+    description:
+      "Spot challenges from one project to another and see inter-cycle dependencies that aren’t obvious from any other view.",
+    icon: Microscope,
+  },
+];
+
 export const CYCLE_EMPTY_STATE_DETAILS = {
   active: {
     key: "active",

web/constants/dashboard.ts

@@ -19,6 +19,7 @@ import { Props } from "components/icons/types";
 import { EUserWorkspaceRoles } from "./workspace";
 // icons
 import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
+import { ContrastIcon } from "@plane/ui";
 
 // gradients for issues by priority widget graph bars
 export const PRIORITY_GRAPH_GRADIENTS = [
@@ -292,4 +293,12 @@ export const SIDEBAR_MENU_ITEMS: {
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/workspace-views/all-issues`,
     Icon: CheckCircle,
   },
+  {
+    key: "active-cycles",
+    label: "Active Cycles",
+    href: `/active-cycles`,
+    access: EUserWorkspaceRoles.GUEST,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles`,
+    Icon: ContrastIcon,
+  },
 ];