Fix date picker in milestone payments and toggle all in task selection

src/components/CreateProject/MilestoneSection.tsx

@@ -20,6 +20,7 @@ import {
   GridEventListener,
   useGridApiRef,
   GridRowModel,
+  GridRenderEditCellParams,
 } from "@mui/x-data-grid";
 import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
@@ -29,7 +30,11 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import StyledDataGrid from "../StyledDataGrid";
-import { INPUT_DATE_FORMAT, moneyFormatter } from "@/app/utils/formatUtil";
+import {
+  INPUT_DATE_FORMAT,
+  OUTPUT_DATE_FORMAT,
+  moneyFormatter,
+} from "@/app/utils/formatUtil";
 import isDate from "lodash/isDate";
 
 interface Props {
@@ -179,6 +184,26 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
         width: 200,
         type: "date",
         editable: true,
+        valueFormatter(params) {
+          return dayjs(params.value).format(OUTPUT_DATE_FORMAT);
+        },
+        renderEditCell(params: GridRenderEditCellParams<PaymentRow, Date>) {
+          return (
+            <Box sx={{ ".MuiFilledInput-input": { paddingY: "18px" } }}>
+              <DatePicker
+                format={OUTPUT_DATE_FORMAT}
+                value={dayjs(params.value)}
+                onChange={(value) =>
+                  params.api.setEditCellValue({
+                    id: params.id,
+                    field: params.field,
+                    value: value?.toDate(),
+                  })
+                }
+              />
+            </Box>
+          );
+        },
         valueGetter(params) {
           return new Date(params.value);
         },
@@ -230,14 +255,14 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
   const endDate = getValues("milestones")[taskGroupId]?.endDate;
 
   return (
-    <Stack gap={1}>
-      <Typography variant="overline" display="block" marginBlockEnd={1}>
-        {t("Stage Milestones")}
-      </Typography>
-      <LocalizationProvider
-        dateAdapter={AdapterDayjs}
-        adapterLocale={`${language}-hk`}
-      >
+    <LocalizationProvider
+      dateAdapter={AdapterDayjs}
+      adapterLocale={`${language}-hk`}
+    >
+      <Stack gap={1}>
+        <Typography variant="overline" display="block" marginBlockEnd={1}>
+          {t("Stage Milestones")}
+        </Typography>
         <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
           <Grid item xs>
             <FormControl fullWidth>
@@ -298,45 +323,45 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
             </FormControl>
           </Grid>
         </Grid>
-      </LocalizationProvider>
-      <Box
-        sx={(theme) => ({
-          marginBlockStart: 1,
-          marginInline: -3,
-          borderBottom: `1px solid ${theme.palette.divider}`,
-        })}
-      >
-        <StyledDataGrid
-          apiRef={apiRef}
-          autoHeight
-          sx={{
-            "--DataGrid-overlayHeight": "100px",
-            ".MuiDataGrid-row .MuiDataGrid-cell.hasError": {
-              border: "1px solid",
-              borderColor: "error.main",
-            },
-          }}
-          disableColumnMenu
-          editMode="row"
-          rows={payments}
-          rowModesModel={rowModesModel}
-          onRowModesModelChange={setRowModesModel}
-          onRowEditStop={handleEditStop}
-          processRowUpdate={processRowUpdate}
-          columns={columns}
-          getCellClassName={(params) => {
-            return params.row._error === params.field ? "hasError" : "";
-          }}
-          slots={{
-            footer: FooterToolbar,
-            noRowsOverlay: NoRowsOverlay,
-          }}
-          slotProps={{
-            footer: { child: footer },
-          }}
-        />
-      </Box>
-    </Stack>
+        <Box
+          sx={(theme) => ({
+            marginBlockStart: 1,
+            marginInline: -3,
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          })}
+        >
+          <StyledDataGrid
+            apiRef={apiRef}
+            autoHeight
+            sx={{
+              "--DataGrid-overlayHeight": "100px",
+              ".MuiDataGrid-row .MuiDataGrid-cell.hasError": {
+                border: "1px solid",
+                borderColor: "error.main",
+              },
+            }}
+            disableColumnMenu
+            editMode="row"
+            rows={payments}
+            rowModesModel={rowModesModel}
+            onRowModesModelChange={setRowModesModel}
+            onRowEditStop={handleEditStop}
+            processRowUpdate={processRowUpdate}
+            columns={columns}
+            getCellClassName={(params) => {
+              return params.row._error === params.field ? "hasError" : "";
+            }}
+            slots={{
+              footer: FooterToolbar,
+              noRowsOverlay: NoRowsOverlay,
+            }}
+            slotProps={{
+              footer: { child: footer },
+            }}
+          />
+        </Box>
+      </Stack>
+    </LocalizationProvider>
   );
 };
 

src/components/StyledDataGrid/StyledDataGrid.tsx

@@ -32,6 +32,10 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
     borderRadius: 0,
     maxHeight: 50,
   },
+  "& .MuiFilledInput-root": {
+    borderRadius: 0,
+    maxHeight: 50,
+  },
 }));
 
 export default StyledDataGrid;

src/components/TransferList/TransferList.tsx

@@ -90,6 +90,7 @@ const ItemList: React.FC<ItemListProps> = ({
         component="ul"
         subheader={
           <ListSubheader
+            sx={{ zIndex: 2 }}
             disableGutters
             component="li"
             onClick={handleToggleAll(items, checkedItems)}
@@ -109,7 +110,9 @@ const ItemList: React.FC<ItemListProps> = ({
               </ListItemIcon>
               <Stack>
                 <Typography variant="subtitle2">{label}</Typography>
-                <Typography variant="caption">{`${checkedItems.length}/${items.length} ${t("selected")}`}</Typography>
+                <Typography variant="caption">{`${checkedItems.length}/${
+                  items.length
+                } ${t("selected")}`}</Typography>
               </Stack>
             </Stack>
             <Divider />