From 1997125d01b689245fae3f7cd90b866598579186 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Sat, 3 May 2025 15:59:39 +0530
Subject: [PATCH 01/18] initial commit for ER button

---
 src/app/services/api.ts                       |   1 +
 src/app/services/tasksApi.ts                  |  40 +++
 src/components/Form/ExtensionRequestForm.tsx  | 181 +++++++++++
 src/components/Form/Form.module.scss          |  92 ++++++
 src/components/Modal/ExtensionStatusModal.tsx | 300 ++++++++++++++++++
 src/components/Modal/modal.module.scss        | 126 ++++++++
 src/components/tasks/card/card.module.scss    |  41 ++-
 src/components/tasks/card/index.tsx           |  59 ++--
 src/interfaces/task.type.ts                   |  36 +++
 9 files changed, 854 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Form/ExtensionRequestForm.tsx
 create mode 100644 src/components/Form/Form.module.scss
 create mode 100644 src/components/Modal/ExtensionStatusModal.tsx

diff --git a/src/app/services/api.ts b/src/app/services/api.ts
index 661812310..b8cb919b6 100644
--- a/src/app/services/api.ts
+++ b/src/app/services/api.ts
@@ -27,6 +27,7 @@ export const api = createApi({
         'Progress_Details',
         'User_Standup',
         'TASK_REQUEST',
+        'Extension_Requests',
     ],
     /**
      * This api has endpoints injected in adjacent files,
diff --git a/src/app/services/tasksApi.ts b/src/app/services/tasksApi.ts
index 029c463db..0491157ad 100644
--- a/src/app/services/tasksApi.ts
+++ b/src/app/services/tasksApi.ts
@@ -2,6 +2,10 @@ import task, {
     TaskRequestPayload,
     TasksResponseType,
     GetAllTaskParamType,
+    ExtensionRequest,
+    ExtensionRequestsResponse,
+    ExtensionRequestCreatePayload,
+    ExtensionRequestCreateResponse,
 } from '@/interfaces/task.type';
 import { api } from './api';
 import { MINE_TASKS_URL, TASKS_URL } from '@/constants/url';
@@ -100,6 +104,40 @@ export const tasksApi = api.injectEndpoints({
                 },
             ],
         }),
+        getSelfExtensionRequests: builder.query<
+            ExtensionRequestsResponse,
+            { taskId: string; dev: boolean }
+        >({
+            query: ({ taskId, dev }) => ({
+                url: '/extension-requests/self',
+                params: {
+                    taskId,
+                    dev,
+                },
+            }),
+            providesTags: ['Extension_Requests'],
+        }),
+
+        createExtensionRequest: builder.mutation<
+            ExtensionRequestCreateResponse,
+            ExtensionRequestCreatePayload & { dev?: boolean }
+        >({
+            query: (payload) => ({
+                url: '/extension-requests',
+                method: 'POST',
+                params: { dev: payload.dev ?? true },
+                body: {
+                    assignee: payload.assignee,
+                    newEndsOn: payload.newEndsOn,
+                    oldEndsOn: payload.oldEndsOn,
+                    reason: payload.reason,
+                    status: payload.status,
+                    taskId: payload.taskId,
+                    title: payload.title,
+                },
+            }),
+            invalidatesTags: ['Extension_Requests'],
+        }),
     }),
     overrideExisting: true,
 });
@@ -110,4 +148,6 @@ export const {
     useAddTaskMutation,
     useUpdateTaskMutation,
     useUpdateSelfTaskMutation,
+    useGetSelfExtensionRequestsQuery,
+    useCreateExtensionRequestMutation,
 } = tasksApi;
diff --git a/src/components/Form/ExtensionRequestForm.tsx b/src/components/Form/ExtensionRequestForm.tsx
new file mode 100644
index 000000000..1bb482e63
--- /dev/null
+++ b/src/components/Form/ExtensionRequestForm.tsx
@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import styles from './Form.module.scss';
+import { useCreateExtensionRequestMutation } from 'src/app/services/tasksApi';
+
+interface ExtensionRequestFormProps {
+    isOpen: boolean;
+    onClose: () => void;
+    taskId: string;
+    assignee: string;
+    oldEndsOn: number | null;
+}
+
+interface FormData {
+    reason: string;
+    newEndsOn: number;
+    title: string;
+}
+
+export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
+    isOpen,
+    onClose,
+    taskId,
+    assignee,
+    oldEndsOn,
+}) => {
+    const [formData, setFormData] = useState<FormData>({
+        reason: '',
+        newEndsOn: new Date().getTime(),
+        title: '',
+    });
+
+    const [createExtensionRequest, { isLoading }] =
+        useCreateExtensionRequestMutation();
+
+    useEffect(() => {
+        if (isOpen) {
+            const defaultNewEndsOn = oldEndsOn
+                ? oldEndsOn + 3 * 24 * 60 * 60 * 1000
+                : new Date().getTime();
+            setFormData((prev) => ({ ...prev, newEndsOn: defaultNewEndsOn }));
+        }
+    }, [isOpen, oldEndsOn]);
+
+    const handleChange = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        const { name, value } = e.target;
+
+        if (name === 'newEndsOn') {
+            const timestamp = new Date(value).getTime();
+            setFormData((prev) => ({ ...prev, [name]: timestamp }));
+        } else {
+            setFormData((prev) => ({ ...prev, [name]: value }));
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const submissionOldEndsOn = oldEndsOn || new Date().getTime();
+
+        try {
+            console.log('Sending data:', {
+                ...formData,
+                taskId,
+                oldEndsOn: submissionOldEndsOn,
+            });
+
+            await createExtensionRequest({
+                assignee: assignee,
+                newEndsOn: formData.newEndsOn,
+                oldEndsOn: submissionOldEndsOn,
+                reason: formData.reason,
+                status: 'PENDING',
+                taskId,
+                title: formData.title,
+                dev: true,
+            }).unwrap();
+
+            onClose();
+        } catch (error) {
+            console.error('Failed to create extension request:', error);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    const oldEndsOnDate = oldEndsOn
+        ? new Date(oldEndsOn).toLocaleDateString('en-US', {
+              month: 'numeric',
+              day: 'numeric',
+              year: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric',
+              second: 'numeric',
+              hour12: true,
+          })
+        : 'Not available';
+
+    const formatDateForInput = (timestamp: number) =>
+        new Date(timestamp).toISOString().slice(0, 16);
+
+    return (
+        <div className={styles.modalOverlay}>
+            <div className={styles.modalContent}>
+                <h2 className={styles.heading}>Extension Request Form</h2>
+
+                <form onSubmit={handleSubmit}>
+                    <div className={styles.formGroup}>
+                        <label className={styles.label} htmlFor="reason">
+                            Reason
+                        </label>
+                        <textarea
+                            id="reason"
+                            name="reason"
+                            value={formData.reason}
+                            onChange={handleChange}
+                            rows={4}
+                            className={styles.textArea}
+                            required
+                        />
+                    </div>
+
+                    <div className={styles.formGroup}>
+                        <div className={styles.oldEta}>
+                            Old ETA - {oldEndsOnDate}
+                        </div>
+                    </div>
+
+                    <div className={styles.formGroup}>
+                        <label className={styles.label} htmlFor="newEndsOn">
+                            New ETA
+                        </label>
+                        <input
+                            type="datetime-local"
+                            id="newEndsOn"
+                            name="newEndsOn"
+                            value={formatDateForInput(formData.newEndsOn)}
+                            onChange={handleChange}
+                            className={`${styles.input} ${styles.dateTimeInput}`}
+                            required
+                        />
+                    </div>
+
+                    <div className={styles.formGroup}>
+                        <label className={styles.label} htmlFor="title">
+                            Title
+                        </label>
+                        <textarea
+                            id="title"
+                            name="title"
+                            value={formData.title}
+                            onChange={handleChange}
+                            rows={3}
+                            className={styles.textArea}
+                            required
+                        />
+                    </div>
+
+                    <div className={styles.formActions}>
+                        <button
+                            type="button"
+                            className={styles.cancelBtn}
+                            onClick={onClose}
+                            disabled={isLoading}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            className={styles.submitBtn}
+                            disabled={isLoading}
+                        >
+                            {isLoading ? 'Submitting...' : 'Submit'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
new file mode 100644
index 000000000..9196986d6
--- /dev/null
+++ b/src/components/Form/Form.module.scss
@@ -0,0 +1,92 @@
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modalContent {
+    background-color: white;
+    padding: 25px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 450px;
+}
+
+.heading {
+    color: #333;
+    font-size: 24px;
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+.formGroup {
+    margin-bottom: 15px;
+}
+
+.label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.textArea,
+.input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    box-sizing: border-box;
+}
+
+.oldEta {
+    margin-bottom: 10px;
+    font-weight: 500;
+}
+
+.dateTimeInput {
+    padding: 8px;
+}
+
+.formActions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 25px;
+}
+
+.button {
+    padding: 10px 15px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    color: white;
+    width: 48%;
+}
+
+.cancelBtn {
+    composes: button;
+    background-color: #b80000;
+}
+
+.cancelBtn:hover {
+    background-color: #900000;
+}
+
+.submitBtn {
+    composes: button;
+    background-color: #008800;
+}
+
+.submitBtn:hover {
+    background-color: #006600;
+}
diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
new file mode 100644
index 000000000..07f62abe3
--- /dev/null
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -0,0 +1,300 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styles from './modal.module.scss';
+import { useGetSelfExtensionRequestsQuery } from '@/app/services/tasksApi';
+import { ExtensionRequestForm } from '@/components/Form/ExtensionRequestForm';
+
+type ExtensionStatusModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    taskId: string;
+    dev: boolean;
+    assignee: string;
+};
+
+type ExtensionRequest = {
+    reason: string;
+    newEndsOn: number;
+    title: string;
+    taskId: string;
+    oldEndsOn: number;
+    status: string;
+    requestNumber: number;
+    id: string;
+    timestamp: number;
+    assignee: string;
+    assigneeId: string;
+    reviewedBy?: string;
+    reviewedAt?: number;
+};
+
+type ExtensionRequestsResponse = {
+    message: string;
+    allExtensionRequests: ExtensionRequest[];
+};
+
+export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
+    isOpen,
+    onClose,
+    taskId,
+    dev,
+    assignee,
+}) => {
+    const { data, isLoading, error } = useGetSelfExtensionRequestsQuery(
+        { taskId, dev },
+        { skip: !isOpen }
+    );
+    const [isRequestFormOpen, setIsRequestFormOpen] = useState(false);
+    const [oldEndsOn, setOldEndsOn] = useState<number | null>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            if (
+                data?.allExtensionRequests &&
+                data.allExtensionRequests.length > 0
+            ) {
+                const latestRequest = [...data.allExtensionRequests].sort(
+                    (a, b) => b.requestNumber - a.requestNumber
+                )[0];
+                setOldEndsOn(latestRequest.newEndsOn);
+            } else {
+                setOldEndsOn(new Date().getTime());
+            }
+        }
+    }, [isOpen, data, taskId, dev]);
+
+    const handleOutsideClick = (e: React.MouseEvent) => {
+        if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+            onClose();
+        }
+    };
+
+    const handleOpenRequestForm = () => {
+        setIsRequestFormOpen(true);
+        onClose();
+    };
+
+    const handleCloseRequestForm = () => {
+        setIsRequestFormOpen(false);
+    };
+
+    const handleSubmitExtensionRequest = (formData: any) => {
+        const requestData = {
+            ...formData,
+            taskId,
+            dev,
+        };
+        console.log('Complete request data:', requestData);
+        setIsRequestFormOpen(false);
+    };
+
+    const renderRequestForm = () => {
+        return (
+            <ExtensionRequestForm
+                isOpen={isRequestFormOpen}
+                onClose={handleCloseRequestForm}
+                taskId={taskId}
+                assignee={assignee}
+                oldEndsOn={oldEndsOn}
+            />
+        );
+    };
+
+    if (!isOpen) {
+        return isRequestFormOpen ? renderRequestForm() : null;
+    }
+
+    if (isLoading) {
+        return (
+            <div className={styles.extensionModalOverlay}>
+                <div className={styles.extensionModal}>
+                    <h2>Loading extension requests...</h2>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className={styles.extensionModalOverlay}>
+                <div className={styles.extensionModal}>
+                    <h2>Error loading extension requests</h2>
+                    <pre>{JSON.stringify(error, null, 2)}</pre>
+                    <button
+                        className={styles.extensionCloseButton}
+                        onClick={onClose}
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    const formatDate = (timestamp: number) => {
+        const timestampMs =
+            timestamp > 9999999999 ? timestamp : timestamp * 1000;
+        const date = new Date(timestampMs);
+        return `${
+            date.getMonth() + 1
+        }/${date.getDate()}/${date.getFullYear()}, ${date.toLocaleTimeString()}`;
+    };
+
+    const getStatusClass = (status: string) => {
+        return status === 'APPROVED'
+            ? styles.extensionApproved
+            : styles.extensionPending;
+    };
+
+    return (
+        <>
+            <div
+                className={styles.extensionModalOverlay}
+                onClick={handleOutsideClick}
+            >
+                <div className={styles.extensionModal} ref={modalRef}>
+                    <h2>Extension Details</h2>
+
+                    {data?.allExtensionRequests &&
+                    data.allExtensionRequests.length > 0 ? (
+                        data.allExtensionRequests.map((request) => (
+                            <div
+                                key={request.id}
+                                className={styles.extensionExtensionRequest}
+                            >
+                                <div className={styles.extensionDetailRow}>
+                                    <span className={styles.extensionLabel}>
+                                        Request :
+                                    </span>
+                                    <span className={styles.extensionValue}>
+                                        #{request.requestNumber}
+                                    </span>
+                                </div>
+
+                                <div className={styles.extensionDetailRow}>
+                                    <span className={styles.extensionLabel}>
+                                        Reason :
+                                    </span>
+                                    <span className={styles.extensionValue}>
+                                        {request.reason}
+                                    </span>
+                                </div>
+
+                                <div className={styles.extensionDetailRow}>
+                                    <span className={styles.extensionLabel}>
+                                        Title :
+                                    </span>
+                                    <span className={styles.extensionValue}>
+                                        {request.title}
+                                    </span>
+                                </div>
+
+                                <div className={styles.extensionDetailRow}>
+                                    <span className={styles.extensionLabel}>
+                                        Old Ends On :
+                                    </span>
+                                    <span className={styles.extensionValue}>
+                                        {formatDate(request.oldEndsOn)}
+                                    </span>
+                                </div>
+
+                                <div className={styles.extensionDetailRow}>
+                                    <span className={styles.extensionLabel}>
+                                        New Ends On :
+                                    </span>
+                                    <span className={styles.extensionValue}>
+                                        {formatDate(request.newEndsOn)}
+                                    </span>
+                                </div>
+
+                                <div className={styles.extensionDetailRow}>
+                                    <span className={styles.extensionLabel}>
+                                        Status :
+                                    </span>
+                                    <span
+                                        className={`${
+                                            styles.extensionValue
+                                        } ${getStatusClass(request.status)}`}
+                                    >
+                                        {request.status}
+                                    </span>
+                                </div>
+
+                                {request.reviewedBy && (
+                                    <div
+                                        className={styles.extensionApprovalInfo}
+                                    >
+                                        Your request was approved by{' '}
+                                        {request.reviewedBy}{' '}
+                                        {request.reviewedAt
+                                            ? formatTimeAgo(
+                                                  request.reviewedAt * 1000
+                                              )
+                                            : ''}
+                                    </div>
+                                )}
+                            </div>
+                        ))
+                    ) : (
+                        <div className={styles.extensionNoRequests}>
+                            <p>No extension requests found for this task.</p>
+                            <p>
+                                If you need more time to complete this task, you
+                                can request an extension.
+                            </p>
+                        </div>
+                    )}
+
+                    <div
+                        className={styles.extensionButtonContainer}
+                        style={{
+                            justifyContent:
+                                data?.allExtensionRequests &&
+                                data.allExtensionRequests.some(
+                                    (request) => request.status === 'PENDING'
+                                )
+                                    ? 'center'
+                                    : 'space-between',
+                        }}
+                    >
+                        <button
+                            className={styles.extensionCloseButton}
+                            onClick={onClose}
+                        >
+                            Close
+                        </button>
+                        {data?.allExtensionRequests &&
+                            data.allExtensionRequests.some(
+                                (request) => request.status === 'PENDING'
+                            ) === false && (
+                                <button
+                                    className={styles.extensionRequestButton}
+                                    onClick={handleOpenRequestForm}
+                                >
+                                    Request Extension
+                                </button>
+                            )}
+                    </div>
+                </div>
+            </div>
+
+            {renderRequestForm()}
+        </>
+    );
+};
+
+function formatTimeAgo(timestamp: number) {
+    const now = Date.now();
+    const diff = now - timestamp;
+
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    const months = Math.floor(days / 30);
+
+    if (months > 0) return `${months} month${months > 1 ? 's' : ''} ago`;
+    if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
+    if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+    return 'just now';
+}
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 5fe1cda85..285f671b2 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -127,3 +127,129 @@
         background-color: rgba($gray, 0.1);
     }
 }
+
+.extensionModalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.extensionModal {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.extensionModal h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333;
+    font-size: 24px;
+}
+
+.extensionDetailRow {
+    display: flex;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+
+.extensionLabel {
+    font-weight: bold;
+    width: 120px;
+    color: #555;
+    flex-shrink: 0;
+}
+
+.extensionValue {
+    flex: 1;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.extensionButtonContainer button:only-child {
+    justify-content: center;
+}
+
+.extensionButtonContainer button:only-child {
+    margin: 0 auto;
+}
+
+.extensionButtonContainer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.extensionCloseButton {
+    background-color: #b70000;
+    color: white;
+    padding: 10px 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 48%;
+    font-weight: bold;
+}
+
+.extensionButtonContainer button:only-child {
+    width: 50%;
+}
+
+.extensionRequestButton {
+    background-color: #006400;
+    color: white;
+    padding: 10px 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 48%;
+    font-weight: bold;
+}
+
+.extensionApproved {
+    font-weight: bold;
+    color: #006400;
+}
+
+.extensionPending {
+    font-weight: bold;
+    color: #cc7000;
+}
+
+.extensionApprovalInfo {
+    margin-top: 10px;
+    color: #555;
+    font-style: italic;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+
+.extensionRequestButton {
+    background-color: #006400;
+    color: white;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.extensionNoRequests {
+    margin-bottom: 15px;
+    padding: 10px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    background-color: #f9f9f9;
+}
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 371131140..8e7b0b6ff 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -251,6 +251,46 @@
     margin-top: 0.8rem;
 }
 
+.taskStatusUpdate {
+    border: 1px solid #000000b3;
+    border-radius: 4px;
+    font-size: inherit;
+    font-weight: bolder;
+    background-color: transparent;
+    color: $theme-primary-alt;
+    padding: 0.5rem;
+    height: 2.5rem;
+    width: 10rem;
+    transition: 250ms ease-in-out;
+}
+
+.taskStatusUpdate:hover {
+    background-color: $theme-primary-alt;
+    color: $white;
+}
+
+.extension-button {
+    border: 1px solid #000000b3;
+    border-radius: 4px;
+    font-size: inherit;
+    font-weight: bolder;
+    background-color: transparent;
+    color: $theme-primary-alt;
+    padding: 0.5rem;
+    height: 2.5rem;
+    width: 10rem;
+    transition: 250ms ease-in-out;
+}
+.extension-button:hover {
+    background-color: $theme-primary-alt;
+    color: $white;
+}
+
+.task-status-control {
+    display: flex;
+    gap: 0.5rem;
+}
+
 .taskTagLevelWrapper {
     display: flex;
     padding-top: 0.5rem;
@@ -420,7 +460,6 @@
 .assignedToSection,
 .dateSection,
 .taskSection {
-    width: 100%;
     display: flex;
     gap: 5px;
     flex-wrap: wrap;
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index 2582b6660..2dd62ea2e 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -39,13 +39,17 @@ import { PENDING, SAVED, ERROR_STATUS } from '../constants';
 import { StatusIndicator } from './StatusIndicator';
 import Suggestions from '../SuggestionBox/Suggestions';
 import { useRouter } from 'next/router';
+import { ExtensionStatusModal } from '@/components/Modal/ExtensionStatusModal';
+import { TaskRequestPayload } from '@/interfaces/task.type';
 
 const Card: FC<CardProps> = ({
     content,
     shouldEdit = false,
     onContentChange = () => undefined,
+    taskId,
 }) => {
     const router = useRouter();
+    const isDevMode = router.query.dev === 'true' ? true : false;
 
     const statusRedList = [BLOCKED];
     const statusNotOverDueList = [
@@ -73,7 +77,7 @@ const Card: FC<CardProps> = ({
         userResponse?.users[0]?.picture?.url || placeholderImageURL;
     const { SUCCESS, ERROR } = ToastTypes;
 
-    const { isUserAuthorized } = useUserData();
+    const { data, isUserAuthorized } = useUserData();
 
     const [showEditButton, setShowEditButton] = useState(false);
 
@@ -81,6 +85,8 @@ const Card: FC<CardProps> = ({
 
     const [isEditMode, setIsEditMode] = useState(false);
 
+    const [showExtensionModal, setShowExtensionModal] = useState(false);
+
     const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
         itemId: cardDetails.id,
     });
@@ -266,7 +272,7 @@ const Card: FC<CardProps> = ({
         setIsEditMode(true);
     };
     const isEditable = shouldEdit && isUserAuthorized && isEditMode;
-
+    const isSelfTask = editedTaskDetails.assignee === data?.username;
     const getFormattedClosedAtDate = () => {
         const closedAt = cardDetails?.github?.issue?.closedAt;
         return getDateInString(new Date(closedAt ?? Date.now()));
@@ -569,25 +575,6 @@ const Card: FC<CardProps> = ({
                             : `Started ${getStartedAgo()}`}
                     </span>
                 </div>
-                {/* EDIT task status */}
-                <div className={styles.taskStatusEditMode}>
-                    {isEditable ? (
-                        <TaskStatusEditMode
-                            task={editedTaskDetails}
-                            setEditedTaskDetails={setEditedTaskDetails}
-                        />
-                    ) : (
-                        <div className={styles.statusContainer} style={{}}>
-                            <p className={styles.cardSpecialFont}>Status:</p>
-                            <p
-                                data-testid="task-status"
-                                className={styles.statusText}
-                            >
-                                {beautifyStatus(cardDetails.status)}
-                            </p>
-                        </div>
-                    )}
-                </div>
             </div>
 
             <div className={styles.contributor}>
@@ -629,6 +616,36 @@ const Card: FC<CardProps> = ({
                 {showAssignButton() && <AssigneeButton />}
             </div>
 
+            <div className={styles.taskStatusEditMode}>
+                {isDevMode && (isEditable || isSelfTask) ? (
+                    <div className={styles['task-status-control']}>
+                        <button
+                            className={styles['extension-button']}
+                            onClick={() => setShowExtensionModal(true)}
+                        >
+                            Extension Status
+                        </button>
+                        <ExtensionStatusModal
+                            isOpen={showExtensionModal}
+                            onClose={() => setShowExtensionModal(false)}
+                            taskId={cardDetails.id}
+                            dev={isDevMode}
+                            assignee={cardDetails.assignee ?? ''}
+                        />
+                    </div>
+                ) : (
+                    <div className={styles.statusContainer}>
+                        <p className={styles.cardSpecialFont}>Status:</p>
+                        <p
+                            data-testid="task-status"
+                            className={styles.statusText}
+                        >
+                            {beautifyStatus(cardDetails.status)}
+                        </p>
+                    </div>
+                )}
+            </div>
+
             <div className={styles.cardItems}>
                 <div
                     className={`${styles.taskTagLevelWrapper} ${
diff --git a/src/interfaces/task.type.ts b/src/interfaces/task.type.ts
index 6094bc1a7..a93d689f1 100644
--- a/src/interfaces/task.type.ts
+++ b/src/interfaces/task.type.ts
@@ -109,6 +109,7 @@ export type CardProps = {
     content: task;
     shouldEdit: boolean;
     onContentChange?: (changeId: string, changeObject: object) => void;
+    taskId: string;
 };
 
 export type ProgressContainerProps = {
@@ -158,3 +159,38 @@ export type taskStatusUpdateHandleProp = {
     newStatus: string;
     newProgress?: number;
 };
+export type ExtensionRequest = {
+    reason: string;
+    newEndsOn: number;
+    title: string;
+    taskId: string;
+    oldEndsOn: number;
+    status: string;
+    requestNumber: number;
+    id: string;
+    timestamp: number;
+    assignee: string;
+    assigneeId: string;
+    reviewedBy?: string;
+    reviewedAt?: number;
+};
+
+export type ExtensionRequestsResponse = {
+    message: string;
+    allExtensionRequests: ExtensionRequest[];
+};
+
+export type ExtensionRequestCreatePayload = {
+    assignee: string;
+    newEndsOn: number;
+    oldEndsOn: number;
+    reason: string;
+    status: string;
+    taskId: string;
+    title: string;
+};
+
+export type ExtensionRequestCreateResponse = {
+    message: string;
+    extensionRequest: ExtensionRequest;
+};

From 39a54a55ec8b9a3fd3748d2784aa3ed9d1a76c5d Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Sun, 4 May 2025 02:13:33 +0530
Subject: [PATCH 02/18] removed unnecessary chnages pt1

---
 src/app/services/tasksApi.ts                  |  1 -
 src/components/Form/ExtensionRequestForm.tsx  | 11 +++++---
 src/components/Form/Form.module.scss          | 19 +++++++++++++
 src/components/Modal/ExtensionStatusModal.tsx | 21 ---------------
 src/components/Modal/modal.module.scss        | 27 +++++--------------
 src/components/tasks/card/card.module.scss    | 18 -------------
 6 files changed, 33 insertions(+), 64 deletions(-)

diff --git a/src/app/services/tasksApi.ts b/src/app/services/tasksApi.ts
index 0491157ad..5945237e3 100644
--- a/src/app/services/tasksApi.ts
+++ b/src/app/services/tasksApi.ts
@@ -2,7 +2,6 @@ import task, {
     TaskRequestPayload,
     TasksResponseType,
     GetAllTaskParamType,
-    ExtensionRequest,
     ExtensionRequestsResponse,
     ExtensionRequestCreatePayload,
     ExtensionRequestCreateResponse,
diff --git a/src/components/Form/ExtensionRequestForm.tsx b/src/components/Form/ExtensionRequestForm.tsx
index 1bb482e63..959f87c03 100644
--- a/src/components/Form/ExtensionRequestForm.tsx
+++ b/src/components/Form/ExtensionRequestForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styles from './Form.module.scss';
-import { useCreateExtensionRequestMutation } from 'src/app/services/tasksApi';
+import { useCreateExtensionRequestMutation } from '@/app/services/tasksApi';
 
 interface ExtensionRequestFormProps {
     isOpen: boolean;
@@ -118,6 +118,7 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                             rows={4}
                             className={styles.textArea}
                             required
+                            disabled={isLoading}
                         />
                     </div>
 
@@ -139,6 +140,7 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                             onChange={handleChange}
                             className={`${styles.input} ${styles.dateTimeInput}`}
                             required
+                            disabled={isLoading}
                         />
                     </div>
 
@@ -154,6 +156,7 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                             rows={3}
                             className={styles.textArea}
                             required
+                            disabled={isLoading}
                         />
                     </div>
 
@@ -168,10 +171,12 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                         </button>
                         <button
                             type="submit"
-                            className={styles.submitBtn}
+                            className={`${styles.submitBtn} ${
+                                isLoading ? styles.disabledBtn : ''
+                            }`}
                             disabled={isLoading}
                         >
-                            {isLoading ? 'Submitting...' : 'Submit'}
+                            Submit
                         </button>
                     </div>
                 </form>
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index 9196986d6..07ec4713c 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -90,3 +90,22 @@
 .submitBtn:hover {
     background-color: #006600;
 }
+
+.disabledBtn {
+    background-color: #cccccc !important;
+    color: #666666 !important;
+    cursor: not-allowed !important;
+
+    &:hover {
+        position: relative;
+
+        &:after {
+            position: absolute;
+            font-size: 1.2em;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            opacity: 0.7;
+        }
+    }
+}
diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index 07f62abe3..578018708 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -11,27 +11,6 @@ type ExtensionStatusModalProps = {
     assignee: string;
 };
 
-type ExtensionRequest = {
-    reason: string;
-    newEndsOn: number;
-    title: string;
-    taskId: string;
-    oldEndsOn: number;
-    status: string;
-    requestNumber: number;
-    id: string;
-    timestamp: number;
-    assignee: string;
-    assigneeId: string;
-    reviewedBy?: string;
-    reviewedAt?: number;
-};
-
-type ExtensionRequestsResponse = {
-    message: string;
-    allExtensionRequests: ExtensionRequest[];
-};
-
 export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
     isOpen,
     onClose,
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 285f671b2..0d8a2bb0e 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -181,10 +181,8 @@
 
 .extensionButtonContainer button:only-child {
     justify-content: center;
-}
-
-.extensionButtonContainer button:only-child {
     margin: 0 auto;
+    width: 50%;
 }
 
 .extensionButtonContainer {
@@ -194,7 +192,7 @@
 }
 
 .extensionCloseButton {
-    background-color: #b70000;
+    background-color: $red;
     color: white;
     padding: 10px 0;
     border: none;
@@ -204,13 +202,9 @@
     font-weight: bold;
 }
 
-.extensionButtonContainer button:only-child {
-    width: 50%;
-}
-
 .extensionRequestButton {
-    background-color: #006400;
-    color: white;
+    background-color: $green;
+    color: $white;
     padding: 10px 0;
     border: none;
     border-radius: 4px;
@@ -221,12 +215,12 @@
 
 .extensionApproved {
     font-weight: bold;
-    color: #006400;
+    color: $green;
 }
 
 .extensionPending {
     font-weight: bold;
-    color: #cc7000;
+    color: $orange;
 }
 
 .extensionApprovalInfo {
@@ -237,15 +231,6 @@
     word-wrap: break-word;
 }
 
-.extensionRequestButton {
-    background-color: #006400;
-    color: white;
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
 .extensionNoRequests {
     margin-bottom: 15px;
     padding: 10px;
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 8e7b0b6ff..c613cdd8f 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -251,24 +251,6 @@
     margin-top: 0.8rem;
 }
 
-.taskStatusUpdate {
-    border: 1px solid #000000b3;
-    border-radius: 4px;
-    font-size: inherit;
-    font-weight: bolder;
-    background-color: transparent;
-    color: $theme-primary-alt;
-    padding: 0.5rem;
-    height: 2.5rem;
-    width: 10rem;
-    transition: 250ms ease-in-out;
-}
-
-.taskStatusUpdate:hover {
-    background-color: $theme-primary-alt;
-    color: $white;
-}
-
 .extension-button {
     border: 1px solid #000000b3;
     border-radius: 4px;

From c11768f61deb7677b80bd5660be1e61911aa40b5 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Tue, 6 May 2025 13:27:36 +0530
Subject: [PATCH 03/18] refactor changes

---
 src/components/Modal/ExtensionStatusModal.tsx | 220 ++++++++----------
 1 file changed, 91 insertions(+), 129 deletions(-)

diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index 578018708..da4f28121 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -27,25 +27,19 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
     const modalRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        if (isOpen) {
-            if (
-                data?.allExtensionRequests &&
-                data.allExtensionRequests.length > 0
-            ) {
-                const latestRequest = [...data.allExtensionRequests].sort(
-                    (a, b) => b.requestNumber - a.requestNumber
-                )[0];
-                setOldEndsOn(latestRequest.newEndsOn);
-            } else {
-                setOldEndsOn(new Date().getTime());
-            }
+        if (isOpen && (data?.allExtensionRequests ?? []).length > 0) {
+            const latestRequest = [...(data?.allExtensionRequests ?? [])].sort(
+                (a, b) => b.requestNumber - a.requestNumber
+            )[0];
+            setOldEndsOn(latestRequest.newEndsOn);
+        } else if (isOpen) {
+            setOldEndsOn(new Date().getTime());
         }
     }, [isOpen, data, taskId, dev]);
 
     const handleOutsideClick = (e: React.MouseEvent) => {
-        if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        if (modalRef.current && !modalRef.current.contains(e.target as Node))
             onClose();
-        }
     };
 
     const handleOpenRequestForm = () => {
@@ -53,35 +47,39 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
         onClose();
     };
 
-    const handleCloseRequestForm = () => {
-        setIsRequestFormOpen(false);
-    };
+    const handleCloseRequestForm = () => setIsRequestFormOpen(false);
 
     const handleSubmitExtensionRequest = (formData: any) => {
-        const requestData = {
-            ...formData,
-            taskId,
-            dev,
-        };
-        console.log('Complete request data:', requestData);
+        console.log('Complete request data:', { ...formData, taskId, dev });
         setIsRequestFormOpen(false);
     };
 
-    const renderRequestForm = () => {
-        return (
-            <ExtensionRequestForm
-                isOpen={isRequestFormOpen}
-                onClose={handleCloseRequestForm}
-                taskId={taskId}
-                assignee={assignee}
-                oldEndsOn={oldEndsOn}
-            />
-        );
+    const formatDate = (timestamp: number) => {
+        const timestampMs =
+            timestamp > 9999999999 ? timestamp : timestamp * 1000;
+        const date = new Date(timestampMs);
+        return `${
+            date.getMonth() + 1
+        }/${date.getDate()}/${date.getFullYear()}, ${date.toLocaleTimeString()}`;
     };
 
-    if (!isOpen) {
-        return isRequestFormOpen ? renderRequestForm() : null;
-    }
+    const getStatusClass = (status: string) =>
+        status === 'APPROVED'
+            ? styles.extensionApproved
+            : styles.extensionPending;
+
+    const renderRequestForm = () => (
+        <ExtensionRequestForm
+            isOpen={isRequestFormOpen}
+            onClose={handleCloseRequestForm}
+            taskId={taskId}
+            assignee={assignee}
+            oldEndsOn={oldEndsOn}
+        />
+    );
+
+    // Early returns
+    if (!isOpen) return isRequestFormOpen ? renderRequestForm() : null;
 
     if (isLoading) {
         return (
@@ -110,20 +108,9 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
         );
     }
 
-    const formatDate = (timestamp: number) => {
-        const timestampMs =
-            timestamp > 9999999999 ? timestamp : timestamp * 1000;
-        const date = new Date(timestampMs);
-        return `${
-            date.getMonth() + 1
-        }/${date.getDate()}/${date.getFullYear()}, ${date.toLocaleTimeString()}`;
-    };
-
-    const getStatusClass = (status: string) => {
-        return status === 'APPROVED'
-            ? styles.extensionApproved
-            : styles.extensionPending;
-    };
+    const hasPendingRequest = data?.allExtensionRequests?.some(
+        (req) => req.status === 'PENDING'
+    );
 
     return (
         <>
@@ -134,70 +121,55 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
                 <div className={styles.extensionModal} ref={modalRef}>
                     <h2>Extension Details</h2>
 
-                    {data?.allExtensionRequests &&
+                    {Array.isArray(data?.allExtensionRequests) &&
                     data.allExtensionRequests.length > 0 ? (
                         data.allExtensionRequests.map((request) => (
                             <div
                                 key={request.id}
                                 className={styles.extensionExtensionRequest}
                             >
-                                <div className={styles.extensionDetailRow}>
-                                    <span className={styles.extensionLabel}>
-                                        Request :
-                                    </span>
-                                    <span className={styles.extensionValue}>
-                                        #{request.requestNumber}
-                                    </span>
-                                </div>
-
-                                <div className={styles.extensionDetailRow}>
-                                    <span className={styles.extensionLabel}>
-                                        Reason :
-                                    </span>
-                                    <span className={styles.extensionValue}>
-                                        {request.reason}
-                                    </span>
-                                </div>
-
-                                <div className={styles.extensionDetailRow}>
-                                    <span className={styles.extensionLabel}>
-                                        Title :
-                                    </span>
-                                    <span className={styles.extensionValue}>
-                                        {request.title}
-                                    </span>
-                                </div>
-
-                                <div className={styles.extensionDetailRow}>
-                                    <span className={styles.extensionLabel}>
-                                        Old Ends On :
-                                    </span>
-                                    <span className={styles.extensionValue}>
-                                        {formatDate(request.oldEndsOn)}
-                                    </span>
-                                </div>
-
-                                <div className={styles.extensionDetailRow}>
-                                    <span className={styles.extensionLabel}>
-                                        New Ends On :
-                                    </span>
-                                    <span className={styles.extensionValue}>
-                                        {formatDate(request.newEndsOn)}
-                                    </span>
-                                </div>
-
-                                <div className={styles.extensionDetailRow}>
-                                    <span className={styles.extensionLabel}>
-                                        Status :
-                                    </span>
-                                    <span
-                                        className={`${
-                                            styles.extensionValue
-                                        } ${getStatusClass(request.status)}`}
+                                {[
+                                    {
+                                        label: 'Request :',
+                                        value: `#${request.requestNumber}`,
+                                    },
+                                    {
+                                        label: 'Reason :',
+                                        value: request.reason,
+                                    },
+                                    { label: 'Title :', value: request.title },
+                                    {
+                                        label: 'Old Ends On :',
+                                        value: formatDate(request.oldEndsOn),
+                                    },
+                                    {
+                                        label: 'New Ends On :',
+                                        value: formatDate(request.newEndsOn),
+                                    },
+                                    {
+                                        label: 'Status :',
+                                        value: request.status,
+                                        className: getStatusClass(
+                                            request.status
+                                        ),
+                                    },
+                                ].map((item, idx) => (
+                                    <div
+                                        key={idx}
+                                        className={styles.extensionDetailRow}
                                     >
-                                        {request.status}
-                                    </span>
-                                </div>
+                                        <span className={styles.extensionLabel}>
+                                            {item.label}
+                                        </span>
+                                        <span
+                                            className={`${
+                                                styles.extensionValue
+                                            } ${item.className || ''}`}
+                                        >
+                                            {item.value}
+                                        </span>
+                                    </div>
+                                ))}
 
                                 {request.reviewedBy && (
                                     <div
@@ -227,13 +199,9 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
                     <div
                         className={styles.extensionButtonContainer}
                         style={{
-                            justifyContent:
-                                data?.allExtensionRequests &&
-                                data.allExtensionRequests.some(
-                                    (request) => request.status === 'PENDING'
-                                )
-                                    ? 'center'
-                                    : 'space-between',
+                            justifyContent: hasPendingRequest
+                                ? 'center'
+                                : 'space-between',
                         }}
                     >
                         <button
@@ -242,30 +210,24 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
                         >
                             Close
                         </button>
-                        {data?.allExtensionRequests &&
-                            data.allExtensionRequests.some(
-                                (request) => request.status === 'PENDING'
-                            ) === false && (
-                                <button
-                                    className={styles.extensionRequestButton}
-                                    onClick={handleOpenRequestForm}
-                                >
-                                    Request Extension
-                                </button>
-                            )}
+                        {!hasPendingRequest && (
+                            <button
+                                className={styles.extensionRequestButton}
+                                onClick={handleOpenRequestForm}
+                            >
+                                Request Extension
+                            </button>
+                        )}
                     </div>
                 </div>
             </div>
-
             {renderRequestForm()}
         </>
     );
 };
 
 function formatTimeAgo(timestamp: number) {
-    const now = Date.now();
-    const diff = now - timestamp;
-
+    const diff = Date.now() - timestamp;
     const minutes = Math.floor(diff / 60000);
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);

From f4d85dd169609501ffd55ffbc5277c89b6410982 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Thu, 8 May 2025 22:17:11 +0530
Subject: [PATCH 04/18] fixed spinner and toast

---
 src/components/Form/ExtensionRequestForm.tsx  | 14 ++++-
 .../tasks/card/TaskStatusEditMode.tsx         |  6 +-
 src/components/tasks/card/card.module.scss    |  1 +
 src/components/tasks/card/index.tsx           | 58 ++++++++-----------
 src/constants/constants.ts                    |  4 ++
 5 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/src/components/Form/ExtensionRequestForm.tsx b/src/components/Form/ExtensionRequestForm.tsx
index 959f87c03..6149ce14c 100644
--- a/src/components/Form/ExtensionRequestForm.tsx
+++ b/src/components/Form/ExtensionRequestForm.tsx
@@ -1,6 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import styles from './Form.module.scss';
 import { useCreateExtensionRequestMutation } from '@/app/services/tasksApi';
+import { toast, ToastTypes } from '@/helperFunctions/toast';
+import {
+    EXTENSION_REQUEST_SUCCESS_MESSAGE,
+    EXTENSION_REQUEST_ERROR_MESSAGE,
+} from '@/constants/constants';
 
 interface ExtensionRequestFormProps {
     isOpen: boolean;
@@ -32,6 +37,8 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
     const [createExtensionRequest, { isLoading }] =
         useCreateExtensionRequestMutation();
 
+    const { SUCCESS, ERROR } = ToastTypes;
+
     useEffect(() => {
         if (isOpen) {
             const defaultNewEndsOn = oldEndsOn
@@ -77,8 +84,13 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                 dev: true,
             }).unwrap();
 
+            toast(SUCCESS, EXTENSION_REQUEST_SUCCESS_MESSAGE);
             onClose();
-        } catch (error) {
+        } catch (error: any) {
+            toast(
+                ERROR,
+                error?.data?.message ?? EXTENSION_REQUEST_ERROR_MESSAGE
+            );
             console.error('Failed to create extension request:', error);
         }
     };
diff --git a/src/components/tasks/card/TaskStatusEditMode.tsx b/src/components/tasks/card/TaskStatusEditMode.tsx
index f0151549a..01ace892b 100644
--- a/src/components/tasks/card/TaskStatusEditMode.tsx
+++ b/src/components/tasks/card/TaskStatusEditMode.tsx
@@ -10,7 +10,6 @@ import {
     useUpdateSelfTaskMutation,
 } from '@/app/services/tasksApi';
 
-import { StatusIndicator } from './StatusIndicator';
 import { TaskStatusDropdown } from '../TaskStatusDropdown';
 import {
     TASK_STATUS_UPDATE_ERROR_MESSAGE,
@@ -26,6 +25,7 @@ type Props = {
     task: task;
     setEditedTaskDetails: React.Dispatch<React.SetStateAction<CardTaskDetails>>;
     isSelfTask?: boolean;
+    setSaveStatus: React.Dispatch<React.SetStateAction<string>>;
 };
 
 // TODO: remove this after fixing the card beautify status
@@ -47,11 +47,11 @@ const TaskStatusEditMode = ({
     task,
     setEditedTaskDetails,
     isSelfTask,
+    setSaveStatus,
 }: Props) => {
     const router = useRouter();
     const isDevMode = router.query.dev === 'true';
 
-    const [saveStatus, setSaveStatus] = useState('');
     const [updateTask] = useUpdateTaskMutation();
     const [updateSelfTask] = useUpdateSelfTaskMutation();
     const { SUCCESS, ERROR } = ToastTypes;
@@ -103,8 +103,6 @@ const TaskStatusEditMode = ({
                 oldProgress={task.percentCompleted}
                 onChange={onChangeUpdateTaskStatus}
             />
-
-            <StatusIndicator status={saveStatus} />
         </div>
     );
 };
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 20a187c39..7dc8ffd0a 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -262,6 +262,7 @@
     height: 2.5rem;
     width: 10rem;
     transition: 250ms ease-in-out;
+    margin-top: 0.8rem;
 }
 .extension-button:hover {
     background-color: $theme-primary-alt;
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index bb0ca3301..9d78bbb1d 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -40,7 +40,6 @@ import { StatusIndicator } from './StatusIndicator';
 import Suggestions from '../SuggestionBox/Suggestions';
 import { useRouter } from 'next/router';
 import { ExtensionStatusModal } from '@/components/Modal/ExtensionStatusModal';
-import { TaskRequestPayload } from '@/interfaces/task.type';
 
 const Card: FC<CardProps> = ({
     content,
@@ -49,7 +48,7 @@ const Card: FC<CardProps> = ({
     taskId,
 }) => {
     const router = useRouter();
-    const isDevMode = router.query.dev === 'true' ? true : false;
+    const isDevMode = router.query.dev === 'true';
 
     const statusRedList = [BLOCKED];
     const statusNotOverDueList = [
@@ -86,6 +85,7 @@ const Card: FC<CardProps> = ({
     const [isEditMode, setIsEditMode] = useState(false);
 
     const [showExtensionModal, setShowExtensionModal] = useState(false);
+    const [saveStatus, setSaveStatus] = useState('');
 
     const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
         itemId: cardDetails.id,
@@ -627,42 +627,30 @@ const Card: FC<CardProps> = ({
                 {showAssignButton() && <AssigneeButton />}
             </div>
 
-            <div className={styles.taskStatusEditMode}>
-                {isDevMode && (isEditable || isSelfTask) ? (
-                    <div className={styles['task-status-control']}>
-                        <button
-                            className={styles['extension-button']}
-                            onClick={() => setShowExtensionModal(true)}
-                        >
-                            Extension Status
-                        </button>
-                        <ExtensionStatusModal
-                            isOpen={showExtensionModal}
-                            onClose={() => setShowExtensionModal(false)}
-                            taskId={cardDetails.id}
-                            dev={isDevMode}
-                            assignee={cardDetails.assignee ?? ''}
+            {(isEditable || (isDevMode && isSelfTask)) && (
+                <div className={styles['task-status-control']}>
+                    <div className={styles.taskStatusEditMode}>
+                        <TaskStatusEditMode
+                            task={editedTaskDetails}
+                            setEditedTaskDetails={setEditedTaskDetails}
+                            isSelfTask={isSelfTask}
+                            setSaveStatus={setSaveStatus}
                         />
                     </div>
-                ) : (
-                    <div className={styles.statusContainer}>
-                        <p className={styles.cardSpecialFont}>Status:</p>
-                        <p
-                            data-testid="task-status"
-                            className={styles.statusText}
-                        >
-                            {beautifyStatus(cardDetails.status)}
-                        </p>
-                    </div>
-                )}
-            </div>
 
-            {(isEditable || (isDevMode && isSelfTask)) && (
-                <div className={styles.taskStatusEditMode}>
-                    <TaskStatusEditMode
-                        task={editedTaskDetails}
-                        setEditedTaskDetails={setEditedTaskDetails}
-                        isSelfTask={isSelfTask}
+                    <button
+                        className={styles['extension-button']}
+                        onClick={() => setShowExtensionModal(true)}
+                    >
+                        Extension Status
+                    </button>
+                    <StatusIndicator status={saveStatus} />
+                    <ExtensionStatusModal
+                        isOpen={showExtensionModal}
+                        onClose={() => setShowExtensionModal(false)}
+                        taskId={cardDetails.id}
+                        dev={isDevMode}
+                        assignee={cardDetails.assignee ?? ''}
                     />
                 </div>
             )}
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index c295aa684..f2df2ca8a 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -6,6 +6,10 @@ export const DONE = 'DONE';
 export const AVAILABLE = 'AVAILABLE';
 export const UNASSIGNED = 'UNASSIGNED';
 export const PROGRESS_SUCCESSFUL = 'Progress Updated Successfully';
+export const EXTENSION_REQUEST_SUCCESS_MESSAGE =
+    'Extension request created successfully';
+export const EXTENSION_REQUEST_ERROR_MESSAGE =
+    'Failed to create extension request';
 export const TASK_STATUS_UPDATE_SUCCESS_MESSAGE =
     'Task status updated successfully';
 export const TASK_STATUS_UPDATE_ERROR_MESSAGE = 'Error updating task status';

From 262688ccd258bd6f6c08cc6508f1fc955cc7f2d5 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Fri, 9 May 2025 04:50:21 +0530
Subject: [PATCH 05/18] fixed loading spinner and ETA in form

---
 .../Tasks/TaskStatusEditMode.test.tsx         | 102 +-----------------
 src/components/Form/ExtensionRequestForm.tsx  |  26 +++--
 src/components/Form/Form.module.scss          |   5 +
 src/components/Modal/ExtensionStatusModal.tsx |   9 +-
 src/components/Modal/modal.module.scss        |  18 ++++
 5 files changed, 47 insertions(+), 113 deletions(-)

diff --git a/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx b/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
index f5417aba7..f465e09ab 100644
--- a/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
@@ -34,6 +34,7 @@ describe('TaskStatusEditMode', () => {
                 <TaskStatusEditMode
                     task={BLOCKED_TASK}
                     setEditedTaskDetails={setEditedTaskDetails}
+                    setSaveStatus={jest.fn()}
                 />
             </Provider>
         );
@@ -52,6 +53,7 @@ describe('TaskStatusEditMode', () => {
                 <TaskStatusEditMode
                     task={BLOCKED_TASK}
                     setEditedTaskDetails={setEditedTaskDetails}
+                    setSaveStatus={jest.fn()}
                 />
             </Provider>
         );
@@ -80,6 +82,7 @@ describe('TaskStatusEditMode', () => {
                 <TaskStatusEditMode
                     task={BLOCKED_TASK}
                     setEditedTaskDetails={setEditedTaskDetails}
+                    setSaveStatus={jest.fn()}
                 />
             </Provider>
         );
@@ -102,105 +105,6 @@ describe('TaskStatusEditMode', () => {
 
         expect(allOptions).toEqual(allTaskStatus);
     });
-
-    it('renders the spinner and error icon when the task update fails', async () => {
-        const setEditedTaskDetails = jest.fn();
-
-        updateTaskSpy.mockImplementation(() => [
-            jest.fn().mockImplementation(() => {
-                return {
-                    unwrap: () =>
-                        Promise.reject({
-                            data: { message: 'Error updating task' },
-                        }),
-                };
-            }),
-            { isLoading: false },
-        ]);
-
-        renderWithRouter(
-            <Provider store={store()}>
-                <TaskStatusEditMode
-                    task={BLOCKED_TASK}
-                    setEditedTaskDetails={setEditedTaskDetails}
-                />
-            </Provider>,
-            {}
-        );
-
-        const statusSelect = screen.getByLabelText('Status:');
-
-        expect(statusSelect).toHaveValue('BLOCKED');
-
-        fireEvent.change(statusSelect, { target: { value: 'IN_PROGRESS' } });
-
-        expect(updateTaskSpy).toHaveBeenCalled();
-
-        await waitFor(
-            () => {
-                expect(screen.getByTestId('small-spinner')).toBeInTheDocument();
-            },
-            { timeout: 2000 }
-        );
-
-        await waitFor(() => {
-            expect(screen.getByTestId('error')).toBeInTheDocument();
-        });
-    });
-
-    it('shows saved indicator and clears status after successful update', async () => {
-        const setEditedTaskDetails = jest.fn();
-        jest.useFakeTimers();
-
-        const toastModule = await import('@/helperFunctions/toast');
-        const toastSpy = jest.spyOn(toastModule, 'toast');
-
-        updateTaskSpy.mockImplementation(() => [
-            jest.fn().mockImplementation(() => {
-                return {
-                    unwrap: () => Promise.resolve({ status: 'SUCCESS' }),
-                };
-            }),
-            { isLoading: false },
-        ]);
-
-        renderWithRouter(
-            <Provider store={store()}>
-                <TaskStatusEditMode
-                    task={BLOCKED_TASK}
-                    setEditedTaskDetails={setEditedTaskDetails}
-                />
-            </Provider>,
-            {}
-        );
-
-        const statusSelect = screen.getByLabelText('Status:');
-
-        fireEvent.change(statusSelect, { target: { value: 'IN_PROGRESS' } });
-
-        await waitFor(
-            () => {
-                expect(screen.getByTestId('small-spinner')).toBeInTheDocument();
-            },
-            { timeout: 1000 }
-        );
-
-        await waitFor(() => {
-            expect(screen.getByTestId('checkmark')).toBeInTheDocument();
-            expect(toastSpy).toHaveBeenCalledWith(
-                'success',
-                'Task status updated successfully'
-            );
-        });
-
-        jest.advanceTimersByTime(3000);
-
-        await waitFor(() => {
-            expect(screen.queryByTestId('checkmark')).not.toBeInTheDocument();
-        });
-
-        jest.useRealTimers();
-    });
 });
 
 describe('test beautifyStatus function', () => {
diff --git a/src/components/Form/ExtensionRequestForm.tsx b/src/components/Form/ExtensionRequestForm.tsx
index 6149ce14c..2b1455820 100644
--- a/src/components/Form/ExtensionRequestForm.tsx
+++ b/src/components/Form/ExtensionRequestForm.tsx
@@ -34,9 +34,9 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
         title: '',
     });
 
+    const [etaError, setEtaError] = useState(false);
     const [createExtensionRequest, { isLoading }] =
         useCreateExtensionRequestMutation();
-
     const { SUCCESS, ERROR } = ToastTypes;
 
     useEffect(() => {
@@ -45,6 +45,7 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                 ? oldEndsOn + 3 * 24 * 60 * 60 * 1000
                 : new Date().getTime();
             setFormData((prev) => ({ ...prev, newEndsOn: defaultNewEndsOn }));
+            setEtaError(false);
         }
     }, [isOpen, oldEndsOn]);
 
@@ -56,6 +57,12 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
         if (name === 'newEndsOn') {
             const timestamp = new Date(value).getTime();
             setFormData((prev) => ({ ...prev, [name]: timestamp }));
+
+            if (oldEndsOn && timestamp <= oldEndsOn) {
+                setEtaError(true);
+            } else {
+                setEtaError(false);
+            }
         } else {
             setFormData((prev) => ({ ...prev, [name]: value }));
         }
@@ -67,12 +74,6 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
         const submissionOldEndsOn = oldEndsOn || new Date().getTime();
 
         try {
-            console.log('Sending data:', {
-                ...formData,
-                taskId,
-                oldEndsOn: submissionOldEndsOn,
-            });
-
             await createExtensionRequest({
                 assignee: assignee,
                 newEndsOn: formData.newEndsOn,
@@ -91,7 +92,6 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                 ERROR,
                 error?.data?.message ?? EXTENSION_REQUEST_ERROR_MESSAGE
             );
-            console.error('Failed to create extension request:', error);
         }
     };
 
@@ -116,7 +116,6 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
         <div className={styles.modalOverlay}>
             <div className={styles.modalContent}>
                 <h2 className={styles.heading}>Extension Request Form</h2>
-
                 <form onSubmit={handleSubmit}>
                     <div className={styles.formGroup}>
                         <label className={styles.label} htmlFor="reason">
@@ -137,6 +136,11 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                     <div className={styles.formGroup}>
                         <div className={styles.oldEta}>
                             Old ETA - {oldEndsOnDate}
+                            {etaError && (
+                                <p className={styles.errorText}>
+                                    Please choose ETA greater than old ETA.
+                                </p>
+                            )}
                         </div>
                     </div>
 
@@ -184,9 +188,9 @@ export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
                         <button
                             type="submit"
                             className={`${styles.submitBtn} ${
-                                isLoading ? styles.disabledBtn : ''
+                                isLoading || etaError ? styles.disabledBtn : ''
                             }`}
-                            disabled={isLoading}
+                            disabled={isLoading || etaError}
                         >
                             Submit
                         </button>
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index 07ec4713c..3c9079b38 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -90,6 +90,11 @@
 .submitBtn:hover {
     background-color: #006600;
 }
+.errorText {
+    color: red;
+    font-size: 0.875rem;
+    margin-top: 4px;
+}
 
 .disabledBtn {
     background-color: #cccccc !important;
diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index da4f28121..29a4dfdc7 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import styles from './modal.module.scss';
 import { useGetSelfExtensionRequestsQuery } from '@/app/services/tasksApi';
 import { ExtensionRequestForm } from '@/components/Form/ExtensionRequestForm';
+import { SmallSpinner } from '../tasks/card/SmallSpinner';
 
 type ExtensionStatusModalProps = {
     isOpen: boolean;
@@ -78,14 +79,16 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
         />
     );
 
-    // Early returns
     if (!isOpen) return isRequestFormOpen ? renderRequestForm() : null;
 
     if (isLoading) {
         return (
             <div className={styles.extensionModalOverlay}>
-                <div className={styles.extensionModal}>
-                    <h2>Loading extension requests...</h2>
+                <div className={styles.extensionModalLoading}>
+                    <h2>Extension Details</h2>
+                    <div className={styles.spinnerContainer}>
+                        <SmallSpinner />
+                    </div>
                 </div>
             </div>
         );
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 0d8a2bb0e..3d261fd06 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -238,3 +238,21 @@
     border-radius: 4px;
     background-color: #f9f9f9;
 }
+.extensionModalLoading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+    background-color: $white;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    max-width: 300px;
+}
+
+.spinnerContainer {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 1rem 0;
+}

From 445761edd58ac6d5a7aff9b173e843b696945fcc Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Fri, 9 May 2025 14:57:36 +0530
Subject: [PATCH 06/18] breaking pr

---
 src/app/services/tasksApi.ts                  |  24 --
 src/components/Form/ExtensionRequestForm.tsx  | 202 ---------------
 src/components/Form/Form.module.scss          | 116 ---------
 src/components/Modal/ExtensionStatusModal.tsx | 239 ++++++++----------
 src/constants/constants.ts                    |   4 -
 src/interfaces/task.type.ts                   |  15 --
 6 files changed, 99 insertions(+), 501 deletions(-)
 delete mode 100644 src/components/Form/ExtensionRequestForm.tsx
 delete mode 100644 src/components/Form/Form.module.scss

diff --git a/src/app/services/tasksApi.ts b/src/app/services/tasksApi.ts
index 5945237e3..5cd678f48 100644
--- a/src/app/services/tasksApi.ts
+++ b/src/app/services/tasksApi.ts
@@ -3,8 +3,6 @@ import task, {
     TasksResponseType,
     GetAllTaskParamType,
     ExtensionRequestsResponse,
-    ExtensionRequestCreatePayload,
-    ExtensionRequestCreateResponse,
 } from '@/interfaces/task.type';
 import { api } from './api';
 import { MINE_TASKS_URL, TASKS_URL } from '@/constants/url';
@@ -116,27 +114,6 @@ export const tasksApi = api.injectEndpoints({
             }),
             providesTags: ['Extension_Requests'],
         }),
-
-        createExtensionRequest: builder.mutation<
-            ExtensionRequestCreateResponse,
-            ExtensionRequestCreatePayload & { dev?: boolean }
-        >({
-            query: (payload) => ({
-                url: '/extension-requests',
-                method: 'POST',
-                params: { dev: payload.dev ?? true },
-                body: {
-                    assignee: payload.assignee,
-                    newEndsOn: payload.newEndsOn,
-                    oldEndsOn: payload.oldEndsOn,
-                    reason: payload.reason,
-                    status: payload.status,
-                    taskId: payload.taskId,
-                    title: payload.title,
-                },
-            }),
-            invalidatesTags: ['Extension_Requests'],
-        }),
     }),
     overrideExisting: true,
 });
@@ -148,5 +125,4 @@ export const {
     useUpdateTaskMutation,
     useUpdateSelfTaskMutation,
     useGetSelfExtensionRequestsQuery,
-    useCreateExtensionRequestMutation,
 } = tasksApi;
diff --git a/src/components/Form/ExtensionRequestForm.tsx b/src/components/Form/ExtensionRequestForm.tsx
deleted file mode 100644
index 2b1455820..000000000
--- a/src/components/Form/ExtensionRequestForm.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styles from './Form.module.scss';
-import { useCreateExtensionRequestMutation } from '@/app/services/tasksApi';
-import { toast, ToastTypes } from '@/helperFunctions/toast';
-import {
-    EXTENSION_REQUEST_SUCCESS_MESSAGE,
-    EXTENSION_REQUEST_ERROR_MESSAGE,
-} from '@/constants/constants';
-
-interface ExtensionRequestFormProps {
-    isOpen: boolean;
-    onClose: () => void;
-    taskId: string;
-    assignee: string;
-    oldEndsOn: number | null;
-}
-
-interface FormData {
-    reason: string;
-    newEndsOn: number;
-    title: string;
-}
-
-export const ExtensionRequestForm: React.FC<ExtensionRequestFormProps> = ({
-    isOpen,
-    onClose,
-    taskId,
-    assignee,
-    oldEndsOn,
-}) => {
-    const [formData, setFormData] = useState<FormData>({
-        reason: '',
-        newEndsOn: new Date().getTime(),
-        title: '',
-    });
-
-    const [etaError, setEtaError] = useState(false);
-    const [createExtensionRequest, { isLoading }] =
-        useCreateExtensionRequestMutation();
-    const { SUCCESS, ERROR } = ToastTypes;
-
-    useEffect(() => {
-        if (isOpen) {
-            const defaultNewEndsOn = oldEndsOn
-                ? oldEndsOn + 3 * 24 * 60 * 60 * 1000
-                : new Date().getTime();
-            setFormData((prev) => ({ ...prev, newEndsOn: defaultNewEndsOn }));
-            setEtaError(false);
-        }
-    }, [isOpen, oldEndsOn]);
-
-    const handleChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        const { name, value } = e.target;
-
-        if (name === 'newEndsOn') {
-            const timestamp = new Date(value).getTime();
-            setFormData((prev) => ({ ...prev, [name]: timestamp }));
-
-            if (oldEndsOn && timestamp <= oldEndsOn) {
-                setEtaError(true);
-            } else {
-                setEtaError(false);
-            }
-        } else {
-            setFormData((prev) => ({ ...prev, [name]: value }));
-        }
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-
-        const submissionOldEndsOn = oldEndsOn || new Date().getTime();
-
-        try {
-            await createExtensionRequest({
-                assignee: assignee,
-                newEndsOn: formData.newEndsOn,
-                oldEndsOn: submissionOldEndsOn,
-                reason: formData.reason,
-                status: 'PENDING',
-                taskId,
-                title: formData.title,
-                dev: true,
-            }).unwrap();
-
-            toast(SUCCESS, EXTENSION_REQUEST_SUCCESS_MESSAGE);
-            onClose();
-        } catch (error: any) {
-            toast(
-                ERROR,
-                error?.data?.message ?? EXTENSION_REQUEST_ERROR_MESSAGE
-            );
-        }
-    };
-
-    if (!isOpen) return null;
-
-    const oldEndsOnDate = oldEndsOn
-        ? new Date(oldEndsOn).toLocaleDateString('en-US', {
-              month: 'numeric',
-              day: 'numeric',
-              year: 'numeric',
-              hour: 'numeric',
-              minute: 'numeric',
-              second: 'numeric',
-              hour12: true,
-          })
-        : 'Not available';
-
-    const formatDateForInput = (timestamp: number) =>
-        new Date(timestamp).toISOString().slice(0, 16);
-
-    return (
-        <div className={styles.modalOverlay}>
-            <div className={styles.modalContent}>
-                <h2 className={styles.heading}>Extension Request Form</h2>
-                <form onSubmit={handleSubmit}>
-                    <div className={styles.formGroup}>
-                        <label className={styles.label} htmlFor="reason">
-                            Reason
-                        </label>
-                        <textarea
-                            id="reason"
-                            name="reason"
-                            value={formData.reason}
-                            onChange={handleChange}
-                            rows={4}
-                            className={styles.textArea}
-                            required
-                            disabled={isLoading}
-                        />
-                    </div>
-
-                    <div className={styles.formGroup}>
-                        <div className={styles.oldEta}>
-                            Old ETA - {oldEndsOnDate}
-                            {etaError && (
-                                <p className={styles.errorText}>
-                                    Please choose ETA greater than old ETA.
-                                </p>
-                            )}
-                        </div>
-                    </div>
-
-                    <div className={styles.formGroup}>
-                        <label className={styles.label} htmlFor="newEndsOn">
-                            New ETA
-                        </label>
-                        <input
-                            type="datetime-local"
-                            id="newEndsOn"
-                            name="newEndsOn"
-                            value={formatDateForInput(formData.newEndsOn)}
-                            onChange={handleChange}
-                            className={`${styles.input} ${styles.dateTimeInput}`}
-                            required
-                            disabled={isLoading}
-                        />
-                    </div>
-
-                    <div className={styles.formGroup}>
-                        <label className={styles.label} htmlFor="title">
-                            Title
-                        </label>
-                        <textarea
-                            id="title"
-                            name="title"
-                            value={formData.title}
-                            onChange={handleChange}
-                            rows={3}
-                            className={styles.textArea}
-                            required
-                            disabled={isLoading}
-                        />
-                    </div>
-
-                    <div className={styles.formActions}>
-                        <button
-                            type="button"
-                            className={styles.cancelBtn}
-                            onClick={onClose}
-                            disabled={isLoading}
-                        >
-                            Cancel
-                        </button>
-                        <button
-                            type="submit"
-                            className={`${styles.submitBtn} ${
-                                isLoading || etaError ? styles.disabledBtn : ''
-                            }`}
-                            disabled={isLoading || etaError}
-                        >
-                            Submit
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-};
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
deleted file mode 100644
index 3c9079b38..000000000
--- a/src/components/Form/Form.module.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-.modalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.modalContent {
-    background-color: white;
-    padding: 25px;
-    border-radius: 5px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    width: 90%;
-    max-width: 450px;
-}
-
-.heading {
-    color: #333;
-    font-size: 24px;
-    margin-top: 0;
-    margin-bottom: 20px;
-}
-
-.formGroup {
-    margin-bottom: 15px;
-}
-
-.label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 5px;
-    color: #333;
-}
-
-.textArea,
-.input {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 16px;
-    box-sizing: border-box;
-}
-
-.oldEta {
-    margin-bottom: 10px;
-    font-weight: 500;
-}
-
-.dateTimeInput {
-    padding: 8px;
-}
-
-.formActions {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 25px;
-}
-
-.button {
-    padding: 10px 15px;
-    font-size: 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    color: white;
-    width: 48%;
-}
-
-.cancelBtn {
-    composes: button;
-    background-color: #b80000;
-}
-
-.cancelBtn:hover {
-    background-color: #900000;
-}
-
-.submitBtn {
-    composes: button;
-    background-color: #008800;
-}
-
-.submitBtn:hover {
-    background-color: #006600;
-}
-.errorText {
-    color: red;
-    font-size: 0.875rem;
-    margin-top: 4px;
-}
-
-.disabledBtn {
-    background-color: #cccccc !important;
-    color: #666666 !important;
-    cursor: not-allowed !important;
-
-    &:hover {
-        position: relative;
-
-        &:after {
-            position: absolute;
-            font-size: 1.2em;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            opacity: 0.7;
-        }
-    }
-}
diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index 29a4dfdc7..e710a29c2 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -1,7 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import styles from './modal.module.scss';
 import { useGetSelfExtensionRequestsQuery } from '@/app/services/tasksApi';
-import { ExtensionRequestForm } from '@/components/Form/ExtensionRequestForm';
 import { SmallSpinner } from '../tasks/card/SmallSpinner';
 
 type ExtensionStatusModalProps = {
@@ -23,38 +22,13 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
         { taskId, dev },
         { skip: !isOpen }
     );
-    const [isRequestFormOpen, setIsRequestFormOpen] = useState(false);
-    const [oldEndsOn, setOldEndsOn] = useState<number | null>(null);
     const modalRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        if (isOpen && (data?.allExtensionRequests ?? []).length > 0) {
-            const latestRequest = [...(data?.allExtensionRequests ?? [])].sort(
-                (a, b) => b.requestNumber - a.requestNumber
-            )[0];
-            setOldEndsOn(latestRequest.newEndsOn);
-        } else if (isOpen) {
-            setOldEndsOn(new Date().getTime());
-        }
-    }, [isOpen, data, taskId, dev]);
-
     const handleOutsideClick = (e: React.MouseEvent) => {
         if (modalRef.current && !modalRef.current.contains(e.target as Node))
             onClose();
     };
 
-    const handleOpenRequestForm = () => {
-        setIsRequestFormOpen(true);
-        onClose();
-    };
-
-    const handleCloseRequestForm = () => setIsRequestFormOpen(false);
-
-    const handleSubmitExtensionRequest = (formData: any) => {
-        console.log('Complete request data:', { ...formData, taskId, dev });
-        setIsRequestFormOpen(false);
-    };
-
     const formatDate = (timestamp: number) => {
         const timestampMs =
             timestamp > 9999999999 ? timestamp : timestamp * 1000;
@@ -69,17 +43,7 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
             ? styles.extensionApproved
             : styles.extensionPending;
 
-    const renderRequestForm = () => (
-        <ExtensionRequestForm
-            isOpen={isRequestFormOpen}
-            onClose={handleCloseRequestForm}
-            taskId={taskId}
-            assignee={assignee}
-            oldEndsOn={oldEndsOn}
-        />
-    );
-
-    if (!isOpen) return isRequestFormOpen ? renderRequestForm() : null;
+    if (!isOpen) return null;
 
     if (isLoading) {
         return (
@@ -116,116 +80,111 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
     );
 
     return (
-        <>
-            <div
-                className={styles.extensionModalOverlay}
-                onClick={handleOutsideClick}
-            >
-                <div className={styles.extensionModal} ref={modalRef}>
-                    <h2>Extension Details</h2>
-
-                    {Array.isArray(data?.allExtensionRequests) &&
-                    data.allExtensionRequests.length > 0 ? (
-                        data.allExtensionRequests.map((request) => (
-                            <div
-                                key={request.id}
-                                className={styles.extensionExtensionRequest}
-                            >
-                                {[
-                                    {
-                                        label: 'Request :',
-                                        value: `#${request.requestNumber}`,
-                                    },
-                                    {
-                                        label: 'Reason :',
-                                        value: request.reason,
-                                    },
-                                    { label: 'Title :', value: request.title },
-                                    {
-                                        label: 'Old Ends On :',
-                                        value: formatDate(request.oldEndsOn),
-                                    },
-                                    {
-                                        label: 'New Ends On :',
-                                        value: formatDate(request.newEndsOn),
-                                    },
-                                    {
-                                        label: 'Status :',
-                                        value: request.status,
-                                        className: getStatusClass(
-                                            request.status
-                                        ),
-                                    },
-                                ].map((item, idx) => (
-                                    <div
-                                        key={idx}
-                                        className={styles.extensionDetailRow}
-                                    >
-                                        <span className={styles.extensionLabel}>
-                                            {item.label}
-                                        </span>
-                                        <span
-                                            className={`${
-                                                styles.extensionValue
-                                            } ${item.className || ''}`}
-                                        >
-                                            {item.value}
-                                        </span>
-                                    </div>
-                                ))}
-
-                                {request.reviewedBy && (
-                                    <div
-                                        className={styles.extensionApprovalInfo}
+        <div
+            className={styles.extensionModalOverlay}
+            onClick={handleOutsideClick}
+        >
+            <div className={styles.extensionModal} ref={modalRef}>
+                <h2>Extension Details</h2>
+
+                {Array.isArray(data?.allExtensionRequests) &&
+                data.allExtensionRequests.length > 0 ? (
+                    data.allExtensionRequests.map((request) => (
+                        <div
+                            key={request.id}
+                            className={styles.extensionExtensionRequest}
+                        >
+                            {[
+                                {
+                                    label: 'Request :',
+                                    value: `#${request.requestNumber}`,
+                                },
+                                {
+                                    label: 'Reason :',
+                                    value: request.reason,
+                                },
+                                { label: 'Title :', value: request.title },
+                                {
+                                    label: 'Old Ends On :',
+                                    value: formatDate(request.oldEndsOn),
+                                },
+                                {
+                                    label: 'New Ends On :',
+                                    value: formatDate(request.newEndsOn),
+                                },
+                                {
+                                    label: 'Status :',
+                                    value: request.status,
+                                    className: getStatusClass(request.status),
+                                },
+                            ].map((item, idx) => (
+                                <div
+                                    key={idx}
+                                    className={styles.extensionDetailRow}
+                                >
+                                    <span className={styles.extensionLabel}>
+                                        {item.label}
+                                    </span>
+                                    <span
+                                        className={`${styles.extensionValue} ${
+                                            item.className || ''
+                                        }`}
                                     >
-                                        Your request was approved by{' '}
-                                        {request.reviewedBy}{' '}
-                                        {request.reviewedAt
-                                            ? formatTimeAgo(
-                                                  request.reviewedAt * 1000
-                                              )
-                                            : ''}
-                                    </div>
-                                )}
-                            </div>
-                        ))
-                    ) : (
-                        <div className={styles.extensionNoRequests}>
-                            <p>No extension requests found for this task.</p>
-                            <p>
-                                If you need more time to complete this task, you
-                                can request an extension.
-                            </p>
+                                        {item.value}
+                                    </span>
+                                </div>
+                            ))}
+
+                            {request.reviewedBy && (
+                                <div className={styles.extensionApprovalInfo}>
+                                    Your request was approved by{' '}
+                                    {request.reviewedBy}{' '}
+                                    {request.reviewedAt
+                                        ? formatTimeAgo(
+                                              request.reviewedAt * 1000
+                                          )
+                                        : ''}
+                                </div>
+                            )}
                         </div>
-                    )}
-
-                    <div
-                        className={styles.extensionButtonContainer}
-                        style={{
-                            justifyContent: hasPendingRequest
-                                ? 'center'
-                                : 'space-between',
-                        }}
+                    ))
+                ) : (
+                    <div className={styles.extensionNoRequests}>
+                        <p>
+                            No extension requests found for this task, want to
+                            create one?
+                        </p>
+                    </div>
+                )}
+
+                <div
+                    className={styles.extensionButtonContainer}
+                    style={{
+                        justifyContent: hasPendingRequest
+                            ? 'center'
+                            : 'space-between',
+                    }}
+                >
+                    <button
+                        className={styles.extensionCloseButton}
+                        onClick={onClose}
                     >
+                        Close
+                    </button>
+                    {!hasPendingRequest && (
                         <button
-                            className={styles.extensionCloseButton}
-                            onClick={onClose}
+                            className={styles.extensionRequestButton}
+                            onClick={() => {
+                                // This will be handled in a separate PR
+                                console.log('Request extension button clicked');
+                            }}
                         >
-                            Close
+                            Request Extension
                         </button>
-                        {!hasPendingRequest && (
-                            <button
-                                className={styles.extensionRequestButton}
-                                onClick={handleOpenRequestForm}
-                            >
-                                Request Extension
-                            </button>
-                        )}
-                    </div>
+                    )}
                 </div>
             </div>
-            {renderRequestForm()}
-        </>
+        </div>
     );
 };
 
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index f2df2ca8a..c295aa684 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -6,10 +6,6 @@ export const DONE = 'DONE';
 export const AVAILABLE = 'AVAILABLE';
 export const UNASSIGNED = 'UNASSIGNED';
 export const PROGRESS_SUCCESSFUL = 'Progress Updated Successfully';
-export const EXTENSION_REQUEST_SUCCESS_MESSAGE =
-    'Extension request created successfully';
-export const EXTENSION_REQUEST_ERROR_MESSAGE =
-    'Failed to create extension request';
 export const TASK_STATUS_UPDATE_SUCCESS_MESSAGE =
     'Task status updated successfully';
 export const TASK_STATUS_UPDATE_ERROR_MESSAGE = 'Error updating task status';
diff --git a/src/interfaces/task.type.ts b/src/interfaces/task.type.ts
index a93d689f1..adf53bf2d 100644
--- a/src/interfaces/task.type.ts
+++ b/src/interfaces/task.type.ts
@@ -179,18 +179,3 @@ export type ExtensionRequestsResponse = {
     message: string;
     allExtensionRequests: ExtensionRequest[];
 };
-
-export type ExtensionRequestCreatePayload = {
-    assignee: string;
-    newEndsOn: number;
-    oldEndsOn: number;
-    reason: string;
-    status: string;
-    taskId: string;
-    title: string;
-};
-
-export type ExtensionRequestCreateResponse = {
-    message: string;
-    extensionRequest: ExtensionRequest;
-};

From 3bfeb7e913362872013110926122a25394ff83e1 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Fri, 9 May 2025 15:08:49 +0530
Subject: [PATCH 07/18] fix build fail

---
 src/components/Modal/ExtensionStatusModal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index e710a29c2..cae7e6b33 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -75,7 +75,8 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
         );
     }
 
-    const hasPendingRequest = data?.allExtensionRequests?.some(
+    const extensionRequests = data?.allExtensionRequests ?? [];
+    const hasPendingRequest = extensionRequests.some(
         (req) => req.status === 'PENDING'
     );
 
@@ -87,9 +88,8 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
             <div className={styles.extensionModal} ref={modalRef}>
                 <h2>Extension Details</h2>
 
-                {Array.isArray(data?.allExtensionRequests) &&
-                data.allExtensionRequests.length > 0 ? (
-                    data.allExtensionRequests.map((request) => (
+                {extensionRequests.length > 0 ? (
+                    extensionRequests.map((request) => (
                         <div
                             key={request.id}
                             className={styles.extensionExtensionRequest}

From 18b177049a07f205a48d32ae4bcd0907515abe8a Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Fri, 9 May 2025 15:25:03 +0530
Subject: [PATCH 08/18] removed taskid from cardprops

---
 src/components/tasks/card/index.tsx | 1 -
 src/interfaces/task.type.ts         | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index 9d78bbb1d..289e30694 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -45,7 +45,6 @@ const Card: FC<CardProps> = ({
     content,
     shouldEdit = false,
     onContentChange = () => undefined,
-    taskId,
 }) => {
     const router = useRouter();
     const isDevMode = router.query.dev === 'true';
diff --git a/src/interfaces/task.type.ts b/src/interfaces/task.type.ts
index adf53bf2d..fb4db1bb2 100644
--- a/src/interfaces/task.type.ts
+++ b/src/interfaces/task.type.ts
@@ -109,7 +109,6 @@ export type CardProps = {
     content: task;
     shouldEdit: boolean;
     onContentChange?: (changeId: string, changeObject: object) => void;
-    taskId: string;
 };
 
 export type ProgressContainerProps = {

From cc5e07ace09a416d8c2f12b8dbfe8fe98c5c6106 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Fri, 9 May 2025 17:08:59 +0530
Subject: [PATCH 09/18] added reponsiveness

---
 src/components/Modal/modal.module.scss     | 83 ++++++++++------------
 src/components/tasks/card/card.module.scss | 21 ++++++
 2 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 3d261fd06..08e914345 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -134,7 +134,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba($black, 0.7);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -142,75 +142,81 @@
 }
 
 .extensionModal {
-    background-color: white;
-    padding: 20px;
-    border-radius: 8px;
+    background-color: $white;
+    padding: 1.9rem;
+    border-radius: 0.6rem;
     width: 90%;
-    max-width: 500px;
+    max-width: 53.1rem;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1.3rem 3.1rem rgba($black, 0.7);
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 1rem;
 }
 
 .extensionModal h2 {
     text-align: center;
-    margin-bottom: 20px;
-    color: #333;
-    font-size: 24px;
+    margin-bottom: 1.9rem;
+    font-size: 2rem;
+    font-weight: 500;
+    color: rgba($black, 0.9);
 }
 
 .extensionDetailRow {
     display: flex;
-    margin-bottom: 12px;
     flex-wrap: wrap;
+    margin-bottom: 1rem;
+    line-height: 1.5;
 }
 
 .extensionLabel {
     font-weight: bold;
-    width: 120px;
-    color: #555;
+    width: 10rem;
+    color: rgba($black, 0.9);
     flex-shrink: 0;
 }
 
 .extensionValue {
     flex: 1;
+    color: rgba($black, 0.9);
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
 }
 
-.extensionButtonContainer button:only-child {
-    justify-content: center;
-    margin: 0 auto;
-    width: 50%;
+.extensionApprovalInfo {
+    margin-top: 0.6rem;
+    font-style: italic;
+    color: $black;
+    text-align: center;
 }
 
 .extensionButtonContainer {
     display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.9rem;
 }
 
-.extensionCloseButton {
-    background-color: $red;
-    color: white;
-    padding: 10px 0;
+.extensionCloseButton,
+.extensionRequestButton {
+    padding: 0.8rem 0;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.4rem;
     cursor: pointer;
-    width: 48%;
+    width: 40%;
     font-weight: bold;
+    font-size: 1rem;
+}
+
+.extensionCloseButton {
+    background-color: $red;
+    color: $white;
 }
 
 .extensionRequestButton {
     background-color: $green;
     color: $white;
-    padding: 10px 0;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    width: 48%;
-    font-weight: bold;
 }
 
 .extensionApproved {
@@ -223,21 +229,6 @@
     color: $orange;
 }
 
-.extensionApprovalInfo {
-    margin-top: 10px;
-    color: #555;
-    font-style: italic;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
-
-.extensionNoRequests {
-    margin-bottom: 15px;
-    padding: 10px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-    background-color: #f9f9f9;
-}
 .extensionModalLoading {
     display: flex;
     flex-direction: column;
@@ -247,7 +238,7 @@
     background-color: $white;
     padding: 1.5rem;
     border-radius: 0.5rem;
-    max-width: 300px;
+    max-width: 18.8rem;
 }
 
 .spinnerContainer {
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 7dc8ffd0a..19b08c951 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -271,7 +271,28 @@
 
 .task-status-control {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
+    align-items: center;
+}
+@media screen and (max-width: 768px) {
+    .task-status-control {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .extension-button {
+        max-width: none;
+        margin-top: 0.5rem;
+        text-align: center;
+    }
+
+    .taskStatusEditMode {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-left: 20px;
+    }
 }
 
 .taskStatusUpdate {

From 2ae845349934ae977fe3f10dac0a3cc2331edfa6 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Sat, 10 May 2025 23:50:58 +0530
Subject: [PATCH 10/18] refactored modal component and variable name change

---
 src/components/Modal/ExtensionStatusModal.tsx | 190 ++++++++----------
 src/components/Modal/modal.module.scss        |   4 +
 src/components/tasks/card/card.module.scss    |  14 +-
 src/components/tasks/card/index.tsx           |  13 +-
 4 files changed, 106 insertions(+), 115 deletions(-)

diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index cae7e6b33..4d74a1a9a 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -1,7 +1,8 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import styles from './modal.module.scss';
 import { useGetSelfExtensionRequestsQuery } from '@/app/services/tasksApi';
 import { SmallSpinner } from '../tasks/card/SmallSpinner';
+import moment from 'moment';
 
 type ExtensionStatusModalProps = {
     isOpen: boolean;
@@ -11,38 +12,86 @@ type ExtensionStatusModalProps = {
     assignee: string;
 };
 
-export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
+const formatToDateTime = (timestamp: number) => {
+    const timestampMs = timestamp > 9999999999 ? timestamp : timestamp * 1000;
+    return moment(timestampMs).format('MM/DD/YYYY, h:mm:ss A');
+};
+
+const formatToRelativeTime = (timestamp: number) => {
+    const timestampMs = timestamp > 9999999999 ? timestamp : timestamp * 1000;
+    return moment(timestampMs).fromNow();
+};
+
+const getStatusClass = (status: string, styles: any) =>
+    status === 'APPROVED' ? styles.extensionApproved : styles.extensionPending;
+
+const getExtensionRequestDetails = (request: any, styles: any) => [
+    {
+        label: 'Request :',
+        value: `#${request.requestNumber}`,
+    },
+    {
+        label: 'Reason :',
+        value: request.reason,
+    },
+    {
+        label: 'Title :',
+        value: request.title,
+    },
+    {
+        label: 'Old Ends On :',
+        value: formatToDateTime(request.oldEndsOn),
+    },
+    {
+        label: 'New Ends On :',
+        value: formatToDateTime(request.newEndsOn),
+    },
+    {
+        label: 'Status :',
+        value: request.status,
+        className: getStatusClass(request.status, styles),
+    },
+];
+
+export function ExtensionStatusModal({
     isOpen,
     onClose,
     taskId,
     dev,
     assignee,
-}) => {
+}: ExtensionStatusModalProps) {
     const { data, isLoading, error } = useGetSelfExtensionRequestsQuery(
         { taskId, dev },
         { skip: !isOpen }
     );
     const modalRef = useRef<HTMLDivElement>(null);
 
+    const extensionRequests = data?.allExtensionRequests ?? [];
+    const hasPendingRequest = extensionRequests.some(
+        (req) => req.status === 'PENDING'
+    );
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleEscapeKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        document.addEventListener('keydown', handleEscapeKey);
+        return () => {
+            document.removeEventListener('keydown', handleEscapeKey);
+        };
+    }, [isOpen, onClose]);
+
     const handleOutsideClick = (e: React.MouseEvent) => {
-        if (modalRef.current && !modalRef.current.contains(e.target as Node))
+        if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
             onClose();
+        }
     };
 
-    const formatDate = (timestamp: number) => {
-        const timestampMs =
-            timestamp > 9999999999 ? timestamp : timestamp * 1000;
-        const date = new Date(timestampMs);
-        return `${
-            date.getMonth() + 1
-        }/${date.getDate()}/${date.getFullYear()}, ${date.toLocaleTimeString()}`;
-    };
-
-    const getStatusClass = (status: string) =>
-        status === 'APPROVED'
-            ? styles.extensionApproved
-            : styles.extensionPending;
-
     if (!isOpen) return null;
 
     if (isLoading) {
@@ -58,28 +107,6 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
         );
     }
 
-    if (error) {
-        return (
-            <div className={styles.extensionModalOverlay}>
-                <div className={styles.extensionModal}>
-                    <h2>Error loading extension requests</h2>
-                    <pre>{JSON.stringify(error, null, 2)}</pre>
-                    <button
-                        className={styles.extensionCloseButton}
-                        onClick={onClose}
-                    >
-                        Close
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    const extensionRequests = data?.allExtensionRequests ?? [];
-    const hasPendingRequest = extensionRequests.some(
-        (req) => req.status === 'PENDING'
-    );
-
     return (
         <div
             className={styles.extensionModalOverlay}
@@ -94,54 +121,33 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
                             key={request.id}
                             className={styles.extensionExtensionRequest}
                         >
-                            {[
-                                {
-                                    label: 'Request :',
-                                    value: `#${request.requestNumber}`,
-                                },
-                                {
-                                    label: 'Reason :',
-                                    value: request.reason,
-                                },
-                                { label: 'Title :', value: request.title },
-                                {
-                                    label: 'Old Ends On :',
-                                    value: formatDate(request.oldEndsOn),
-                                },
-                                {
-                                    label: 'New Ends On :',
-                                    value: formatDate(request.newEndsOn),
-                                },
-                                {
-                                    label: 'Status :',
-                                    value: request.status,
-                                    className: getStatusClass(request.status),
-                                },
-                            ].map((item, idx) => (
-                                <div
-                                    key={idx}
-                                    className={styles.extensionDetailRow}
-                                >
-                                    <span className={styles.extensionLabel}>
-                                        {item.label}
-                                    </span>
-                                    <span
-                                        className={`${styles.extensionValue} ${
-                                            item.className || ''
-                                        }`}
+                            {getExtensionRequestDetails(request, styles).map(
+                                (item, idx) => (
+                                    <div
+                                        key={idx}
+                                        className={styles.extensionDetailRow}
                                     >
-                                        {item.value}
-                                    </span>
-                                </div>
-                            ))}
+                                        <span className={styles.extensionLabel}>
+                                            {item.label}
+                                        </span>
+                                        <span
+                                            className={`${
+                                                styles.extensionValue
+                                            } ${item.className || ''}`}
+                                        >
+                                            {item.value}
+                                        </span>
+                                    </div>
+                                )
+                            )}
 
                             {request.reviewedBy && (
                                 <div className={styles.extensionApprovalInfo}>
                                     Your request was approved by{' '}
                                     {request.reviewedBy}{' '}
                                     {request.reviewedAt
-                                        ? formatTimeAgo(
-                                              request.reviewedAt * 1000
+                                        ? formatToRelativeTime(
+                                              request.reviewedAt
                                           )
                                         : ''}
                                 </div>
@@ -172,13 +178,7 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
                         Close
                     </button>
                     {!hasPendingRequest && (
-                        <button
-                            className={styles.extensionRequestButton}
-                            onClick={() => {
-                                // This will be handled in a separate PR
-                                console.log('Request extension button clicked');
-                            }}
-                        >
+                        <button className={styles.extensionRequestButton}>
                             Request Extension
                         </button>
                     )}
@@ -186,18 +186,4 @@ export const ExtensionStatusModal: React.FC<ExtensionStatusModalProps> = ({
             </div>
         </div>
     );
-};
-
-function formatTimeAgo(timestamp: number) {
-    const diff = Date.now() - timestamp;
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    const months = Math.floor(days / 30);
-
-    if (months > 0) return `${months} month${months > 1 ? 's' : ''} ago`;
-    if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`;
-    if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
-    if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
-    return 'just now';
 }
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 08e914345..87f95d1ce 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -241,6 +241,10 @@
     max-width: 18.8rem;
 }
 
+.extensionNoRequests {
+    text-align: center;
+}
+
 .spinnerContainer {
     display: flex;
     justify-content: center;
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
index 19b08c951..438fabfbb 100644
--- a/src/components/tasks/card/card.module.scss
+++ b/src/components/tasks/card/card.module.scss
@@ -251,8 +251,8 @@
     margin-top: 0.8rem;
 }
 
-.extension-button {
-    border: 1px solid #000000b3;
+.extensionStatusButton {
+    border: 1px solid rgba($black, 0.7);
     border-radius: 4px;
     font-size: inherit;
     font-weight: bolder;
@@ -264,24 +264,24 @@
     transition: 250ms ease-in-out;
     margin-top: 0.8rem;
 }
-.extension-button:hover {
+.extensionStatusButton:hover {
     background-color: $theme-primary-alt;
     color: $white;
 }
 
-.task-status-control {
+.taskStatusControl {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     align-items: center;
 }
 @media screen and (max-width: 768px) {
-    .task-status-control {
+    .taskStatusControl {
         flex-direction: column;
         align-items: center;
     }
 
-    .extension-button {
+    .extensionStatusButton {
         max-width: none;
         margin-top: 0.5rem;
         text-align: center;
@@ -291,7 +291,7 @@
         width: 100%;
         display: flex;
         justify-content: center;
-        margin-left: 20px;
+        margin-left: 1.2rem;
     }
 }
 
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index 289e30694..c80b3c8eb 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -83,7 +83,8 @@ const Card: FC<CardProps> = ({
 
     const [isEditMode, setIsEditMode] = useState(false);
 
-    const [showExtensionModal, setShowExtensionModal] = useState(false);
+    const [savedExtensionRequestStatus, setsavedExtensionRequestStatus] =
+        useState(false);
     const [saveStatus, setSaveStatus] = useState('');
 
     const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
@@ -627,7 +628,7 @@ const Card: FC<CardProps> = ({
             </div>
 
             {(isEditable || (isDevMode && isSelfTask)) && (
-                <div className={styles['task-status-control']}>
+                <div className={styles.taskStatusControl}>
                     <div className={styles.taskStatusEditMode}>
                         <TaskStatusEditMode
                             task={editedTaskDetails}
@@ -638,15 +639,15 @@ const Card: FC<CardProps> = ({
                     </div>
 
                     <button
-                        className={styles['extension-button']}
-                        onClick={() => setShowExtensionModal(true)}
+                        className={styles.extensionStatusButton}
+                        onClick={() => setsavedExtensionRequestStatus(true)}
                     >
                         Extension Status
                     </button>
                     <StatusIndicator status={saveStatus} />
                     <ExtensionStatusModal
-                        isOpen={showExtensionModal}
-                        onClose={() => setShowExtensionModal(false)}
+                        isOpen={savedExtensionRequestStatus}
+                        onClose={() => setsavedExtensionRequestStatus(false)}
                         taskId={cardDetails.id}
                         dev={isDevMode}
                         assignee={cardDetails.assignee ?? ''}

From c6a28780f2ea6355d304ef5ed13ab503cef9252f Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Sun, 11 May 2025 00:42:16 +0530
Subject: [PATCH 11/18] hook name changed

---
 .../Tasks/TaskStatusEditMode.test.tsx          |  6 +++---
 .../tasks/card/TaskStatusEditMode.tsx          | 12 ++++++------
 src/components/tasks/card/index.tsx            | 18 ++++++++++--------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx b/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
index f465e09ab..e40e13609 100644
--- a/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
+++ b/__tests__/Unit/Components/Tasks/TaskStatusEditMode.test.tsx
@@ -34,7 +34,7 @@ describe('TaskStatusEditMode', () => {
                 <TaskStatusEditMode
                     task={BLOCKED_TASK}
                     setEditedTaskDetails={setEditedTaskDetails}
-                    setSaveStatus={jest.fn()}
+                    setSaveExtensionRequestStatus={jest.fn()}
                 />
             </Provider>
         );
@@ -53,7 +53,7 @@ describe('TaskStatusEditMode', () => {
                 <TaskStatusEditMode
                     task={BLOCKED_TASK}
                     setEditedTaskDetails={setEditedTaskDetails}
-                    setSaveStatus={jest.fn()}
+                    setSaveExtensionRequestStatus={jest.fn()}
                 />
             </Provider>
         );
@@ -82,7 +82,7 @@ describe('TaskStatusEditMode', () => {
                 <TaskStatusEditMode
                     task={BLOCKED_TASK}
                     setEditedTaskDetails={setEditedTaskDetails}
-                    setSaveStatus={jest.fn()}
+                    setSaveExtensionRequestStatus={jest.fn()}
                 />
             </Provider>
         );
diff --git a/src/components/tasks/card/TaskStatusEditMode.tsx b/src/components/tasks/card/TaskStatusEditMode.tsx
index 01ace892b..128b2b266 100644
--- a/src/components/tasks/card/TaskStatusEditMode.tsx
+++ b/src/components/tasks/card/TaskStatusEditMode.tsx
@@ -25,7 +25,7 @@ type Props = {
     task: task;
     setEditedTaskDetails: React.Dispatch<React.SetStateAction<CardTaskDetails>>;
     isSelfTask?: boolean;
-    setSaveStatus: React.Dispatch<React.SetStateAction<string>>;
+    setSaveExtensionRequestStatus: React.Dispatch<React.SetStateAction<string>>;
 };
 
 // TODO: remove this after fixing the card beautify status
@@ -47,7 +47,7 @@ const TaskStatusEditMode = ({
     task,
     setEditedTaskDetails,
     isSelfTask,
-    setSaveStatus,
+    setSaveExtensionRequestStatus,
 }: Props) => {
     const router = useRouter();
     const isDevMode = router.query.dev === 'true';
@@ -60,7 +60,7 @@ const TaskStatusEditMode = ({
         newStatus,
         newProgress,
     }: taskStatusUpdateHandleProp) => {
-        setSaveStatus(PENDING);
+        setSaveExtensionRequestStatus(PENDING);
         const payload: { status: string; percentCompleted?: number } = {
             status: newStatus,
         };
@@ -80,17 +80,17 @@ const TaskStatusEditMode = ({
 
         try {
             await taskStatusUpdatePromise.unwrap();
-            setSaveStatus(SAVED);
+            setSaveExtensionRequestStatus(SAVED);
             toast(SUCCESS, TASK_STATUS_UPDATE_SUCCESS_MESSAGE);
         } catch (error: any) {
-            setSaveStatus(ERROR_STATUS);
+            setSaveExtensionRequestStatus(ERROR_STATUS);
             toast(
                 ERROR,
                 error?.data?.message ?? TASK_STATUS_UPDATE_ERROR_MESSAGE
             );
         } finally {
             setTimeout(() => {
-                setSaveStatus('');
+                setSaveExtensionRequestStatus('');
             }, 3000);
         }
     };
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index c80b3c8eb..7114ce835 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -83,9 +83,9 @@ const Card: FC<CardProps> = ({
 
     const [isEditMode, setIsEditMode] = useState(false);
 
-    const [savedExtensionRequestStatus, setsavedExtensionRequestStatus] =
-        useState(false);
-    const [saveStatus, setSaveStatus] = useState('');
+    const [showExtensionModal, setShowExtensionModal] = useState(false);
+    const [saveExtensionRequestStatus, setSaveExtensionRequestStatus] =
+        useState('');
 
     const { data: taskTagLevel, isLoading } = useGetTaskTagsQuery({
         itemId: cardDetails.id,
@@ -634,20 +634,22 @@ const Card: FC<CardProps> = ({
                             task={editedTaskDetails}
                             setEditedTaskDetails={setEditedTaskDetails}
                             isSelfTask={isSelfTask}
-                            setSaveStatus={setSaveStatus}
+                            setSaveExtensionRequestStatus={
+                                setSaveExtensionRequestStatus
+                            }
                         />
                     </div>
 
                     <button
                         className={styles.extensionStatusButton}
-                        onClick={() => setsavedExtensionRequestStatus(true)}
+                        onClick={() => setShowExtensionModal(true)}
                     >
                         Extension Status
                     </button>
-                    <StatusIndicator status={saveStatus} />
+                    <StatusIndicator status={saveExtensionRequestStatus} />
                     <ExtensionStatusModal
-                        isOpen={savedExtensionRequestStatus}
-                        onClose={() => setsavedExtensionRequestStatus(false)}
+                        isOpen={showExtensionModal}
+                        onClose={() => setShowExtensionModal(false)}
                         taskId={cardDetails.id}
                         dev={isDevMode}
                         assignee={cardDetails.assignee ?? ''}

From 4f712a10449063328a8ca03a422ad23b90f59de6 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Mon, 12 May 2025 00:22:35 +0530
Subject: [PATCH 12/18] added test id for testing

---
 src/components/Modal/ExtensionStatusModal.tsx | 57 +++++++++++++++----
 src/components/Modal/modal.module.scss        |  2 +-
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index 4d74a1a9a..a876e28a4 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -29,27 +29,33 @@ const getExtensionRequestDetails = (request: any, styles: any) => [
     {
         label: 'Request :',
         value: `#${request.requestNumber}`,
+        testId: 'request-number',
     },
     {
         label: 'Reason :',
         value: request.reason,
+        testId: 'request-reason',
     },
     {
         label: 'Title :',
         value: request.title,
+        testId: 'request-title',
     },
     {
         label: 'Old Ends On :',
         value: formatToDateTime(request.oldEndsOn),
+        testId: 'old-ends-on',
     },
     {
         label: 'New Ends On :',
         value: formatToDateTime(request.newEndsOn),
+        testId: 'new-ends-on',
     },
     {
         label: 'Status :',
         value: request.status,
         className: getStatusClass(request.status, styles),
+        testId: 'request-status',
     },
 ];
 
@@ -96,10 +102,19 @@ export function ExtensionStatusModal({
 
     if (isLoading) {
         return (
-            <div className={styles.extensionModalOverlay}>
-                <div className={styles.extensionModalLoading}>
-                    <h2>Extension Details</h2>
-                    <div className={styles.spinnerContainer}>
+            <div
+                className={styles.extensionModalOverlay}
+                data-testid="extension-modal-overlay"
+            >
+                <div
+                    className={styles.extensionModalLoading}
+                    data-testid="extension-modal-loading"
+                >
+                    <h2 data-testid="modal-title">Extension Details</h2>
+                    <div
+                        className={styles.spinnerContainer}
+                        data-testid="loading-spinner"
+                    >
                         <SmallSpinner />
                     </div>
                 </div>
@@ -111,29 +126,40 @@ export function ExtensionStatusModal({
         <div
             className={styles.extensionModalOverlay}
             onClick={handleOutsideClick}
+            data-testid="extension-modal-overlay"
         >
-            <div className={styles.extensionModal} ref={modalRef}>
-                <h2>Extension Details</h2>
+            <div
+                className={styles.extensionModal}
+                ref={modalRef}
+                data-testid="extension-modal-content"
+            >
+                <h2 data-testid="modal-title">Extension Details</h2>
 
                 {extensionRequests.length > 0 ? (
                     extensionRequests.map((request) => (
                         <div
                             key={request.id}
                             className={styles.extensionExtensionRequest}
+                            data-testid={`extension-request-${request.id}`}
                         >
                             {getExtensionRequestDetails(request, styles).map(
                                 (item, idx) => (
                                     <div
                                         key={idx}
                                         className={styles.extensionDetailRow}
+                                        data-testid={`detail-row-${idx}`}
                                     >
-                                        <span className={styles.extensionLabel}>
+                                        <span
+                                            className={styles.extensionLabel}
+                                            data-testid={`label-${item.testId}`}
+                                        >
                                             {item.label}
                                         </span>
                                         <span
                                             className={`${
                                                 styles.extensionValue
                                             } ${item.className || ''}`}
+                                            data-testid={`value-${item.testId}`}
                                         >
                                             {item.value}
                                         </span>
@@ -142,7 +168,10 @@ export function ExtensionStatusModal({
                             )}
 
                             {request.reviewedBy && (
-                                <div className={styles.extensionApprovalInfo}>
+                                <div
+                                    className={styles.extensionApprovalInfo}
+                                    data-testid="approval-info"
+                                >
                                     Your request was approved by{' '}
                                     {request.reviewedBy}{' '}
                                     {request.reviewedAt
@@ -155,7 +184,10 @@ export function ExtensionStatusModal({
                         </div>
                     ))
                 ) : (
-                    <div className={styles.extensionNoRequests}>
+                    <div
+                        className={styles.extensionNoRequests}
+                        data-testid="no-requests-message"
+                    >
                         <p>
                             No extension requests found for this task, want to
                             create one?
@@ -170,15 +202,20 @@ export function ExtensionStatusModal({
                             ? 'center'
                             : 'space-between',
                     }}
+                    data-testid="button-container"
                 >
                     <button
                         className={styles.extensionCloseButton}
                         onClick={onClose}
+                        data-testid="close-button"
                     >
                         Close
                     </button>
                     {!hasPendingRequest && (
-                        <button className={styles.extensionRequestButton}>
+                        <button
+                            className={styles.extensionRequestButton}
+                            data-testid="request-extension-button"
+                        >
                             Request Extension
                         </button>
                     )}
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index 87f95d1ce..b62a9b68e 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -146,7 +146,7 @@
     padding: 1.9rem;
     border-radius: 0.6rem;
     width: 90%;
-    max-width: 53.1rem;
+    max-width: 48rem;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 1.3rem 3.1rem rgba($black, 0.7);

From 6556f324d8f7eba2dcfa0d7f10a0e0ffb05bafb7 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Mon, 12 May 2025 23:12:11 +0530
Subject: [PATCH 13/18] updated tiemstamp function

---
 src/components/Modal/ExtensionStatusModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/Modal/ExtensionStatusModal.tsx
index a876e28a4..7c614682a 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/Modal/ExtensionStatusModal.tsx
@@ -13,12 +13,12 @@ type ExtensionStatusModalProps = {
 };
 
 const formatToDateTime = (timestamp: number) => {
-    const timestampMs = timestamp > 9999999999 ? timestamp : timestamp * 1000;
+    const timestampMs = timestamp < 1e12 ? timestamp * 1000 : timestamp;
     return moment(timestampMs).format('MM/DD/YYYY, h:mm:ss A');
 };
 
 const formatToRelativeTime = (timestamp: number) => {
-    const timestampMs = timestamp > 9999999999 ? timestamp : timestamp * 1000;
+    const timestampMs = timestamp < 1e12 ? timestamp * 1000 : timestamp;
     return moment(timestampMs).fromNow();
 };
 

From cca8c8f6cddf62860a6cce6b6aa7a09bfdd317d0 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Wed, 14 May 2025 09:43:00 +0530
Subject: [PATCH 14/18] seperated into two components

---
 .../ExtensionRequestDetails.tsx               |  88 ++++++++++++
 .../ExtensionStatusModal.module.scss          | 127 ++++++++++++++++++
 .../ExtensionStatusModal.tsx                  |  94 +++++--------
 src/components/Modal/modal.module.scss        | 124 -----------------
 src/components/tasks/card/index.tsx           |   2 +-
 5 files changed, 246 insertions(+), 189 deletions(-)
 create mode 100644 src/components/ExtensionRequest/ExtensionRequestDetails.tsx
 create mode 100644 src/components/ExtensionRequest/ExtensionStatusModal.module.scss
 rename src/components/{Modal => ExtensionRequest}/ExtensionStatusModal.tsx (59%)

diff --git a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
new file mode 100644
index 000000000..cfa1c0f2f
--- /dev/null
+++ b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { formatToRelativeTime } from './ExtensionStatusModal';
+
+type ExtensionRequestDetailsProps = {
+    extensionRequests: any[];
+    styles: any;
+    getExtensionRequestDetails: (request: any, styles: any) => any[];
+};
+
+export const ExtensionRequestDetails: React.FC<ExtensionRequestDetailsProps> =
+    ({ extensionRequests, styles, getExtensionRequestDetails }) => {
+        if (extensionRequests.length === 0) {
+            return (
+                <div
+                    className={styles.extensionNoRequests}
+                    data-testid="no-requests-message"
+                >
+                    <p>
+                        No extension requests found for this task, want to
+                        create one?
+                    </p>
+                </div>
+            );
+        }
+
+        return (
+            <>
+                {extensionRequests.map((request) => (
+                    <div
+                        key={request.id}
+                        className={styles.extensionExtensionRequest}
+                        data-testid={`extension-request-${request.id}`}
+                    >
+                        {getExtensionRequestDetails(request, styles).map(
+                            (item, idx) => (
+                                <div
+                                    key={idx}
+                                    className={styles.extensionDetailRow}
+                                    data-testid={`detail-row-${idx}`}
+                                >
+                                    <span
+                                        className={styles.extensionLabel}
+                                        data-testid={`label-${item.testId}`}
+                                    >
+                                        {item.label}
+                                    </span>
+                                    <span
+                                        className={`${styles.extensionValue} ${
+                                            item.className || ''
+                                        }`}
+                                        data-testid={`value-${item.testId}`}
+                                    >
+                                        {item.value}
+                                    </span>
+                                </div>
+                            )
+                        )}
+
+                        {request.reviewedBy &&
+                            (request.status === 'APPROVED' ||
+                                request.status === 'DENIED') && (
+                                <div
+                                    className={
+                                        request.status === 'APPROVED'
+                                            ? styles.extensionApprovalInfo
+                                            : styles.extensionRejectionInfo
+                                    }
+                                    data-testid={
+                                        request.status === 'APPROVED'
+                                            ? 'approval-info'
+                                            : 'denied-info'
+                                    }
+                                >
+                                    Your request was{' '}
+                                    {request.status.toLowerCase()} by{' '}
+                                    {request.reviewedBy}{' '}
+                                    {request.reviewedAt
+                                        ? formatToRelativeTime(
+                                              request.reviewedAt
+                                          )
+                                        : ''}
+                                </div>
+                            )}
+                    </div>
+                ))}
+            </>
+        );
+    };
diff --git a/src/components/ExtensionRequest/ExtensionStatusModal.module.scss b/src/components/ExtensionRequest/ExtensionStatusModal.module.scss
new file mode 100644
index 000000000..a6e5f659b
--- /dev/null
+++ b/src/components/ExtensionRequest/ExtensionStatusModal.module.scss
@@ -0,0 +1,127 @@
+@import '../../styles/variables.scss';
+
+.extensionModalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba($black, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.extensionModal {
+    background-color: $white;
+    padding: 1.9rem;
+    border-radius: 0.6rem;
+    width: 90%;
+    max-width: 48rem;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 1.3rem 3.1rem rgba($black, 0.7);
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 1rem;
+}
+
+.extensionModal h2 {
+    text-align: center;
+    margin-bottom: 1.9rem;
+    font-size: 2rem;
+    font-weight: 500;
+    color: rgba($black, 0.9);
+}
+
+.extensionDetailRow {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+    line-height: 1.5;
+}
+
+.extensionLabel {
+    font-weight: bold;
+    width: 10rem;
+    color: rgba($black, 0.9);
+    flex-shrink: 0;
+}
+
+.extensionValue {
+    flex: 1;
+    color: rgba($black, 0.9);
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+.extensionApprovalInfo,
+.extensionRejectionInfo {
+    margin-top: 0.6rem;
+    font-style: italic;
+    color: $black;
+    text-align: center;
+}
+
+.extensionButtonContainer {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.9rem;
+}
+
+.extensionCloseButton,
+.extensionRequestButton {
+    padding: 0.8rem 0;
+    border: none;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    width: 40%;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.extensionCloseButton {
+    background-color: $red;
+    color: $white;
+}
+
+.extensionRequestButton {
+    background-color: $green;
+    color: $white;
+}
+
+.extensionApproved {
+    font-weight: bold;
+    color: $green;
+}
+
+.extensionPending,
+.extensionDenied {
+    font-weight: bold;
+    color: $orange;
+}
+
+.extensionModalLoading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+    background-color: $white;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    max-width: 18.8rem;
+}
+
+.extensionNoRequests {
+    text-align: center;
+}
+
+.spinnerContainer {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 1rem 0;
+}
diff --git a/src/components/Modal/ExtensionStatusModal.tsx b/src/components/ExtensionRequest/ExtensionStatusModal.tsx
similarity index 59%
rename from src/components/Modal/ExtensionStatusModal.tsx
rename to src/components/ExtensionRequest/ExtensionStatusModal.tsx
index 7c614682a..43dd922bb 100644
--- a/src/components/Modal/ExtensionStatusModal.tsx
+++ b/src/components/ExtensionRequest/ExtensionStatusModal.tsx
@@ -1,8 +1,10 @@
 import React, { useRef, useEffect } from 'react';
-import styles from './modal.module.scss';
+import styles from './ExtensionStatusModal.module.scss';
 import { useGetSelfExtensionRequestsQuery } from '@/app/services/tasksApi';
 import { SmallSpinner } from '../tasks/card/SmallSpinner';
 import moment from 'moment';
+import { ExtensionRequestDetails } from './ExtensionRequestDetails';
+import { ExtensionRequest } from '@/interfaces/task.type';
 
 type ExtensionStatusModalProps = {
     isOpen: boolean;
@@ -17,15 +19,33 @@ const formatToDateTime = (timestamp: number) => {
     return moment(timestampMs).format('MM/DD/YYYY, h:mm:ss A');
 };
 
-const formatToRelativeTime = (timestamp: number) => {
+export const formatToRelativeTime = (timestamp: number) => {
     const timestampMs = timestamp < 1e12 ? timestamp * 1000 : timestamp;
     return moment(timestampMs).fromNow();
 };
 
-const getStatusClass = (status: string, styles: any) =>
-    status === 'APPROVED' ? styles.extensionApproved : styles.extensionPending;
+const getStatusClass = (status: string, styles: any) => {
+    switch (status) {
+        case 'APPROVED':
+            return styles.extensionApproved;
+        case 'DENIED':
+            return styles.extensionDenied;
+        default:
+            return styles.extensionPending;
+    }
+};
+
+type ExtensionDetailItem = {
+    label: string;
+    value: string;
+    className?: string;
+    testId: string;
+};
 
-const getExtensionRequestDetails = (request: any, styles: any) => [
+const getExtensionRequestDetails = (
+    request: ExtensionRequest,
+    styles: Record<string, string>
+): ExtensionDetailItem[] => [
     {
         label: 'Request :',
         value: `#${request.requestNumber}`,
@@ -135,65 +155,11 @@ export function ExtensionStatusModal({
             >
                 <h2 data-testid="modal-title">Extension Details</h2>
 
-                {extensionRequests.length > 0 ? (
-                    extensionRequests.map((request) => (
-                        <div
-                            key={request.id}
-                            className={styles.extensionExtensionRequest}
-                            data-testid={`extension-request-${request.id}`}
-                        >
-                            {getExtensionRequestDetails(request, styles).map(
-                                (item, idx) => (
-                                    <div
-                                        key={idx}
-                                        className={styles.extensionDetailRow}
-                                        data-testid={`detail-row-${idx}`}
-                                    >
-                                        <span
-                                            className={styles.extensionLabel}
-                                            data-testid={`label-${item.testId}`}
-                                        >
-                                            {item.label}
-                                        </span>
-                                        <span
-                                            className={`${
-                                                styles.extensionValue
-                                            } ${item.className || ''}`}
-                                            data-testid={`value-${item.testId}`}
-                                        >
-                                            {item.value}
-                                        </span>
-                                    </div>
-                                )
-                            )}
-
-                            {request.reviewedBy && (
-                                <div
-                                    className={styles.extensionApprovalInfo}
-                                    data-testid="approval-info"
-                                >
-                                    Your request was approved by{' '}
-                                    {request.reviewedBy}{' '}
-                                    {request.reviewedAt
-                                        ? formatToRelativeTime(
-                                              request.reviewedAt
-                                          )
-                                        : ''}
-                                </div>
-                            )}
-                        </div>
-                    ))
-                ) : (
-                    <div
-                        className={styles.extensionNoRequests}
-                        data-testid="no-requests-message"
-                    >
-                        <p>
-                            No extension requests found for this task, want to
-                            create one?
-                        </p>
-                    </div>
-                )}
+                <ExtensionRequestDetails
+                    extensionRequests={extensionRequests}
+                    styles={styles}
+                    getExtensionRequestDetails={getExtensionRequestDetails}
+                />
 
                 <div
                     className={styles.extensionButtonContainer}
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index b62a9b68e..5fe1cda85 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -127,127 +127,3 @@
         background-color: rgba($gray, 0.1);
     }
 }
-
-.extensionModalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba($black, 0.7);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.extensionModal {
-    background-color: $white;
-    padding: 1.9rem;
-    border-radius: 0.6rem;
-    width: 90%;
-    max-width: 48rem;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 1.3rem 3.1rem rgba($black, 0.7);
-    font-family: 'Segoe UI', sans-serif;
-    font-size: 1rem;
-}
-
-.extensionModal h2 {
-    text-align: center;
-    margin-bottom: 1.9rem;
-    font-size: 2rem;
-    font-weight: 500;
-    color: rgba($black, 0.9);
-}
-
-.extensionDetailRow {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-    line-height: 1.5;
-}
-
-.extensionLabel {
-    font-weight: bold;
-    width: 10rem;
-    color: rgba($black, 0.9);
-    flex-shrink: 0;
-}
-
-.extensionValue {
-    flex: 1;
-    color: rgba($black, 0.9);
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-}
-
-.extensionApprovalInfo {
-    margin-top: 0.6rem;
-    font-style: italic;
-    color: $black;
-    text-align: center;
-}
-
-.extensionButtonContainer {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-top: 1.9rem;
-}
-
-.extensionCloseButton,
-.extensionRequestButton {
-    padding: 0.8rem 0;
-    border: none;
-    border-radius: 0.4rem;
-    cursor: pointer;
-    width: 40%;
-    font-weight: bold;
-    font-size: 1rem;
-}
-
-.extensionCloseButton {
-    background-color: $red;
-    color: $white;
-}
-
-.extensionRequestButton {
-    background-color: $green;
-    color: $white;
-}
-
-.extensionApproved {
-    font-weight: bold;
-    color: $green;
-}
-
-.extensionPending {
-    font-weight: bold;
-    color: $orange;
-}
-
-.extensionModalLoading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 1100;
-    background-color: $white;
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    max-width: 18.8rem;
-}
-
-.extensionNoRequests {
-    text-align: center;
-}
-
-.spinnerContainer {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin: 1rem 0;
-}
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
index 7114ce835..a5357d353 100644
--- a/src/components/tasks/card/index.tsx
+++ b/src/components/tasks/card/index.tsx
@@ -39,7 +39,7 @@ import { PENDING, SAVED, ERROR_STATUS } from '../constants';
 import { StatusIndicator } from './StatusIndicator';
 import Suggestions from '../SuggestionBox/Suggestions';
 import { useRouter } from 'next/router';
-import { ExtensionStatusModal } from '@/components/Modal/ExtensionStatusModal';
+import { ExtensionStatusModal } from '@/components/ExtensionRequest/ExtensionStatusModal';
 
 const Card: FC<CardProps> = ({
     content,

From 30e5e3a66fcf6c3f5e319a5fb43fca9fc0efea3a Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Thu, 15 May 2025 00:04:45 +0530
Subject: [PATCH 15/18] added types

---
 .../ExtensionRequest/ExtensionRequestDetails.tsx    | 13 ++++++++-----
 .../ExtensionRequest/ExtensionStatusModal.tsx       |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
index cfa1c0f2f..b32e59ff5 100644
--- a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
+++ b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { formatToRelativeTime } from './ExtensionStatusModal';
-
+import { ExtensionDetailItem } from './ExtensionStatusModal';
+import { ExtensionRequest } from '@/interfaces/task.type';
 type ExtensionRequestDetailsProps = {
-    extensionRequests: any[];
-    styles: any;
-    getExtensionRequestDetails: (request: any, styles: any) => any[];
+    extensionRequests: ExtensionRequest[];
+    styles: Record<string, string>;
+    getExtensionRequestDetails: (
+        request: ExtensionRequest,
+        styles: Record<string, string>
+    ) => ExtensionDetailItem[];
 };
-
 export const ExtensionRequestDetails: React.FC<ExtensionRequestDetailsProps> =
     ({ extensionRequests, styles, getExtensionRequestDetails }) => {
         if (extensionRequests.length === 0) {
diff --git a/src/components/ExtensionRequest/ExtensionStatusModal.tsx b/src/components/ExtensionRequest/ExtensionStatusModal.tsx
index 43dd922bb..6d2cd13a7 100644
--- a/src/components/ExtensionRequest/ExtensionStatusModal.tsx
+++ b/src/components/ExtensionRequest/ExtensionStatusModal.tsx
@@ -35,7 +35,7 @@ const getStatusClass = (status: string, styles: any) => {
     }
 };
 
-type ExtensionDetailItem = {
+export type ExtensionDetailItem = {
     label: string;
     value: string;
     className?: string;

From 2c48eafb71ec0023f7eecd3b7a4d95cb4b7131c8 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Thu, 15 May 2025 00:41:55 +0530
Subject: [PATCH 16/18] small import refactor

---
 .../ExtensionRequest/ExtensionRequestDetails.tsx          | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
index b32e59ff5..8fafb73bd 100644
--- a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
+++ b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { formatToRelativeTime } from './ExtensionStatusModal';
-import { ExtensionDetailItem } from './ExtensionStatusModal';
+import {
+    formatToRelativeTime,
+    ExtensionDetailItem,
+} from './ExtensionStatusModal';
 import { ExtensionRequest } from '@/interfaces/task.type';
 type ExtensionRequestDetailsProps = {
     extensionRequests: ExtensionRequest[];
@@ -31,7 +33,7 @@ export const ExtensionRequestDetails: React.FC<ExtensionRequestDetailsProps> =
                 {extensionRequests.map((request) => (
                     <div
                         key={request.id}
-                        className={styles.extensionExtensionRequest}
+                        className={styles.extensionRequest}
                         data-testid={`extension-request-${request.id}`}
                     >
                         {getExtensionRequestDetails(request, styles).map(

From 959291bc7542d3284969ac2844184bf4afd852d3 Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Thu, 15 May 2025 00:51:44 +0530
Subject: [PATCH 17/18] small type refactor

---
 .../ExtensionRequest/ExtensionRequestDetails.tsx         | 7 ++-----
 src/components/ExtensionRequest/ExtensionStatusModal.tsx | 9 +--------
 src/interfaces/task.type.ts                              | 8 ++++++++
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
index 8fafb73bd..a5597a54f 100644
--- a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
+++ b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-    formatToRelativeTime,
-    ExtensionDetailItem,
-} from './ExtensionStatusModal';
-import { ExtensionRequest } from '@/interfaces/task.type';
+import { formatToRelativeTime } from './ExtensionStatusModal';
+import { ExtensionRequest, ExtensionDetailItem } from '@/interfaces/task.type';
 type ExtensionRequestDetailsProps = {
     extensionRequests: ExtensionRequest[];
     styles: Record<string, string>;
diff --git a/src/components/ExtensionRequest/ExtensionStatusModal.tsx b/src/components/ExtensionRequest/ExtensionStatusModal.tsx
index 6d2cd13a7..516ee89ac 100644
--- a/src/components/ExtensionRequest/ExtensionStatusModal.tsx
+++ b/src/components/ExtensionRequest/ExtensionStatusModal.tsx
@@ -4,7 +4,7 @@ import { useGetSelfExtensionRequestsQuery } from '@/app/services/tasksApi';
 import { SmallSpinner } from '../tasks/card/SmallSpinner';
 import moment from 'moment';
 import { ExtensionRequestDetails } from './ExtensionRequestDetails';
-import { ExtensionRequest } from '@/interfaces/task.type';
+import { ExtensionRequest, ExtensionDetailItem } from '@/interfaces/task.type';
 
 type ExtensionStatusModalProps = {
     isOpen: boolean;
@@ -35,13 +35,6 @@ const getStatusClass = (status: string, styles: any) => {
     }
 };
 
-export type ExtensionDetailItem = {
-    label: string;
-    value: string;
-    className?: string;
-    testId: string;
-};
-
 const getExtensionRequestDetails = (
     request: ExtensionRequest,
     styles: Record<string, string>
diff --git a/src/interfaces/task.type.ts b/src/interfaces/task.type.ts
index fb4db1bb2..b92a296be 100644
--- a/src/interfaces/task.type.ts
+++ b/src/interfaces/task.type.ts
@@ -158,6 +158,14 @@ export type taskStatusUpdateHandleProp = {
     newStatus: string;
     newProgress?: number;
 };
+
+export type ExtensionDetailItem = {
+    label: string;
+    value: string;
+    className?: string;
+    testId: string;
+};
+
 export type ExtensionRequest = {
     reason: string;
     newEndsOn: number;

From 71ef856290e455fcaab25e971bf754d6ff64877e Mon Sep 17 00:00:00 2001
From: RishiChaubey31 <cenationrishi31@gmail.com>
Date: Tue, 27 May 2025 00:12:38 +0530
Subject: [PATCH 18/18] added test id

---
 src/components/ExtensionRequest/ExtensionRequestDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
index a5597a54f..9ba15bcc2 100644
--- a/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
+++ b/src/components/ExtensionRequest/ExtensionRequestDetails.tsx
@@ -17,7 +17,7 @@ export const ExtensionRequestDetails: React.FC<ExtensionRequestDetailsProps> =
                     className={styles.extensionNoRequests}
                     data-testid="no-requests-message"
                 >
-                    <p>
+                    <p data-testid="first-extension-request-message">
                         No extension requests found for this task, want to
                         create one?
                     </p>