update resource allocation number digit

src/components/CreateProject/ResourceAllocation.tsx

@@ -30,6 +30,10 @@ interface Props {
   grades: Grade[];
 }
 
+const baseCellSx: SxProps = {
+  textAlign: "right",
+};
+
 const leftBorderCellSx: SxProps = {
   borderLeft: "1px solid",
   borderColor: "divider",
@@ -142,11 +146,11 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
                   {t("Allocation Type")}
                 </TableCell>
                 {grades.map((column, idx) => (
-                  <TableCell key={`${column.id}${idx}`}>
+                  <TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
                     {column.name}
                   </TableCell>
                 ))}
-                <TableCell sx={leftBorderCellSx}>{t("Total")}</TableCell>
+                <TableCell sx={{...baseCellSx, leftBorderCellSx}}>{t("Total")}</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -160,12 +164,12 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
                     // renderValue={(val) => percentFormatter.format(val)}
                     onChange={makeUpdatePercentage(column.id)}
                     convertValue={(inputValue) => Number(inputValue)}
-                    cellSx={{ backgroundColor: "primary.lightest" }}
-                    inputSx={{ width: "3rem" }}
+                    cellSx={{ ...baseCellSx, backgroundColor: "primary.lightest" }}
+                    inputSx={{ ...baseCellSx, width: "3rem" }}
                     error={manhourPercentageByGrade[column.id] < 0}
                   />
                 ))}
-                <TableCell sx={{ ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
+                <TableCell sx={{...baseCellSx, ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
                   {((totalPercentage.toString().includes(".") && totalPercentage.toString() || totalPercentage.toFixed(1)) + "%")}
                   {/* {percentFormatter.format(totalPercentage)} */}
                 </TableCell>
@@ -173,13 +177,13 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
               <TableRow>
                 <TableCell sx={rightBorderCellSx}>{t("Manhour")}</TableCell>
                 {grades.map((column, idx) => (
-                  <TableCell key={`${column.id}${idx}`}>
+                  <TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
                     {manhourFormatter.format(
                       manhourPercentageByGrade[column.id] / 100 * totalManhour,
                     )}
                   </TableCell>
                 ))}
-                <TableCell sx={leftBorderCellSx}>
+                <TableCell sx={{...baseCellSx, leftBorderCellSx}}>
                   {manhourFormatter.format(totalManhour)}
                 </TableCell>
               </TableRow>
@@ -255,7 +259,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
               <TableRow>
                 <TableCell>{t("Stage")}</TableCell>
                 <TableCell sx={leftBorderCellSx}>{t("Task Count")}</TableCell>
-                <TableCell colSpan={2} sx={leftRightBorderCellSx}>
+                <TableCell colSpan={2} sx={{...baseCellSx, ...leftRightBorderCellSx}}>
                   {t("Total Manhour")}
                 </TableCell>
                 {grades.map((column, idx) => (
@@ -269,7 +273,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
               {taskGroups.map((tg, idx) => (
                 <TableRow key={`${tg.id}${idx}`}>
                   <TableCell>{tg.name}</TableCell>
-                  <TableCell sx={leftBorderCellSx}>
+                  <TableCell sx={{...baseCellSx, ...leftBorderCellSx}}>
                     {currentTaskGroups[tg.id].taskIds.length}
                   </TableCell>
                   <TableCellEdit
@@ -279,12 +283,13 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                     onChange={makeUpdatePercentage(tg.id)}
                     convertValue={(inputValue) => Number(inputValue)}
                     cellSx={{
+                      ...baseCellSx,
                       backgroundColor: "primary.lightest",
                     }}
-                    inputSx={{ width: "3rem" }}
+                    inputSx={{ ...baseCellSx, width: "3rem" }}
                     error={currentTaskGroups[tg.id].percentAllocation < 0}
                   />
-                  <TableCell sx={rightBorderCellSx}>
+                  <TableCell sx={{...baseCellSx, ...rightBorderCellSx}}>
                     {manhourFormatter.format(
                       currentTaskGroups[tg.id].percentAllocation / 100 * totalManhour,
                     )}
@@ -293,7 +298,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                     const stageHours =
                       currentTaskGroups[tg.id].percentAllocation / 100 * totalManhour;
                     return (
-                      <TableCell key={`${column.id}${idx}`}>
+                      <TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
                         {manhourFormatter.format(
                           manhourPercentageByGrade[column.id] / 100 * stageHours,
                         )}
@@ -304,13 +309,13 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
               ))}
               <TableRow>
                 <TableCell>{t("Total")}</TableCell>
-                <TableCell sx={leftBorderCellSx}>
+                <TableCell sx={{...baseCellSx, ...leftBorderCellSx}}>
                   {Object.values(currentTaskGroups).reduce(
                     (acc, tg) => acc + tg.taskIds.length,
                     0,
                   )}
                 </TableCell>
-                <TableCell sx={{
+                <TableCell sx={{...baseCellSx,
                   ...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) === 100 && leftBorderCellSx),
                   ...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) !== 100 && errorCellSx)
                 }}
@@ -337,7 +342,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                       0,
                       ).toFixed(1) + "%" } */}
                 </TableCell>
-                <TableCell sx={rightBorderCellSx}>
+                <TableCell sx={{...baseCellSx, ...rightBorderCellSx}}>
                   {manhourFormatter.format(
                     Object.values(currentTaskGroups).reduce(
                       (acc, tg) => acc + tg.percentAllocation / 100 * totalManhour,
@@ -355,7 +360,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                     0,
                   );
                   return (
-                    <TableCell key={`${column.id}${idx}`}>
+                    <TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
                       {manhourFormatter.format(hours)}
                     </TableCell>
                   );

src/components/CreateTaskTemplate/ResourceAllocation.tsx

@@ -27,6 +27,10 @@ interface Props {
     grades: Grade[];
 }
 
+const baseCellSx: SxProps = {
+    textAlign: "right",
+};
+
 const leftBorderCellSx: SxProps = {
     borderLeft: "1px solid",
     borderColor: "divider",
@@ -104,11 +108,11 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
                                     {t("Allocation Type")}
                                 </TableCell>
                                 {grades.map((column, idx) => (
-                                    <TableCell key={`${column.id}${idx}`}>
+                                    <TableCell sx={baseCellSx} key={`${column.id}${idx}`}>
                                         {column.name}
                                     </TableCell>
                                 ))}
-                                <TableCell sx={leftBorderCellSx}>{t("Total")}</TableCell>
+                                <TableCell sx={{...baseCellSx, leftBorderCellSx}}>{t("Total")}</TableCell>
                             </TableRow>
                         </TableHead>
                         <TableBody>
@@ -122,12 +126,12 @@ const ResourceAllocationByGrade: React.FC<Props> = ({ grades }) => {
                                         // renderValue={(val) => val.toFixed(1) + "%"}
                                         onChange={makeUpdatePercentage(column.id)}
                                         convertValue={(inputValue) => Number(inputValue)}
-                                        cellSx={{ backgroundColor: "primary.lightest" }}
-                                        inputSx={{ width: "3rem" }}
+                                        cellSx={{ ...baseCellSx, backgroundColor: "primary.lightest" }}
+                                        inputSx={{ ...baseCellSx, width: "3rem" }}
                                         error={manhourPercentageByGrade[column.id] < 0}
                                     />
                                 ))}
-                                <TableCell sx={{ ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
+                                <TableCell sx={{ ...baseCellSx, ...(totalPercentage === 100 && leftBorderCellSx), ...(totalPercentage !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main" }) }}>
                                     {((totalPercentage.toString().includes(".") && totalPercentage.toString() || totalPercentage.toFixed(1) )+ "%")}
                                     {/* {totalPercentage.toFixed(1) + "%"} */}
                                 </TableCell>
@@ -204,8 +208,8 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                         <TableHead>
                             <TableRow>
                                 <TableCell>{t("Stage")}</TableCell>
-                                <TableCell sx={leftBorderCellSx}>{t("Task Count")}</TableCell>
-                                <TableCell colSpan={2} sx={leftRightBorderCellSx}>
+                                <TableCell sx={{...baseCellSx, leftBorderCellSx}}>{t("Task Count")}</TableCell>
+                                <TableCell colSpan={2} sx={{...baseCellSx, leftRightBorderCellSx}}>
                                     {t("Total Manhour")}
                                 </TableCell>
                             </TableRow>
@@ -214,7 +218,7 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                             {taskGroups.map((tg, idx) => (
                                 <TableRow key={`${tg.id}${idx}`}>
                                     <TableCell>{tg.name}</TableCell>
-                                    <TableCell sx={leftBorderCellSx}>
+                                    <TableCell sx={{...baseCellSx, leftBorderCellSx}}>
                                         {currentTaskGroups[tg.id].taskIds.length}
                                     </TableCell>
                                     <TableCellEdit
@@ -224,23 +228,25 @@ const ResourceAllocationByStage: React.FC<Props> = ({ grades, allTasks }) => {
                                         onChange={makeUpdatePercentage(tg.id)}
                                         convertValue={(inputValue) => Number(inputValue)}
                                         cellSx={{
+                                            ...baseCellSx,
                                             backgroundColor: "primary.lightest",
                                             ...(currentTaskGroups[tg.id].percentAllocation < 0 && { ...errorCellSx, borderBottom: "0px", borderRight: "1px solid", borderColor: "error.main"})
                                         }}
-                                        inputSx={{ width: "3rem" }}
+                                        inputSx={{ ...baseCellSx, width: "3rem" }}
                                         error={currentTaskGroups[tg.id].percentAllocation < 0}
                                     />
                                 </TableRow>
                             ))}
                             <TableRow>
                                 <TableCell>{t("Total")}</TableCell>
-                                <TableCell sx={leftBorderCellSx}>
+                                <TableCell sx={{...baseCellSx, leftBorderCellSx}}>
                                     {Object.values(currentTaskGroups).reduce(
                                         (acc, tg) => acc + tg.taskIds.length,
                                         0,
                                     )}
                                 </TableCell>
                                 <TableCell sx={{
+                                    ...baseCellSx,
                                     ...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) === 100 && leftBorderCellSx),
                                     ...(Object.values(currentTaskGroups).reduce((acc, tg) => acc + tg.percentAllocation, 0,) !== 100 && { ...errorCellSx, borderRight: "1px solid", borderColor: "error.main"})
                                 }}