fix: project timesheet table.

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { useProject } from '../../../hooks';
+import { useProject, useProjectTimeEntries } from '../../../hooks';
 
 const ProjectTimesheetContext = React.createContext();
 
@@ -12,6 +12,14 @@ function ProjectTimesheetsProvider({ ...props }) {
   const { id } = useParams();
   const projectId = parseInt(id, 10);
 
+  // fetch project time entries.
+const {
+    data: { projectTimeEntries },
+    isLoading: isProjectTimeEntriesLoading,
+  } = useProjectTimeEntries(projectId, {
+    enabled: !!projectId,
+  });
+
   // Handle fetch project detail.
   const { data: project } = useProject(projectId, {
     enabled: !!projectId,
@@ -21,6 +29,8 @@ function ProjectTimesheetsProvider({ ...props }) {
   const provider = {
     projectId,
     project,
+    projectTimeEntries,
+    isProjectTimeEntriesLoading,
   };
 
   return <ProjectTimesheetContext.Provider value={provider} {...props} />;

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx

@@ -6,10 +6,13 @@ import {
   TableSkeletonHeader,
 } from '@/components';
 import { ActionsMenu } from './components';
-import { useProjectTimesheetColumns } from './hooks';
 import { TABLES } from '@/constants/tables';
+import { useProjectTimesheetColumns } from './hooks';
 import { useMemorizedColumnsWidths } from '@/hooks';
+import { useProjectTimesheetContext } from './ProjectTimesheetsProvider';
 import withSettings from '@/containers/Settings/withSettings';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 import { compose } from '@/utils';
 
@@ -20,12 +23,25 @@ import { compose } from '@/utils';
 function ProjectTimesheetsTableRoot({
   // #withSettings
   timesheetsTableSize,
+
+  // #withDialog
+  openDialog,
+  // #withAlertsActions
+  openAlert,
 }) {
+  const { projectTimeEntries } = useProjectTimesheetContext();
+
   // Retrieve project timesheet table columns.
   const columns = useProjectTimesheetColumns();
 
   // Handle delete timesheet.
-  const handleDeleteTimesheet = () => {};
+  const handleDeleteTimesheet = ({ id }) => {
+    openAlert('project-timesheet-delete', { timesheetId: id });
+  };
+
+  const handleEditTimesheet = ({ id }) => {
+    openDialog('project-time-entry-form', { timesheetId: id, action: 'edit' });
+  };
 
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
@@ -34,7 +50,7 @@ function ProjectTimesheetsTableRoot({
   return (
     <ProjectTimesheetDataTable
       columns={columns}
-      data={[]}
+      data={projectTimeEntries}
       manualSortBy={true}
       noInitialFetch={true}
       sticky={true}
@@ -47,11 +63,14 @@ function ProjectTimesheetsTableRoot({
       size={timesheetsTableSize}
       payload={{
         onDelete: handleDeleteTimesheet,
+        onEdit: handleEditTimesheet,
       }}
     />
   );
 }
 export const ProjectTimesheetsTable = compose(
+  withAlertsActions,
+  withDialogActions,
   withSettings(({ timesheetsSettings }) => ({
     timesheetsTableSize: timesheetsSettings?.tableSize,
   })),

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx

@@ -9,13 +9,18 @@ import { safeCallback, firstLettersArgs } from '@/utils';
  * Table actions cell.
  */
 export function ActionsMenu({
-  payload: { onDelete, onViewDetails },
+  payload: { onDelete, onEdit },
   row: { original },
 }) {
   return (
     <Menu>
       <MenuItem
-        text={intl.get('timesheets.actions.delete_timesheet')}
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('timesheets.action.edit_timesheet')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('timesheets.action.delete_timesheet')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
         icon={<Icon icon="trash-16" iconSize={16} />}

src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts

@@ -31,7 +31,7 @@ export function useProjectTimesheetColumns() {
         id: 'duration',
         Header: '',
         accessor: 'duration',
-        width: 100,
+        width: 120,
         className: 'duration',
         align: 'right',
         clickable: true,

src/containers/Projects/hooks/projectTimeEntry.tsx

@@ -87,7 +87,7 @@ export function useProjectTimeEntry(timeId, props, requestProps) {
     [t.PROJECT_TIME_ENTRY, timeId],
     { method: 'get', url: `projects/times/${timeId}`, ...requestProps },
     {
-      select: (res) => res.data.time,
+      select: (res) => res.data.time_entry,
       defaultData: {},
       ...props,
     },
@@ -95,7 +95,7 @@ export function useProjectTimeEntry(timeId, props, requestProps) {
 }
 
 const transformProjectTimeEntries = (res) => ({
-  projectTasks: res.data.times,
+  projectTimeEntries: res.data.timeline,
 });
 
 /**
@@ -105,10 +105,10 @@ const transformProjectTimeEntries = (res) => ({
  * @param requestProps
  * @returns
  */
-export function useProjectTimeEntries(taskId, props, requestProps) {
+export function useProjectTimeEntries(id, props, requestProps) {
   return useRequestQuery(
-    [t.PROJECT_TIME_ENTRIES, taskId],
+    [t.PROJECT_TIME_ENTRIES, id],
-    { method: 'get', url: `projects/tasks/${taskId}/times`, ...requestProps },
+    { method: 'get', url: `projects/${id}/times`, ...requestProps },
     {
       select: transformProjectTimeEntries,
       defaultData: {