From da9d92ef66aee0d9a47d4d5f196e168778dd137f Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Thu, 5 Sep 2024 17:51:43 +0530
Subject: [PATCH 1/5] added functionality to list and grid

---
 .../components/modules/module-card-item.tsx   | 98 +++++++++++++------
 .../modules/module-list-item-action.tsx       | 89 +++++++++++------
 .../modules/module-status-dropdown.tsx        | 50 ++++++++++
 3 files changed, 175 insertions(+), 62 deletions(-)
 create mode 100644 web/core/components/modules/module-status-dropdown.tsx

diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 031941553ae..1fa240c4fed 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import React, { useRef } from "react";
+import React, { SyntheticEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
+import { Info, SquareUser } from "lucide-react";
 // ui
 import { IModule } from "@plane/types";
-import { Card, FavoriteStar, LayersIcon, LinearProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
+import { Card, FavoriteStar, LayersIcon, LinearProgressIndicator, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
 // components
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
@@ -17,7 +17,7 @@ import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker"
 import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
-import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { generateQueryParams } from "@/helpers/router.helper";
 // hooks
 import { useEventTracker, useMember, useModule, useProjectEstimates, useUser } from "@/hooks/store";
@@ -25,6 +25,8 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
+import { DateRangeDropdown } from "@/components/dropdowns";
+import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
 
 type Props = {
   moduleId: string;
@@ -43,6 +45,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { updateModuleDetails } = useModule();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
   const { getUserDetails } = useMember();
   const { captureEvent } = useEventTracker();
@@ -51,6 +54,10 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const isDisabled = !isEditingAllowed || (moduleDetails?.archived_at ? true : false) ;
+  const renderIcon = Boolean(moduleDetails?.start_date) || Boolean(moduleDetails?.target_date);
+
+
   const { isMobile } = usePlatformOS();
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -110,6 +117,31 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     });
   };
 
+  const handleEventPropagation = (e: SyntheticEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleModuleDetailsChange = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
+      .then((res) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
   const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();
@@ -147,10 +179,6 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     ? moduleDetails?.completed_estimate_points || 0
     : moduleDetails.completed_issues;
 
-  const endDate = getDate(moduleDetails.target_date);
-  const startDate = getDate(moduleDetails.start_date);
-
-  const isDateValid = moduleDetails.target_date || moduleDetails.start_date;
 
   // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
 
@@ -174,7 +202,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   }));
 
   return (
-    <div className="relative">
+    <div className="relative" data-prevent-nprogress>
       <Link ref={parentRef} href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
         <Card>
           <div>
@@ -182,17 +210,13 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
                 <span className="truncate text-base font-medium">{moduleDetails.name}</span>
               </Tooltip>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2" onClick={handleEventPropagation}>
                 {moduleStatus && (
-                  <span
-                    className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                    style={{
-                      color: moduleStatus.color,
-                      backgroundColor: `${moduleStatus.color}20`,
-                    }}
-                  >
-                    {moduleStatus.label}
-                  </span>
+                  <ModuleStatusSelection
+                  isEditingAllowed={isEditingAllowed}
+                  moduleDetails={moduleDetails}
+                  handleModuleDetailsChange={handleModuleDetailsChange}
+                  />
                 )}
                 <button onClick={openModuleOverview}>
                   <Info className="h-4 w-4 text-custom-text-400" />
@@ -217,18 +241,28 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               )}
             </div>
             <LinearProgressIndicator size="lg" data={progressIndicatorData} />
-            <div className="flex items-center justify-between py-0.5">
-              {isDateValid ? (
-                <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
-                  <CalendarClock className="h-3 w-3 flex-shrink-0" />
-                  <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
-                  <MoveRight className="h-3 w-3 flex-shrink-0" />
-                  <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
-                  <span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
-                </div>
-              ) : (
-                <span className="text-xs text-custom-text-400">No due date</span>
-              )}
+            <div className="flex items-center justify-between py-0.5" onClick={handleEventPropagation}>
+              <DateRangeDropdown
+                buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
+                buttonVariant="transparent-with-text"
+                className="h-7"
+                value={{
+                  from: getDate(moduleDetails.start_date),
+                  to: getDate(moduleDetails.target_date),
+                }}
+                onSelect={(val) => {
+                  handleModuleDetailsChange({
+                    start_date: (val?.from ? renderFormattedPayloadDate(val.from) : null),
+                    target_date: (val?.to ? renderFormattedPayloadDate(val.to) : null)
+                  })
+                }}
+                placeholder={{
+                  from: "Start date",
+                  to: "End date",
+                }}
+                disabled={isDisabled}
+                hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
+              />
             </div>
           </div>
         </Card>
@@ -254,4 +288,4 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
       </div>
     </div>
   );
-});
+});
\ No newline at end of file
diff --git a/web/core/components/modules/module-list-item-action.tsx b/web/core/components/modules/module-list-item-action.tsx
index b1df2d3598e..7081d7aeff5 100644
--- a/web/core/components/modules/module-list-item-action.tsx
+++ b/web/core/components/modules/module-list-item-action.tsx
@@ -4,22 +4,24 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { CalendarCheck2, CalendarClock, MoveRight, SquareUser } from "lucide-react";
+import { SquareUser } from "lucide-react";
 // types
 import { IModule } from "@plane/types";
 // ui
-import { FavoriteStar, Tooltip, setPromiseToast } from "@plane/ui";
+import { FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
 // components
 import { ModuleQuickActions } from "@/components/modules";
 // constants
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
+import { MODULE_FAVORITED, MODULE_UNFAVORITED, MODULE_UPDATED } from "@/constants/event-tracker";
 import { EUserProjectRoles } from "@/constants/project";
-// helpers
-import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useEventTracker, useMember, useModule, useUser } from "@/hooks/store";
 import { ButtonAvatars } from "../dropdowns/member/avatar";
+import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
+import { DateRangeDropdown } from "@/components/dropdowns";
+import { getDate } from '@/helpers/date-time.helper';
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { MODULE_STATUS } from "@/constants/module";
 
 type Props = {
   moduleId: string;
@@ -32,6 +34,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
   // router
   const { workspaceSlug, projectId } = useParams();
   //   store hooks
+  const { updateModuleDetails } = useModule();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -40,14 +43,11 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
   const { captureEvent } = useEventTracker();
 
   // derived values
-  const endDate = getDate(moduleDetails.target_date);
-  const startDate = getDate(moduleDetails.start_date);
-
-  const renderDate = moduleDetails.start_date || moduleDetails.target_date;
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
-
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const isDisabled = !isEditingAllowed || (moduleDetails.archived_at ? true : false) ;
+  const renderIcon = Boolean(moduleDetails.start_date) || Boolean(moduleDetails.target_date);
 
   // handlers
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -108,30 +108,59 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
     });
   };
 
+  const handleModuleDetailsChange = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
+      .then((res) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+  
   const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
   return (
     <>
-      {renderDate && (
-        <div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
-          <CalendarClock className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
-          <MoveRight className="h-3 w-3 flex-shrink-0" />
-          <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
-        </div>
-      )}
+
+      <DateRangeDropdown
+        buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
+        buttonVariant="transparent-with-text"
+        className="h-7"
+        value={{
+          from: getDate(moduleDetails.start_date),
+          to: getDate(moduleDetails.target_date),
+        }}
+        onSelect={(val) => {
+          handleModuleDetailsChange({
+            start_date: (val?.from ? renderFormattedPayloadDate(val.from) : null),
+            target_date: (val?.to ? renderFormattedPayloadDate(val.to) : null)
+          })
+        }}
+        placeholder={{
+          from: "Start date",
+          to: "End date",
+        }}
+        disabled={isDisabled}
+        hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
+      />
 
       {moduleStatus && (
-        <span
-          className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs cursor-default"
-          style={{
-            color: moduleStatus.color,
-            backgroundColor: `${moduleStatus.color}20`,
-          }}
-        >
-          {moduleStatus.label}
-        </span>
+        <ModuleStatusSelection
+        isEditingAllowed={isEditingAllowed}
+        moduleDetails={moduleDetails}
+        handleModuleDetailsChange={handleModuleDetailsChange}
+        />
       )}
 
       {moduleLeadDetails ? (
@@ -165,4 +194,4 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
       )}
     </>
   );
-});
+});
\ No newline at end of file
diff --git a/web/core/components/modules/module-status-dropdown.tsx b/web/core/components/modules/module-status-dropdown.tsx
new file mode 100644
index 00000000000..3213dd249f8
--- /dev/null
+++ b/web/core/components/modules/module-status-dropdown.tsx
@@ -0,0 +1,50 @@
+import { MODULE_STATUS } from '@/constants/module'
+import { IModule } from '@plane/types';
+import { CustomSelect, TModuleStatus, ModuleStatusIcon } from '@plane/ui'
+import { observer } from 'mobx-react';
+import React, { FC } from 'react'
+
+type Props = {
+    isEditingAllowed: boolean;
+    moduleDetails: IModule;
+    handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
+};
+
+export const ModuleStatusSelection : FC<Props> = observer((props : Props) => {
+    const {isEditingAllowed, moduleDetails, handleModuleDetailsChange} = props;
+    const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+    if(!moduleStatus) return <></>
+
+return (
+    <CustomSelect
+        customButton={
+            <span
+            className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+                isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+            }`}
+            style={{
+                color: moduleStatus ? moduleStatus.color : "#a3a3a2",
+                backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
+            }}
+            >
+            {moduleStatus?.label ?? "Backlog"}
+            </span>
+        }
+        value={moduleStatus?.value}
+        onChange={(val: TModuleStatus)=>{
+            handleModuleDetailsChange({status: val})
+        }}
+        disabled={!isEditingAllowed}
+    >
+        {MODULE_STATUS.map((status) => (
+            <CustomSelect.Option key={status.value} value={status.value}>
+            <div className="flex items-center gap-2">
+                <ModuleStatusIcon status={status.value} />
+                {status.label}
+            </div>
+            </CustomSelect.Option>
+        ))}
+        </CustomSelect>
+    )
+})
\ No newline at end of file

From 3b4a6998c0d4bbe7b2c580d396ccb4239fa99f0e Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Thu, 5 Sep 2024 19:08:13 +0530
Subject: [PATCH 2/5] fixed logic for archived module

---
 web/core/components/modules/module-card-item.tsx        | 2 +-
 web/core/components/modules/module-list-item-action.tsx | 6 +++---
 web/core/components/modules/module-status-dropdown.tsx  | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 1fa240c4fed..4ce90b274fc 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -213,7 +213,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               <div className="flex items-center gap-2" onClick={handleEventPropagation}>
                 {moduleStatus && (
                   <ModuleStatusSelection
-                  isEditingAllowed={isEditingAllowed}
+                  isDisabled={isDisabled}
                   moduleDetails={moduleDetails}
                   handleModuleDetailsChange={handleModuleDetailsChange}
                   />
diff --git a/web/core/components/modules/module-list-item-action.tsx b/web/core/components/modules/module-list-item-action.tsx
index 7081d7aeff5..b998279ecb6 100644
--- a/web/core/components/modules/module-list-item-action.tsx
+++ b/web/core/components/modules/module-list-item-action.tsx
@@ -12,7 +12,7 @@ import { FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@p
 // components
 import { ModuleQuickActions } from "@/components/modules";
 // constants
-import { MODULE_FAVORITED, MODULE_UNFAVORITED, MODULE_UPDATED } from "@/constants/event-tracker";
+import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useEventTracker, useMember, useModule, useUser } from "@/hooks/store";
@@ -46,7 +46,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  const isDisabled = !isEditingAllowed || (moduleDetails.archived_at ? true : false) ;
+  const isDisabled = isEditingAllowed || (moduleDetails.archived_at ? true : false) ;
   const renderIcon = Boolean(moduleDetails.start_date) || Boolean(moduleDetails.target_date);
 
   // handlers
@@ -157,7 +157,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
 
       {moduleStatus && (
         <ModuleStatusSelection
-        isEditingAllowed={isEditingAllowed}
+        isDisabled={isDisabled}
         moduleDetails={moduleDetails}
         handleModuleDetailsChange={handleModuleDetailsChange}
         />
diff --git a/web/core/components/modules/module-status-dropdown.tsx b/web/core/components/modules/module-status-dropdown.tsx
index 3213dd249f8..27a6c8e3105 100644
--- a/web/core/components/modules/module-status-dropdown.tsx
+++ b/web/core/components/modules/module-status-dropdown.tsx
@@ -5,13 +5,13 @@ import { observer } from 'mobx-react';
 import React, { FC } from 'react'
 
 type Props = {
-    isEditingAllowed: boolean;
+    isDisabled: boolean;
     moduleDetails: IModule;
     handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
 };
 
 export const ModuleStatusSelection : FC<Props> = observer((props : Props) => {
-    const {isEditingAllowed, moduleDetails, handleModuleDetailsChange} = props;
+    const {isDisabled, moduleDetails, handleModuleDetailsChange} = props;
     const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
 
     if(!moduleStatus) return <></>
@@ -21,7 +21,7 @@ return (
         customButton={
             <span
             className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
-                isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                isDisabled ? "cursor-not-allowed" : "cursor-pointer"
             }`}
             style={{
                 color: moduleStatus ? moduleStatus.color : "#a3a3a2",
@@ -35,7 +35,7 @@ return (
         onChange={(val: TModuleStatus)=>{
             handleModuleDetailsChange({status: val})
         }}
-        disabled={!isEditingAllowed}
+        disabled={isDisabled}
     >
         {MODULE_STATUS.map((status) => (
             <CustomSelect.Option key={status.value} value={status.value}>

From 454601837a9f02d04684db70f6fad75e98bb3cd9 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Thu, 5 Sep 2024 19:21:40 +0530
Subject: [PATCH 3/5] fixed logic for list view

---
 web/core/components/modules/module-list-item-action.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/core/components/modules/module-list-item-action.tsx b/web/core/components/modules/module-list-item-action.tsx
index b998279ecb6..89b1e911c62 100644
--- a/web/core/components/modules/module-list-item-action.tsx
+++ b/web/core/components/modules/module-list-item-action.tsx
@@ -46,7 +46,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  const isDisabled = isEditingAllowed || (moduleDetails.archived_at ? true : false) ;
+  const isDisabled = !isEditingAllowed || (moduleDetails.archived_at ? true : false) ;
   const renderIcon = Boolean(moduleDetails.start_date) || Boolean(moduleDetails.target_date);
 
   // handlers

From 0ad9429163282fae9b7b19a539c82d385772b60e Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 11:16:42 +0530
Subject: [PATCH 4/5] improved logic and fixed linting issues

---
 web/core/components/modules/module-card-item.tsx  |  8 ++++----
 .../modules/module-list-item-action.tsx           | 15 +++++++--------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 4ce90b274fc..79403258d3c 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -9,9 +9,11 @@ import { Info, SquareUser } from "lucide-react";
 import { IModule } from "@plane/types";
 import { Card, FavoriteStar, LayersIcon, LinearProgressIndicator, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
 // components
+import { DateRangeDropdown } from "@/components/dropdowns";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
+import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
 import { PROGRESS_STATE_GROUPS_DETAILS } from "@/constants/common";
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { MODULE_STATUS } from "@/constants/module";
@@ -25,8 +27,6 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
-import { DateRangeDropdown } from "@/components/dropdowns";
-import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
 
 type Props = {
   moduleId: string;
@@ -54,7 +54,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  const isDisabled = !isEditingAllowed || (moduleDetails?.archived_at ? true : false) ;
+  const isDisabled = !isEditingAllowed || !!moduleDetails?.archived_at;
   const renderIcon = Boolean(moduleDetails?.start_date) || Boolean(moduleDetails?.target_date);
 
 
@@ -126,7 +126,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId) return;
 
     await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
-      .then((res) => {
+      .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
diff --git a/web/core/components/modules/module-list-item-action.tsx b/web/core/components/modules/module-list-item-action.tsx
index 89b1e911c62..05c5d6a66f4 100644
--- a/web/core/components/modules/module-list-item-action.tsx
+++ b/web/core/components/modules/module-list-item-action.tsx
@@ -10,18 +10,17 @@ import { IModule } from "@plane/types";
 // ui
 import { FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
 // components
+import { DateRangeDropdown } from "@/components/dropdowns";
 import { ModuleQuickActions } from "@/components/modules";
 // constants
+import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
+import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
+import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
 import { useEventTracker, useMember, useModule, useUser } from "@/hooks/store";
 import { ButtonAvatars } from "../dropdowns/member/avatar";
-import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
-import { DateRangeDropdown } from "@/components/dropdowns";
-import { getDate } from '@/helpers/date-time.helper';
-import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
-import { MODULE_STATUS } from "@/constants/module";
 
 type Props = {
   moduleId: string;
@@ -46,7 +45,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  const isDisabled = !isEditingAllowed || (moduleDetails.archived_at ? true : false) ;
+  const isDisabled = !isEditingAllowed || !!moduleDetails?.archived_at;
   const renderIcon = Boolean(moduleDetails.start_date) || Boolean(moduleDetails.target_date);
 
   // handlers
@@ -112,7 +111,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId) return;
 
     await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
-      .then((res) => {
+      .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
@@ -127,7 +126,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
         });
       });
   };
-  
+
   const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
   return (

From d1621d929ed7b452255707a1ef3d181db03e50ec Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Mon, 9 Sep 2024 11:39:25 +0530
Subject: [PATCH 5/5] improved variable names

---
 web/core/components/modules/module-card-item.tsx        | 7 +++----
 web/core/components/modules/module-list-item-action.tsx | 8 +++-----
 web/core/components/modules/module-status-dropdown.tsx  | 8 ++++----
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 79403258d3c..d71bd52ed6c 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -12,8 +12,8 @@ import { Card, FavoriteStar, LayersIcon, LinearProgressIndicator, TOAST_TYPE, To
 import { DateRangeDropdown } from "@/components/dropdowns";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
+import { ModuleStatusDropdown } from  "@/components/modules/module-status-dropdown";
 // constants
-import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
 import { PROGRESS_STATE_GROUPS_DETAILS } from "@/constants/common";
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { MODULE_STATUS } from "@/constants/module";
@@ -45,8 +45,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { updateModuleDetails } = useModule();
-  const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
+  const { getModuleById, addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
   const { getUserDetails } = useMember();
   const { captureEvent } = useEventTracker();
   const { currentActiveEstimateId, areEstimateEnabledByProjectId, estimateById } = useProjectEstimates();
@@ -212,7 +211,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               </Tooltip>
               <div className="flex items-center gap-2" onClick={handleEventPropagation}>
                 {moduleStatus && (
-                  <ModuleStatusSelection
+                  <ModuleStatusDropdown
                   isDisabled={isDisabled}
                   moduleDetails={moduleDetails}
                   handleModuleDetailsChange={handleModuleDetailsChange}
diff --git a/web/core/components/modules/module-list-item-action.tsx b/web/core/components/modules/module-list-item-action.tsx
index 05c5d6a66f4..fcba7363be7 100644
--- a/web/core/components/modules/module-list-item-action.tsx
+++ b/web/core/components/modules/module-list-item-action.tsx
@@ -12,8 +12,8 @@ import { FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@p
 // components
 import { DateRangeDropdown } from "@/components/dropdowns";
 import { ModuleQuickActions } from "@/components/modules";
+import { ModuleStatusDropdown } from  "@/components/modules/module-status-dropdown";
 // constants
-import { ModuleStatusSelection } from  "@/components/modules/module-status-dropdown";
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
 import { MODULE_STATUS } from "@/constants/module";
 import { EUserProjectRoles } from "@/constants/project";
@@ -33,11 +33,10 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
   // router
   const { workspaceSlug, projectId } = useParams();
   //   store hooks
-  const { updateModuleDetails } = useModule();
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { addModuleToFavorites, removeModuleFromFavorites } = useModule();
+  const { addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
   const { getUserDetails } = useMember();
   const { captureEvent } = useEventTracker();
 
@@ -131,7 +130,6 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
 
   return (
     <>
-
       <DateRangeDropdown
         buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs`}
         buttonVariant="transparent-with-text"
@@ -155,7 +153,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
       />
 
       {moduleStatus && (
-        <ModuleStatusSelection
+        <ModuleStatusDropdown
         isDisabled={isDisabled}
         moduleDetails={moduleDetails}
         handleModuleDetailsChange={handleModuleDetailsChange}
diff --git a/web/core/components/modules/module-status-dropdown.tsx b/web/core/components/modules/module-status-dropdown.tsx
index 27a6c8e3105..ec021c49f90 100644
--- a/web/core/components/modules/module-status-dropdown.tsx
+++ b/web/core/components/modules/module-status-dropdown.tsx
@@ -1,8 +1,8 @@
-import { MODULE_STATUS } from '@/constants/module'
+import React, { FC } from 'react'
+import { observer } from 'mobx-react';
 import { IModule } from '@plane/types';
 import { CustomSelect, TModuleStatus, ModuleStatusIcon } from '@plane/ui'
-import { observer } from 'mobx-react';
-import React, { FC } from 'react'
+import { MODULE_STATUS } from '@/constants/module'
 
 type Props = {
     isDisabled: boolean;
@@ -10,7 +10,7 @@ type Props = {
     handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
 };
 
-export const ModuleStatusSelection : FC<Props> = observer((props : Props) => {
+export const ModuleStatusDropdown : FC<Props> = observer((props : Props) => {
     const {isDisabled, moduleDetails, handleModuleDetailsChange} = props;
     const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);