From 95fe4a3831226cbb7dba33128b7765d71398c62a Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Thu, 6 Apr 2023 15:09:24 +0530
Subject: [PATCH] feat: added estimates (#721)

* feat: added estimates

* chore: added estimate to issue sidebar
---
 .../create-update-estimate-modal.tsx          | 205 +++++++++
 .../estimates/estimate-points-modal.tsx       | 432 ++++++++++++++++++
 apps/app/components/estimates/index.tsx       |   3 +
 .../components/estimates/single-estimate.tsx  | 150 ++++++
 apps/app/components/issues/form.tsx           |  13 +-
 .../app/components/issues/select/estimate.tsx |  68 +++
 apps/app/components/issues/select/index.ts    |   3 +-
 .../issues/sidebar-select/estimate.tsx        |  35 ++
 .../components/issues/sidebar-select/index.ts |   1 +
 apps/app/components/issues/sidebar.tsx        |  12 +
 apps/app/constants/fetch-keys.ts              |   6 +
 apps/app/layouts/settings-navbar.tsx          |   4 +
 .../[projectId]/settings/estimates.tsx        | 178 ++++++++
 apps/app/services/estimates.service.ts        | 152 ++++++
 apps/app/types/estimate.d.ts                  |  25 +
 apps/app/types/index.d.ts                     |   1 +
 apps/app/types/issues.d.ts                    |   1 +
 apps/app/types/projects.d.ts                  |   1 +
 18 files changed, 1288 insertions(+), 2 deletions(-)
 create mode 100644 apps/app/components/estimates/create-update-estimate-modal.tsx
 create mode 100644 apps/app/components/estimates/estimate-points-modal.tsx
 create mode 100644 apps/app/components/estimates/index.tsx
 create mode 100644 apps/app/components/estimates/single-estimate.tsx
 create mode 100644 apps/app/components/issues/select/estimate.tsx
 create mode 100644 apps/app/components/issues/sidebar-select/estimate.tsx
 create mode 100644 apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
 create mode 100644 apps/app/services/estimates.service.ts
 create mode 100644 apps/app/types/estimate.d.ts

diff --git a/apps/app/components/estimates/create-update-estimate-modal.tsx b/apps/app/components/estimates/create-update-estimate-modal.tsx
new file mode 100644
index 000000000..da127a455
--- /dev/null
+++ b/apps/app/components/estimates/create-update-estimate-modal.tsx
@@ -0,0 +1,205 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import estimatesService from "services/estimates.service";
+// ui
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Dialog, Transition } from "@headlessui/react";
+
+// hooks
+import useToast from "hooks/use-toast";
+
+// types
+import { IEstimate } from "types";
+// fetch-keys
+import { ESTIMATES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  handleClose: () => void;
+  data?: IEstimate;
+  isOpen: boolean;
+  isCreate: boolean;
+};
+
+const defaultValues: Partial<IEstimate> = {
+  name: "",
+  description: "",
+};
+
+export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, isCreate }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IEstimate>({
+    defaultValues,
+  });
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const createEstimate = async (formData: IEstimate) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      name: formData.name,
+      description: formData.description,
+    };
+
+    await estimatesService
+      .createEstimate(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        mutate<IEstimate[]>(
+          ESTIMATES_LIST(projectId as string),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
+        );
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error: Estimate could not be created",
+        });
+      });
+  };
+
+  const updateEstimate = async (formData: IEstimate) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    const payload = {
+      name: formData.name,
+      description: formData.description,
+    };
+
+    mutate<IEstimate[]>(
+      ESTIMATES_LIST(projectId as string),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === data.id) return { ...p, ...payload };
+
+          return p;
+        }),
+      false
+    );
+
+    await estimatesService
+      .patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload)
+      .then(() => {
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error: Estimate could not be updated",
+        });
+      });
+    handleClose();
+  };
+
+  useEffect(() => {
+    if (!data && isCreate) return;
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset, isCreate]);
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" 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-20 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 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={data ? handleSubmit(updateEstimate) : handleSubmit(createEstimate)}
+                  >
+                    <div className="space-y-3">
+                      <div className="text-2xl font-medium">Create Estimate</div>
+                      <div>
+                        <Input
+                          id="name"
+                          name="name"
+                          type="name"
+                          placeholder="Title"
+                          autoComplete="off"
+                          mode="transparent"
+                          className="resize-none text-xl"
+                          error={errors.name}
+                          register={register}
+                          validations={{
+                            required: "Title is required",
+                            maxLength: {
+                              value: 255,
+                              message: "Title should be less than 255 characters",
+                            },
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <TextArea
+                          id="description"
+                          name="description"
+                          placeholder="Description"
+                          className="h-32 resize-none text-sm"
+                          mode="transparent"
+                          error={errors.description}
+                          register={register}
+                        />
+                      </div>
+                    </div>
+                    <div className="mt-5 flex justify-end gap-2">
+                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                      <PrimaryButton type="submit" loading={isSubmitting}>
+                        {data
+                          ? isSubmitting
+                            ? "Updating Estimate..."
+                            : "Update Estimate"
+                          : isSubmitting
+                          ? "Creating Estimate..."
+                          : "Create Estimate"}
+                      </PrimaryButton>
+                    </div>
+                  </form>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
diff --git a/apps/app/components/estimates/estimate-points-modal.tsx b/apps/app/components/estimates/estimate-points-modal.tsx
new file mode 100644
index 000000000..149eec583
--- /dev/null
+++ b/apps/app/components/estimates/estimate-points-modal.tsx
@@ -0,0 +1,432 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { useForm } from "react-hook-form";
+
+import { mutate } from "swr";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type { IEstimate, IEstimatePoint } from "types";
+
+import estimatesService from "services/estimates.service";
+
+type Props = {
+  isOpen: boolean;
+  data?: IEstimatePoint[];
+  estimate: IEstimate | null;
+  onClose: () => void;
+};
+
+interface FormValues {
+  value1: string;
+  value2: string;
+  value3: string;
+  value4: string;
+  value5: string;
+  value6: string;
+  value7: string;
+  value8: string;
+}
+
+const defaultValues: FormValues = {
+  value1: "",
+  value2: "",
+  value3: "",
+  value4: "",
+  value5: "",
+  value6: "",
+  value7: "",
+  value8: "",
+};
+
+export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, onClose }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<FormValues>({ defaultValues });
+
+  const handleClose = () => {
+    onClose();
+    reset();
+  };
+
+  const createEstimatePoints = async (formData: FormValues) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      estimate_points: [
+        {
+          key: 0,
+          value: formData.value1,
+        },
+        {
+          key: 1,
+          value: formData.value2,
+        },
+        {
+          key: 2,
+          value: formData.value3,
+        },
+        {
+          key: 3,
+          value: formData.value4,
+        },
+        {
+          key: 4,
+          value: formData.value5,
+        },
+        {
+          key: 5,
+          value: formData.value6,
+        },
+        {
+          key: 6,
+          value: formData.value7,
+        },
+        {
+          key: 7,
+          value: formData.value8,
+        },
+      ],
+    };
+
+    await estimatesService
+      .createEstimatePoints(
+        workspaceSlug as string,
+        projectId as string,
+        estimate?.id as string,
+        payload
+      )
+      .then(() => {
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate points could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateEstimatePoints = async (formData: FormValues) => {
+    if (!workspaceSlug || !projectId) return;
+    const payload = {
+      estimate_points: [
+        {
+          key: 0,
+          value: formData.value1,
+        },
+        {
+          key: 1,
+          value: formData.value2,
+        },
+        {
+          key: 2,
+          value: formData.value3,
+        },
+        {
+          key: 3,
+          value: formData.value4,
+        },
+        {
+          key: 4,
+          value: formData.value5,
+        },
+        {
+          key: 5,
+          value: formData.value6,
+        },
+        {
+          key: 6,
+          value: formData.value7,
+        },
+        {
+          key: 7,
+          value: formData.value8,
+        },
+      ],
+    };
+    await estimatesService
+      .updateEstimatesPoints(
+        workspaceSlug as string,
+        projectId as string,
+        estimate?.id as string,
+        data?.[0]?.id as string,
+        payload
+      )
+      .then(() => {
+        handleClose();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate points could not be created. Please try again.",
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (!data) return;
+
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" 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-20 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 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={
+                    data ? handleSubmit(updateEstimatePoints) : handleSubmit(createEstimatePoints)
+                  }
+                >
+                  <div className="space-y-3">
+                    <div className="flex flex-col gap-3">
+                      <h4 className="text-2xl font-medium">Create Estimate Points</h4>
+                      <div className="grid grid-cols-4 gap-3">
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V0</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value1"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "value should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V1</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value2"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "Name should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V2</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value3"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "Name should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V3</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value4"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "Name should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V4</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value5"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "Name should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V5</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value6"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "Name should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V6</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value7"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 10,
+                                    message: "Name should be less than 10 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="bg-gray-100 h-full flex items-center rounded-lg">
+                            <span className="pl-2 pr-1 rounded-lg text-sm  text-gray-600">V7</span>
+                            <span className="bg-white rounded-lg">
+                              <Input
+                                id="name"
+                                name="value8"
+                                type="name"
+                                placeholder="Value"
+                                autoComplete="off"
+                                register={register}
+                                validations={{
+                                  required: "value is required",
+                                  maxLength: {
+                                    value: 20,
+                                    message: "Name should be less than 20 characters",
+                                  },
+                                }}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {data
+                        ? isSubmitting
+                          ? "Updating Points..."
+                          : "Update Points"
+                        : isSubmitting
+                        ? "Creating Points..."
+                        : "Create Points"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/estimates/index.tsx b/apps/app/components/estimates/index.tsx
new file mode 100644
index 000000000..c537b8b3a
--- /dev/null
+++ b/apps/app/components/estimates/index.tsx
@@ -0,0 +1,3 @@
+export * from "./create-update-estimate-modal";
+export * from "./single-estimate";
+export * from "./estimate-points-modal"
\ No newline at end of file
diff --git a/apps/app/components/estimates/single-estimate.tsx b/apps/app/components/estimates/single-estimate.tsx
new file mode 100644
index 000000000..4e52146f2
--- /dev/null
+++ b/apps/app/components/estimates/single-estimate.tsx
@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+
+// ui
+import { CustomMenu, PrimaryButton } from "components/ui";
+// types
+import { IEstimate, IProject } from "types";
+//icons
+import { PencilIcon, TrashIcon, SquaresPlusIcon, ListBulletIcon  } from "@heroicons/react/24/outline";
+
+import useSWR, { mutate } from "swr";
+
+import useToast from "hooks/use-toast";
+
+import estimatesService from "services/estimates.service";
+import projectService from "services/project.service";
+
+import { EstimatePointsModal } from "./estimate-points-modal";
+import { useRouter } from "next/router";
+
+import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
+import { PlusIcon } from "components/icons";
+
+interface IEstimatePoints {
+  key: string;
+  value: string;
+}
+
+type Props = {
+  estimate: IEstimate;
+  editEstimate: (estimate: IEstimate) => void;
+  handleEstimateDelete: (estimateId: string) => void;
+  activeEstimate: IEstimate | null;
+  setActiveEstimate: React.Dispatch<React.SetStateAction<IEstimate | null>>;
+};
+
+export const SingleEstimate: React.FC<Props> = ({
+  estimate,
+  editEstimate,
+  handleEstimateDelete,
+  activeEstimate,
+  setActiveEstimate,
+}) => {
+  const [isEstimatePointsModalOpen, setIsEstimatePointsModalOpen] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: estimatePoints } = useSWR(
+    workspaceSlug && projectId ? ESTIMATE_POINTS_LIST(estimate.id) : null,
+    workspaceSlug && projectId
+      ? () =>
+          estimatesService.getEstimatesPointsList(
+            workspaceSlug as string,
+            projectId as string,
+            estimate.id
+          )
+      : null
+  );
+
+  const handleActiveEstimate = async () => {
+    if (!workspaceSlug || !projectId || !estimate) return;
+    const payload: Partial<IProject> = {
+      estimate: estimate.id,
+    };
+    setActiveEstimate(estimate);
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, payload)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate points could not be used. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div className="divide-y">
+      <EstimatePointsModal
+        isOpen={isEstimatePointsModalOpen}
+        estimate={estimate}
+        onClose={() => setIsEstimatePointsModalOpen(false)}
+      />
+      <div className="gap-2 space-y-3 bg-white">
+        <div className="flex justify-between items-center">
+          <div className="items-start">
+            <h6 className="font-medium text-base w-[40vw] truncate">{estimate.name}</h6>
+            <p className="font-sm text-gray-400 font-normal text-[14px] w-[40vw] truncate">
+              {estimate.description}
+            </p>
+          </div>
+          <div className="flex items-center gap-8">
+            <CustomMenu ellipsis>
+              <CustomMenu.MenuItem onClick={handleActiveEstimate}>
+                <span className="flex items-center justify-start gap-2">
+                  <SquaresPlusIcon className="h-4 w-4" />
+                  <span>Use estimate</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => setIsEstimatePointsModalOpen(true)}>
+                <span className="flex items-center justify-start gap-2">
+                  <ListBulletIcon className="h-4 w-4" />
+                  {estimatePoints?.length === 8 ? "Update points" : "Create points"}
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  editEstimate(estimate);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <PencilIcon className="h-4 w-4" />
+                  <span>Edit estimate</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  handleEstimateDelete(estimate.id);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <TrashIcon className="h-4 w-4" />
+                  <span>Delete estimate</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </div>
+        {estimatePoints && estimatePoints.length > 0 ? (
+          <div className="flex gap-2 mt-2">
+            {estimatePoints.length > 0 && "Estimate points ("}
+            {estimatePoints.map((point, i) => (
+              <h6 key={point.id}>
+                {point.value}
+                {i !== estimatePoints.length - 1 && ","}{" "}
+              </h6>
+            ))}
+            {estimatePoints.length > 0 && ")"}
+          </div>
+        ) : (
+            <div>
+              <p className= " text-sm text-gray-300">No estimate points</p>
+            </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index b37ba8db5..9051ed2a5 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -14,12 +14,13 @@ import useToast from "hooks/use-toast";
 import { GptAssistantModal } from "components/core";
 import {
   IssueAssigneeSelect,
+  IssueDateSelect,
+  IssueEstimateSelect,
   IssueLabelSelect,
   IssueParentSelect,
   IssuePrioritySelect,
   IssueProjectSelect,
   IssueStateSelect,
-  IssueDateSelect,
 } from "components/issues/select";
 import { CreateStateModal } from "components/states";
 import { CreateUpdateCycleModal } from "components/cycles";
@@ -47,6 +48,7 @@ const defaultValues: Partial<IIssue> = {
   name: "",
   description: "",
   description_html: "<p></p>",
+  estimate_point: 0,
   state: "",
   cycle: null,
   priority: null,
@@ -398,6 +400,15 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                   />
                 </div>
+                <div>
+                  <Controller
+                    control={control}
+                    name="estimate_point"
+                    render={({ field: { value, onChange } }) => (
+                      <IssueEstimateSelect value={value} onChange={onChange} />
+                    )}
+                  />
+                </div>
                 <IssueParentSelect
                   control={control}
                   isOpen={parentIssueListModalOpen}
diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx
new file mode 100644
index 000000000..2fe043303
--- /dev/null
+++ b/apps/app/components/issues/select/estimate.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import projectService from "services/project.service";
+import estimatesService from "services/estimates.service";
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+// fetch-keys
+import { ESTIMATE_POINTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  value: number;
+  onChange: (value: number) => void;
+};
+
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: estimatePoints } = useSWR(
+    workspaceSlug && projectId && projectDetails && projectDetails.estimate
+      ? ESTIMATE_POINTS_LIST(projectDetails.estimate)
+      : null,
+    workspaceSlug && projectId && projectDetails && projectDetails.estimate
+      ? () =>
+          estimatesService.getEstimatesPointsList(
+            workspaceSlug as string,
+            projectId as string,
+            projectDetails.estimate
+          )
+      : null
+  );
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <div className="flex items-center  gap-2 text-xs w-[111px]">
+          <span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
+            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate points"}
+          </span>
+        </div>
+      }
+      onChange={onChange}
+      position="right"
+      width="w-full"
+    >
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option className="w-full" key={point.key} value={point.key}>
+            {point.value}
+          </CustomSelect.Option>
+        ))}
+    </CustomSelect>
+  );
+};
diff --git a/apps/app/components/issues/select/index.ts b/apps/app/components/issues/select/index.ts
index a21a1cbbb..e044282ec 100644
--- a/apps/app/components/issues/select/index.ts
+++ b/apps/app/components/issues/select/index.ts
@@ -1,7 +1,8 @@
 export * from "./assignee";
+export * from "./date";
+export * from "./estimate"
 export * from "./label";
 export * from "./parent";
 export * from "./priority";
 export * from "./project";
 export * from "./state";
-export * from "./date";
diff --git a/apps/app/components/issues/sidebar-select/estimate.tsx b/apps/app/components/issues/sidebar-select/estimate.tsx
new file mode 100644
index 000000000..1f0646fb6
--- /dev/null
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+// ui
+import { IssueEstimateSelect } from "components/issues/select";
+
+// icons
+import { BanknotesIcon } from "@heroicons/react/24/outline";
+
+// types
+import { UserAuth } from "types";
+// constants
+
+type Props = {
+  value: number;
+  onChange: (val: number) => void;
+  userAuth: UserAuth;
+};
+
+
+
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <BanknotesIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Estimate</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <IssueEstimateSelect value={value} onChange={onChange} />
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/app/components/issues/sidebar-select/index.ts b/apps/app/components/issues/sidebar-select/index.ts
index 9070d2d2e..1ec2c6ee0 100644
--- a/apps/app/components/issues/sidebar-select/index.ts
+++ b/apps/app/components/issues/sidebar-select/index.ts
@@ -6,3 +6,4 @@ export * from "./module";
 export * from "./parent";
 export * from "./priority";
 export * from "./state";
+export * from "./estimate";
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index bda5cdd01..5721b965d 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -27,6 +27,7 @@ import {
   SidebarParentSelect,
   SidebarPrioritySelect,
   SidebarStateSelect,
+  SidebarEstimateSelect,
 } from "components/issues";
 // ui
 import { Input, Spinner, CustomDatePicker } from "components/ui";
@@ -285,6 +286,17 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 />
               )}
             />
+            <Controller
+              control={control}
+              name="estimate_point"
+              render={({ field: { value } }) => (
+                <SidebarEstimateSelect
+                  value={value}
+                  onChange={(val: number) => submitChanges({ estimate_point: val })}
+                  userAuth={userAuth}
+                />
+              )}
+            />
           </div>
           <div className="py-1">
             <SidebarParentSelect
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 25ce6096d..aff1d99f4 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -150,3 +150,9 @@ export const OTHER_PAGES_LIST = (projectId: string) =>
 export const PAGE_DETAILS = (pageId: string) => `PAGE_DETAILS_${pageId.toUpperCase()}`;
 export const PAGE_BLOCKS_LIST = (pageId: string) => `PAGE_BLOCK_LIST_${pageId.toUpperCase()}`;
 export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${pageId.toUpperCase()}`;
+
+// estimates
+export const ESTIMATES_LIST = (projectId: string) => `ESTIMATES_LIST_${projectId.toUpperCase()}`;
+export const ESTIMATE_DETAILS = (estimateId: string) => `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
+export const ESTIMATE_POINTS_LIST = (estimateId: string) =>
+  `ESTIMATES_POINTS_LIST_${estimateId.toUpperCase()}`;
diff --git a/apps/app/layouts/settings-navbar.tsx b/apps/app/layouts/settings-navbar.tsx
index 0aa413892..f7b7fbccc 100644
--- a/apps/app/layouts/settings-navbar.tsx
+++ b/apps/app/layouts/settings-navbar.tsx
@@ -67,6 +67,10 @@ const SettingsNavbar: React.FC<Props> = ({ profilePage = false }) => {
       label: "Integrations",
       href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
     },
+    {
+      label: "Estimates",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
+    },
   ];
 
   const profileLinks: Array<{
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
new file mode 100644
index 000000000..a249c5acc
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -0,0 +1,178 @@
+import React, { useState, useRef } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import estimatesService from "services/estimates.service";
+import projectService from "services/project.service";
+
+// lib
+import { requiredAdmin } from "lib/auth";
+// layouts
+import AppLayout from "layouts/app-layout";
+// components
+import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
+
+//hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IEstimate, UserAuth, IProject } from "types";
+import type { GetServerSidePropsContext, NextPage } from "next";
+// fetch-keys
+import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+const EstimatesSettings: NextPage<UserAuth> = (props) => {
+  const { isMember, isOwner, isViewer, isGuest } = props;
+
+  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
+
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
+
+  const [activeEstimate, setActiveEstimate] = useState<IEstimate | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const scollToRef = useRef<HTMLDivElement>(null);
+
+  const { data: estimatesList } = useSWR<IEstimate[]>(
+    workspaceSlug && projectId ? ESTIMATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => estimatesService.getEstimatesList(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const editEstimate = (estimate: IEstimate) => {
+    setIsUpdating(true);
+    setEstimateToUpdate(estimate);
+    setEstimateFormOpen(true);
+  };
+
+  const removeEstimate = (estimateId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IEstimate[]>(
+      ESTIMATES_LIST(projectId as string),
+      (prevData) => (prevData ?? []).filter((p) => p.id !== estimateId),
+      false
+    );
+
+    estimatesService
+      .deleteEstimate(workspaceSlug as string, projectId as string, estimateId)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error: Estimate could not be deleted. Please try again",
+        });
+      });
+  };
+
+  const { data: projectDetails } = useSWR<IProject>(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <>
+      <AppLayout
+        memberType={{ isMember, isOwner, isViewer, isGuest }}
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            />
+            <BreadcrumbItem title="Estimates Settings" />
+          </Breadcrumbs>
+        }
+        settingsLayout
+      >
+        <CreateUpdateEstimateModal
+          isCreate={estimateToUpdate ? true : false}
+          isOpen={estimateFormOpen}
+          data={estimateToUpdate}
+          handleClose={() => {
+            setEstimateFormOpen(false);
+            setEstimateToUpdate(undefined);
+          }}
+        />
+        <section className="grid grid-cols-12 gap-10">
+          <div className="col-span-12 sm:col-span-5">
+            <h3 className="text-[28px] font-semibold">Estimates</h3>
+          </div>
+          <div className="col-span-12 space-y-5 sm:col-span-7">
+            <div className="flex sm:justify-end sm:items-end sm:h-full text-theme">
+              <span
+                className="flex items-center cursor-pointer gap-2"
+                onClick={() => {
+                  setEstimateToUpdate(undefined);
+                  setEstimateFormOpen(true);
+                }}
+              >
+                <PlusIcon className="h-4 w-4" />
+                Create New Estimate
+              </span>
+            </div>
+          </div>
+        </section>
+        <hr className="h-[1px] w-full mt-4" />
+        {estimatesList && estimatesList.length > 0 && (
+          <section className="mt-4 divide-y px-6 py-4 mb-8 rounded-xl border bg-white">
+            <>
+              {estimatesList ? (
+                estimatesList.map((estimate) => (
+                  <SingleEstimate
+                    key={estimate.id}
+                    estimate={estimate}
+                    activeEstimate={activeEstimate}
+                    setActiveEstimate={setActiveEstimate}
+                    editEstimate={(estimate) => editEstimate(estimate)}
+                    handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
+                  />
+                ))
+              ) : (
+                <Loader className="space-y-5">
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                  <Loader.Item height="40px" />
+                </Loader>
+              )}
+            </>
+          </section>
+        )}
+      </AppLayout>
+    </>
+  );
+};
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
+export default EstimatesSettings;
diff --git a/apps/app/services/estimates.service.ts b/apps/app/services/estimates.service.ts
new file mode 100644
index 000000000..0b5d4dd6b
--- /dev/null
+++ b/apps/app/services/estimates.service.ts
@@ -0,0 +1,152 @@
+// services
+import APIService from "services/api.service";
+
+import type { IEstimate, IEstimatePoint } from "types";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class ProjectEstimateServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createEstimate(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string
+  ): Promise<IEstimate> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimatesList(workspaceSlug: string, projectId: string): Promise<IEstimate[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: Partial<IEstimate>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`,
+      data
+    )
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async deleteEstimate(workspaceSlug: string, projectId: string, estimateId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createEstimatePoints(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: {
+      estimate_points: {
+        key: number;
+        value: string;
+      }[];
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/bulk-create-estimate-points/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimatesPoints(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    estimatePointId: string
+  ): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimate/${estimateId}/estimate-points/${estimatePointId}`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getEstimatesPointsList(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string
+  ): Promise<IEstimatePoint[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/estimate-points/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateEstimatesPoints(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    estimatePointId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimate/${estimateId}/estimate-points/${estimatePointId}`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteEstimatesPoints(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    estimatePointId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimate/${estimateId}/estimate-points/${estimatePointId}`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new ProjectEstimateServices();
diff --git a/apps/app/types/estimate.d.ts b/apps/app/types/estimate.d.ts
new file mode 100644
index 000000000..2ddfd3c2d
--- /dev/null
+++ b/apps/app/types/estimate.d.ts
@@ -0,0 +1,25 @@
+export interface IEstimate {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  description: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+}
+
+export interface IEstimatePoint {
+  id: string;
+  created_at: string;
+  created_by: string;
+  description: string;
+  estimate: string;
+  key: number;
+  project: string;
+  updated_at: string;
+  updated_by: string;
+  value: string;
+  workspace: string;
+}
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index bc8134e54..259cb1d41 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -10,6 +10,7 @@ export * from "./views";
 export * from "./integration";
 export * from "./pages";
 export * from "./ai";
+export * from "./estimate"
 export * from "./importer";
 
 export type NestedKeyOf<ObjectType extends object> = {
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index d800b42ea..ea151cb57 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -86,6 +86,7 @@ export interface IIssue {
   description: any;
   description_html: any;
   description_stripped: any;
+  estimate_point: number;
   id: string;
   issue_cycle: IIssueCycle | null;
   issue_link: {
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 9bc56343e..daf3a24c2 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -18,6 +18,7 @@ export interface IProject {
   page_view: boolean;
   default_assignee: IUser | string | null;
   description: string;
+  estimate: string;
   icon: string;
   id: string;
   identifier: string;