From d480325829001c9ac2162e99cfd87c24d1ec0657 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Tue, 28 Feb 2023 10:31:52 +0530
Subject: [PATCH 01/10] chore: cycle validation services and constants added

---
 apps/app/constants/fetch-keys.ts    |  2 ++
 apps/app/services/cycles.service.ts | 31 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index a2831d818..99dcff81f 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -35,6 +35,8 @@ export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
 export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
+export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) => `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
+export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`;
 
 export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
index 109b62108..fa9769dc8 100644
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@@ -87,6 +87,37 @@ class ProjectCycleServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async cycleDateCheck(workspaceSlug: string, projectId: string, data: {
+    start_date: string,
+    end_date: string
+  }): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCurrentAndUpcomingCycles(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/current-upcoming-cycles/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCompletedCycles(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/past-cycles/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectCycleServices();

From 443c9300ddeb236cca6bf29e773ee795fab3e476 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Tue, 28 Feb 2023 14:47:32 +0530
Subject: [PATCH 02/10] chore:  cycle type and services updated

---
 apps/app/services/cycles.service.ts |  8 ++++----
 apps/app/types/cycles.d.ts          | 12 ++++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
index fa9769dc8..42f2f21ae 100644
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@@ -1,7 +1,7 @@
 // services
 import APIService from "services/api.service";
 // types
-import type { ICycle } from "types";
+import type { CompletedCyclesResponse, CurrentAndUpcomingCyclesResponse, ICycle } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -99,7 +99,7 @@ class ProjectCycleServices extends APIService {
       });
   }
 
-  async getCurrentAndUpcomingCycles(workspaceSlug: string, projectId: string): Promise<any> {
+  async getCurrentAndUpcomingCycles(workspaceSlug: string, projectId: string): Promise<CurrentAndUpcomingCyclesResponse> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/current-upcoming-cycles/`
     )
@@ -109,9 +109,9 @@ class ProjectCycleServices extends APIService {
       });
   }
 
-  async getCompletedCycles(workspaceSlug: string, projectId: string): Promise<any> {
+  async getCompletedCycles(workspaceSlug: string, projectId: string): Promise<CompletedCyclesResponse> {
     return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/past-cycles/`
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/completed-cycles/`
     )
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/apps/app/types/cycles.d.ts b/apps/app/types/cycles.d.ts
index dbd7573bf..060fe53f3 100644
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@@ -15,8 +15,20 @@ export interface ICycle {
   project: string;
   workspace: string;
   issue: string;
+  current_cycle: [];
+  upcoming_cycle: [];
+  past_cycles: [];
 }
 
+export interface CurrentAndUpcomingCyclesResponse {
+ current_cycle : ICycle[];
+ upcoming_cycle : ICycle[];
+}
+
+export interface CompletedCyclesResponse {
+  completed_cycles : ICycle[];
+ }
+
 export interface CycleIssueResponse {
   id: string;
   issue_detail: IIssue;

From 17e09d70e2e3895145c0f8f77bde41a51591facf Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Tue, 28 Feb 2023 14:53:10 +0530
Subject: [PATCH 03/10] chore: completed cycle dynamic importing and refactor

---
 .../cycles/completed-cycles-list.tsx          |  82 ++++++++
 .../{cycles-list-view.tsx => cycles-list.tsx} |   2 +-
 apps/app/components/cycles/index.ts           |   3 +-
 .../projects/[projectId]/cycles/index.tsx     | 192 +++++++-----------
 4 files changed, 163 insertions(+), 116 deletions(-)
 create mode 100644 apps/app/components/cycles/completed-cycles-list.tsx
 rename apps/app/components/cycles/{cycles-list-view.tsx => cycles-list.tsx} (97%)

diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles-list.tsx
new file mode 100644
index 000000000..b283e3da6
--- /dev/null
+++ b/apps/app/components/cycles/completed-cycles-list.tsx
@@ -0,0 +1,82 @@
+// react
+import { useState } from "react";
+// next
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// components
+import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
+// types
+import { ICycle, SelectCycleType } from "types";
+import { CompletedCycleIcon } from "components/icons";
+import cyclesService from "services/cycles.service";
+import { CYCLE_COMPLETE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
+};
+
+export const CompletedCyclesList: React.FC<Props> = ({
+  setCreateUpdateCycleModal,
+  setSelectedCycle,
+}) => {
+  const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+  const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: completedCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cyclesService.getCompletedCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleDeleteCycle = (cycle: ICycle) => {
+    setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
+    setCycleDeleteModal(true);
+  };
+
+  const handleEditCycle = (cycle: ICycle) => {
+    setSelectedCycle({ ...cycle, actionType: "edit" });
+    setCreateUpdateCycleModal(true);
+  };
+
+  return (
+    <>
+      {completedCycles && (
+        <>
+          <DeleteCycleModal
+            isOpen={
+              cycleDeleteModal &&
+              !!selectedCycleForDelete &&
+              selectedCycleForDelete.actionType === "delete"
+            }
+            setIsOpen={setCycleDeleteModal}
+            data={selectedCycleForDelete}
+          />
+          {completedCycles?.completed_cycles.length > 0 ? (
+            completedCycles.completed_cycles.map((cycle) => (
+              <SingleCycleCard
+                key={cycle.id}
+                cycle={cycle}
+                handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                handleEditCycle={() => handleEditCycle(cycle)}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-4 text-center">
+              <CompletedCycleIcon height="56" width="56" />
+              <h3 className="text-gray-500">
+                No completed cycles yet. Create with{" "}
+                <pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre>.
+              </h3>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/cycles/cycles-list-view.tsx b/apps/app/components/cycles/cycles-list.tsx
similarity index 97%
rename from apps/app/components/cycles/cycles-list-view.tsx
rename to apps/app/components/cycles/cycles-list.tsx
index 8491190e8..e55f0e6f1 100644
--- a/apps/app/components/cycles/cycles-list-view.tsx
+++ b/apps/app/components/cycles/cycles-list.tsx
@@ -13,7 +13,7 @@ type TCycleStatsViewProps = {
   type: "current" | "upcoming" | "completed";
 };
 
-export const CyclesListView: React.FC<TCycleStatsViewProps> = ({
+export const CyclesList: React.FC<TCycleStatsViewProps> = ({
   cycles,
   setCreateUpdateCycleModal,
   setSelectedCycle,
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 77dcb06a9..d1fd0d6b6 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -1,4 +1,5 @@
-export * from "./cycles-list-view";
+export * from "./completed-cycles-list";
+export * from "./cycles-list";
 export * from "./delete-cycle-modal";
 export * from "./form";
 export * from "./modal";
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index df18ba620..78229fc54 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -1,30 +1,47 @@
 import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
 import useSWR from "swr";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { Tab } from "@headlessui/react";
 
 // lib
 import { requiredAuth } from "lib/auth";
-import { CyclesIcon } from "components/icons";
+
 // services
 import cycleService from "services/cycles.service";
 import projectService from "services/project.service";
-import workspaceService from "services/workspace.service";
+
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import { CreateUpdateCycleModal, CyclesListView } from "components/cycles";
+import { CreateUpdateCycleModal, CyclesList } from "components/cycles";
 // ui
-import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
+import { HeaderButton, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
-import { ICycle, SelectCycleType } from "types";
+import { SelectCycleType } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
 // fetching keys
-import { CYCLE_LIST, PROJECT_DETAILS, WORKSPACE_DETAILS } from "constants/fetch-keys";
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  PROJECT_DETAILS,
+} from "constants/fetch-keys";
+
+const CompletedCyclesList = dynamic(
+  () => import("components/cycles").then((a) => a.CompletedCyclesList),
+  {
+    ssr: false,
+    loading: () => (
+      <Loader className="mb-5">
+        <Loader.Item height="12rem" width="100%" />
+      </Loader>
+    ),
+  }
+);
 
 const ProjectCycles: NextPage = () => {
   const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
@@ -34,22 +51,17 @@ const ProjectCycles: NextPage = () => {
     query: { workspaceSlug, projectId },
   } = useRouter();
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
   const { data: activeProject } = useSWR(
-    activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    activeWorkspace && projectId
-      ? () => projectService.getProject(activeWorkspace.slug, projectId as string)
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
       : null
   );
 
-  const { data: cycles } = useSWR<ICycle[]>(
-    activeWorkspace && projectId ? CYCLE_LIST(projectId as string) : null,
-    activeWorkspace && projectId
-      ? () => cycleService.getCycles(activeWorkspace.slug, projectId as string)
+  const { data: currentAndUpcomingCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -61,18 +73,6 @@ const ProjectCycles: NextPage = () => {
     else return "current";
   };
 
-  const currentCycles = cycles?.filter(
-    (c) => getCycleStatus(c.start_date, c.end_date) === "current"
-  );
-
-  const upcomingCycles = cycles?.filter(
-    (c) => getCycleStatus(c.start_date, c.end_date) === "upcoming"
-  );
-
-  const completedCycles = cycles?.filter(
-    (c) => getCycleStatus(c.start_date, c.end_date) === "completed"
-  );
-
   useEffect(() => {
     if (createUpdateCycleModal) return;
     const timer = setTimeout(() => {
@@ -110,92 +110,56 @@ const ProjectCycles: NextPage = () => {
         handleClose={() => setCreateUpdateCycleModal(false)}
         data={selectedCycle}
       />
-      {cycles ? (
-        cycles.length > 0 ? (
-          <div className="space-y-8">
-            <h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3>
-            <div className="space-y-5">
-              <CyclesListView
-                cycles={currentCycles ?? []}
-                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                setSelectedCycle={setSelectedCycle}
-                type="current"
-              />
-            </div>
-            <div className="space-y-5">
-              <Tab.Group>
-                <Tab.List
-                  as="div"
-                  className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
-                >
-                  <Tab
-                    className={({ selected }) =>
-                      `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
-                    }
-                  >
-                    Upcoming
-                  </Tab>
-                  <Tab
-                    className={({ selected }) =>
-                      `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
-                    }
-                  >
-                    Completed
-                  </Tab>
-                </Tab.List>
-                <Tab.Panels>
-                  <Tab.Panel as="div" className="mt-8 space-y-5">
-                    <CyclesListView
-                      cycles={upcomingCycles ?? []}
-                      setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                      setSelectedCycle={setSelectedCycle}
-                      type="upcoming"
-                    />
-                  </Tab.Panel>
-                  <Tab.Panel as="div" className="mt-8 space-y-5">
-                    <CyclesListView
-                      cycles={completedCycles ?? []}
-                      setCreateUpdateCycleModal={setCreateUpdateCycleModal}
-                      setSelectedCycle={setSelectedCycle}
-                      type="completed"
-                    />
-                  </Tab.Panel>
-                </Tab.Panels>
-              </Tab.Group>
-            </div>
-          </div>
-        ) : (
-          <div className="flex h-full w-full flex-col items-center justify-center px-4">
-            <EmptySpace
-              title="You don't have any cycle yet."
-              description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
-              Icon={CyclesIcon}
+      <div className="space-y-8">
+        <h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3>
+        <div className="space-y-5">
+          <CyclesList
+            cycles={currentAndUpcomingCycles?.current_cycle ?? []}
+            setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+            setSelectedCycle={setSelectedCycle}
+            type="current"
+          />
+        </div>
+        <div className="space-y-5">
+          <Tab.Group>
+            <Tab.List
+              as="div"
+              className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
             >
-              <EmptySpaceItem
-                title="Create a new cycle"
-                description={
-                  <span>
-                    Use <pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre> shortcut to
-                    create a new cycle
-                  </span>
+              <Tab
+                className={({ selected }) =>
+                  `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
                 }
-                Icon={PlusIcon}
-                action={() => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "q",
-                  });
-                  document.dispatchEvent(e);
-                }}
-              />
-            </EmptySpace>
-          </div>
-        )
-      ) : (
-        <Loader className="space-y-5">
-          <Loader.Item height="150px" />
-          <Loader.Item height="150px" />
-        </Loader>
-      )}
+              >
+                Upcoming
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                }
+              >
+                Completed
+              </Tab>
+            </Tab.List>
+            <Tab.Panels>
+              <Tab.Panel as="div" className="mt-8 space-y-5">
+                <CyclesList
+                  cycles={currentAndUpcomingCycles?.upcoming_cycle ?? []}
+                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                  setSelectedCycle={setSelectedCycle}
+                  type="upcoming"
+                />
+              </Tab.Panel>
+              <Tab.Panel as="div" className="mt-8 space-y-5">
+                <CompletedCyclesList
+                  setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                  setSelectedCycle={setSelectedCycle}
+                />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </div>
+      </div>
     </AppLayout>
   );
 };

From 19e9f510bc7d62cec3ffdbcf579c2f6eb80795cc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Tue, 28 Feb 2023 14:55:19 +0530
Subject: [PATCH 04/10] feat: cycle modal date validation

---
 apps/app/components/cycles/form.tsx  | 100 +++++++++++++++++++--------
 apps/app/components/cycles/modal.tsx |   2 +-
 2 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 58f57ba14..d32fd047d 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -1,11 +1,16 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
+// toast
+import useToast from "hooks/use-toast";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, CustomDatePicker, CustomSelect, Input, TextArea } from "components/ui";
 // types
 import { ICycle } from "types";
+// services
+import cyclesService from "services/cycles.service";
 
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
@@ -23,11 +28,19 @@ const defaultValues: Partial<ICycle> = {
 };
 
 export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const [isDateValid, setIsDateValid] = useState(true);
+
   const {
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
+    watch,
     reset,
   } = useForm<ICycle>({
     defaultValues,
@@ -41,6 +54,31 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
     });
   };
 
+  const dateChecker = async (payload: any) => {
+    await cyclesService
+      .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        if (res.status) {
+          setIsDateValid(true);
+        } else {
+          setIsDateValid(false);
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+          });
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const checkEmptyDate =
+    (watch("start_date") === "" && watch("end_date") === "") ||
+    (watch("start_date") === null && watch("end_date") === null);
+
   useEffect(() => {
     reset({
       ...defaultValues,
@@ -84,30 +122,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
               register={register}
             />
           </div>
-          <div>
-            <h6 className="text-gray-500">Status</h6>
-            <Controller
-              name="status"
-              control={control}
-              render={({ field }) => (
-                <CustomSelect
-                  {...field}
-                  label={<span className="capitalize">{field.value ?? "Select Status"}</span>}
-                  input
-                >
-                  {[
-                    { label: "Draft", value: "draft" },
-                    { label: "Started", value: "started" },
-                    { label: "Completed", value: "completed" },
-                  ].map((item) => (
-                    <CustomSelect.Option key={item.value} value={item.value}>
-                      {item.label}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              )}
-            />
-          </div>
+
           <div className="flex gap-x-2">
             <div className="w-full">
               <h6 className="text-gray-500">Start Date</h6>
@@ -115,12 +130,19 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                 <Controller
                   control={control}
                   name="start_date"
-                  rules={{ required: "Start date is required" }}
                   render={({ field: { value, onChange } }) => (
                     <CustomDatePicker
                       renderAs="input"
                       value={value}
-                      onChange={onChange}
+                      onChange={(val) => {
+                        onChange(val);
+                        watch("end_date")
+                          ? dateChecker({
+                              start_date: val,
+                              end_date: watch("end_date"),
+                            })
+                          : "";
+                      }}
                       error={errors.start_date ? true : false}
                     />
                   )}
@@ -136,12 +158,19 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                 <Controller
                   control={control}
                   name="end_date"
-                  rules={{ required: "End date is required" }}
                   render={({ field: { value, onChange } }) => (
                     <CustomDatePicker
                       renderAs="input"
                       value={value}
-                      onChange={onChange}
+                      onChange={(val) => {
+                        onChange(val);
+                        watch("start_date")
+                          ? dateChecker({
+                              start_date: watch("start_date"),
+                              end_date: val,
+                            })
+                          : "";
+                      }}
                       error={errors.end_date ? true : false}
                     />
                   )}
@@ -158,7 +187,18 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
         <Button theme="secondary" onClick={handleClose}>
           Cancel
         </Button>
-        <Button type="submit" disabled={isSubmitting}>
+
+        <Button
+          type="submit"
+          className={
+            checkEmptyDate
+              ? "cursor-pointer"
+              : isDateValid
+              ? "cursor-pointer"
+              : "cursor-not-allowed"
+          }
+          disabled={isSubmitting || checkEmptyDate ? false : isDateValid ? false : true}
+        >
           {status
             ? isSubmitting
               ? "Updating Cycle..."
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 3b537bcad..fc829024b 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -113,7 +113,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}

From 7d42262e72007c239a759f429b7e6112afc9d8b4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Tue, 28 Feb 2023 15:17:14 +0530
Subject: [PATCH 05/10] fix: build fix

---
 .../cycles/completed-cycles-list.tsx           |  6 +++---
 .../projects/[projectId]/cycles/index.tsx      | 18 +++---------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles-list.tsx
index b283e3da6..899a17bb2 100644
--- a/apps/app/components/cycles/completed-cycles-list.tsx
+++ b/apps/app/components/cycles/completed-cycles-list.tsx
@@ -12,12 +12,12 @@ import { CompletedCycleIcon } from "components/icons";
 import cyclesService from "services/cycles.service";
 import { CYCLE_COMPLETE_LIST } from "constants/fetch-keys";
 
-type Props = {
+export interface CompletedCyclesListProps {
   setCreateUpdateCycleModal: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedCycle: React.Dispatch<React.SetStateAction<SelectCycleType>>;
-};
+}
 
-export const CompletedCyclesList: React.FC<Props> = ({
+export const CompletedCyclesList: React.FC<CompletedCyclesListProps> = ({
   setCreateUpdateCycleModal,
   setSelectedCycle,
 }) => {
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 78229fc54..9c4c3fb8d 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -16,7 +16,7 @@ import projectService from "services/project.service";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import { CreateUpdateCycleModal, CyclesList } from "components/cycles";
+import { CompletedCyclesListProps, CreateUpdateCycleModal, CyclesList } from "components/cycles";
 // ui
 import { HeaderButton, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -25,13 +25,9 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { SelectCycleType } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
 // fetching keys
-import {
-  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
-  PROJECT_DETAILS,
-} from "constants/fetch-keys";
+import { CYCLE_CURRENT_AND_UPCOMING_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 
-const CompletedCyclesList = dynamic(
+const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
   () => import("components/cycles").then((a) => a.CompletedCyclesList),
   {
     ssr: false,
@@ -65,14 +61,6 @@ const ProjectCycles: NextPage = () => {
       : null
   );
 
-  const getCycleStatus = (startDate: string, endDate: string) => {
-    const today = new Date();
-
-    if (today < new Date(startDate)) return "upcoming";
-    else if (today > new Date(endDate)) return "completed";
-    else return "current";
-  };
-
   useEffect(() => {
     if (createUpdateCycleModal) return;
     const timer = setTimeout(() => {

From a840cea9e95e6a39675448555b457d895e74f689 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Wed, 1 Mar 2023 11:55:04 +0530
Subject: [PATCH 06/10] fix: cycle form date

---
 apps/app/components/cycles/form.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index d32fd047d..863b9b57a 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -22,9 +22,8 @@ type Props = {
 const defaultValues: Partial<ICycle> = {
   name: "",
   description: "",
-  status: "draft",
-  start_date: "",
-  end_date: "",
+  start_date: null,
+  end_date: null,
 };
 
 export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
@@ -77,7 +76,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
 
   const checkEmptyDate =
     (watch("start_date") === "" && watch("end_date") === "") ||
-    (watch("start_date") === null && watch("end_date") === null);
+    (!watch("start_date") && !watch("end_date"));
 
   useEffect(() => {
     reset({

From 7ab6eb7b487f8db6b5af5784ad8fa17ce0a49571 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Wed, 1 Mar 2023 11:56:14 +0530
Subject: [PATCH 07/10] chore: draft cycle services and types

---
 apps/app/constants/cycle.ts         |  5 -----
 apps/app/constants/fetch-keys.ts    |  1 +
 apps/app/services/cycles.service.ts | 12 +++++++++++-
 apps/app/types/cycles.d.ts          | 10 +++++++---
 4 files changed, 19 insertions(+), 9 deletions(-)
 delete mode 100644 apps/app/constants/cycle.ts

diff --git a/apps/app/constants/cycle.ts b/apps/app/constants/cycle.ts
deleted file mode 100644
index 93336fb8c..000000000
--- a/apps/app/constants/cycle.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const CYCLE_STATUS = [
-    { label: "Started", value: "started", color: "#5e6ad2" },
-    { label: "Completed", value: "completed", color: "#eb5757" },
-    { label: "Draft", value: "draft", color: "#f2c94c" },
-  ];
\ No newline at end of file
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 99dcff81f..42a3c3051 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -36,6 +36,7 @@ export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
 export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
 export const CYCLE_CURRENT_AND_UPCOMING_LIST = (projectId: string) => `CYCLE_CURRENT_AND_UPCOMING_LIST_${projectId}`;
+export const CYCLE_DRAFT_LIST = (projectId: string) => `CYCLE_DRAFT_LIST_${projectId}`;
 export const CYCLE_COMPLETE_LIST = (projectId: string) => `CYCLE_COMPLETE_LIST_${projectId}`;
 
 export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
index 42f2f21ae..eac138030 100644
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@@ -1,7 +1,7 @@
 // services
 import APIService from "services/api.service";
 // types
-import type { CompletedCyclesResponse, CurrentAndUpcomingCyclesResponse, ICycle } from "types";
+import type { CompletedCyclesResponse, CurrentAndUpcomingCyclesResponse, DraftCyclesResponse, ICycle } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -109,6 +109,16 @@ class ProjectCycleServices extends APIService {
       });
   }
 
+  async getDraftCycles(workspaceSlug: string, projectId: string): Promise<DraftCyclesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/draft-cycles/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async getCompletedCycles(workspaceSlug: string, projectId: string): Promise<CompletedCyclesResponse> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/completed-cycles/`
diff --git a/apps/app/types/cycles.d.ts b/apps/app/types/cycles.d.ts
index 060fe53f3..928166a32 100644
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@@ -7,9 +7,8 @@ export interface ICycle {
   updated_at: Date;
   name: string;
   description: string;
-  start_date: string;
-  end_date: string;
-  status: string;
+  start_date: string | null;
+  end_date: string | null;
   created_by: string;
   updated_by: string;
   project: string;
@@ -25,6 +24,11 @@ export interface CurrentAndUpcomingCyclesResponse {
  upcoming_cycle : ICycle[];
 }
 
+
+export interface DraftCyclesResponse {
+  draft_cycles : ICycle[];
+ }
+
 export interface CompletedCyclesResponse {
   completed_cycles : ICycle[];
  }

From 8a941d0d14f073194a2a233468c49151fb8ccb90 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Wed, 1 Mar 2023 11:58:30 +0530
Subject: [PATCH 08/10] feat: draft tab and cycle sidebar update

---
 apps/app/components/cycles/sidebar.tsx        | 68 ++++++++-----------
 .../projects/[projectId]/cycles/[cycleId].tsx | 37 ++++++++++
 .../projects/[projectId]/cycles/index.tsx     | 34 ++++++++--
 3 files changed, 97 insertions(+), 42 deletions(-)

diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index c61102fb1..ce61afea6 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 import { mutate } from "swr";
 
 // react-hook-form
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 // icons
@@ -19,7 +19,7 @@ import {
   UserIcon,
 } from "@heroicons/react/24/outline";
 // ui
-import { CustomSelect, Loader, ProgressBar } from "components/ui";
+import { Loader, ProgressBar } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -36,17 +36,22 @@ import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-tim
 import { CycleIssueResponse, ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
-// constants
-import { CYCLE_STATUS } from "constants/cycle";
 
 type Props = {
   issues: IIssue[];
   cycle: ICycle | undefined;
   isOpen: boolean;
   cycleIssues: CycleIssueResponse[];
+  cycleStatus: string;
 };
 
-export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
+export const CycleDetailsSidebar: React.FC<Props> = ({
+  issues,
+  cycle,
+  isOpen,
+  cycleIssues,
+  cycleStatus,
+}) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
 
   const router = useRouter();
@@ -60,7 +65,6 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
   const defaultValues: Partial<ICycle> = {
     start_date: new Date().toString(),
     end_date: new Date().toString(),
-    status: cycle?.status,
   };
 
   const groupedIssues = {
@@ -72,7 +76,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
     ...groupBy(cycleIssues ?? [], "issue_detail.state_detail.group"),
   };
 
-  const { reset, watch, control } = useForm({
+  const { reset } = useForm({
     defaultValues,
   });
 
@@ -118,32 +122,18 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
           <>
             <div className="flex gap-1 text-sm my-2">
               <div className="flex items-center ">
-                <Controller
-                  control={control}
-                  name="status"
-                  render={({ field: { value } }) => (
-                    <CustomSelect
-                      label={
-                        <span
-                          className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full  text-gray-900`}
-                        >
-                          <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
-                          {watch("status")}
-                        </span>
-                      }
-                      value={value}
-                      onChange={(value: any) => {
-                        submitChanges({ status: value });
-                      }}
-                    >
-                      {CYCLE_STATUS.map((option) => (
-                        <CustomSelect.Option key={option.value} value={option.value}>
-                          <span className="text-xs">{option.label}</span>
-                        </CustomSelect.Option>
-                      ))}
-                    </CustomSelect>
-                  )}
-                />
+                <span
+                  className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full  text-gray-900`}
+                >
+                  <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                  {cycleStatus === "current"
+                    ? "In Progress"
+                    : cycleStatus === "completed"
+                    ? "Completed"
+                    : cycleStatus === "upcoming"
+                    ? "Upcoming"
+                    : "Draft"}
+                </span>
               </div>
               <div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full  p-2 px-4  text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
                 <Popover className="flex justify-center items-center relative  rounded-lg">
@@ -289,14 +279,16 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
                         </div>
                       ) : (
                         <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
-                          {cycle.owned_by?.first_name && cycle.owned_by.first_name !== ""
-                            ? cycle.owned_by.first_name.charAt(0)
+                          {cycle.owned_by &&
+                          cycle.owned_by?.first_name &&
+                          cycle.owned_by?.first_name !== ""
+                            ? cycle.owned_by?.first_name.charAt(0)
                             : cycle.owned_by?.email.charAt(0)}
                         </div>
                       ))}
-                    {cycle.owned_by.first_name !== ""
-                      ? cycle.owned_by.first_name
-                      : cycle.owned_by.email}
+                    {cycle.owned_by?.first_name !== ""
+                      ? cycle.owned_by?.first_name
+                      : cycle.owned_by?.email}
                   </div>
                 </div>
                 <div className="flex flex-wrap items-center py-2">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 771387877..e4c1a5e94 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -34,6 +34,8 @@ import {
   PROJECT_ISSUES_LIST,
   PROJECT_DETAILS,
   CYCLE_DETAILS,
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
@@ -78,6 +80,40 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
+  const { data: currentAndUpcomingCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          cycleServices.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: completedCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleServices.getCompletedCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const checkForInProgress = currentAndUpcomingCycles?.current_cycle?.filter(
+    (c) => c.id === cycleDetails?.id
+  );
+  const checkForUpcoming = currentAndUpcomingCycles?.upcoming_cycle?.filter(
+    (c) => c.id === cycleDetails?.id
+  );
+  const checkForInCompleted = completedCycles?.completed_cycles?.filter(
+    (c) => c.id === cycleDetails?.id
+  );
+
+  const cycleStatus =
+    checkForInCompleted && checkForInCompleted.length > 0
+      ? "completed"
+      : checkForInProgress && checkForInProgress.length > 0
+      ? "current"
+      : checkForUpcoming && checkForUpcoming.length > 0
+      ? "upcoming"
+      : "draft";
+
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
@@ -218,6 +254,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <CycleDetailsSidebar
+          cycleStatus={cycleStatus}
           issues={cycleIssuesArray ?? []}
           cycle={cycleDetails}
           isOpen={cycleSidebar}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 9c4c3fb8d..f690e0a16 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -25,7 +25,11 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { SelectCycleType } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
 // fetching keys
-import { CYCLE_CURRENT_AND_UPCOMING_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import {
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+  PROJECT_DETAILS,
+} from "constants/fetch-keys";
 
 const CompletedCyclesList = dynamic<CompletedCyclesListProps>(
   () => import("components/cycles").then((a) => a.CompletedCyclesList),
@@ -54,6 +58,13 @@ const ProjectCycles: NextPage = () => {
       : null
   );
 
+  const { data: draftCycles } = useSWR(
+    workspaceSlug && projectId ? CYCLE_DRAFT_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => cycleService.getDraftCycles(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const { data: currentAndUpcomingCycles } = useSWR(
     workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -112,22 +123,29 @@ const ProjectCycles: NextPage = () => {
           <Tab.Group>
             <Tab.List
               as="div"
-              className="grid grid-cols-2 items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
+              className="flex justify-between items-center gap-2 rounded-lg bg-gray-100 p-2 text-sm"
             >
               <Tab
                 className={({ selected }) =>
-                  `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                  `w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
                 }
               >
                 Upcoming
               </Tab>
               <Tab
                 className={({ selected }) =>
-                  `rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                  `w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
                 }
               >
                 Completed
               </Tab>
+              <Tab
+                className={({ selected }) =>
+                  ` w-1/3 rounded-lg px-6 py-2 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+                }
+              >
+                Draft
+              </Tab>
             </Tab.List>
             <Tab.Panels>
               <Tab.Panel as="div" className="mt-8 space-y-5">
@@ -145,6 +163,14 @@ const ProjectCycles: NextPage = () => {
                 />
               </Tab.Panel>
             </Tab.Panels>
+            <Tab.Panel as="div" className="mt-8 space-y-5">
+              <CyclesList
+                cycles={draftCycles?.draft_cycles ?? []}
+                setCreateUpdateCycleModal={setCreateUpdateCycleModal}
+                setSelectedCycle={setSelectedCycle}
+                type="upcoming"
+              />
+            </Tab.Panel>
           </Tab.Group>
         </div>
       </div>

From 02e4e58f19f8386fb19d0150de8239dd345beefb Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Fri, 3 Mar 2023 11:32:00 +0530
Subject: [PATCH 09/10] feat: date range status function added

---
 apps/app/components/cycles/sidebar.tsx        |  2 +-
 apps/app/helpers/date-time.helper.ts          | 14 ++++++++
 .../projects/[projectId]/cycles/[cycleId].tsx | 36 ++-----------------
 3 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index ce61afea6..46be61e8b 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -128,7 +128,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
                   {cycleStatus === "current"
                     ? "In Progress"
-                    : cycleStatus === "completed"
+                    : cycleStatus === "past"
                     ? "Completed"
                     : cycleStatus === "upcoming"
                     ? "Upcoming"
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index 4d179ef0d..b7a815cae 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -88,3 +88,17 @@ export const timeAgo = (time: any) => {
     }
   return time;
 };
+
+export const getDateRangeStatus = (startDate: string  , endDate: string ) => {
+  const now = new Date();
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  if (end < now) {
+    return "past";
+  } else if (start <= now && end >= now) {
+    return "current";
+  } else {
+    return "upcoming";
+  }
+}
\ No newline at end of file
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index e4c1a5e94..efafd3ce3 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -25,6 +25,7 @@ import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
+import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
 import { CycleIssueResponse, UserAuth } from "types";
 // fetch-keys
@@ -34,8 +35,6 @@ import {
   PROJECT_ISSUES_LIST,
   PROJECT_DETAILS,
   CYCLE_DETAILS,
-  CYCLE_COMPLETE_LIST,
-  CYCLE_CURRENT_AND_UPCOMING_LIST,
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
@@ -80,38 +79,9 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const { data: currentAndUpcomingCycles } = useSWR(
-    workspaceSlug && projectId ? CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cycleServices.getCurrentAndUpcomingCycles(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: completedCycles } = useSWR(
-    workspaceSlug && projectId ? CYCLE_COMPLETE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => cycleServices.getCompletedCycles(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const checkForInProgress = currentAndUpcomingCycles?.current_cycle?.filter(
-    (c) => c.id === cycleDetails?.id
-  );
-  const checkForUpcoming = currentAndUpcomingCycles?.upcoming_cycle?.filter(
-    (c) => c.id === cycleDetails?.id
-  );
-  const checkForInCompleted = completedCycles?.completed_cycles?.filter(
-    (c) => c.id === cycleDetails?.id
-  );
-
   const cycleStatus =
-    checkForInCompleted && checkForInCompleted.length > 0
-      ? "completed"
-      : checkForInProgress && checkForInProgress.length > 0
-      ? "current"
-      : checkForUpcoming && checkForUpcoming.length > 0
-      ? "upcoming"
+    cycleDetails?.start_date && cycleDetails?.end_date
+      ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
       : "draft";
 
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(

From f965734f3bf10c05478cb36039dbafcfa4609256 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Fri, 3 Mar 2023 13:49:19 +0530
Subject: [PATCH 10/10] fix: mutation fix and date range helper fn added

---
 apps/app/components/cycles/modal.tsx   | 44 ++++++++++++++++++++++++--
 apps/app/components/cycles/sidebar.tsx |  2 +-
 apps/app/helpers/date-time.helper.ts   |  2 +-
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index fc829024b..a83d8ca93 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -12,10 +12,16 @@ import cycleService from "services/cycles.service";
 import useToast from "hooks/use-toast";
 // components
 import { CycleForm } from "components/cycles";
+// helper
+import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
 import type { ICycle } from "types";
 // fetch keys
-import { CYCLE_LIST } from "constants/fetch-keys";
+import {
+  CYCLE_COMPLETE_LIST,
+  CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DRAFT_LIST,
+} from "constants/fetch-keys";
 
 type CycleModalProps = {
   isOpen: boolean;
@@ -37,7 +43,23 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
     await cycleService
       .createCycle(workspaceSlug as string, projectId as string, payload)
       .then((res) => {
-        mutate(CYCLE_LIST(projectId as string));
+        switch (
+          res?.start_date && res.end_date
+            ? getDateRangeStatus(res?.start_date, res.end_date)
+            : "draft"
+        ) {
+          case "completed":
+            mutate(CYCLE_COMPLETE_LIST(projectId as string));
+            break;
+          case "current":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          case "upcoming":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          default:
+            mutate(CYCLE_DRAFT_LIST(projectId as string));
+        }
         handleClose();
 
         setToastAlert({
@@ -59,7 +81,23 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
     await cycleService
       .updateCycle(workspaceSlug as string, projectId as string, cycleId, payload)
       .then((res) => {
-        mutate(CYCLE_LIST(projectId as string));
+        switch (
+          res?.start_date && res.end_date
+            ? getDateRangeStatus(res?.start_date, res.end_date)
+            : "draft"
+        ) {
+          case "completed":
+            mutate(CYCLE_COMPLETE_LIST(projectId as string));
+            break;
+          case "current":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          case "upcoming":
+            mutate(CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string));
+            break;
+          default:
+            mutate(CYCLE_DRAFT_LIST(projectId as string));
+        }
         handleClose();
 
         setToastAlert({
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 46be61e8b..ce61afea6 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -128,7 +128,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
                   {cycleStatus === "current"
                     ? "In Progress"
-                    : cycleStatus === "past"
+                    : cycleStatus === "completed"
                     ? "Completed"
                     : cycleStatus === "upcoming"
                     ? "Upcoming"
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index b7a815cae..1fdd58f58 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -95,7 +95,7 @@ export const getDateRangeStatus = (startDate: string  , endDate: string ) => {
   const end = new Date(endDate);
 
   if (end < now) {
-    return "past";
+    return "completed";
   } else if (start <= now && end >= now) {
     return "current";
   } else {