feat: estimates (#783)

* chore: use estimate points hook created * chore: user auth layer * fix: build error * chore: estimate crud and validation * fix: build errors --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2024-06-14 14:31:34 +00:00 · 2023-04-11 17:54:01 +05:30 · 2023-04-11 17:54:01 +05:30 · dfa3a7b78d
commit dfa3a7b78d
parent d5c2965946
18 changed files with 225 additions and 255 deletions
--- a/apps/app/components/auth-screens/workspace/not-a-member.tsx
+++ b/apps/app/components/auth-screens/workspace/not-a-member.tsx
@ -28,9 +28,7 @@ export const NotAWorkspaceMember = () => {
          <div className="flex items-center gap-2 justify-center">
            <Link href="/invitations">
              <a>
-                <SecondaryButton onClick={() => router.back()}>
-                  Check pending invites
-                </SecondaryButton>
+                <SecondaryButton>Check pending invites</SecondaryButton>
              </a>
            </Link>
            <Link href="/create-workspace">
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@ -20,6 +20,7 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { Properties } from "types";
 // constants
 import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
+import useEstimateOption from "hooks/use-estimate-option";

 export const IssuesFilterView: React.FC = () => {
  const router = useRouter();
@ -45,6 +46,8 @@ export const IssuesFilterView: React.FC = () => {
    projectId as string
  );

+  const { isEstimateActive } = useEstimateOption();
+
  return (
    <div className="flex items-center gap-2">
      <div className="flex items-center gap-x-1">
@ -233,20 +236,24 @@ export const IssuesFilterView: React.FC = () => {
                  <div className="space-y-2 py-3">
                    <h4 className="text-sm text-gray-600">Display Properties</h4>
                    <div className="flex flex-wrap items-center gap-2">
-                      {Object.keys(properties).map((key) => (
-                        <button
-                          key={key}
-                          type="button"
-                          className={`rounded border px-2 py-1 text-xs capitalize ${
-                            properties[key as keyof Properties]
-                              ? "border-theme bg-theme text-white"
-                              : "border-gray-300"
-                          }`}
-                          onClick={() => setProperties(key as keyof Properties)}
-                        >
-                          {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                        </button>
-                      ))}
+                      {Object.keys(properties).map((key) => {
+                        if (key === "estimate" && !isEstimateActive) return null;
+
+                        return (
+                          <button
+                            key={key}
+                            type="button"
+                            className={`rounded border px-2 py-1 text-xs capitalize ${
+                              properties[key as keyof Properties]
+                                ? "border-theme bg-theme text-white"
+                                : "border-gray-300"
+                            }`}
+                            onClick={() => setProperties(key as keyof Properties)}
+                          >
+                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                          </button>
+                        );
+                      })}
                    </div>
                  </div>
                </div>
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@ -13,6 +13,7 @@ import useToast from "hooks/use-toast";
 import {
  ViewAssigneeSelect,
  ViewDueDateSelect,
+  ViewEstimateSelect,
  ViewPrioritySelect,
  ViewStateSelect,
 } from "components/issues/view-select";
@ -273,6 +274,14 @@ export const SingleListIssue: React.FC<Props> = ({
                isNotAllowed={isNotAllowed}
              />
            )}
+            {properties.estimate && (
+              <ViewEstimateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                position="right"
+                isNotAllowed={isNotAllowed}
+              />
+            )}
            {type && !isNotAllowed && (
              <CustomMenu width="auto" ellipsis>
                <CustomMenu.MenuItem onClick={editIssue}>
--- a/apps/app/components/estimates/create-update-estimate-modal.tsx
+++ b/apps/app/components/estimates/create-update-estimate-modal.tsx
@ -21,10 +21,9 @@ import { IEstimate } from "types";
 import { ESTIMATES_LIST } from "constants/fetch-keys";

 type Props = {
+  isOpen: boolean;
  handleClose: () => void;
  data?: IEstimate;
-  isOpen: boolean;
-  isCreate: boolean;
 };

 const defaultValues: Partial<IEstimate> = {
@ -32,7 +31,7 @@ const defaultValues: Partial<IEstimate> = {
  description: "",
 };

-export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, isCreate }) => {
+export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen }) => {
  const {
    register,
    formState: { errors, isSubmitting },
@ -109,12 +108,11 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
  };

  useEffect(() => {
-    if (!data && isCreate) return;
    reset({
      ...defaultValues,
      ...data,
    });
-  }, [data, reset, isCreate]);
+  }, [data, reset]);

  return (
    <>
@ -148,7 +146,9 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                    onSubmit={data ? handleSubmit(updateEstimate) : handleSubmit(createEstimate)}
                  >
                    <div className="space-y-3">
-                      <div className="text-2xl font-medium">Create Estimate</div>
+                      <div className="text-lg font-medium leading-6">
+                        {data ? "Update" : "Create"} Estimate
+                      </div>
                      <div>
                        <Input
                          id="name"
--- a/apps/app/components/estimates/estimate-points-modal.tsx
+++ b/apps/app/components/estimates/estimate-points-modal.tsx
@ -18,6 +18,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import type { IEstimate, IEstimatePoint } from "types";

 import estimatesService from "services/estimates.service";
+import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";

 type Props = {
  isOpen: boolean;
@ -33,8 +34,6 @@ interface FormValues {
  value4: string;
  value5: string;
  value6: string;
-  value7: string;
-  value8: string;
 }

 const defaultValues: FormValues = {
@ -44,8 +43,6 @@ const defaultValues: FormValues = {
  value4: "",
  value5: "",
  value6: "",
-  value7: "",
-  value8: "",
 };

 export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, onClose }) => {
@ -56,7 +53,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o

  const {
    register,
-    formState: { errors, isSubmitting },
+    formState: { isSubmitting },
    handleSubmit,
    reset,
  } = useForm<FormValues>({ defaultValues });
@ -95,14 +92,6 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
          key: 5,
          value: formData.value6,
        },
-        {
-          key: 6,
-          value: formData.value7,
-        },
-        {
-          key: 7,
-          value: formData.value8,
-        },
      ],
    };

@ -126,49 +115,20 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
  };

  const updateEstimatePoints = async (formData: FormValues) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !data || data.length === 0) 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,
-        },
-      ],
+      estimate_points: data.map((d, index) => ({
+        id: d.id,
+        value: (formData as any)[`value${index + 1}`],
+      })),
    };
+
    await estimatesService
-      .updateEstimatesPoints(
+      .patchEstimatePoints(
        workspaceSlug as string,
        projectId as string,
        estimate?.id as string,
-        data?.[0]?.id as string,
        payload
      )
      .then(() => {
@ -183,15 +143,27 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
      });
  };

+  const onSubmit = async (formData: FormValues) => {
+    if (data && data.length !== 0) await updateEstimatePoints(formData);
+    else await createEstimatePoints(formData);
+
+    if (estimate) mutate(ESTIMATE_POINTS_LIST(estimate.id));
+  };
+
  useEffect(() => {
-    if(!data) return
+    if (!data || data.length < 6) return;
+
    reset({
      ...defaultValues,
-      ...data,
+      value1: data[0].value,
+      value2: data[1].value,
+      value3: data[2].value,
+      value4: data[3].value,
+      value5: data[4].value,
+      value6: data[5].value,
    });
  }, [data, reset]);

-
  return (
    <Transition.Root show={isOpen} as={React.Fragment}>
      <Dialog as="div" className="relative z-20" onClose={() => handleClose()}>
@ -219,18 +191,16 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
              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)
-                  }
-                >
+                <form onSubmit={handleSubmit(onSubmit)}>
                  <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">
+                      <h4 className="text-lg font-medium leading-6">
+                        {data ? "Update" : "Create"} Estimate Points
+                      </h4>
+                      <div className="grid grid-cols-3 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="px-2 rounded-lg text-sm  text-gray-600">1</span>
                            <span className="bg-white rounded-lg">
                              <Input
                                id="name"
@ -243,7 +213,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                                  required: "value is required",
                                  maxLength: {
                                    value: 10,
-                                    message: "value should be less than 10 characters",
+                                    message: "Name should be less than 10 characters",
                                  },
                                }}
                              />
@ -252,7 +222,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                        </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="px-2 rounded-lg text-sm  text-gray-600">2</span>
                            <span className="bg-white rounded-lg">
                              <Input
                                id="name"
@ -274,7 +244,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                        </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="px-2 rounded-lg text-sm text-gray-600">3</span>
                            <span className="bg-white rounded-lg">
                              <Input
                                id="name"
@ -296,7 +266,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                        </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="px-2 rounded-lg text-sm  text-gray-600">4</span>
                            <span className="bg-white rounded-lg">
                              <Input
                                id="name"
@ -318,7 +288,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                        </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="px-2 rounded-lg text-sm  text-gray-600">5</span>
                            <span className="bg-white rounded-lg">
                              <Input
                                id="name"
@ -340,7 +310,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                        </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="px-2 rounded-lg text-sm  text-gray-600">6</span>
                            <span className="bg-white rounded-lg">
                              <Input
                                id="name"
@ -360,50 +330,6 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
                            </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>
--- a/apps/app/components/estimates/single-estimate.tsx
+++ b/apps/app/components/estimates/single-estimate.tsx
@ -25,6 +25,7 @@ import {
 import { IEstimate, IProject } from "types";
 // fetch-keys
 import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
+import { orderArrayBy } from "helpers/array.helper";

 type Props = {
  estimate: IEstimate;
@ -88,6 +89,7 @@ export const SingleEstimate: React.FC<Props> = ({
        isOpen={isEstimatePointsModalOpen}
        estimate={estimate}
        onClose={() => setIsEstimatePointsModalOpen(false)}
+        data={estimatePoints ? orderArrayBy(estimatePoints, "key") : undefined}
      />
      <div className="gap-2 py-3">
        <div className="flex justify-between items-center">
@ -105,7 +107,7 @@ export const SingleEstimate: React.FC<Props> = ({
            </p>
          </div>
          <CustomMenu ellipsis>
-            {projectDetails?.estimate && projectDetails?.estimate !== estimate.id && (
+            {projectDetails?.estimate !== estimate.id && (
              <CustomMenu.MenuItem onClick={handleUseEstimate}>
                <div className="flex items-center justify-start gap-2">
                  <SquaresPlusIcon className="h-3.5 w-3.5" />
@ -116,7 +118,9 @@ export const SingleEstimate: React.FC<Props> = ({
            <CustomMenu.MenuItem onClick={() => setIsEstimatePointsModalOpen(true)}>
              <div className="flex items-center justify-start gap-2">
                <ListBulletIcon className="h-3.5 w-3.5" />
-                <span>{estimatePoints?.length === 8 ? "Update points" : "Create points"}</span>
+                <span>
+                  {estimatePoints && estimatePoints?.length > 0 ? "Edit points" : "Create points"}
+                </span>
              </div>
            </CustomMenu.MenuItem>
            <CustomMenu.MenuItem
@ -129,32 +133,34 @@ export const SingleEstimate: React.FC<Props> = ({
                <span>Edit estimate</span>
              </div>
            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                handleEstimateDelete(estimate.id);
-              }}
-            >
-              <div className="flex items-center justify-start gap-2">
-                <TrashIcon className="h-3.5 w-3.5" />
-                <span>Delete estimate</span>
-              </div>
-            </CustomMenu.MenuItem>
+            {projectDetails?.estimate !== estimate.id && (
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  handleEstimateDelete(estimate.id);
+                }}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <TrashIcon className="h-3.5 w-3.5" />
+                  <span>Delete estimate</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
          </CustomMenu>
        </div>
        {estimatePoints && estimatePoints.length > 0 ? (
-          <div className="flex gap-2">
-            {estimatePoints.length > 0 && "Estimate points ("}
-            {estimatePoints.map((point, i) => (
+          <div className="flex gap-2 text-sm text-gray-400">
+            Estimate points(
+            {estimatePoints.map((point, index) => (
              <h6 key={point.id}>
                {point.value}
-                {i !== estimatePoints.length - 1 && ","}{" "}
+                {index !== estimatePoints.length - 1 && ","}{" "}
              </h6>
            ))}
-            {estimatePoints.length > 0 && ")"}
+            )
          </div>
        ) : (
          <div>
-            <p className=" text-sm text-gray-300">No estimate points</p>
+            <p className="text-sm text-gray-400">No estimate points</p>
          </div>
        )}
      </div>
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@ -405,7 +405,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                    control={control}
                    name="estimate_point"
                    render={({ field: { value, onChange } }) => (
-                      <IssueEstimateSelect chevron={false} value={value} onChange={onChange} />
+                      <IssueEstimateSelect value={value} onChange={onChange} />
                    )}
                  />
                </div>
--- a/apps/app/components/issues/select/estimate.tsx
+++ b/apps/app/components/issues/select/estimate.tsx
@ -1,72 +1,37 @@
 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
-import { PlayIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import { PlayIcon } from "@heroicons/react/24/outline";
 // fetch-keys
-import { ESTIMATE_POINTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import useEstimateOption from "hooks/use-estimate-option";

 type Props = {
  value: number;
  onChange: (value: number) => void;
-  chevron: boolean;
 };

-export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange, chevron }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
+  const { isEstimateActive, estimatePoints } = useEstimateOption();

-  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
-  );
+  if (!isEstimateActive) return null;

  return (
    <CustomSelect
      value={value}
      label={
-        <div className="flex items-center  gap-2 text-xs min-w-[calc(100%+10px)]">
-          <span>
-            <PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
-          </span>
+        <div className="flex items-center gap-2 text-xs">
+          <PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
          <span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
            {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate points"}
          </span>
-          {chevron && (
-            <span className="w-full flex justify-end pr-3">
-              <ChevronDownIcon className="h-[9px] w-[9px] text-black" />
-            </span>
-          )}
        </div>
      }
      onChange={onChange}
      position="right"
-      width="w-full min-w-[111px]"
-      noChevron={!chevron}
+      width="w-full min-w-[6rem]"
+      noChevron
    >
      {estimatePoints &&
        estimatePoints.map((point) => (
--- a/apps/app/components/issues/sidebar-select/estimate.tsx
+++ b/apps/app/components/issues/sidebar-select/estimate.tsx
@ -1,13 +1,12 @@
 import React from "react";

 // ui
-import { IssueEstimateSelect } from "components/issues/select";
-
+import { CustomSelect } from "components/ui";
 // icons
-import { BanknotesIcon } from "@heroicons/react/24/outline";
-
+import { BanknotesIcon, PlayIcon } from "@heroicons/react/24/outline";
 // types
 import { UserAuth } from "types";
+import useEstimateOption from "hooks/use-estimate-option";
 // constants

 type Props = {
@ -16,20 +15,48 @@ type Props = {
  userAuth: UserAuth;
 };

-
-
 export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;

+  const { isEstimateActive, estimatePoints } = useEstimateOption();
+
+  if (!isEstimateActive) return null;
+
  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" />
+        <PlayIcon className="h-4 w-4 -rotate-90 flex-shrink-0" />
        <p>Estimate</p>
      </div>
      <div className="sm:basis-1/2">
-        <IssueEstimateSelect chevron={true} value={value} onChange={onChange} />
+        <CustomSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-xs">
+              <PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
+              <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"
+          disabled={isNotAllowed}
+        >
+          {estimatePoints &&
+            estimatePoints.map((point) => (
+              <CustomSelect.Option className="w-full " key={point.key} value={point.key}>
+                <>
+                  <span>
+                    <PlayIcon className="h-4 w-4 -rotate-90" />
+                  </span>
+                  {point.value}
+                </>
+              </CustomSelect.Option>
+            ))}
+        </CustomSelect>
      </div>
    </div>
  );
-};
+};
--- a/apps/app/components/issues/view-select/estimate.tsx
+++ b/apps/app/components/issues/view-select/estimate.tsx
@ -11,6 +11,7 @@ import { PRIORITIES } from "constants/project";
 // services
 import trackEventServices from "services/track-event.service";
 import useEstimateOption from "hooks/use-estimate-option";
+import { PlayIcon } from "@heroicons/react/24/outline";

 type Props = {
  issue: IIssue;
@ -27,15 +28,17 @@ export const ViewEstimateSelect: React.FC<Props> = ({
  selfPositioned = false,
  isNotAllowed,
 }) => {
-  const { isEstimateActive, estimatePoints, estimateValue } = useEstimateOption(
-    issue.estimate_point
-  );
+  const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
+
+  const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
+
+  if (!isEstimateActive) return null;

  return (
    <CustomSelect
-      value={issue.priority}
-      onChange={(data: string) => {
-        partialUpdateIssue({ priority: data, state: issue.state, target_date: issue.target_date });
+      value={issue.estimate_point}
+      onChange={(val: number) => {
+        partialUpdateIssue({ estimate_point: val });
        trackEventServices.trackIssuePartialPropertyUpdateEvent(
          {
            workspaceSlug: issue.workspace_detail.slug,
@ -45,12 +48,15 @@ export const ViewEstimateSelect: React.FC<Props> = ({
            projectName: issue.project_detail.name,
            issueId: issue.id,
          },
-          "ISSUE_PROPERTY_UPDATE_PRIORITY"
+          "ISSUE_PROPERTY_UPDATE_ESTIMATE"
        );
      }}
      label={
        <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue}>
-          <>{estimateValue}</>
+          <div className="flex items-center gap-1 text-gray-500">
+            <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
+            {estimateValue}
+          </div>
        </Tooltip>
      }
      maxHeight="md"
@ -58,6 +64,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
      disabled={isNotAllowed}
      position={position}
      selfPositioned={selfPositioned}
+      width="w-full min-w-[6rem]"
    >
      {estimatePoints?.map((estimate) => (
        <CustomSelect.Option key={estimate.id} value={estimate.key} className="capitalize">
--- a/apps/app/components/issues/view-select/priority.tsx
+++ b/apps/app/components/issues/view-select/priority.tsx
@ -29,7 +29,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
  <CustomSelect
    value={issue.priority}
    onChange={(data: string) => {
-      partialUpdateIssue({ priority: data, state: issue.state, target_date: issue.target_date });
+      partialUpdateIssue({ priority: data });
      trackEventServices.trackIssuePartialPropertyUpdateEvent(
        {
          workspaceSlug: issue.workspace_detail.slug,
--- a/apps/app/hooks/use-estimate-option.tsx
+++ b/apps/app/hooks/use-estimate-option.tsx
@ -8,6 +8,8 @@ import useSWR from "swr";
 import estimatesService from "services/estimates.service";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // fetch-keys
 import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";

@ -26,7 +28,7 @@ const useEstimateOption = (estimateKey?: number) => {
          estimatesService.getEstimatesPointsList(
            workspaceSlug as string,
            projectId as string,
-            projectDetails.estimate
+            projectDetails.estimate as string
          )
      : null
  );
@ -41,7 +43,7 @@ const useEstimateOption = (estimateKey?: number) => {

  return {
    isEstimateActive: projectDetails?.estimate ? true : false,
-    estimatePoints,
+    estimatePoints: orderArrayBy(estimatePoints ?? [], "key"),
    estimateValue,
  };
 };
--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
@ -10,6 +10,7 @@ import Container from "layouts/container";
 import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import SettingsNavbar from "layouts/settings-navbar";
+import { WorkspaceAuthorizationLayout } from "./workspace-authorization-wrapper";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
@ -89,6 +90,22 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
              </PrimaryButton>
            </div>
          </div>
+        ) : error?.status === 401 || error?.status === 403 ? (
+          <JoinProject />
+        ) : error?.status === 404 ? (
+          <div className="container h-screen grid place-items-center">
+            <div className="text-center space-y-4">
+              <p className="text-2xl font-semibold">No such project exist. Create one?</p>
+              <PrimaryButton
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", { key: "p" });
+                  document.dispatchEvent(e);
+                }}
+              >
+                Create project
+              </PrimaryButton>
+            </div>
+          </div>
        ) : settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
          <NotAuthorizedView
            actionButton={
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";

 import { useRouter } from "next/router";

@ -15,20 +15,20 @@ import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates"
 //hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Loader } from "components/ui";
+import { Loader, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IEstimate } from "types";
+import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { ESTIMATES_LIST } from "constants/fetch-keys";
+import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import projectService from "services/project.service";

 const EstimatesSettings: NextPage = () => {
  const [estimateFormOpen, setEstimateFormOpen] = useState(false);

-  const [isUpdating, setIsUpdating] = useState(false);
  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();

  const router = useRouter();
@ -38,8 +38,6 @@ const EstimatesSettings: NextPage = () => {

  const { projectDetails } = useProjectDetails();

-  const scrollToRef = useRef<HTMLDivElement>(null);
-
  const { data: estimatesList } = useSWR<IEstimate[]>(
    workspaceSlug && projectId ? ESTIMATES_LIST(projectId as string) : null,
    workspaceSlug && projectId
@ -48,7 +46,6 @@ const EstimatesSettings: NextPage = () => {
  );

  const editEstimate = (estimate: IEstimate) => {
-    setIsUpdating(true);
    setEstimateToUpdate(estimate);
    setEstimateFormOpen(true);
  };
@ -73,6 +70,30 @@ const EstimatesSettings: NextPage = () => {
      });
  };

+  const disableEstimates = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => {
+        if (!prevData) return prevData;
+
+        return { ...prevData, estimate: null };
+      },
+      false
+    );
+
+    projectService
+      .updateProject(workspaceSlug as string, projectId as string, { estimate: null })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Estimate could not be disabled. Please try again",
+        })
+      );
+  };
+
  return (
    <>
      <ProjectAuthorizationWrapper
@ -87,7 +108,6 @@ const EstimatesSettings: NextPage = () => {
        }
      >
        <CreateUpdateEstimateModal
-          isCreate={estimateToUpdate ? true : false}
          isOpen={estimateFormOpen}
          data={estimateToUpdate}
          handleClose={() => {
@ -95,14 +115,12 @@ const EstimatesSettings: NextPage = () => {
            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>
+        <section className="flex items-center justify-between">
+          <h3 className="text-2xl font-semibold">Estimates</h3>
          <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">
+            <div className="flex items-center gap-2">
              <span
-                className="flex items-center cursor-pointer gap-2"
+                className="flex items-center cursor-pointer gap-2 text-theme"
                onClick={() => {
                  setEstimateToUpdate(undefined);
                  setEstimateFormOpen(true);
@ -111,6 +129,9 @@ const EstimatesSettings: NextPage = () => {
                <PlusIcon className="h-4 w-4" />
                Create New Estimate
              </span>
+              {projectDetails?.estimate && (
+                <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
+              )}
            </div>
          </div>
        </section>
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@ -22,9 +22,9 @@ import { ONBOARDING_CARDS } from "constants/workspace";
 import Logo from "public/onboarding/logo.svg";
 // types
 import type { NextPage } from "next";
+import { ICurrentUserResponse } from "types";
 // fetch-keys
 import { CURRENT_USER } from "constants/fetch-keys";
-import { ICurrentUserResponse } from "types";

 const Onboarding: NextPage = () => {
  const [step, setStep] = useState(1);
--- a/apps/app/services/estimates.service.ts
+++ b/apps/app/services/estimates.service.ts
@ -1,6 +1,6 @@
 // services
 import APIService from "services/api.service";
-
+// types
 import type { IEstimate, IEstimatePoint } from "types";

 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@ -78,7 +78,7 @@ class ProjectEstimateServices extends APIService {
    }
  ): Promise<any> {
    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/bulk-create-estimate-points/`,
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/bulk-estimate-points/`,
      data
    )
      .then((response) => response?.data)
@ -87,7 +87,7 @@ class ProjectEstimateServices extends APIService {
      });
  }

-  async getEstimatesPoints(
+  async getEstimatesPointDetails(
    workspaceSlug: string,
    projectId: string,
    estimateId: string,
@ -116,15 +116,14 @@ class ProjectEstimateServices extends APIService {
      });
  }

-  async updateEstimatesPoints(
+  async patchEstimatePoints(
    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}`,
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/bulk-estimate-points/`,
      data
    )
      .then((response) => response?.data)
@ -132,21 +131,6 @@ class ProjectEstimateServices extends APIService {
        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();
--- a/apps/app/services/track-event.service.ts
+++ b/apps/app/services/track-event.service.ts
@ -192,6 +192,7 @@ class TrackEventServices extends APIService {
      | "ISSUE_PROPERTY_UPDATE_STATE"
      | "ISSUE_PROPERTY_UPDATE_ASSIGNEE"
      | "ISSUE_PROPERTY_UPDATE_DUE_DATE"
+      | "ISSUE_PROPERTY_UPDATE_ESTIMATE"
  ): Promise<any> {
    if (!trackEvent) return;
    return this.request({
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@ -18,7 +18,7 @@ export interface IProject {
  page_view: boolean;
  default_assignee: IUser | string | null;
  description: string;
-  estimate: string;
+  estimate: string | null;
  icon: string;
  id: string;
  identifier: string;