From e5934e0b0799cb5e7e76dca731866479749979e7 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 20 Feb 2023 11:23:04 +0530
Subject: [PATCH] refactor/cycles_folder_structure (#304)

---
 .../command-palette/command-pallette.tsx      |   5 +-
 .../index.tsx => cycles/cycles-list-view.tsx} |  11 +-
 .../delete-cycle-modal.tsx}                   |   4 +-
 apps/app/components/cycles/form.tsx           | 124 +++++---
 apps/app/components/cycles/index.ts           |   6 +-
 apps/app/components/cycles/modal.tsx          |  64 ++--
 apps/app/components/cycles/select.tsx         |   9 +-
 .../index.tsx => cycles/sidebar.tsx}          |  12 +-
 .../single-cycle-card.tsx}                    |   4 +-
 .../components/issues/description-form.tsx    |   5 +-
 apps/app/components/issues/form.tsx           |   8 +-
 apps/app/components/modules/form.tsx          |  14 +-
 apps/app/components/modules/modal.tsx         |  42 +--
 .../cycles/create-update-cycle-modal.tsx      | 278 ------------------
 apps/app/components/project/cycles/index.ts   |   2 -
 .../projects/[projectId]/cycles/[cycleId].tsx |   4 +-
 .../projects/[projectId]/cycles/index.tsx     |  18 +-
 apps/app/types/cycles.d.ts                    |   4 +-
 18 files changed, 175 insertions(+), 439 deletions(-)
 rename apps/app/components/{project/cycles/stats-view/index.tsx => cycles/cycles-list-view.tsx} (87%)
 rename apps/app/components/{project/cycles/confirm-cycle-deletion.tsx => cycles/delete-cycle-modal.tsx} (97%)
 rename apps/app/components/{project/cycles/cycle-detail-sidebar/index.tsx => cycles/sidebar.tsx} (97%)
 rename apps/app/components/{project/cycles/stats-view/single-stat.tsx => cycles/single-cycle-card.tsx} (98%)
 delete mode 100644 apps/app/components/project/cycles/create-update-cycle-modal.tsx
 delete mode 100644 apps/app/components/project/cycles/index.ts

diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 0ec31ca84..4110d0a27 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -17,8 +17,8 @@ import { ShortcutsModal } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
 import { CreateProjectModal } from "components/project";
 import { CreateUpdateIssueModal } from "components/issues";
+import { CreateUpdateCycleModal } from "components/cycles";
 import { CreateUpdateModuleModal } from "components/modules";
-import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
 import { Button } from "components/ui";
 // icons
@@ -169,8 +169,7 @@ export const CommandPalette: React.FC = () => {
         <>
           <CreateUpdateCycleModal
             isOpen={isCreateCycleModalOpen}
-            setIsOpen={setIsCreateCycleModalOpen}
-            projectId={projectId as string}
+            handleClose={() => setIsCreateCycleModalOpen(false)}
           />
           <CreateUpdateModuleModal
             isOpen={isCreateModuleModalOpen}
diff --git a/apps/app/components/project/cycles/stats-view/index.tsx b/apps/app/components/cycles/cycles-list-view.tsx
similarity index 87%
rename from apps/app/components/project/cycles/stats-view/index.tsx
rename to apps/app/components/cycles/cycles-list-view.tsx
index 354bab4a1..8491190e8 100644
--- a/apps/app/components/project/cycles/stats-view/index.tsx
+++ b/apps/app/components/cycles/cycles-list-view.tsx
@@ -1,8 +1,7 @@
 // react
 import { useState } from "react";
 // components
-import SingleStat from "components/project/cycles/stats-view/single-stat";
-import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
+import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
 // types
 import { ICycle, SelectCycleType } from "types";
 import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
@@ -14,7 +13,7 @@ type TCycleStatsViewProps = {
   type: "current" | "upcoming" | "completed";
 };
 
-const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
+export const CyclesListView: React.FC<TCycleStatsViewProps> = ({
   cycles,
   setCreateUpdateCycleModal,
   setSelectedCycle,
@@ -35,7 +34,7 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
 
   return (
     <>
-      <ConfirmCycleDeletion
+      <DeleteCycleModal
         isOpen={
           cycleDeleteModal &&
           !!selectedCycleForDelete &&
@@ -46,7 +45,7 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
       />
       {cycles.length > 0 ? (
         cycles.map((cycle) => (
-          <SingleStat
+          <SingleCycleCard
             key={cycle.id}
             cycle={cycle}
             handleDeleteCycle={() => handleDeleteCycle(cycle)}
@@ -71,5 +70,3 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
     </>
   );
 };
-
-export default CycleStatsView;
diff --git a/apps/app/components/project/cycles/confirm-cycle-deletion.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
similarity index 97%
rename from apps/app/components/project/cycles/confirm-cycle-deletion.tsx
rename to apps/app/components/cycles/delete-cycle-modal.tsx
index c1a5f38ed..a962533a4 100644
--- a/apps/app/components/project/cycles/confirm-cycle-deletion.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -23,7 +23,7 @@ type TConfirmCycleDeletionProps = {
 // fetch-keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 
-const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = ({
+export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
   isOpen,
   setIsOpen,
   data,
@@ -149,5 +149,3 @@ const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = ({
     </Transition.Root>
   );
 };
-
-export default ConfirmCycleDeletion;
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 262db1abc..58f57ba14 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -1,39 +1,59 @@
-import { FC } from "react";
+import { useEffect } from "react";
+
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// components
-import { Button, Input, TextArea, CustomSelect } from "components/ui";
+// ui
+import { Button, CustomDatePicker, CustomSelect, Input, TextArea } from "components/ui";
 // types
-import type { ICycle } from "types";
+import { ICycle } from "types";
+
+type Props = {
+  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: ICycle;
+};
 
 const defaultValues: Partial<ICycle> = {
   name: "",
   description: "",
   status: "draft",
-  start_date: new Date().toString(),
-  end_date: new Date().toString(),
+  start_date: "",
+  end_date: "",
 };
 
-export interface CycleFormProps {
-  handleFormSubmit: (values: Partial<ICycle>) => void;
-  handleFormCancel?: () => void;
-  initialData?: Partial<ICycle>;
-}
-
-export const CycleForm: FC<CycleFormProps> = (props) => {
-  const { handleFormSubmit, handleFormCancel = () => {}, initialData = null } = props;
-  // form handler
+export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
   const {
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
+    reset,
   } = useForm<ICycle>({
-    defaultValues: initialData || defaultValues,
+    defaultValues,
   });
 
+  const handleCreateUpdateCycle = async (formData: Partial<ICycle>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
   return (
-    <form onSubmit={handleSubmit(handleFormSubmit)}>
+    <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
       <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">
+          {status ? "Update" : "Create"} Cycle
+        </h3>
         <div className="space-y-3">
           <div>
             <Input
@@ -47,6 +67,10 @@ export const CycleForm: FC<CycleFormProps> = (props) => {
               register={register}
               validations={{
                 required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
               }}
             />
           </div>
@@ -86,42 +110,56 @@ export const CycleForm: FC<CycleFormProps> = (props) => {
           </div>
           <div className="flex gap-x-2">
             <div className="w-full">
-              <Input
-                id="start_date"
-                label="Start Date"
-                name="start_date"
-                type="date"
-                placeholder="Enter start date"
-                error={errors.start_date}
-                register={register}
-                validations={{
-                  required: "Start date is required",
-                }}
-              />
+              <h6 className="text-gray-500">Start Date</h6>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="start_date"
+                  rules={{ required: "Start date is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomDatePicker
+                      renderAs="input"
+                      value={value}
+                      onChange={onChange}
+                      error={errors.start_date ? true : false}
+                    />
+                  )}
+                />
+                {errors.start_date && (
+                  <h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
+                )}
+              </div>
             </div>
             <div className="w-full">
-              <Input
-                id="end_date"
-                label="End Date"
-                name="end_date"
-                type="date"
-                placeholder="Enter end date"
-                error={errors.end_date}
-                register={register}
-                validations={{
-                  required: "End date is required",
-                }}
-              />
+              <h6 className="text-gray-500">End Date</h6>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="end_date"
+                  rules={{ required: "End date is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomDatePicker
+                      renderAs="input"
+                      value={value}
+                      onChange={onChange}
+                      error={errors.end_date ? true : false}
+                    />
+                  )}
+                />
+                {errors.end_date && (
+                  <h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <Button theme="secondary" onClick={handleFormCancel}>
+        <Button theme="secondary" onClick={handleClose}>
           Cancel
         </Button>
         <Button type="submit" disabled={isSubmitting}>
-          {initialData
+          {status
             ? isSubmitting
               ? "Updating Cycle..."
               : "Update Cycle"
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 2219ecc47..77dcb06a9 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -1,3 +1,7 @@
+export * from "./cycles-list-view";
+export * from "./delete-cycle-modal";
+export * from "./form";
 export * from "./modal";
 export * from "./select";
-export * from "./form";
+export * from "./sidebar";
+export * from "./single-cycle-card";
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 878a629ca..43c2a1b7b 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -1,5 +1,7 @@
 import { Fragment } from "react";
 
+import { useRouter } from "next/router";
+
 import { mutate } from "swr";
 
 // headless ui
@@ -15,28 +17,27 @@ import type { ICycle } from "types";
 // fetch keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 
-export interface CycleModalProps {
+type CycleModalProps = {
   isOpen: boolean;
   handleClose: () => void;
-  projectId: string;
-  workspaceSlug: string;
-  initialData?: ICycle;
-}
+  data?: ICycle;
+};
 
-export const CycleModal: React.FC<CycleModalProps> = ({
+export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
   isOpen,
   handleClose,
-  initialData,
-  projectId,
-  workspaceSlug,
+  data,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   const { setToastAlert } = useToast();
 
-  const createCycle = (payload: Partial<ICycle>) => {
-    cycleService
-      .createCycle(workspaceSlug as string, projectId, payload)
+  const createCycle = async (payload: Partial<ICycle>) => {
+    await cycleService
+      .createCycle(workspaceSlug as string, projectId as string, payload)
       .then((res) => {
-        mutate(CYCLE_LIST(projectId));
+        mutate(CYCLE_LIST(projectId as string));
         handleClose();
       })
       .catch((err) => {
@@ -48,11 +49,11 @@ export const CycleModal: React.FC<CycleModalProps> = ({
       });
   };
 
-  const updateCycle = (cycleId: string, payload: Partial<ICycle>) => {
-    cycleService
-      .updateCycle(workspaceSlug, projectId, cycleId, payload)
+  const updateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
+    await cycleService
+      .updateCycle(workspaceSlug as string, projectId as string, cycleId, payload)
       .then((res) => {
-        mutate(CYCLE_LIST(projectId));
+        mutate(CYCLE_LIST(projectId as string));
         handleClose();
       })
       .catch((err) => {
@@ -64,18 +65,15 @@ export const CycleModal: React.FC<CycleModalProps> = ({
       });
   };
 
-  const handleFormSubmit = (formValues: Partial<ICycle>) => {
-    if (workspaceSlug && projectId) {
-      const payload = {
-        ...formValues,
-      };
+  const handleFormSubmit = async (formData: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId) return;
 
-      if (initialData) {
-        updateCycle(initialData.id, payload);
-      } else {
-        createCycle(payload);
-      }
-    }
+    const payload: Partial<ICycle> = {
+      ...formData,
+    };
+
+    if (!data) await createCycle(payload);
+    else await updateCycle(data.id, payload);
   };
 
   return (
@@ -104,10 +102,12 @@ export const CycleModal: React.FC<CycleModalProps> = ({
               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.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
-                  {initialData ? "Update" : "Create"} Cycle
-                </Dialog.Title>
-                <CycleForm handleFormSubmit={handleFormSubmit} handleFormCancel={handleClose} />
+                <CycleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                />
               </Dialog.Panel>
             </Transition.Child>
           </div>
diff --git a/apps/app/components/cycles/select.tsx b/apps/app/components/cycles/select.tsx
index 26de56bb8..c48219276 100644
--- a/apps/app/components/cycles/select.tsx
+++ b/apps/app/components/cycles/select.tsx
@@ -12,7 +12,7 @@ import { CyclesIcon } from "components/icons";
 // services
 import cycleServices from "services/cycles.service";
 // components
-import { CycleModal } from "components/cycles";
+import { CreateUpdateCycleModal } from "components/cycles";
 // fetch-keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 
@@ -54,12 +54,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
 
   return (
     <>
-      <CycleModal
-        isOpen={isCycleModalActive}
-        handleClose={closeCycleModal}
-        projectId={projectId}
-        workspaceSlug={workspaceSlug as string}
-      />
+      <CreateUpdateCycleModal isOpen={isCycleModalActive} handleClose={closeCycleModal} />
       <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
         {({ open }) => (
           <>
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/cycles/sidebar.tsx
similarity index 97%
rename from apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
rename to apps/app/components/cycles/sidebar.tsx
index f552bef88..a4f794f64 100644
--- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -30,7 +30,7 @@ import cyclesService from "services/cycles.service";
 // components
 import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
-import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
+import { DeleteCycleModal } from "components/cycles";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
@@ -49,7 +49,7 @@ type Props = {
   cycleIssues: CycleIssueResponse[];
 };
 
-const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
+export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
 
   const router = useRouter();
@@ -111,11 +111,7 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
 
   return (
     <>
-      <ConfirmCycleDeletion
-        isOpen={cycleDeleteModal}
-        setIsOpen={setCycleDeleteModal}
-        data={cycle}
-      />
+      <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
@@ -331,5 +327,3 @@ const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssue
     </>
   );
 };
-
-export default CycleDetailSidebar;
diff --git a/apps/app/components/project/cycles/stats-view/single-stat.tsx b/apps/app/components/cycles/single-cycle-card.tsx
similarity index 98%
rename from apps/app/components/project/cycles/stats-view/single-stat.tsx
rename to apps/app/components/cycles/single-cycle-card.tsx
index 7673c9615..86589995f 100644
--- a/apps/app/components/project/cycles/stats-view/single-stat.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -41,7 +41,7 @@ const stateGroupColours: {
   completed: "#096e8d",
 };
 
-const SingleStat: React.FC<TSingleStatProps> = (props) => {
+export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
   const { cycle, handleEditCycle, handleDeleteCycle } = props;
 
   const router = useRouter();
@@ -184,5 +184,3 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
     </>
   );
 };
-
-export default SingleStat;
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 9b6a50cc6..2caf5b635 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -45,7 +45,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     setValue,
     reset,
     formState: { errors },
-    setError,
   } = useForm<IIssue>({
     defaultValues: {
       name: "",
@@ -76,8 +75,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
 
       handleFormSubmit({
         name: formData.name ?? "",
-        description: formData.description,
-        description_html: formData.description_html,
+        description: formData.description ?? "",
+        description_html: formData.description_html ?? "<p></p>",
       });
     },
     [handleFormSubmit, setToastAlert]
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 6b9841a73..416fa8b19 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -17,7 +17,7 @@ import {
 } from "components/issues/select";
 import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
 import { CreateStateModal } from "components/states";
-import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
+import { CreateUpdateCycleModal } from "components/cycles";
 import { CreateLabelModal } from "components/labels";
 // ui
 import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
@@ -131,11 +131,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             handleClose={() => setStateModal(false)}
             projectId={projectId}
           />
-          <CreateUpdateCycleModal
-            isOpen={cycleModal}
-            setIsOpen={setCycleModal}
-            projectId={projectId}
-          />
+          <CreateUpdateCycleModal isOpen={cycleModal} handleClose={() => setCycleModal(false)} />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index 60fd93059..35a141451 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // components
@@ -8,9 +10,10 @@ import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
 import { IModule } from "types";
 
 type Props = {
-  handleFormSubmit: (values: Partial<IModule>) => void;
+  handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
   handleClose: () => void;
   status: boolean;
+  data?: IModule;
 };
 
 const defaultValues: Partial<IModule> = {
@@ -21,7 +24,7 @@ const defaultValues: Partial<IModule> = {
   members_list: [],
 };
 
-export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status }) => {
+export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
   const {
     register,
     formState: { errors, isSubmitting },
@@ -40,6 +43,13 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
     });
   };
 
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
       <div className="space-y-5">
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
index 22f9a7e49..7acf81339 100644
--- a/apps/app/components/modules/modal.tsx
+++ b/apps/app/components/modules/modal.tsx
@@ -14,8 +14,6 @@ import { ModuleForm } from "components/modules";
 import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
-// helpers
-import { renderDateFormat } from "helpers/date-time.helper";
 // types
 import type { IModule } from "types";
 // fetch-keys
@@ -46,7 +44,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
     reset(defaultValues);
   };
 
-  const { reset, setError } = useForm<IModule>({
+  const { reset } = useForm<IModule>({
     defaultValues,
   });
 
@@ -58,16 +56,16 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
         handleClose();
 
         setToastAlert({
-          title: "Success",
           type: "success",
-          message: "Module created successfully",
+          title: "Success!",
+          message: "Module created successfully.",
         });
       })
-      .catch((err) => {
-        Object.keys(err).map((key) => {
-          setError(key as keyof typeof defaultValues, {
-            message: err[key].join(", "),
-          });
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be created. Please try again.",
         });
       });
   };
@@ -92,16 +90,16 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
         handleClose();
 
         setToastAlert({
-          title: "Success",
           type: "success",
-          message: "Module updated successfully",
+          title: "Success!",
+          message: "Module updated successfully.",
         });
       })
-      .catch((err) => {
-        Object.keys(err).map((key) => {
-          setError(key as keyof typeof defaultValues, {
-            message: err[key].join(", "),
-          });
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Module could not be updated. Please try again.",
         });
       });
   };
@@ -117,15 +115,6 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
     else await updateModule(payload);
   };
 
-  useEffect(() => {
-    if (data) {
-      setIsOpen(true);
-      reset(data);
-    } else {
-      reset(defaultValues);
-    }
-  }, [data, setIsOpen, reset]);
-
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -157,6 +146,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
                   status={data ? true : false}
+                  data={data}
                 />
               </Dialog.Panel>
             </Transition.Child>
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
deleted file mode 100644
index 30348e587..000000000
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react hook form
-import { Controller, useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import cycleService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Button, Input, TextArea, CustomSelect, CustomDatePicker } from "components/ui";
-// common
-import { renderDateFormat } from "helpers/date-time.helper";
-// types
-import type { ICycle } from "types";
-// fetch keys
-import { CYCLE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  projectId: string;
-  data?: ICycle;
-};
-
-const defaultValues: Partial<ICycle> = {
-  name: "",
-  description: "",
-  status: "draft",
-  start_date: null,
-  end_date: null,
-};
-
-const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, projectId }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    control,
-    reset,
-    setError,
-  } = useForm<ICycle>({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (data) {
-      setIsOpen(true);
-      reset(data);
-    } else {
-      reset(defaultValues);
-    }
-  }, [data, setIsOpen, reset]);
-
-  const onSubmit = async (formData: ICycle) => {
-    if (!workspaceSlug) return;
-    const payload = {
-      ...formData,
-      start_date: formData.start_date ? renderDateFormat(formData.start_date) : null,
-      end_date: formData.end_date ? renderDateFormat(formData.end_date) : null,
-    };
-    if (!data) {
-      await cycleService
-        .createCycle(workspaceSlug as string, projectId, payload)
-        .then((res) => {
-          mutate<ICycle[]>(CYCLE_LIST(projectId), (prevData) => [res, ...(prevData ?? [])], false);
-
-          handleClose();
-          setToastAlert({
-            title: "Success",
-            type: "success",
-            message: "Cycle created successfully",
-          });
-        })
-        .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof typeof defaultValues, {
-              message: err[key].join(", "),
-            });
-          });
-        });
-    } else {
-      await cycleService
-        .updateCycle(workspaceSlug as string, projectId, data.id, payload)
-        .then((res) => {
-          mutate(CYCLE_LIST(projectId));
-          handleClose();
-
-          setToastAlert({
-            title: "Success",
-            type: "success",
-            message: "Cycle updated successfully",
-          });
-        })
-        .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof typeof defaultValues, {
-              message: err[key].join(", "),
-            });
-          });
-        });
-    }
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    reset(defaultValues);
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              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">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
-                      {data ? "Update" : "Create"} Cycle
-                    </Dialog.Title>
-                    <div className="space-y-3">
-                      <div>
-                        <Input
-                          id="name"
-                          label="Name"
-                          name="name"
-                          type="name"
-                          placeholder="Enter name"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          validations={{
-                            required: "Name is required",
-                            maxLength: {
-                              value: 255,
-                              message: "Name should be less than 255 characters",
-                            },
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <TextArea
-                          id="description"
-                          name="description"
-                          label="Description"
-                          placeholder="Enter description"
-                          error={errors.description}
-                          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>
-                          <div className="w-full">
-                            <Controller
-                              control={control}
-                              name="start_date"
-                              rules={{ required: "Start date is required" }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomDatePicker
-                                  renderAs="input"
-                                  value={value}
-                                  onChange={onChange}
-                                  error={errors.start_date ? true : false}
-                                />
-                              )}
-                            />
-                            {errors.start_date && (
-                              <h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
-                            )}
-                          </div>
-                        </div>
-                        <div className="w-full">
-                          <h6 className="text-gray-500">End Date</h6>
-                          <div className="w-full">
-                            <Controller
-                              control={control}
-                              name="end_date"
-                              rules={{ required: "End date is required" }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomDatePicker
-                                  renderAs="input"
-                                  value={value}
-                                  onChange={onChange}
-                                  error={errors.end_date ? true : false}
-                                />
-                              )}
-                            />
-                            {errors.end_date && (
-                              <h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <Button theme="secondary" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button type="submit" disabled={isSubmitting}>
-                      {data
-                        ? isSubmitting
-                          ? "Updating Cycle..."
-                          : "Update Cycle"
-                        : isSubmitting
-                        ? "Creating Cycle..."
-                        : "Create Cycle"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-export default CreateUpdateCycleModal;
diff --git a/apps/app/components/project/cycles/index.ts b/apps/app/components/project/cycles/index.ts
deleted file mode 100644
index d330ba698..000000000
--- a/apps/app/components/project/cycles/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./stats-view";
-export * from "./cycle-detail-sidebar";
\ 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 98cd8ae19..b026c00b7 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -15,7 +15,7 @@ import AppLayout from "layouts/app-layout";
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
-import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
+import { CycleDetailsSidebar } from "components/cycles";
 // services
 import issuesServices from "services/issues.service";
 import cycleServices from "services/cycles.service";
@@ -215,7 +215,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
             <Spinner />
           </div>
         )}
-        <CycleDetailSidebar
+        <CycleDetailsSidebar
           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 7fb4afbd4..8caef1266 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -15,8 +15,7 @@ import workspaceService from "services/workspace.service";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
-import CycleStatsView from "components/project/cycles/stats-view";
+import { CreateUpdateCycleModal, CyclesListView } from "components/cycles";
 // ui
 import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -63,15 +62,15 @@ const ProjectCycles: NextPage = () => {
   };
 
   const currentCycles = cycles?.filter(
-    (c) => getCycleStatus(c.start_date ?? "", c.end_date ?? "") === "current"
+    (c) => getCycleStatus(c.start_date, c.end_date) === "current"
   );
 
   const upcomingCycles = cycles?.filter(
-    (c) => getCycleStatus(c.start_date ?? "", c.end_date ?? "") === "upcoming"
+    (c) => getCycleStatus(c.start_date, c.end_date) === "upcoming"
   );
 
   const completedCycles = cycles?.filter(
-    (c) => getCycleStatus(c.start_date ?? "", c.end_date ?? "") === "completed"
+    (c) => getCycleStatus(c.start_date, c.end_date) === "completed"
   );
 
   useEffect(() => {
@@ -108,8 +107,7 @@ const ProjectCycles: NextPage = () => {
     >
       <CreateUpdateCycleModal
         isOpen={createUpdateCycleModal}
-        setIsOpen={setCreateUpdateCycleModal}
-        projectId={projectId as string}
+        handleClose={() => setCreateUpdateCycleModal(false)}
         data={selectedCycle}
       />
       {cycles ? (
@@ -117,7 +115,7 @@ const ProjectCycles: NextPage = () => {
           <div className="space-y-8">
             <h3 className="text-xl font-medium leading-6 text-gray-900">Current Cycle</h3>
             <div className="space-y-5">
-              <CycleStatsView
+              <CyclesListView
                 cycles={currentCycles ?? []}
                 setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                 setSelectedCycle={setSelectedCycle}
@@ -147,7 +145,7 @@ const ProjectCycles: NextPage = () => {
                 </Tab.List>
                 <Tab.Panels>
                   <Tab.Panel as="div" className="mt-8 space-y-5">
-                    <CycleStatsView
+                    <CyclesListView
                       cycles={upcomingCycles ?? []}
                       setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                       setSelectedCycle={setSelectedCycle}
@@ -155,7 +153,7 @@ const ProjectCycles: NextPage = () => {
                     />
                   </Tab.Panel>
                   <Tab.Panel as="div" className="mt-8 space-y-5">
-                    <CycleStatsView
+                    <CyclesListView
                       cycles={completedCycles ?? []}
                       setCreateUpdateCycleModal={setCreateUpdateCycleModal}
                       setSelectedCycle={setSelectedCycle}
diff --git a/apps/app/types/cycles.d.ts b/apps/app/types/cycles.d.ts
index 72770b459..dbd7573bf 100644
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@@ -7,8 +7,8 @@ export interface ICycle {
   updated_at: Date;
   name: string;
   description: string;
-  start_date: string | null;
-  end_date: string | null;
+  start_date: string;
+  end_date: string;
   status: string;
   created_by: string;
   updated_by: string;