From c494e6463b48b75ce2b38c48e494da5965736860 Mon Sep 17 00:00:00 2001
From: Wayne <wayne.lee@2fi-solutions.com.hk>
Date: Sat, 21 Sep 2024 17:56:46 +0900
Subject: [PATCH] Add project details on hover in timesheet project select

---
 src/app/api/projects/index.ts                 |  1 +
 .../TimeLeaveModal/TimeLeaveInputTable.tsx    |  2 +-
 .../TimesheetTable/ProjectSelect.tsx          | 46 ++++++++++++++++---
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/app/api/projects/index.ts b/src/app/api/projects/index.ts
index 788ba56..d208d0e 100644
--- a/src/app/api/projects/index.ts
+++ b/src/app/api/projects/index.ts
@@ -79,6 +79,7 @@ export interface ProjectWithTasks {
   id: number;
   code: string;
   status?: string;
+  description?: string;
   name: string;
   tasks: Task[];
   milestones: {
diff --git a/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx b/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
index 980dccc..c7e0734 100644
--- a/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
+++ b/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
@@ -194,7 +194,7 @@ const TimeLeaveInputTable: React.FC<Props> = ({
         ...model,
         [id]: { mode: GridRowModes.View, ignoreModifications: true },
       }));
-      const editedRow = entries.find((entry) => entry.id === id);
+      const editedRow = entries.find((entry) => getRowId(entry) === id);
       if (editedRow?._isNew) {
         setEntries((es) => es.filter((e) => getRowId(e) !== id));
       } else {
diff --git a/src/components/TimesheetTable/ProjectSelect.tsx b/src/components/TimesheetTable/ProjectSelect.tsx
index e824265..8a318a0 100644
--- a/src/components/TimesheetTable/ProjectSelect.tsx
+++ b/src/components/TimesheetTable/ProjectSelect.tsx
@@ -1,11 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 import {
   Autocomplete,
+  Box,
   Checkbox,
   Chip,
   ListSubheader,
   MenuItem,
   TextField,
+  Tooltip,
 } from "@mui/material";
 import { AssignedProject, ProjectWithTasks } from "@/app/api/projects";
 import { useTranslation } from "react-i18next";
@@ -184,13 +186,10 @@ const AutocompleteProjectSelect: React.FC<Props> = ({
       ) => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { key, ...rest } = params;
-        return (
-          <MenuItem
-            {...rest}
-            disableRipple
-            value={option.value}
-            key={`${option.value}--${option.label}`}
-          >
+        const childKey = `${option.value}--${option.label}`;
+
+        const content = (
+          <MenuItem {...rest} disableRipple value={option.value} key={childKey}>
             {multiple && (
               <Checkbox
                 disableRipple
@@ -202,6 +201,39 @@ const AutocompleteProjectSelect: React.FC<Props> = ({
             {option.label}
           </MenuItem>
         );
+
+        const associatedProject = allProjects.find(
+          (p) => p.id === option.value,
+        );
+
+        return associatedProject ? (
+          <Tooltip
+            key={childKey}
+            placement="right"
+            title={
+              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                <Box>
+                  <Box>{t("Project Code")}</Box>
+                  {associatedProject.code}
+                </Box>
+                <Box>
+                  <Box>{t("Project Name")}</Box>
+                  {associatedProject.name}
+                </Box>
+                {associatedProject.description && (
+                  <Box>
+                    <Box>{t("Project Description")}</Box>
+                    {associatedProject.description}
+                  </Box>
+                )}
+              </Box>
+            }
+          >
+            {content}
+          </Tooltip>
+        ) : (
+          content
+        );
       }}
       renderInput={(params) => <TextField {...params} error={error} />}
     />