+
= observer((props) => {
+ const { workspaceSlug, projectId, cycle } = props;
+
+ const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
+
+ const currentValue = (tab: string | null) => {
+ switch (tab) {
+ case "Priority-Issues":
+ return 0;
+ case "Assignees":
+ return 1;
+ case "Labels":
+ return 2;
+ default:
+ return 0;
+ }
+ };
+ const {
+ issues: { fetchActiveCycleIssues },
+ } = useIssues(EIssuesStoreType.CYCLE);
+
+ const { currentProjectDetails } = useProject();
+
+ const { data: activeCycleIssues } = useSWR(
+ workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES_WITH_PARAMS(cycle.id, { priority: "urgent,high" }) : null,
+ workspaceSlug && projectId && cycle.id ? () => fetchActiveCycleIssues(workspaceSlug, projectId, cycle.id) : null
+ );
+
+ const cycleIssues = activeCycleIssues ?? [];
+
+ return (
+
+
+ }
+ completed={assignee.completed_issues}
+ total={assignee.total_issues}
+ />
+ );
+ })}
+
+
+
+ {cycle.distribution?.labels?.map((label, index) => (
+
+
+ {label.label_name ?? "No labels"}
+
+ }
+ completed={label.completed_issues}
+ total={label.total_issues}
+ />
+ ))}
+
+
+
+
+ );
+});
diff --git a/web/components/cycles/active-cycle/header.tsx b/web/components/cycles/active-cycle/header.tsx
new file mode 100644
index 000000000..98ed91c1d
--- /dev/null
+++ b/web/components/cycles/active-cycle/header.tsx
@@ -0,0 +1,77 @@
+import { FC } from "react";
+import Link from "next/link";
+// types
+import { ICycle, TCycleGroups } from "@plane/types";
+// ui
+import { Tooltip, CycleGroupIcon, getButtonStyling, Avatar, AvatarGroup } from "@plane/ui";
+// helpers
+import { renderFormattedDate, findHowManyDaysLeft } from "@/helpers/date-time.helper";
+import { truncateText } from "@/helpers/string.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+
+export type ActiveCycleHeaderProps = {
+ cycle: ICycle;
+ workspaceSlug: string;
+ projectId: string;
+};
+
+export const ActiveCycleHeader: FC
+ {
+ switch (i) {
+ case 0:
+ return setTab("Priority-Issues");
+ case 1:
+ return setTab("Assignees");
+ case 2:
+ return setTab("Labels");
+
+ default:
+ return setTab("Priority-Issues");
+ }
+ }}
+ >
+
+
+ cn(
+ "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+ {
+ "text-custom-text-300 bg-custom-background-100": selected,
+ "hover:text-custom-text-300": !selected,
+ }
+ )
+ }
+ >
+ Priority Issues
+
+
+ cn(
+ "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+ {
+ "text-custom-text-300 bg-custom-background-100": selected,
+ "hover:text-custom-text-300": !selected,
+ }
+ )
+ }
+ >
+ Assignees
+
+
+ cn(
+ "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+ {
+ "text-custom-text-300 bg-custom-background-100": selected,
+ "hover:text-custom-text-300": !selected,
+ }
+ )
+ }
+ >
+ Labels
+
+
+
+
+
+
+
+
+ {cycle.distribution?.assignees?.map((assignee, index) => {
+ if (assignee.assignee_id)
+ return (
+
+
+ }
+ completed={assignee.completed_issues}
+ total={assignee.total_issues}
+ />
+ );
+ else
+ return (
+
+ {cycleIssues ? (
+ cycleIssues.length > 0 ? (
+ cycleIssues.map((issue: TIssue) => (
+
+
+
+ )}
+
+
+
+
+ {currentProjectDetails?.identifier}-{issue.sequence_id}
+
+
+
+ {issue.name}
+
+
+
+ {}}
+ projectId={projectId?.toString() ?? ""}
+ disabled
+ buttonVariant="background-with-text"
+ buttonContainerClassName="cursor-pointer max-w-24"
+ showTooltip
+ />
+ {issue.target_date && (
+
+
+ )}
+
+
+ ))
+ ) : (
+
+
+
+ There are no high priority issues present in this cycle.
+
+ )
+ ) : (
+
+ 
+
+ No assignee
+
+
+
+ );
+};
diff --git a/web/components/cycles/active-cycle/index.ts b/web/components/cycles/active-cycle/index.ts
index 73d5d1e98..d88ccc3e8 100644
--- a/web/components/cycles/active-cycle/index.ts
+++ b/web/components/cycles/active-cycle/index.ts
@@ -1,4 +1,8 @@
export * from "./root";
+export * from "./header";
export * from "./stats";
export * from "./upcoming-cycles-list-item";
export * from "./upcoming-cycles-list";
+export * from "./cycle-stats";
+export * from "./progress";
+export * from "./productivity";
diff --git a/web/components/cycles/active-cycle/productivity.tsx b/web/components/cycles/active-cycle/productivity.tsx
new file mode 100644
index 000000000..59c2ac3c9
--- /dev/null
+++ b/web/components/cycles/active-cycle/productivity.tsx
@@ -0,0 +1,46 @@
+import { FC } from "react";
+// types
+import { ICycle } from "@plane/types";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+
+export type ActiveCycleProductivityProps = {
+ cycle: ICycle;
+};
+
+export const ActiveCycleProductivity: FC
+
+
+
+
+ {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
+
+
+
+ {truncateText(cycle.name, 70)}
+
+
+
+
+
+ View Cycle
+
+
+
+ {cycleAssignee.map((member) => (
+
+
+ )}
+
+
+
+ );
+};
diff --git a/web/components/cycles/active-cycle/progress.tsx b/web/components/cycles/active-cycle/progress.tsx
new file mode 100644
index 000000000..dea3b496a
--- /dev/null
+++ b/web/components/cycles/active-cycle/progress.tsx
@@ -0,0 +1,79 @@
+import { FC } from "react";
+// types
+import { ICycle } from "@plane/types";
+// ui
+import { LinearProgressIndicator } from "@plane/ui";
+// constants
+import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
+
+export type ActiveCycleProgressProps = {
+ cycle: ICycle;
+};
+
+export const ActiveCycleProgress: FC
+
+
+ Issue burndown
+
+
+
+
+
+
+ {`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}
+
+
+ Ideal
+
+
+
+ Current
+
+
+
+
+
+ );
+};
diff --git a/web/components/cycles/active-cycle/root.tsx b/web/components/cycles/active-cycle/root.tsx
index 83acd1521..bd2c3b613 100644
--- a/web/components/cycles/active-cycle/root.tsx
+++ b/web/components/cycles/active-cycle/root.tsx
@@ -1,48 +1,20 @@
-import { MouseEvent } from "react";
import { observer } from "mobx-react-lite";
-import Link from "next/link";
import useSWR from "swr";
-// hooks
-import { ArrowRight, CalendarCheck, CalendarDays, Star, Target } from "lucide-react";
-import { ICycle, TCycleGroups } from "@plane/types";
-import {
- AvatarGroup,
- Loader,
- Tooltip,
- LinearProgressIndicator,
- LayersIcon,
- StateGroupIcon,
- PriorityIcon,
- Avatar,
- CycleGroupIcon,
- setPromiseToast,
- getButtonStyling,
-} from "@plane/ui";
-import { SingleProgressStats } from "@/components/core";
// ui
+import { Loader } from "@plane/ui";
// components
-import ProgressChart from "@/components/core/sidebar/progress-chart";
-import { ActiveCycleProgressStats, UpcomingCyclesList } from "@/components/cycles";
-import { StateDropdown } from "@/components/dropdowns";
-import { EmptyState } from "@/components/empty-state";
-// icons
-// helpers
-// types
-// constants
-import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
-import { EmptyStateType } from "@/constants/empty-state";
-import { CYCLE_ISSUES_WITH_PARAMS } from "@/constants/fetch-keys";
-import { EIssuesStoreType } from "@/constants/issue";
-import { cn } from "@/helpers/common.helper";
import {
- renderFormattedDate,
- findHowManyDaysLeft,
- renderFormattedDateWithoutYear,
- getDate,
-} from "@/helpers/date-time.helper";
-import { truncateText } from "@/helpers/string.helper";
-import { useCycle, useCycleFilter, useIssues, useMember, useProject } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
+ ActiveCycleHeader,
+ ActiveCycleProductivity,
+ ActiveCycleProgress,
+ ActiveCycleStats,
+ UpcomingCyclesList,
+} from "@/components/cycles";
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// hooks
+import { useCycle, useCycleFilter } from "@/hooks/store";
interface IActiveCycleDetails {
workspaceSlug: string;
@@ -52,41 +24,24 @@ interface IActiveCycleDetails {
export const ActiveCycleRoot: React.FC
+
+
+
+
+ Progress
+ + {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${ + cycle.completed_issues + cycle.cancelled_issues > 1 ? "Issues" : "Issue" + } closed`} + +
+ {Object.keys(groupedIssues).map((group, index) => (
+ <>
+ {groupedIssues[group] > 0 && (
+
+
+
+ )}
+
+ ))}
+ {cycle.cancelled_issues > 0 && (
+
+
+ {`${cycle.cancelled_issues} cancelled ${
+ cycle.cancelled_issues > 1 ? "issues are" : "issue is"
+ } excluded from this report.`}{" "}
+
+
+ )}
+
+
+
+
+ {group}
+
+ {`${groupedIssues[group]} ${
+ groupedIssues[group] > 1 ? "Issues" : "Issue"
+ }`}
+ {"'"}All{"'"} cycles tab to see all cycles or{" "} -