From 0fdda8aa2cd9eea4305c1e870dd43ac5fd66ab46 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Mon, 18 Nov 2024 21:18:55 +0200
Subject: [PATCH] [Feat]: Display Timesheet Data and Refactor Code (#3342)

* feat: display timesheet data and refactor code

* fix: codeRabbit

* Update apps/web/lib/features/task/task-card.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../[memberId]/components/TimesheetAction.tsx |  28 +--
 .../components/TimesheetFilterDate.tsx        |   2 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  58 +++++-
 apps/web/app/interfaces/ITask.ts              |   8 +
 apps/web/app/interfaces/timer/ITimerLog.ts    | 110 ++++++----
 .../services/client/api/timer/timer-log.ts    |   8 +-
 .../app/services/server/requests/timesheet.ts |   6 +-
 apps/web/app/stores/time-logs.ts              |   4 +-
 apps/web/lib/components/types.ts              |  30 ++-
 .../calendar/table-time-sheet.tsx             | 196 ++++++++++--------
 apps/web/lib/features/task/task-card.tsx      |  54 ++---
 apps/web/lib/features/task/task-issue.tsx     |  18 +-
 12 files changed, 316 insertions(+), 206 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index 213b9ccc0..5e1de381d 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -8,12 +8,15 @@ type ITimesheetButton = {
     title?: string,
     onClick?: () => void,
     className?: string,
-    icon?: ReactNode
+    icon?: ReactNode,
+    disabled?: boolean
 
 }
-export const TimesheetButton = ({ className, icon, onClick, title }: ITimesheetButton) => {
+export const TimesheetButton = ({ className, icon, onClick, title, disabled }: ITimesheetButton) => {
     return (
-        <button onClick={onClick} className={clsxm("flex items-center gap-1 text-gray-400 font-normal leading-3", className)}>
+        <button disabled={disabled}
+            onClick={onClick}
+            className={clsxm("flex items-center gap-1 text-gray-400 font-normal leading-3", className)}>
             <div className="w-[16px] h-[16px] text-[#293241]">
                 {icon}
             </div>
@@ -23,32 +26,33 @@ export const TimesheetButton = ({ className, icon, onClick, title }: ITimesheetB
 }
 
 
-export type StatusType = "Pending" | "Approved" | "Rejected";
-export type StatusAction = "Deleted" | "Approved" | "Rejected";
+export type StatusType = "Pending" | "Approved" | "Denied";
+export type StatusAction = "Deleted" | "Approved" | "Denied";
 
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, onClick: (action: StatusAction) => void) => {
+export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, disabled: boolean, onClick: (action: StatusAction) => void) => {
 
     const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string; action: StatusAction }[]> = {
         Pending: [
             { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
-            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Rejected" },
+            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Denied" },
             { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ],
         Approved: [
-            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Rejected" },
+            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Denied" },
             { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ],
-        Rejected: [
+        Denied: [
             { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
             { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ]
     };
 
-    return (buttonsConfig[status] || buttonsConfig.Rejected).map((button, index) => (
+    return (buttonsConfig[status] || buttonsConfig.Denied).map((button, index) => (
         <TimesheetButton
-            className="hover:underline"
+            className="hover:underline text-sm gap-2"
+            disabled={disabled}
             key={index}
             icon={button.icon}
             onClick={() => onClick(button.action)}
@@ -60,5 +64,5 @@ export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, onC
 export const statusTable: { label: StatusType; description: string }[] = [
     { label: "Pending", description: "Awaiting approval or review" },
     { label: "Approved", description: "The item has been approved" },
-    { label: "Rejected", description: "The item has been rejected" },
+    { label: "Denied", description: "The item has been rejected" },
 ];
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index 9d5888f63..0331c05a5 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -163,7 +163,7 @@ export function TimesheetFilterDate({
                     </div>
                 )
                 }
-                <div className="border border-slate-100 dark:border-gray-800 my-1"></div>
+                {isVisible && <div className="border border-slate-100 dark:border-gray-800 my-1"></div>}
                 <div className="flex flex-col p-2">
                     {[
                         t('common.FILTER_TODAY'),
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 959f2ccdd..3352f9861 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -5,7 +5,7 @@ import { useQuery } from '../useQuery';
 import { useCallback, useEffect } from 'react';
 import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
-import { ITimeSheet } from '@/app/interfaces';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
@@ -15,25 +15,35 @@ interface TimesheetParams {
 
 export interface GroupedTimesheet {
     date: string;
-    tasks: ITimeSheet[];
+    tasks: TimesheetLog[];
 }
+
+
 interface DeleteTimesheetParams {
     organizationId: string;
     tenantId: string;
     logIds: string[];
 }
 
-const groupByDate = (items: ITimeSheet[]): GroupedTimesheet[] => {
+
+const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
-    type GroupedMap = Record<string, ITimeSheet[]>;
+    type GroupedMap = Record<string, TimesheetLog[]>;
+
     const groupedByDate = items.reduce<GroupedMap>((acc, item) => {
-        if (!item?.createdAt) return acc;
+        if (!item?.timesheet?.createdAt) {
+            console.warn('Skipping item with missing timesheet or createdAt:', item);
+            return acc;
+        }
         try {
-            const date = new Date(item.createdAt).toISOString().split('T')[0];
+            const date = new Date(item.timesheet.createdAt).toISOString().split('T')[0];
             if (!acc[date]) acc[date] = [];
             acc[date].push(item);
         } catch (error) {
-            console.error('Invalid date format:', item.createdAt);
+            console.error(
+                `Failed to process date for timesheet ${item.timesheet.id}:`,
+                { createdAt: item.timesheet.createdAt, error }
+            );
         }
         return acc;
     }, {});
@@ -83,6 +93,37 @@ export function useTimesheet({
         ]
     );
 
+    const getStatusTimesheet = (items: TimesheetLog[] = []) => {
+        const STATUS_MAP: Record<TimesheetStatus, TimesheetLog[]> = {
+            PENDING: [],
+            APPROVED: [],
+            DENIED: [],
+            DRAFT: [],
+            'IN REVIEW': []
+        };
+
+        return items.reduce((acc, item) => {
+            const status = item.timesheet.status;
+            if (isTimesheetStatus(status)) {
+                acc[status].push(item);
+            } else {
+                console.warn(`Invalid timesheet status: ${status}`);
+            }
+            return acc;
+        }, STATUS_MAP);
+    }
+
+    // Type guard
+    function isTimesheetStatus(status: unknown): status is TimesheetStatus {
+        const timesheetStatusValues: TimesheetStatus[] = [
+            "DRAFT",
+            "PENDING",
+            "IN REVIEW",
+            "DENIED",
+            "APPROVED"
+        ];
+        return Object.values(timesheetStatusValues).includes(status as TimesheetStatus);
+    }
 
 
     const handleDeleteTimesheet = async (params: DeleteTimesheetParams) => {
@@ -126,6 +167,7 @@ export function useTimesheet({
         timesheet: groupByDate(timesheet),
         getTaskTimesheet,
         loadingDeleteTimesheet,
-        deleteTaskTimesheet
+        deleteTaskTimesheet,
+        getStatusTimesheet
     };
 }
diff --git a/apps/web/app/interfaces/ITask.ts b/apps/web/app/interfaces/ITask.ts
index daa407299..0bb4459b3 100644
--- a/apps/web/app/interfaces/ITask.ts
+++ b/apps/web/app/interfaces/ITask.ts
@@ -137,6 +137,14 @@ export type ITaskStatusField =
 	| 'tags'
 	| 'status type';
 
+export type TimesheetStatus =
+	| "DRAFT"
+	| "PENDING"
+	| "IN REVIEW"
+	| "DENIED"
+	| "APPROVED";
+
+
 export type ITaskStatusStack = {
 	status: ITaskStatus;
 	size: ITaskSize;
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index 3e30da712..d6e469d25 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -1,66 +1,99 @@
-import { ITaskIssue } from "..";
+import { ITeamTask } from "../ITask";
 
-interface Project {
+interface BaseEntity {
     id: string;
-    name: string;
-    imageUrl: string;
-    membersCount: number;
-    image: string | null;
-}
-
-interface Task {
-    id: string;
-    title: string;
-    issueType?: ITaskIssue | null;
-    estimate: number | null;
-    taskStatus: string | null;
-    taskNumber: string;
+    isActive: boolean;
+    isArchived: boolean;
+    tenantId: string;
+    organizationId: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt: string | null;
+    archivedAt: string | null;
 }
 
-interface OrganizationContact {
-    id: string;
-    name: string;
-    imageUrl: string;
+interface ImageEntity {
+    imageUrl: string | null;
     image: string | null;
 }
 
-interface User {
-    id: string;
+interface User extends BaseEntity {
     firstName: string;
     lastName: string;
-    imageUrl: string;
-    image: string | null;
     name: string;
+    imageUrl: string | null;
+    image: string | null;
 }
 
-interface Employee {
-    id: string;
+interface Employee extends BaseEntity {
     isOnline: boolean;
     isAway: boolean;
     user: User;
     fullName: string;
 }
 
-export interface ITimeSheet {
-    deletedAt: string | null;
-    id: string;
-    createdAt: string;
-    updatedAt: string;
-    isActive: boolean;
-    isArchived: boolean;
-    archivedAt: string | null;
-    tenantId: string;
-    organizationId: string;
+interface TaskStatus extends BaseEntity {
+    name: string;
+    value: string;
+    description: string;
+    order: number;
+    icon: string;
+    color: string;
+    isSystem: boolean;
+    isCollapsed: boolean;
+    isDefault: boolean;
+    isTodo: boolean;
+    isInProgress: boolean;
+    isDone: boolean;
+    projectId: string | null;
+    organizationTeamId: string | null;
+    fullIconUrl: string;
+}
+interface Task extends ITeamTask {
+    taskStatus: TaskStatus | null,
+    number: number;
+    description: string;
+    startDate: string | null;
+}
+
+
+interface Timesheet extends BaseEntity {
+    duration: number;
+    keyboard: number;
+    mouse: number;
+    overall: number;
+    startedAt: string;
+    stoppedAt: string;
+    approvedAt: string | null;
+    submittedAt: string | null;
+    lockedAt: string | null;
+    editedAt: string | null;
+    isBilled: boolean;
+    status: string;
+    employeeId: string;
+    approvedById: string | null;
+    isEdited: boolean;
+}
+interface Project extends BaseEntity, ImageEntity {
+    name: string;
+    membersCount: number;
+}
+
+interface OrganizationContact extends BaseEntity, ImageEntity {
+    name: string;
+}
+
+export interface TimesheetLog extends BaseEntity {
     startedAt: string;
     stoppedAt: string;
     editedAt: string | null;
-    logType: string;
-    source: string;
+    logType: "TRACKED" | "MANUAL";
+    source: "WEB_TIMER" | "MOBILE_APP" | "DESKTOP_APP";
     description: string;
     reason: string | null;
     isBillable: boolean;
     isRunning: boolean;
-    version: number | null;
+    version: string | null;
     employeeId: string;
     timesheetId: string;
     projectId: string;
@@ -71,6 +104,7 @@ export interface ITimeSheet {
     task: Task;
     organizationContact: OrganizationContact;
     employee: Employee;
+    timesheet: Timesheet,
     duration: number;
     isEdited: boolean;
 }
diff --git a/apps/web/app/services/client/api/timer/timer-log.ts b/apps/web/app/services/client/api/timer/timer-log.ts
index 3715f8cc3..b35b7abea 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,4 +1,4 @@
-import { ITimeSheet, ITimerStatus } from '@app/interfaces';
+import { TimesheetLog, ITimerStatus } from '@app/interfaces';
 import { get, deleteApi } from '../../axios';
 
 export async function getTimerLogs(
@@ -53,7 +53,9 @@ export async function getTaskTimesheetLogsApi({
 		'relations[1]': 'task',
 		'relations[2]': 'organizationContact',
 		'relations[3]': 'employee.user',
-		'relations[4]': 'task.taskStatus'
+		'relations[4]': 'task.taskStatus',
+		'relations[5]': 'timesheet'
+
 	});
 
 	projectIds.forEach((id, index) => {
@@ -64,7 +66,7 @@ export async function getTaskTimesheetLogsApi({
 		params.append(`employeeIds[${index}]`, id);
 	});
 	const endpoint = `/timesheet/time-log?${params.toString()}`;
-	return get<ITimeSheet[]>(endpoint, { tenantId });
+	return get<TimesheetLog[]>(endpoint, { tenantId });
 }
 
 
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index 1c5fe6048..4040697dd 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,7 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { ITimeSheet } from '@/app/interfaces/timer/ITimerLog';
+import { TimesheetLog } from '@/app/interfaces/timer/ITimerLog';
 
 export type TTasksTimesheetStatisticsParams = {
 	tenantId: string;
@@ -72,7 +72,7 @@ type ITimesheetProps = {
 
 export function getTaskTimesheetRequest(params: ITimesheetProps, bearer_token: string) {
 	const queries = qs.stringify(params);
-	return serverFetch<ITimeSheet[]>({
+	return serverFetch<TimesheetLog[]>({
 		path: `/timesheet/time-log?activityLevel?${queries.toString()}`,
 		method: 'GET',
 		bearer_token,
@@ -88,7 +88,7 @@ type IDeleteTimesheetProps = {
 
 export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer_token: string) {
 	const { logIds = [] } = params;
-	return serverFetch<ITimeSheet[]>({
+	return serverFetch<TimesheetLog[]>({
 		path: `/timesheet/time-log/${logIds.join(',')}`,
 		method: 'DELETE',
 		bearer_token,
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index e73d66c64..d015ab9bf 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, ITimeSheet, OT_Member } from '../interfaces';
+import { IProject, ITeamTask, OT_Member, TimesheetLog } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -9,7 +9,7 @@ interface IFilterOption {
 
 export const timerLogsDailyReportState = atom<ITimerLogsDailyReport[]>([]);
 
-export const timesheetRapportState = atom<ITimeSheet[]>([])
+export const timesheetRapportState = atom<TimesheetLog[]>([])
 
 export const timesheetFilterEmployeeState = atom<OT_Member[]>([]);
 export const timesheetFilterProjectState = atom<IProject[]>([]);
diff --git a/apps/web/lib/components/types.ts b/apps/web/lib/components/types.ts
index 30755c619..30c0412ef 100644
--- a/apps/web/lib/components/types.ts
+++ b/apps/web/lib/components/types.ts
@@ -6,21 +6,37 @@ type StatusColorScheme = {
 };
 
 const STATUS_COLORS: Record<string, StatusColorScheme> = {
-    Pending: {
+    PENDING: {
         bg: 'bg-[#FBB650]',
         text: 'text-[#FBB650]',
-        bgOpacity: 'rgba(251, 182, 80, 0.1)'
+        bgOpacity: 'rgba(251, 182, 80, 0.1)',
     },
-    Approved: {
+    APPROVED: {
         bg: 'bg-[#30B366]',
         text: 'text-[#30B366]',
-        bgOpacity: 'rgba(48, 179, 102, 0.1)'
+        bgOpacity: 'rgba(48, 179, 102, 0.1)',
     },
-    Rejected: {
+    DENIED: {
         bg: 'bg-[#dc2626]',
         text: 'text-[#dc2626]',
-        bgOpacity: 'rgba(220, 38, 38, 0.1)'
-    }
+        bgOpacity: 'rgba(220, 38, 38, 0.1)',
+    },
+    DRAFT: {
+        bg: 'bg-gray-300',
+        text: 'text-gray-500',
+        bgOpacity: 'rgba(220, 220, 220, 0.1)',
+    },
+    'IN REVIEW': {
+        bg: 'bg-blue-500',
+        text: 'text-blue-500',
+        bgOpacity: 'rgba(59, 130, 246, 0.1)',
+    },
+    DEFAULT: {
+        bg: 'bg-gray-100',
+        text: 'text-gray-400',
+        bgOpacity: 'rgba(243, 244, 246, 0.1)',
+    },
+
 };
 
 
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index bd937ee60..24f5d3202 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -24,10 +24,6 @@ import {
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@components/ui/dropdown-menu"
-import {
-    Table,
-    TableBody
-} from "@components/ui/table"
 import {
     Select,
     SelectContent,
@@ -59,8 +55,9 @@ import { EditTaskModal, RejectSelectedModal, StatusAction, StatusType, getTimesh
 import { useTranslations } from "next-intl"
 import { formatDate } from "@/app/helpers"
 import { GroupedTimesheet, useTimesheet } from "@/app/hooks/features/useTimesheet"
-
-
+import { TaskNameInfoDisplay } from "../../task/task-displays"
+import { TimesheetStatus } from "@/app/interfaces"
+import dayjs from 'dayjs';
 
 
 export const columns: ColumnDef<TimeSheet>[] = [
@@ -178,7 +175,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
         openModal,
         closeModal
     } = useModal();
-    const { deleteTaskTimesheet, loadingDeleteTimesheet } = useTimesheet({})
+    const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({})
     const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions()
     const [isDialogOpen, setIsDialogOpen] = React.useState(false);
     const handleConfirm = () => {
@@ -198,7 +195,6 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
     const handleCancel = () => {
         setIsDialogOpen(false);
     };
-
     const t = useTranslations();
     const [sorting, setSorting] = React.useState<SortingState>([])
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
@@ -223,18 +219,13 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
         },
     })
 
-    const groupedRows = {
-        Pending: table.getRowModel().rows.filter(row => row.original.status === "Pending"),
-        Approved: table.getRowModel().rows.filter(row => row.original.status === "Approved"),
-        Rejected: table.getRowModel().rows.filter(row => row.original.status === "Rejected")
-    };
 
     const handleButtonClick = (action: StatusAction) => {
         switch (action) {
             case 'Approved':
                 // TODO: Implement approval logic
                 break;
-            case 'Rejected':
+            case 'Denied':
                 openModal()
                 break;
             case 'Deleted':
@@ -268,82 +259,93 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
                 isOpen={isOpen}
             />
             <div className="rounded-md">
-                <Table className="order rounded-md dark:bg-dark--theme-light">
-                    <TableBody className="w-full rounded-md h-[400px] overflow-y-auto dark:bg-dark--theme">
-                        {data?.map((plan, index) => (
-                            <div key={index}>
-                                <div className="h-[48px] flex justify-between items-center w-full bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1 border-gray-400 px-5 text-[#71717A] font-medium">
-                                    <span>{formatDate(plan?.date)}</span>
-                                    <span>64:30h</span>
-                                </div>
+                {data?.map((plan, index) => (
+                    <div key={index}>
+                        <div className={clsxm(
+                            "h-[48px] flex justify-between items-center w-full",
+                            "bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1",
+                            "border-gray-400 px-5 text-[#71717A] font-medium")}>
+                            <span>{formatDate(plan.date)}</span>
+                            <span>64:30h</span>
+                        </div>
+
+                        <Accordion type="single" collapsible>
+                            {Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
+                                <AccordionItem key={status}
+                                    value={
+                                        status === 'DENIED'
+                                            ? "REJECTED" : status}
+                                    className="p-1 rounded"
+                                >
+                                    <AccordionTrigger
+                                        style={{ backgroundColor: statusColor(status).bgOpacity }}
+                                        type="button"
+                                        className={clsxm(
+                                            "flex flex-row-reverse justify-end items-center w-full h-[50px] rounded-sm gap-x-2 hover:no-underline px-2",
+                                            statusColor(status).text,
+                                        )}>
+                                        <div className="flex items-center space-x-1 justify-between w-full">
+                                            <div className="flex items-center space-x-1">
+                                                <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
+                                                <div className="flex items-center gap-x-1">
+                                                    <span className="text-base font-normal uppercase text-gray-400">
+                                                        {status === 'DENIED' ? "REJECTED" : status}
+                                                    </span>
+                                                    <span className="text-gray-400 text-[14px]">({rows?.length})</span>
+                                                </div>
+                                                <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
+                                                    <span className="text-[#5f5f61]">Total</span>
+                                                    <span className="text-[#868688]">24:30h</span>
+                                                </Badge>
+                                            </div>
+                                            <div className={clsxm("flex items-center gap-2 p-x-1 capitalize")}>
+                                                {getTimesheetButtons(status as StatusType, t, true, handleButtonClick)}
+                                            </div>
+                                        </div>
+                                    </AccordionTrigger>
+                                    <AccordionContent className="flex flex-col w-full">
+                                        {rows?.map((task) => (
+                                            <div
+                                                key={task.id}
+                                                style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
+                                                className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}>
+                                                <Checkbox className="h-5 w-5"
+                                                    onCheckedChange={() => handleSelectRowTimesheet(task.id)}
+                                                    checked={selectTimesheet.includes(task.id)}
+                                                />
+                                                <div className="flex-[2]">
+                                                    <TaskNameInfoDisplay
+                                                        task={task.task}
+                                                        className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
+                                                        taskTitleClassName={clsxm('text-sm text-ellipsis overflow-hidden ')}
+                                                        showSize={true}
+                                                        dash
+                                                        taskNumberClassName="text-sm"
+                                                    />
+                                                </div>
+                                                <span className="flex-1">{task.project && task.project.name}</span>
+                                                <div className="flex items-center gap-x-2 flex-1">
+                                                    <img className="h-8 w-8 rounded-full" src={task.employee.user.imageUrl!} alt="" />
+                                                    <span className="flex-1 font-medium">{task.employee.fullName}</span>
+                                                </div>
+                                                <div className="flex-1">
+                                                    <Badge className={`${getBadgeColor(task.timesheet.status as TimesheetStatus)}  rounded-md py-1 px-2 text-center font-medium text-black`}>
+                                                        {task.timesheet.status}
+                                                    </Badge>
 
-                                <Accordion type="single" collapsible>
-                                    {Object.entries(groupedRows).map(([status, rows]) => (
-                                        <AccordionItem key={status} value={status} className="p-1 rounded">
-                                            <AccordionTrigger
-                                                style={{ backgroundColor: statusColor(status).bgOpacity }}
-                                                type="button"
-                                                className={clsxm(
-                                                    "flex flex-row-reverse justify-end items-center w-full h-[50px] rounded-sm gap-x-2 hover:no-underline px-2",
-                                                    statusColor(status).text,
-                                                )}
-                                            >
-                                                <div className="flex items-center space-x-1 justify-between w-full">
-                                                    <div className="flex items-center space-x-1">
-                                                        <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
-                                                        <div className="flex items-center gap-x-1">
-                                                            <span className="text-base font-normal uppercase text-gray-400">
-                                                                {status}
-                                                            </span>
-                                                            <span className="text-gray-400 text-[14px]">({rows.length})</span>
-                                                        </div>
-                                                        <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
-                                                            <span className="text-[#5f5f61]">Total</span>
-                                                            <span className="text-[#868688]">24:30h</span>
-                                                        </Badge>
-                                                    </div>
-                                                    <div className={clsxm("flex items-center gap-2 p-x-1")}>
-                                                        {getTimesheetButtons(status as StatusType, t, handleButtonClick)}
-                                                    </div>
                                                 </div>
-                                            </AccordionTrigger>
-                                            <AccordionContent className="flex flex-col w-full">
-                                                {plan.tasks?.map((task) => (
-                                                    <div
-                                                        key={task.id}
-                                                        style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
-                                                        className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}
-                                                    >
-                                                        <Checkbox className="h-5 w-5"
-                                                            onClick={() => handleSelectRowTimesheet(task.id)}
-                                                            checked={selectTimesheet.includes(task.id)}
-                                                        />
-                                                        <div className="flex-[2]">
-                                                            {/* <TaskNameInfoDisplay
-                                                                task={task}
-                                                                className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
-                                                                taskTitleClassName={clsxm('text-sm')}
-                                                                showSize={true}
-                                                                dash
-                                                                taskNumberClassName="text-sm"
-                                                            /> */}
-                                                        </div>
-                                                        <span className="flex-1">{task.isActive}</span>
-                                                        <span className="flex-1">{task.employee.fullName}</span>
-                                                        <span className="flex-1">
-                                                            {/* {task.}h, {task.estimateDays}j, {task.estimateMinutes}m */}
-                                                        </span>
-                                                        <TaskActionMenu idTasks={task.id} />
-                                                    </div>
-                                                ))}
-                                            </AccordionContent>
-                                        </AccordionItem>
-                                    ))}
-                                </Accordion>
-                            </div>
-                        ))}
-                    </TableBody>
-                </Table>
+                                                <span className="flex-1 font-medium">
+                                                    {dayjs(task.timesheet.createdAt).format("HH:mm:ss")}
+                                                </span>
+                                                <TaskActionMenu idTasks={task.id} />
+                                            </div>
+                                        ))}
+                                    </AccordionContent>
+                                </AccordionItem>
+                            ))}
+                        </Accordion>
+                    </div>
+                ))}
             </div>
             <div className="flex items-center justify-end space-x-2 py-4">
                 <div className="flex-1 text-sm text-muted-foreground">
@@ -551,3 +553,21 @@ export const StatusTask = () => {
         </>
     )
 }
+
+
+const getBadgeColor = (timesheetStatus: TimesheetStatus | null) => {
+    switch (timesheetStatus) {
+        case 'DRAFT':
+            return 'bg-gray-300';
+        case 'PENDING':
+            return 'bg-yellow-400';
+        case 'IN REVIEW':
+            return 'bg-blue-500';
+        case 'DENIED':
+            return 'bg-red-500';
+        case 'APPROVED':
+            return 'bg-green-500';
+        default:
+            return 'bg-gray-100';
+    }
+};
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index c4d97f026..ae4d67e6f 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -646,39 +646,39 @@ function TaskCardMenu({
 
 									{(viewType == 'default' ||
 										(viewType === 'dailyplan' && planMode === 'Outstanding')) && (
-										<>
-											<Divider type="HORIZONTAL" />
-											<div className="mt-3">
-												{!taskPlannedToday && (
-													<li className="mb-2">
-														<PlanTask
-															planMode="today"
-															taskId={task.id}
-															employeeId={profile?.member?.employeeId ?? ''}
-															taskPlannedToday={taskPlannedToday}
-														/>
-													</li>
-												)}
-												{!taskPlannedTomorrow && (
+											<>
+												<Divider type="HORIZONTAL" />
+												<div className="mt-3">
+													{!taskPlannedToday && (
+														<li className="mb-2">
+															<PlanTask
+																planMode="today"
+																taskId={task.id}
+																employeeId={profile?.member?.employeeId ?? ''}
+																taskPlannedToday={taskPlannedToday}
+															/>
+														</li>
+													)}
+													{!taskPlannedTomorrow && (
+														<li className="mb-2">
+															<PlanTask
+																planMode="tomorrow"
+																taskId={task.id}
+																employeeId={profile?.member?.employeeId ?? ''}
+																taskPlannedForTomorrow={taskPlannedTomorrow}
+															/>
+														</li>
+													)}
 													<li className="mb-2">
 														<PlanTask
-															planMode="tomorow"
+															planMode="custom"
 															taskId={task.id}
 															employeeId={profile?.member?.employeeId ?? ''}
-															taskPlannedForTomorrow={taskPlannedTomorrow}
 														/>
 													</li>
-												)}
-												<li className="mb-2">
-													<PlanTask
-														planMode="custom"
-														taskId={task.id}
-														employeeId={profile?.member?.employeeId ?? ''}
-													/>
-												</li>
-											</div>
-										</>
-									)}
+												</div>
+											</>
+										)}
 
 									{viewType === 'dailyplan' &&
 										(planMode === 'Today Tasks' || planMode === 'Future Tasks') && (
diff --git a/apps/web/lib/features/task/task-issue.tsx b/apps/web/lib/features/task/task-issue.tsx
index 1b494a2f8..8c13db8ed 100644
--- a/apps/web/lib/features/task/task-issue.tsx
+++ b/apps/web/lib/features/task/task-issue.tsx
@@ -1,5 +1,5 @@
 import { useModal } from '@app/hooks';
-import { IClassName, IssueType, ITaskIssue, ITeamTask, ITimeSheet, Nullable } from '@app/interfaces';
+import { IClassName, IssueType, ITaskIssue, ITeamTask, Nullable } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { BackButton, Button, Card, InputField, Modal, Text } from 'lib/components';
 import { NoteIcon, BugIcon, Square4StackIcon, Square4OutlineIcon } from 'assets/svg';
@@ -212,19 +212,3 @@ export function CreateTaskIssueModal({ open, closeModal }: { open: boolean; clos
 		</Modal>
 	);
 }
-
-
-export function TaskIssueStatusTimesheet({
-	task,
-	className,
-	showIssueLabels
-}: { task: Nullable<ITimeSheet>; showIssueLabels?: boolean } & IClassName) {
-	return (
-		<TaskStatus
-			{...taskIssues[task?.task.issueType || 'Task']}
-			showIssueLabels={showIssueLabels}
-			issueType="issue"
-			className={clsxm('rounded-md px-2 text-white', className)}
-		/>
-	);
-}