From 96602a6e6a3349960e4b228ddfde5f11b0fa75ca Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:12:19 +0530
Subject: [PATCH 1/8] feat: #1263 Added code changes for purpose field in task
 card

---
 src/components/tasks/card/card.module.scss | 20 +++++++++++++++++---
 src/components/tasks/card/index.tsx        | 20 ++++++++++++++++----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 371131140..40ffaf6ae 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -91,6 +91,16 @@
     color: #aeaeae;
 }
 
+.cardPurposeAndStatusFont {
+    font-size: 1.1rem;
+    color: #555;
+}
+.cardPurposeText{
+    padding: 8px;
+    color: #aeaeae;
+    font-size: 1rem;
+}
+
 .cardStatusFont {
     font-size: 1.3rem;
     font-weight: 500;
@@ -242,9 +252,13 @@
     cursor: pointer;
 }
 
-.taskStatusAndDateContainer {
-    display: flex;
-    justify-content: space-between;
+.taskStatusDateAndPurposeContainer {
+    display: grid;
+    align-items: baseline;
+    grid-template-columns: 2fr 3fr;
+    gap: 2rem;
+    grid-auto-flow: column;
+    margin-bottom: 1rem;
 }
 
 .taskStatusEditMode {
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index a2e8457f6..9c36e5d78 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -32,6 +32,7 @@ import {
 import { useGetUsersByUsernameQuery } from '@/app/services/usersApi';
 import { ConditionalLinkWrapper } from './ConditionalLinkWrapper';
 import useUserData from '@/hooks/useUserData';
+import { useGetUserQuery } from '@/app/services/userApi';
 import { isTaskDetailsPageLinkEnabled } from '@/constants/FeatureFlags';
 import { useUpdateTaskMutation } from '@/app/services/tasksApi';
 import ProgressIndicator from './progressContainer/ProgressIndicator';
@@ -75,16 +76,18 @@ const Card: FC<CardProps> = ({
 
     const { isUserAuthorized } = useUserData();
 
+    const { data: userData } = useGetUserQuery();
+
     const [showEditButton, setShowEditButton] = useState(false);
 
     const [keyLongPressed] = useKeyLongPressed();
 
     const [isEditMode, setIsEditMode] = useState(false);
 
-    const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
+    const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({ // revisit
         itemId: cardDetails.id,
     });
-    const [deleteTaskTagLevel] = useDeleteTaskTagLevelMutation();
+    const [deleteTaskTagLevel] = useDeleteTaskTagLevelMutation(); //revisit
     const [updateTask, { isLoading: isLoadingUpdateTaskDetails }] =
         useUpdateTaskMutation();
 
@@ -266,7 +269,7 @@ const Card: FC<CardProps> = ({
         setIsEditMode(true);
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
-
+    const isSelfTask = editedTaskDetails.assignee === userData?.username;
     const getFormattedClosedAtDate = () => {
         const closedAt = cardDetails?.github?.issue?.closedAt;
         return getDateInString(new Date(closedAt ?? Date.now()));
@@ -543,7 +546,7 @@ const Card: FC<CardProps> = ({
                     </div>
                 )}
             </div>
-            <div className={styles.taskStatusAndDateContainer}>
+            <div className={styles.taskStatusDateAndPurposeContainer}>
                 <div className={styles.dateInfo}>
                     <div className={styles.dateSection}>
                         <p className={styles.cardSpecialFont}>
@@ -569,6 +572,15 @@ const Card: FC<CardProps> = ({
                             : `Started ${getStartedAgo()}`}
                     </span>
                 </div>
+
+                {/*card purpose*/}
+                {isSelfTask && editedTaskDetails.purpose && (
+                    <div>
+                        <b className={styles.cardPurposeAndStatusFont}>Purpose: </b>
+                        <span className={styles.cardPurposeText}>{editedTaskDetails.purpose}</span>
+                    </div>
+                )}
+
                 {/* EDIT task status */}
                 <div className={styles.taskStatusEditMode}>
                     {isEditable ? (

From 8f3420931261a503adaeafd5d9ec2c1dfa7dfbe8 Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Tue, 14 Jan 2025 04:57:17 +0530
Subject: [PATCH 2/8] feat: Real-Dev-Squad#1263 | Added status field in Task
 Card

---
 .../tasks/card/TaskStatusEditMode.tsx         | 10 +++-
 src/components/tasks/card/card.module.scss    | 18 ++++++++
 src/components/tasks/card/index.tsx           | 46 ++++++++++---------
 3 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/src/components/tasks/card/TaskStatusEditMode.tsx b/src/components/tasks/card/TaskStatusEditMode.tsx
index 8d4c31b37..fca20b15a 100644
--- a/src/components/tasks/card/TaskStatusEditMode.tsx
+++ b/src/components/tasks/card/TaskStatusEditMode.tsx
@@ -5,7 +5,7 @@ import task, {
 import { useState } from 'react';
 import styles from '@/components/tasks/card/card.module.scss';
 import { PENDING, SAVED, ERROR_STATUS } from '../constants';
-import { useUpdateTaskMutation } from '@/app/services/tasksApi';
+import { useUpdateTaskMutation, useUpdateSelfTaskMutation } from '@/app/services/tasksApi';
 import { StatusIndicator } from './StatusIndicator';
 import TaskDropDown from '../TaskDropDown';
 import { TASK_STATUS_MAPING } from '@/constants/constants';
@@ -14,6 +14,7 @@ type Props = {
     task: task;
     setEditedTaskDetails: React.Dispatch<React.SetStateAction<CardTaskDetails>>;
     isDevMode?: boolean;
+    isSelfTask: boolean;
 };
 
 // TODO: remove this after fixing the card beautify status
@@ -33,9 +34,11 @@ const TaskStatusEditMode = ({
     task,
     setEditedTaskDetails,
     isDevMode,
+    isSelfTask
 }: Props) => {
     const [saveStatus, setSaveStatus] = useState('');
     const [updateTask] = useUpdateTaskMutation();
+    const [updateSelfTask] = useUpdateSelfTaskMutation();
 
     const onChangeUpdateTaskStatus = ({
         newStatus,
@@ -52,7 +55,10 @@ const TaskStatusEditMode = ({
             ...prev,
             ...payload,
         }));
-        const response = updateTask({
+        const response = isSelfTask ? updateSelfTask({
+            id: task.id,
+            task: payload,
+        }) : updateTask({
             id: task.id,
             task: payload,
         });
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 40ffaf6ae..12671f767 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -265,6 +265,24 @@
     margin-top: 0.8rem;
 }
 
+.taskStatusUpdate {
+    border: 1px solid #000000b3;
+    border-radius: 4px;
+    font-size: inherit;
+    font-weight: bolder;
+    background-color: transparent;
+    color: #041187;
+    padding: 0.5rem;
+    height: 2.5rem;
+    width: 10rem;
+    transition: 250ms ease-in-out;
+}
+
+.taskStatusUpdate:hover {
+    background-color: #041187;
+    color: #ffffff;
+}
+
 .taskTagLevelWrapper {
     display: flex;
     padding-top: 0.5rem;
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index 9c36e5d78..05e7866f8 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -270,6 +270,8 @@ const Card: FC<CardProps> = ({
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
     const isSelfTask = editedTaskDetails.assignee === userData?.username;
+    const verifiedTask = editedTaskDetails.status === VERIFIED && editedTaskDetails.percentCompleted===100;
+
     const getFormattedClosedAtDate = () => {
         const closedAt = cardDetails?.github?.issue?.closedAt;
         return getDateInString(new Date(closedAt ?? Date.now()));
@@ -572,7 +574,6 @@ const Card: FC<CardProps> = ({
                             : `Started ${getStartedAgo()}`}
                     </span>
                 </div>
-
                 {/*card purpose*/}
                 {isSelfTask && editedTaskDetails.purpose && (
                     <div>
@@ -580,27 +581,6 @@ const Card: FC<CardProps> = ({
                         <span className={styles.cardPurposeText}>{editedTaskDetails.purpose}</span>
                     </div>
                 )}
-
-                {/* EDIT task status */}
-                <div className={styles.taskStatusEditMode}>
-                    {isEditable ? (
-                        <TaskStatusEditMode
-                            task={editedTaskDetails}
-                            setEditedTaskDetails={setEditedTaskDetails}
-                            isDevMode={isDevMode}
-                        />
-                    ) : (
-                        <div className={styles.statusContainer} style={{}}>
-                            <p className={styles.cardSpecialFont}>Status:</p>
-                            <p
-                                data-testid="task-status"
-                                className={styles.statusText}
-                            >
-                                {beautifyStatus(cardDetails.status, isDevMode)}
-                            </p>
-                        </div>
-                    )}
-                </div>
             </div>
 
             <div className={styles.contributor}>
@@ -642,6 +622,28 @@ const Card: FC<CardProps> = ({
                 {showAssignButton() && <AssigneeButton />}
             </div>
 
+            {/* EDIT task status */}
+            <div className={styles.taskStatusEditMode}>
+                    {isEditable || (!verifiedTask && isSelfTask) ? (
+                        <TaskStatusEditMode
+                            task={editedTaskDetails}
+                            setEditedTaskDetails={setEditedTaskDetails}
+                            isDevMode={isDevMode}
+                            isSelfTask={isSelfTask}
+                        />
+                    ) : (
+                        <div className={styles.statusContainer} style={{}}>
+                            <p className={styles.cardSpecialFont}>Status:</p>
+                            <p
+                                data-testid="task-status"
+                                className={styles.statusText}
+                            >
+                                {beautifyStatus(cardDetails.status, isDevMode)}
+                            </p>
+                        </div>
+                    )}
+                </div>
+
             <div className={styles.cardItems}>
                 <div
                     className={`${styles.taskTagLevelWrapper} ${

From c790c9906805eda50e53a6c77829f45211bb9eac Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Fri, 17 Jan 2025 01:54:01 +0530
Subject: [PATCH 3/8] feat | issue#1263 prettier-fix

---
 src/components/tasks/TaskDropDown.tsx         |  4 +-
 .../tasks/card/TaskStatusEditMode.tsx         | 23 ++++----
 src/components/tasks/card/card.module.scss    |  2 +-
 src/components/tasks/card/index.tsx           | 54 ++++++++++---------
 4 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/components/tasks/TaskDropDown.tsx b/src/components/tasks/TaskDropDown.tsx
index 2a177c952..6f72e3b08 100644
--- a/src/components/tasks/TaskDropDown.tsx
+++ b/src/components/tasks/TaskDropDown.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { BACKEND_TASK_STATUS } from '@/constants/task-status';
 import { beautifyStatus } from './card/TaskStatusEditMode';
+import styles from '@/components/tasks/card/card.module.scss';
 
 import { MSG_ON_0_PROGRESS, MSG_ON_100_PROGRESS } from '@/constants/constants';
 import TaskDropDownModel from './TaskDropDownModel';
@@ -104,9 +105,10 @@ export default function TaskDropDown({
     };
     return (
         <>
-            <label>
+            <label className={styles.cardPurposeAndStatusFont}>
                 Status:
                 <select
+                    className={styles.taskStatusUpdate}
                     data-testid="task-status"
                     name="status"
                     onChange={handleChange}
diff --git a/src/components/tasks/card/TaskStatusEditMode.tsx b/src/components/tasks/card/TaskStatusEditMode.tsx
index fca20b15a..e0b97319c 100644
--- a/src/components/tasks/card/TaskStatusEditMode.tsx
+++ b/src/components/tasks/card/TaskStatusEditMode.tsx
@@ -5,7 +5,10 @@ import task, {
 import { useState } from 'react';
 import styles from '@/components/tasks/card/card.module.scss';
 import { PENDING, SAVED, ERROR_STATUS } from '../constants';
-import { useUpdateTaskMutation, useUpdateSelfTaskMutation } from '@/app/services/tasksApi';
+import {
+    useUpdateTaskMutation,
+    useUpdateSelfTaskMutation,
+} from '@/app/services/tasksApi';
 import { StatusIndicator } from './StatusIndicator';
 import TaskDropDown from '../TaskDropDown';
 import { TASK_STATUS_MAPING } from '@/constants/constants';
@@ -34,7 +37,7 @@ const TaskStatusEditMode = ({
     task,
     setEditedTaskDetails,
     isDevMode,
-    isSelfTask
+    isSelfTask,
 }: Props) => {
     const [saveStatus, setSaveStatus] = useState('');
     const [updateTask] = useUpdateTaskMutation();
@@ -55,13 +58,15 @@ const TaskStatusEditMode = ({
             ...prev,
             ...payload,
         }));
-        const response = isSelfTask ? updateSelfTask({
-            id: task.id,
-            task: payload,
-        }) : updateTask({
-            id: task.id,
-            task: payload,
-        });
+        const response = isSelfTask
+            ? updateSelfTask({
+                  id: task.id,
+                  task: payload,
+              })
+            : updateTask({
+                  id: task.id,
+                  task: payload,
+              });
 
         response
             .unwrap()
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 12671f767..19db47b0e 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -95,7 +95,7 @@
     font-size: 1.1rem;
     color: #555;
 }
-.cardPurposeText{
+.cardPurposeText {
     padding: 8px;
     color: #aeaeae;
     font-size: 1rem;
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index 05e7866f8..c9eda267f 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -84,10 +84,10 @@ const Card: FC<CardProps> = ({
 
     const [isEditMode, setIsEditMode] = useState(false);
 
-    const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({ // revisit
+    const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
         itemId: cardDetails.id,
     });
-    const [deleteTaskTagLevel] = useDeleteTaskTagLevelMutation(); //revisit
+    const [deleteTaskTagLevel] = useDeleteTaskTagLevelMutation();
     const [updateTask, { isLoading: isLoadingUpdateTaskDetails }] =
         useUpdateTaskMutation();
 
@@ -270,7 +270,9 @@ const Card: FC<CardProps> = ({
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
     const isSelfTask = editedTaskDetails.assignee === userData?.username;
-    const verifiedTask = editedTaskDetails.status === VERIFIED && editedTaskDetails.percentCompleted===100;
+    const verifiedTask =
+        editedTaskDetails.status === VERIFIED &&
+        editedTaskDetails.percentCompleted === 100;
 
     const getFormattedClosedAtDate = () => {
         const closedAt = cardDetails?.github?.issue?.closedAt;
@@ -577,8 +579,12 @@ const Card: FC<CardProps> = ({
                 {/*card purpose*/}
                 {isSelfTask && editedTaskDetails.purpose && (
                     <div>
-                        <b className={styles.cardPurposeAndStatusFont}>Purpose: </b>
-                        <span className={styles.cardPurposeText}>{editedTaskDetails.purpose}</span>
+                        <b className={styles.cardPurposeAndStatusFont}>
+                            Purpose:{' '}
+                        </b>
+                        <span className={styles.cardPurposeText}>
+                            {editedTaskDetails.purpose}
+                        </span>
                     </div>
                 )}
             </div>
@@ -624,25 +630,25 @@ const Card: FC<CardProps> = ({
 
             {/* EDIT task status */}
             <div className={styles.taskStatusEditMode}>
-                    {isEditable || (!verifiedTask && isSelfTask) ? (
-                        <TaskStatusEditMode
-                            task={editedTaskDetails}
-                            setEditedTaskDetails={setEditedTaskDetails}
-                            isDevMode={isDevMode}
-                            isSelfTask={isSelfTask}
-                        />
-                    ) : (
-                        <div className={styles.statusContainer} style={{}}>
-                            <p className={styles.cardSpecialFont}>Status:</p>
-                            <p
-                                data-testid="task-status"
-                                className={styles.statusText}
-                            >
-                                {beautifyStatus(cardDetails.status, isDevMode)}
-                            </p>
-                        </div>
-                    )}
-                </div>
+                {isEditable || (!verifiedTask && isSelfTask) ? (
+                    <TaskStatusEditMode
+                        task={editedTaskDetails}
+                        setEditedTaskDetails={setEditedTaskDetails}
+                        isDevMode={isDevMode}
+                        isSelfTask={isSelfTask}
+                    />
+                ) : (
+                    <div className={styles.statusContainer} style={{}}>
+                        <p className={styles.cardSpecialFont}>Status:</p>
+                        <p
+                            data-testid="task-status"
+                            className={styles.statusText}
+                        >
+                            {beautifyStatus(cardDetails.status, isDevMode)}
+                        </p>
+                    </div>
+                )}
+            </div>
 
             <div className={styles.cardItems}>
                 <div

From 045a8d63783761cdd088e24ca8b2f57b6b7c5690 Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Fri, 17 Jan 2025 02:46:53 +0530
Subject: [PATCH 4/8] feat | issue#1263 Added feature flag

---
 src/components/tasks/TaskDropDown.tsx         | 34 +++++++-
 .../tasks/card/TaskStatusEditMode.tsx         | 21 ++---
 src/components/tasks/card/card.module.scss    |  5 ++
 src/components/tasks/card/index.tsx           | 81 +++++++++++++------
 4 files changed, 106 insertions(+), 35 deletions(-)

diff --git a/src/components/tasks/TaskDropDown.tsx b/src/components/tasks/TaskDropDown.tsx
index 6f72e3b08..cd9367a5c 100644
--- a/src/components/tasks/TaskDropDown.tsx
+++ b/src/components/tasks/TaskDropDown.tsx
@@ -103,12 +103,42 @@ export default function TaskDropDown({
         onChange(payload);
         setMessage('');
     };
+    if (isDevMode) {
+        return (
+            <>
+                <label className={styles.cardPurposeAndStatusFont}>
+                    Status:
+                    <select
+                        className={styles.taskStatusUpdate}
+                        data-testid="task-status"
+                        name="status"
+                        onChange={handleChange}
+                        value={newStatus}
+                    >
+                        {taskStatus.map(([name, status]) => (
+                            <option
+                                data-testid={`task-status-${name}`}
+                                key={status}
+                                value={status}
+                            >
+                                {beautifyStatus(name, isDevMode)}
+                            </option>
+                        ))}
+                    </select>
+                </label>
+                <TaskDropDownModel
+                    message={message}
+                    resetProgressAndStatus={resetProgressAndStatus}
+                    handleProceed={handleProceed}
+                />
+            </>
+        );
+    }
     return (
         <>
-            <label className={styles.cardPurposeAndStatusFont}>
+            <label>
                 Status:
                 <select
-                    className={styles.taskStatusUpdate}
                     data-testid="task-status"
                     name="status"
                     onChange={handleChange}
diff --git a/src/components/tasks/card/TaskStatusEditMode.tsx b/src/components/tasks/card/TaskStatusEditMode.tsx
index e0b97319c..2686629dd 100644
--- a/src/components/tasks/card/TaskStatusEditMode.tsx
+++ b/src/components/tasks/card/TaskStatusEditMode.tsx
@@ -17,7 +17,7 @@ type Props = {
     task: task;
     setEditedTaskDetails: React.Dispatch<React.SetStateAction<CardTaskDetails>>;
     isDevMode?: boolean;
-    isSelfTask: boolean;
+    isSelfTask?: boolean;
 };
 
 // TODO: remove this after fixing the card beautify status
@@ -58,15 +58,16 @@ const TaskStatusEditMode = ({
             ...prev,
             ...payload,
         }));
-        const response = isSelfTask
-            ? updateSelfTask({
-                  id: task.id,
-                  task: payload,
-              })
-            : updateTask({
-                  id: task.id,
-                  task: payload,
-              });
+        const response =
+            isDevMode && isSelfTask
+                ? updateSelfTask({
+                      id: task.id,
+                      task: payload,
+                  })
+                : updateTask({
+                      id: task.id,
+                      task: payload,
+                  });
 
         response
             .unwrap()
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 19db47b0e..5e4f9ad6f 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -252,6 +252,11 @@
     cursor: pointer;
 }
 
+.taskStatusAndDateContainer {
+    display: flex;
+    justify-content: space-between;
+}
+
 .taskStatusDateAndPurposeContainer {
     display: grid;
     align-items: baseline;
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index c9eda267f..df7d6261c 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -550,7 +550,13 @@ const Card: FC<CardProps> = ({
                     </div>
                 )}
             </div>
-            <div className={styles.taskStatusDateAndPurposeContainer}>
+            <div
+                className={
+                    isDevMode
+                        ? styles.taskStatusDateAndPurposeContainer
+                        : styles.taskStatusAndDateContainer
+                }
+            >
                 <div className={styles.dateInfo}>
                     <div className={styles.dateSection}>
                         <p className={styles.cardSpecialFont}>
@@ -577,7 +583,7 @@ const Card: FC<CardProps> = ({
                     </span>
                 </div>
                 {/*card purpose*/}
-                {isSelfTask && editedTaskDetails.purpose && (
+                {isDevMode && isSelfTask && editedTaskDetails.purpose && (
                     <div>
                         <b className={styles.cardPurposeAndStatusFont}>
                             Purpose:{' '}
@@ -587,6 +593,34 @@ const Card: FC<CardProps> = ({
                         </span>
                     </div>
                 )}
+
+                {/* EDIT task status */}
+                {!isDevMode && (
+                    <div className={styles.taskStatusEditMode}>
+                        {isEditable ? (
+                            <TaskStatusEditMode
+                                task={editedTaskDetails}
+                                setEditedTaskDetails={setEditedTaskDetails}
+                                isDevMode={isDevMode}
+                            />
+                        ) : (
+                            <div className={styles.statusContainer} style={{}}>
+                                <p className={styles.cardSpecialFont}>
+                                    Status:
+                                </p>
+                                <p
+                                    data-testid="task-status"
+                                    className={styles.statusText}
+                                >
+                                    {beautifyStatus(
+                                        cardDetails.status,
+                                        isDevMode
+                                    )}
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                )}
             </div>
 
             <div className={styles.contributor}>
@@ -629,27 +663,28 @@ const Card: FC<CardProps> = ({
             </div>
 
             {/* EDIT task status */}
-            <div className={styles.taskStatusEditMode}>
-                {isEditable || (!verifiedTask && isSelfTask) ? (
-                    <TaskStatusEditMode
-                        task={editedTaskDetails}
-                        setEditedTaskDetails={setEditedTaskDetails}
-                        isDevMode={isDevMode}
-                        isSelfTask={isSelfTask}
-                    />
-                ) : (
-                    <div className={styles.statusContainer} style={{}}>
-                        <p className={styles.cardSpecialFont}>Status:</p>
-                        <p
-                            data-testid="task-status"
-                            className={styles.statusText}
-                        >
-                            {beautifyStatus(cardDetails.status, isDevMode)}
-                        </p>
-                    </div>
-                )}
-            </div>
-
+            {isDevMode && (
+                <div className={styles.taskStatusEditMode}>
+                    {isEditable || (!verifiedTask && isSelfTask) ? (
+                        <TaskStatusEditMode
+                            task={editedTaskDetails}
+                            setEditedTaskDetails={setEditedTaskDetails}
+                            isDevMode={isDevMode}
+                            isSelfTask={isSelfTask}
+                        />
+                    ) : (
+                        <div className={styles.statusContainer} style={{}}>
+                            <p className={styles.cardSpecialFont}>Status:</p>
+                            <p
+                                data-testid="task-status"
+                                className={styles.statusText}
+                            >
+                                {beautifyStatus(cardDetails.status, isDevMode)}
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
             <div className={styles.cardItems}>
                 <div
                     className={`${styles.taskTagLevelWrapper} ${

From 90f78e4785d330ac9c7b172b7e725c6bcabefd02 Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Sat, 18 Jan 2025 21:09:00 +0530
Subject: [PATCH 5/8] feat:issue#1263 | Added unit tests

---
 __tests__/Unit/Components/Tasks/Card.test.tsx | 48 ++++++++++++++++++-
 .../Components/Tasks/TaskDropDown.test.tsx    | 23 +++++++++
 .../Tasks/TaskStatusEditMode.test.tsx         | 23 +++++++++
 src/components/tasks/TaskDropDown.tsx         |  5 +-
 src/components/tasks/card/index.tsx           |  7 +--
 5 files changed, 99 insertions(+), 7 deletions(-)

diff --git a/__tests__/Unit/Components/Tasks/Card.test.tsx b/__tests__/Unit/Components/Tasks/Card.test.tsx
index c09ad7232..095e41c3d 100644
--- a/__tests__/Unit/Components/Tasks/Card.test.tsx
+++ b/__tests__/Unit/Components/Tasks/Card.test.tsx
@@ -41,7 +41,7 @@ const DEFAULT_PROPS = {
         startedOn: '1618790400',
         isNoteworthy: true,
         title: 'test 1 for drag and drop',
-        purpose: 'string',
+        purpose: 'to test purpose',
         percentCompleted: 0,
         endsOn: 1618790400,
         status: COMPLETED,
@@ -54,9 +54,55 @@ const DEFAULT_PROPS = {
     onContentChange: jest.fn(),
 };
 
+describe("Task card, self task's purpose and status", () => {
+    it('renders the card with title and status', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <Card {...DEFAULT_PROPS} />
+            </Provider>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+        expect(
+            screen.getByText('test 1 for drag and drop')
+        ).toBeInTheDocument();
+        expect(screen.getByText('Done')).toBeInTheDocument();
+    });
+
+    it('displays the purpose if provided', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <Card {...DEFAULT_PROPS} />
+            </Provider>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+        expect(screen.getByText('to test purpose')).toBeInTheDocument();
+    });
+
+    it('does not display the purpose if not provided', () => {
+        const PROPS_WITHOUT_PURPOSE = {
+            ...DEFAULT_PROPS,
+            content: { ...DEFAULT_PROPS.content, purpose: '' },
+        };
+        renderWithRouter(
+            <Provider store={store()}>
+                <Card {...PROPS_WITHOUT_PURPOSE} />
+            </Provider>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+        expect(screen.queryByText('to test purpose')).not.toBeInTheDocument();
+    });
+});
+
 jest.mock('@/hooks/useUserData', () => {
     return () => ({
         data: {
+            username: 'ankur',
             roles: {
                 admin: true,
                 super_user: true,
diff --git a/__tests__/Unit/Components/Tasks/TaskDropDown.test.tsx b/__tests__/Unit/Components/Tasks/TaskDropDown.test.tsx
index 935ee282c..c16225705 100644
--- a/__tests__/Unit/Components/Tasks/TaskDropDown.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskDropDown.test.tsx
@@ -97,6 +97,29 @@ describe('TaskDropDown', () => {
         expect(onChange).toHaveBeenCalledTimes(0);
         expect(screen.getByTestId('task-status')).toHaveValue(oldStatus);
     });
+
+    it('should render cardPurposeAndStatusFont for label and taskStatusUpdate for select when isDevMode is true', () => {
+        const oldProgress = 100;
+        const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;
+        const TASK_STATUS_UPDATE = 'taskStatusUpdate';
+        const CARD_PURPOSE_STATUS_FONT = 'cardPurposeAndStatusFont';
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+        expect(screen.getByTestId('task-status')).toHaveClass(
+            TASK_STATUS_UPDATE
+        );
+        expect(screen.getByTestId('task-status-label')).toHaveClass(
+            CARD_PURPOSE_STATUS_FONT
+        );
+    });
+
     it('should not show any model info on change of status from in progress to backlog', () => {
         const oldProgress = 80;
         const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;
diff --git a/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx b/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
index 3f9c312bb..4f78dab5a 100644
--- a/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
@@ -19,8 +19,10 @@ const BLOCKED_TASK = {
 
 describe('TaskStatusEditMode', () => {
     let updateTaskSpy: any;
+    let updateSelfTaskSpy: any;
     beforeEach(() => {
         updateTaskSpy = jest.spyOn(tasksApi, 'useUpdateTaskMutation');
+        updateSelfTaskSpy = jest.spyOn(tasksApi, 'useUpdateSelfTaskMutation');
     });
 
     afterEach(() => {
@@ -173,6 +175,27 @@ describe('TaskStatusEditMode', () => {
             expect(screen.getByTestId('error')).toBeInTheDocument();
         });
     });
+
+    it('change task status from BLOCKED to IN_PROGRESS when  and isDevMode are true', async () => {
+        const setEditedTaskDetails = jest.fn();
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskStatusEditMode
+                    task={BLOCKED_TASK}
+                    setEditedTaskDetails={setEditedTaskDetails}
+                    isDevMode={true}
+                    isSelfTask={true}
+                />
+            </Provider>
+        );
+
+        const statusSelect = screen.getByLabelText('Status:');
+        expect(statusSelect).toHaveValue('BLOCKED');
+
+        fireEvent.change(statusSelect, { target: { value: 'IN_PROGRESS' } });
+        expect(statusSelect).toHaveValue('IN_PROGRESS');
+    });
 });
 
 describe('test beautifyStatus function', () => {
diff --git a/src/components/tasks/TaskDropDown.tsx b/src/components/tasks/TaskDropDown.tsx
index cd9367a5c..ff55b376d 100644
--- a/src/components/tasks/TaskDropDown.tsx
+++ b/src/components/tasks/TaskDropDown.tsx
@@ -106,7 +106,10 @@ export default function TaskDropDown({
     if (isDevMode) {
         return (
             <>
-                <label className={styles.cardPurposeAndStatusFont}>
+                <label
+                    className={styles.cardPurposeAndStatusFont}
+                    data-testid="task-status-label"
+                >
                     Status:
                     <select
                         className={styles.taskStatusUpdate}
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index df7d6261c..e651fcb63 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -32,7 +32,6 @@ import {
 import { useGetUsersByUsernameQuery } from '@/app/services/usersApi';
 import { ConditionalLinkWrapper } from './ConditionalLinkWrapper';
 import useUserData from '@/hooks/useUserData';
-import { useGetUserQuery } from '@/app/services/userApi';
 import { isTaskDetailsPageLinkEnabled } from '@/constants/FeatureFlags';
 import { useUpdateTaskMutation } from '@/app/services/tasksApi';
 import ProgressIndicator from './progressContainer/ProgressIndicator';
@@ -74,9 +73,7 @@ const Card: FC<CardProps> = ({
         userResponse?.users[0]?.picture?.url || placeholderImageURL;
     const { SUCCESS, ERROR } = ToastTypes;
 
-    const { isUserAuthorized } = useUserData();
-
-    const { data: userData } = useGetUserQuery();
+    const { data, isUserAuthorized } = useUserData();
 
     const [showEditButton, setShowEditButton] = useState(false);
 
@@ -269,7 +266,7 @@ const Card: FC<CardProps> = ({
         setIsEditMode(true);
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
-    const isSelfTask = editedTaskDetails.assignee === userData?.username;
+    const isSelfTask = editedTaskDetails.assignee === data?.username;
     const verifiedTask =
         editedTaskDetails.status === VERIFIED &&
         editedTaskDetails.percentCompleted === 100;

From a30aebe8a1d288495a867482a92c39a48a9e9580 Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Sun, 19 Jan 2025 01:39:09 +0530
Subject: [PATCH 6/8] feat/#1263 | Used existing css variables

---
 src/components/tasks/card/card.module.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 5e4f9ad6f..4fb78978d 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -276,7 +276,7 @@
     font-size: inherit;
     font-weight: bolder;
     background-color: transparent;
-    color: #041187;
+    color: $theme-primary-alt;
     padding: 0.5rem;
     height: 2.5rem;
     width: 10rem;
@@ -284,7 +284,7 @@
 }
 
 .taskStatusUpdate:hover {
-    background-color: #041187;
+    background-color: $theme-primary-alt;
     color: #ffffff;
 }
 

From f89f1a8e12fea8438c34cf72313345aebd41cb8f Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Sun, 19 Jan 2025 01:39:41 +0530
Subject: [PATCH 7/8] feat/#1263 |  Removed percentage check and renamed
 variable

---
 src/components/tasks/card/index.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index e651fcb63..4d26f95cd 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -267,10 +267,7 @@ const Card: FC<CardProps> = ({
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
     const isSelfTask = editedTaskDetails.assignee === data?.username;
-    const verifiedTask =
-        editedTaskDetails.status === VERIFIED &&
-        editedTaskDetails.percentCompleted === 100;
-
+    const isVerifiedTask = editedTaskDetails.status === VERIFIED;
     const getFormattedClosedAtDate = () => {
         const closedAt = cardDetails?.github?.issue?.closedAt;
         return getDateInString(new Date(closedAt ?? Date.now()));
@@ -662,7 +659,7 @@ const Card: FC<CardProps> = ({
             {/* EDIT task status */}
             {isDevMode && (
                 <div className={styles.taskStatusEditMode}>
-                    {isEditable || (!verifiedTask && isSelfTask) ? (
+                    {isEditable || (!isVerifiedTask && isSelfTask) ? (
                         <TaskStatusEditMode
                             task={editedTaskDetails}
                             setEditedTaskDetails={setEditedTaskDetails}

From de52c89aa2f436b8def9ddfc33c04db2778a4b96 Mon Sep 17 00:00:00 2001
From: Tharun <45945950+Saitharun279@users.noreply.github.com>
Date: Sun, 19 Jan 2025 02:42:36 +0530
Subject: [PATCH 8/8] feat:#1262 | Modifed task status update to use try catch
 and toast messages.

---
 .../tasks/card/TaskStatusEditMode.tsx         | 41 +++++++++++++------
 src/constants/constants.ts                    |  2 +
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/tasks/card/TaskStatusEditMode.tsx b/src/components/tasks/card/TaskStatusEditMode.tsx
index 2686629dd..8efc15d64 100644
--- a/src/components/tasks/card/TaskStatusEditMode.tsx
+++ b/src/components/tasks/card/TaskStatusEditMode.tsx
@@ -11,7 +11,12 @@ import {
 } from '@/app/services/tasksApi';
 import { StatusIndicator } from './StatusIndicator';
 import TaskDropDown from '../TaskDropDown';
-import { TASK_STATUS_MAPING } from '@/constants/constants';
+import {
+    STATUS_UPDATE_ERROR,
+    STATUS_UPDATE_SUCCESSFUL,
+    TASK_STATUS_MAPING,
+} from '@/constants/constants';
+import { toast, ToastTypes } from '@/helperFunctions/toast';
 
 type Props = {
     task: task;
@@ -42,8 +47,9 @@ const TaskStatusEditMode = ({
     const [saveStatus, setSaveStatus] = useState('');
     const [updateTask] = useUpdateTaskMutation();
     const [updateSelfTask] = useUpdateSelfTaskMutation();
+    const { SUCCESS, ERROR } = ToastTypes;
 
-    const onChangeUpdateTaskStatus = ({
+    const onChangeUpdateTaskStatus = async ({
         newStatus,
         newProgress,
     }: taskStatusUpdateHandleProp) => {
@@ -54,20 +60,29 @@ const TaskStatusEditMode = ({
         if (newProgress !== undefined) {
             payload.percentCompleted = newProgress;
         }
+
+        try {
+            if (isDevMode && isSelfTask) {
+                await updateSelfTask({ id: task.id, task: payload }).unwrap();
+            }
+            toast(SUCCESS, STATUS_UPDATE_SUCCESSFUL);
+        } catch (error) {
+            const errorMessage =
+                error && typeof error === 'object' && 'data' in error
+                    ? (error.data as { message?: string }).message ||
+                      STATUS_UPDATE_ERROR
+                    : STATUS_UPDATE_ERROR;
+            toast(ERROR, errorMessage);
+        }
+
         setEditedTaskDetails((prev: CardTaskDetails) => ({
             ...prev,
             ...payload,
         }));
-        const response =
-            isDevMode && isSelfTask
-                ? updateSelfTask({
-                      id: task.id,
-                      task: payload,
-                  })
-                : updateTask({
-                      id: task.id,
-                      task: payload,
-                  });
+        const response = updateTask({
+            id: task.id,
+            task: payload,
+        });
 
         response
             .unwrap()
@@ -92,7 +107,7 @@ const TaskStatusEditMode = ({
                 oldProgress={task.percentCompleted}
                 onChange={onChangeUpdateTaskStatus}
             />
-            <StatusIndicator status={saveStatus} />
+            {!isDevMode && <StatusIndicator status={saveStatus} />}
         </div>
     );
 };
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 4bd9e52ca..21ddeb67c 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -6,6 +6,8 @@ export const DONE = 'DONE';
 export const AVAILABLE = 'AVAILABLE';
 export const UNASSIGNED = 'UNASSIGNED';
 export const PROGRESS_SUCCESSFUL = 'Progress Updated Successfully';
+export const STATUS_UPDATE_SUCCESSFUL = 'Status Updated Successfully';
+export const STATUS_UPDATE_ERROR = 'An error occurred while saving';
 export const STANDUP_ALREADY_SUBMITTED =
     'Standup already submitted for the day';
 export const DATEFORMAT = 'MMMM DD, YYYY ';