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>

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()}>
+                <SecondaryButton>Check pending invites</SecondaryButton>
-                  Check pending invites
-                </SecondaryButton>
               </a>
             </Link>
             <Link href="/create-workspace">

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) => (
+                      {Object.keys(properties).map((key) => {
-                        <button
+                        if (key === "estimate" && !isEstimateActive) return null;
-                          key={key}
+
-                          type="button"
+                        return (
-                          className={`rounded border px-2 py-1 text-xs capitalize ${
+                          <button
-                            properties[key as keyof Properties]
+                            key={key}
-                              ? "border-theme bg-theme text-white"
+                            type="button"
-                              : "border-gray-300"
+                            className={`rounded border px-2 py-1 text-xs capitalize ${
-                          }`}
+                              properties[key as keyof Properties]
-                          onClick={() => setProperties(key as keyof Properties)}
+                                ? "border-theme bg-theme text-white"
-                        >
+                                : "border-gray-300"
-                          {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                            }`}
-                        </button>
+                            onClick={() => setProperties(key as keyof Properties)}
-                      ))}
+                          >
+                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                          </button>
+                        );
+                      })}
                     </div>
                   </div>
                 </div>

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}>

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"

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: [
+      estimate_points: data.map((d, index) => ({
-        {
+        id: d.id,
-          key: 0,
+        value: (formData as any)[`value${index + 1}`],
-          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(
+      .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
+                <form onSubmit={handleSubmit(onSubmit)}>
-                  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>
+                      <h4 className="text-lg font-medium leading-6">
-                      <div className="grid grid-cols-4 gap-3">
+                        {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>

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
+            {projectDetails?.estimate !== estimate.id && (
-              onClick={() => {
+              <CustomMenu.MenuItem
-                handleEstimateDelete(estimate.id);
+                onClick={() => {
-              }}
+                  handleEstimateDelete(estimate.id);
-            >
+                }}
-              <div className="flex items-center justify-start gap-2">
+              >
-                <TrashIcon className="h-3.5 w-3.5" />
+                <div className="flex items-center justify-start gap-2">
-                <span>Delete estimate</span>
+                  <TrashIcon className="h-3.5 w-3.5" />
-              </div>
+                  <span>Delete estimate</span>
-            </CustomMenu.MenuItem>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
           </CustomMenu>
         </div>
         {estimatePoints && estimatePoints.length > 0 ? (
-          <div className="flex gap-2">
+          <div className="flex gap-2 text-sm text-gray-400">
-            {estimatePoints.length > 0 && "Estimate points ("}
+            Estimate points(
-            {estimatePoints.map((point, i) => (
+            {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>

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>

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 }) => {
+export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
-  const router = useRouter();
+  const { isEstimateActive, estimatePoints } = useEstimateOption();
-  const { workspaceSlug, projectId } = router.query;
 
-  const { data: projectDetails } = useSWR(
+  if (!isEstimateActive) return null;
-    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 min-w-[calc(100%+10px)]">
+        <div className="flex items-center gap-2 text-xs">
-          <span>
+          <PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
-            <PlayIcon className="h-4 w-4 text-gray-700 -rotate-90" />
-          </span>
           <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]"
+      width="w-full min-w-[6rem]"
-      noChevron={!chevron}
+      noChevron
     >
       {estimatePoints &&
         estimatePoints.map((point) => (

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,19 +15,47 @@ 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>
   );

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(
+  const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
-    issue.estimate_point
+
-  );
+  const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
+
+  if (!isEstimateActive) return null;
 
   return (
     <CustomSelect
-      value={issue.priority}
+      value={issue.estimate_point}
-      onChange={(data: string) => {
+      onChange={(val: number) => {
-        partialUpdateIssue({ priority: data, state: issue.state, target_date: issue.target_date });
+        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">

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,

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,
   };
 };

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={

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">
+        <section className="flex items-center justify-between">
-          <div className="col-span-12 sm:col-span-5">
+          <h3 className="text-2xl font-semibold">Estimates</h3>
-            <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">
+            <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>

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);

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();

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({

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;