chore: project cycle bug fixes and improvement (#3427)

* chore: burndown chart's completed at changes * chore: project cycle bug fixes and improvement * chore: cycle state constant updated --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
2024-06-14 14:31:34 +00:00 · 2024-01-22 20:42:09 +05:30 · 2024-01-22 20:42:09 +05:30 · fd5326dec6
commit fd5326dec6
parent 49452a68ab
11 changed files with 149 additions and 212 deletions
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@ -9,6 +9,7 @@ from django.db.models.signals import post_save
 from django.dispatch import receiver
 from django.core.validators import MinValueValidator, MaxValueValidator
 from django.core.exceptions import ValidationError
+from django.utils import timezone

 # Module imports
 from . import ProjectBaseModel
@ -183,6 +184,17 @@ class Issue(ProjectBaseModel):
                    self.state = default_state
            except ImportError:
                pass
+        else:
+            try:
+                from plane.db.models import State
+
+                # Check if the current issue state group is completed or not
+                if self.state.group == "completed":
+                    self.completed_at = timezone.now()
+                else:
+                    self.completed_at = None
+            except ImportError:
+                pass

        if self._state.adding:
            # Get the maximum display_id value from the database
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@ -4,6 +4,7 @@ from datetime import timedelta

 # Django import
 from django.db import models
+from django.utils import timezone
 from django.db.models.functions import TruncDate
 from django.db.models import Count, F, Sum, Value, Case, When, CharField
 from django.db.models.functions import (
@ -168,6 +169,9 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
            if item["date"] is not None and item["date"] <= date
        )
        cumulative_pending_issues -= total_completed
-        chart_data[str(date)] = cumulative_pending_issues
+        if date > timezone.now().date():
+            chart_data[str(date)] = None
+        else:
+            chart_data[str(date)] = cumulative_pending_issues

    return chart_data
--- a/packages/types/src/cycles.d.ts
+++ b/packages/types/src/cycles.d.ts
@ -1,4 +1,11 @@
-import type { IUser, TIssue, IProjectLite, IWorkspaceLite, IIssueFilterOptions, IUserLite } from "@plane/types";
+import type {
+  IUser,
+  TIssue,
+  IProjectLite,
+  IWorkspaceLite,
+  IIssueFilterOptions,
+  IUserLite,
+} from "@plane/types";

 export type TCycleView = "all" | "active" | "upcoming" | "completed" | "draft";

@ -54,7 +61,7 @@ export type TAssigneesDistribution = {
 };

 export type TCompletionChartDistribution = {
-  [key: string]: number;
+  [key: string]: number | null;
 };

 export type TLabelsDistribution = {
@ -80,9 +87,13 @@ export interface CycleIssueResponse {
  sub_issues_count: number;
 }

-export type SelectCycleType = (ICycle & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
+export type SelectCycleType =
+  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
+  | undefined;

-export type SelectIssue = (TIssue & { actionType: "edit" | "delete" | "create" }) | null;
+export type SelectIssue =
+  | (TIssue & { actionType: "edit" | "delete" | "create" })
+  | null;

 export type CycleDateCheckData = {
  start_date: string;
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@ -4,15 +4,17 @@ import { Tooltip } from "../tooltip";
 type Props = {
  data: any;
  noTooltip?: boolean;
+  inPercentage?: boolean;
 };

-export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false }) => {
+export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false, inPercentage = false }) => {
  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let progress = 0;

  const bars = data.map((item: any) => {
    const width = `${(item.value / total) * 100}%`;
+    if (width === "0%") return <></>;
    const style = {
      width,
      backgroundColor: item.color,
@ -22,7 +24,7 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = fal
    else
      return (
        <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
-          <div style={style} />
+          <div style={style} className="first:rounded-l-full last:rounded-r-full" />
        </Tooltip>
      );
  });
--- a/web/components/core/sidebar/single-progress-stats.tsx
+++ b/web/components/core/sidebar/single-progress-stats.tsx
@ -30,7 +30,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
          <CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
        </span>
        <span className="w-8 text-right">
-          {isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
+          {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
        </span>
      </div>
      <span>of {total}</span>
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@ -3,7 +3,7 @@ import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // hooks
-import { useApplication, useCycle, useIssues, useProjectState } from "hooks/store";
+import { useApplication, useCycle, useIssues, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { SingleProgressStats } from "components/core";
@ -12,55 +12,27 @@ import {
  Loader,
  Tooltip,
  LinearProgressIndicator,
-  ContrastIcon,
-  RunningIcon,
  LayersIcon,
  StateGroupIcon,
  PriorityIcon,
  Avatar,
+  CycleGroupIcon,
 } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";
-import { ViewIssueLabel } from "components/issues";
+import { StateDropdown } from "components/dropdowns";
 // icons
-import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
+import { ArrowRight, CalendarCheck, CalendarDays, Star, Target } from "lucide-react";
 // helpers
-import { renderFormattedDate, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { renderFormattedDate, findHowManyDaysLeft, renderFormattedDateWithoutYear } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
-import { ICycle } from "@plane/types";
+import { ICycle, TCycleGroups } from "@plane/types";
+// constants
 import { EIssuesStoreType } from "constants/issue";
-import { ACTIVE_CYCLE_ISSUES } from "store/issue/cycle";
 import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-
-const stateGroups = [
-  {
-    key: "backlog_issues",
-    title: "Backlog",
-    color: "#dee2e6",
-  },
-  {
-    key: "unstarted_issues",
-    title: "Unstarted",
-    color: "#26b5ce",
-  },
-  {
-    key: "started_issues",
-    title: "Started",
-    color: "#f7ae59",
-  },
-  {
-    key: "cancelled_issues",
-    title: "Cancelled",
-    color: "#d687ff",
-  },
-  {
-    key: "completed_issues",
-    title: "Completed",
-    color: "#09a953",
-  },
-];
+import { CYCLE_STATE_GROUPS_DETAILS } from "constants/cycle";

 interface IActiveCycleDetails {
  workspaceSlug: string;
@ -72,8 +44,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
  const { workspaceSlug, projectId } = props;
  // store hooks
  const {
-    issues: { issues, fetchActiveCycleIssues },
-    issueMap,
+    issues: { fetchActiveCycleIssues },
  } = useIssues(EIssuesStoreType.CYCLE);
  const {
    commandPalette: { toggleCreateCycleModal },
@ -85,7 +56,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
    addCycleToFavorites,
    removeCycleFromFavorites,
  } = useCycle();
-  const { getProjectStates } = useProjectState();
+  const { currentProjectDetails } = useProject();
  // toast alert
  const { setToastAlert } = useToast();

@ -95,9 +66,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
  );

  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
-  const issueIds = issues?.[ACTIVE_CYCLE_ISSUES];

-  useSWR(
+  const { data: activeCycleIssues } = useSWR(
    workspaceSlug && projectId && currentProjectActiveCycleId
      ? CYCLE_ISSUES_WITH_PARAMS(currentProjectActiveCycleId, { priority: "urgent,high" })
      : null,
@ -149,7 +119,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
    cancelled: activeCycle.cancelled_issues,
  };

-  const cycleStatus = activeCycle.status.toLocaleLowerCase();
+  const cycleStatus = activeCycle.status.toLowerCase() as TCycleGroups;

  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
@ -177,7 +147,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
    });
  };

-  const progressIndicatorData = stateGroups.map((group, index) => ({
+  const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
    id: index,
    name: group.title,
    value:
@ -187,6 +157,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
    color: group.color,
  }));

+  const daysLeft = findHowManyDaysLeft(activeCycle.end_date ?? new Date());
+
  return (
    <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
@ -196,68 +168,15 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
              <div className="flex items-center justify-between gap-1">
                <span className="flex items-center gap-1">
                  <span className="h-5 w-5">
-                    <ContrastIcon
-                      className="h-5 w-5"
-                      color={`${
-                        cycleStatus === "current"
-                          ? "#09A953"
-                          : cycleStatus === "upcoming"
-                          ? "#F7AE59"
-                          : cycleStatus === "completed"
-                          ? "#3F76FF"
-                          : cycleStatus === "draft"
-                          ? "rgb(var(--color-text-200))"
-                          : ""
-                      }`}
-                    />
+                    <CycleGroupIcon cycleGroup={cycleStatus} className="h-4 w-4" />
                  </span>
                  <Tooltip tooltipContent={activeCycle.name} position="top-left">
                    <h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
                  </Tooltip>
                </span>
                <span className="flex items-center gap-1 capitalize">
-                  <span
-                    className={`rounded-full px-1.5 py-0.5
-                    ${
-                      cycleStatus === "current"
-                        ? "bg-green-600/5 text-green-600"
-                        : cycleStatus === "upcoming"
-                        ? "bg-orange-300/5 text-orange-300"
-                        : cycleStatus === "completed"
-                        ? "bg-blue-500/5 text-blue-500"
-                        : cycleStatus === "draft"
-                        ? "bg-neutral-400/5 text-neutral-400"
-                        : ""
-                    }`}
-                  >
-                    {cycleStatus === "current" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <RunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(activeCycle.end_date ?? new Date())} Days Left
-                      </span>
-                    ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        <AlarmClock className="h-4 w-4" />
-                        {findHowManyDaysLeft(activeCycle.start_date ?? new Date())} Days Left
-                      </span>
-                    ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1 whitespace-nowrap">
-                        {activeCycle.total_issues - activeCycle.completed_issues > 0 && (
-                          <Tooltip
-                            tooltipContent={`${activeCycle.total_issues - activeCycle.completed_issues} more pending ${
-                              activeCycle.total_issues - activeCycle.completed_issues === 1 ? "issue" : "issues"
-                            }`}
-                          >
-                            <span>
-                              <AlertTriangle className="h-3.5 w-3.5" />
-                            </span>
-                          </Tooltip>
-                        )}{" "}
-                        Completed
-                      </span>
-                    ) : (
-                      cycleStatus
-                    )}
+                  <span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
+                    {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
                  </span>
                  {activeCycle.is_favorite ? (
                    <button
@ -344,7 +263,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
            <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
              <div className="flex w-full items-center gap-2 py-1">
                <span>Progress</span>
-                <LinearProgressIndicator data={progressIndicatorData} />
+                <LinearProgressIndicator data={progressIndicatorData} inPercentage />
              </div>
              <div className="mt-2 flex flex-col items-center gap-1">
                {Object.keys(groupedIssues).map((group, index) => (
@ -355,7 +274,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                        <span
                          className="block h-3 w-3 rounded-full "
                          style={{
-                            backgroundColor: stateGroups[index].color,
+                            backgroundColor: CYCLE_STATE_GROUPS_DETAILS[index].color,
                          }}
                        />
                        <span className="text-xs capitalize">{group}</span>
@ -374,107 +293,66 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
        </div>
      </div>
      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
-        <div className="flex flex-col justify-between p-4">
-          <div>
-            <div className="text-custom-primary">High Priority Issues</div>
-            <div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
-              {issueIds ? (
-                issueIds.length > 0 ? (
-                  issueIds.map((issue: any) => (
-                    <Link
-                      key={issue.id}
-                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-                      className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
-                    >
-                      <div className="flex flex-col gap-1">
-                        <div>
-                          <Tooltip
-                            tooltipHeading="Issue ID"
-                            tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-                          >
-                            <span className="flex-shrink-0 text-xs text-custom-text-200">
-                              {issue.project_detail?.identifier}-{issue.sequence_id}
-                            </span>
-                          </Tooltip>
-                        </div>
-                        <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                          <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
-                        </Tooltip>
-                      </div>
-                      <div className="flex items-center gap-1.5">
-                        <div
-                          className={`grid h-6 w-6 flex-shrink-0 place-items-center items-center rounded border shadow-sm ${
-                            issue.priority === "urgent"
-                              ? "border-red-500/20 bg-red-500/20 text-red-500"
-                              : "border-orange-500/20 bg-orange-500/20 text-orange-500"
-                          }`}
-                        >
-                          <PriorityIcon priority={issue.priority} className="text-sm" />
-                        </div>
-                        <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
-                        <div className={`flex items-center gap-2 text-custom-text-200`}>
-                          {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
-                            <div className="-my-0.5 flex items-center justify-center gap-2">
-                              <AvatarGroup showTooltip={false}>
-                                {issue.assignee_details.map((assignee: any) => (
-                                  <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                                ))}
-                              </AvatarGroup>
-                            </div>
-                          ) : (
-                            ""
-                          )}
-                        </div>
-                      </div>
-                    </Link>
-                  ))
-                ) : (
-                  <div className="grid place-items-center text-center text-sm text-custom-text-200">
-                    No issues present in the cycle.
-                  </div>
-                )
-              ) : (
-                <Loader className="space-y-3">
-                  <Loader.Item height="50px" />
-                  <Loader.Item height="50px" />
-                  <Loader.Item height="50px" />
-                </Loader>
-              )}
-            </div>
-          </div>
+        <div className="flex flex-col gap-3 p-4 max-h-60 overflow-hidden">
+          <div className="text-custom-primary">High Priority Issues</div>
+          <div className="flex flex-col h-full gap-2.5 overflow-y-scroll rounded-md">
+            {activeCycleIssues ? (
+              activeCycleIssues.length > 0 ? (
+                activeCycleIssues.map((issue: any) => (
+                  <Link
+                    key={issue.id}
+                    href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+                    className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200  px-3 py-1.5"
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <PriorityIcon priority={issue.priority} withContainer size={12} />

-          {issueIds && issueIds.length > 0 && (
-            <div className="flex items-center justify-between gap-2">
-              <div className="h-1 w-full rounded-full bg-custom-background-80">
-                <div
-                  className="h-1 rounded-full bg-green-600"
-                  style={{
-                    width:
-                      issueIds &&
-                      `${
-                        (issueIds.filter((issue: any) => issue?.state_detail?.group === "completed")?.length /
-                          issueIds.length) *
-                          100 ?? 0
-                      }%`,
-                  }}
-                />
-              </div>
-              <div className="w-16 text-end text-xs text-custom-text-200">
-                of{" "}
-                {
-                  issueIds?.filter(
-                    (issueId) =>
-                      getProjectStates(issueMap[issueId]?.project_id)?.find(
-                        (issue) => issue.id === issueMap[issueId]?.state_id
-                      )?.group === "completed"
-                  )?.length
-                }{" "}
-                of {issueIds?.length}
-              </div>
-            </div>
-          )}
+                      <Tooltip
+                        tooltipHeading="Issue ID"
+                        tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
+                      >
+                        <span className="flex-shrink-0 text-xs text-custom-text-200">
+                          {currentProjectDetails?.identifier}-{issue.sequence_id}
+                        </span>
+                      </Tooltip>
+                      <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+                        <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
+                      </Tooltip>
+                    </div>
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      <StateDropdown
+                        value={issue.state_id ?? undefined}
+                        onChange={() => {}}
+                        projectId={projectId?.toString() ?? ""}
+                        disabled={true}
+                        buttonVariant="background-with-text"
+                      />
+                      {issue.target_date && (
+                        <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
+                          <div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 cursor-not-allowed">
+                            <CalendarCheck className="h-3 w-3 flex-shrink-0" />
+                            <span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>
+                          </div>
+                        </Tooltip>
+                      )}
+                    </div>
+                  </Link>
+                ))
+              ) : (
+                <div className="flex items-center justify-center h-full text-sm text-custom-text-200">
+                  There are no high priority issues present in this cycle.
+                </div>
+              )
+            ) : (
+              <Loader className="space-y-3">
+                <Loader.Item height="50px" />
+                <Loader.Item height="50px" />
+                <Loader.Item height="50px" />
+              </Loader>
+            )}
+          </div>
        </div>
-        <div className="flex flex-col justify-between border-custom-border-200 p-4">
+        <div className="flex flex-col  border-custom-border-200 p-4 max-h-60">
          <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
            <div className="flex items-center gap-3 text-custom-text-100">
              <div className="flex items-center justify-center gap-1">
@ -496,7 +374,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
              </span>
            </div>
          </div>
-          <div className="relative h-64">
+          <div className="relative h-full">
            <ProgressChart
              distribution={activeCycle.distribution?.completion_chart ?? {}}
              startDate={activeCycle.start_date ?? ""}
--- a/web/components/cycles/active-cycle-stats.tsx
+++ b/web/components/cycles/active-cycle-stats.tsx
@ -127,7 +127,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
        </Tab.Panels>
      ) : (
        <div className="mt-4 grid place-items-center text-center text-sm text-custom-text-200">
-          No issues present in the cycle.
+          There are no high priority issues present in this cycle.
        </div>
      )}
    </Tab.Group>
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@ -126,6 +126,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                        onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
                        buttonVariant="border-with-text"
                        placeholder="Start date"
+                        minDate={new Date()}
                        maxDate={maxDate ?? undefined}
                        tabIndex={3}
                      />
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@ -9,7 +9,7 @@ type Props = {

 export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 }) => (
  <>
-    {labelDetails.length > 0 ? (
+    {labelDetails?.length > 0 ? (
      labelDetails.length <= maxRender ? (
        <>
          {labelDetails.map((label) => (
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@ -70,7 +70,7 @@ export const ModuleForm: React.FC<Props> = ({
  const startDate = watch("start_date");
  const targetDate = watch("target_date");

-  const minDate = startDate ? new Date(startDate) : null;
+  const minDate = startDate ? new Date(startDate) : new Date();
  minDate?.setDate(minDate.getDate());

  const maxDate = targetDate ? new Date(targetDate) : null;
@ -159,6 +159,7 @@ export const ModuleForm: React.FC<Props> = ({
                    onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
                    buttonVariant="border-with-text"
                    placeholder="Start date"
+                    minDate={new Date()}
                    maxDate={maxDate ?? undefined}
                    tabIndex={3}
                  />
--- a/web/constants/cycle.ts
+++ b/web/constants/cycle.ts
@ -86,3 +86,31 @@ export const CYCLE_STATUS: {
    bgColor: "bg-custom-background-90",
  },
 ];
+
+export const CYCLE_STATE_GROUPS_DETAILS = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#F0F0F3",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#FB923C",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#FFC53D",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#ef4444",
+  },
+];