update

src/components/CostAndExpenseReport/CostAndExpenseReport.tsx

@@ -20,7 +20,6 @@ const CostAndExpenseReport: React.FC<Props> = ({ team, customer }) => {
   const { t } = useTranslation("report");
   const teamCombo = team.map((t) => `${t.name} - ${t.code}`);
   const custCombo = customer.map(c => `${c.name} - ${c.code}`)
-  const percentList = [">50%", ">90%"]
 
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [

src/components/utils/numberInput.tsx

@@ -42,18 +42,31 @@ export const InputAdornment = styled('div')(
   `,
   );
 
-export default function NumberInputBasic() {
+export default function NumberInputBasic(testing: any, props: NumberInputProps) {
   const [value, setValue] = React.useState<number | null>(null);
   return (
     <NumberInput
       aria-label="Demo number input"
       placeholder="Type a number…"
       value={value}
-      onChange={(event, val) => setValue(val)}
+      {...props}
+      onChange={testing}
     />
   );
 }
 
+// export default function NumberInputBasic() {
+//   const [value, setValue] = React.useState<number | null>(null);
+//   return (
+//     <NumberInput
+//       aria-label="Demo number input"
+//       placeholder="Type a number…"
+//       value={value}
+//       onChange={(event, val) => setValue(val)}
+//     />
+//   );
+// }
+
 const blue = {
   100: '#DAECFF',
   200: '#80BFFF',
@@ -113,7 +126,7 @@ const StyledInputElement = styled('input')(
   font-family: inherit;
   font-weight: 400;
   line-height: 1.5;
-  grid-column: 1/2;
+  grid-column: 1/3;
   grid-row: 1/3;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: inherit;
@@ -125,68 +138,75 @@ const StyledInputElement = styled('input')(
 );
 
 const StyledButton = styled('button')(
-  ({ theme }) => `
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  align-items: center;
-  appearance: none;
-  padding: 0;
-  width: 19px;
-  height: 19px;
-  font-family: system-ui, sans-serif;
-  font-size: 0.875rem;
-  line-height: 1;
-  box-sizing: border-box;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 0;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
-
-  &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
-    cursor: pointer;
-  }
-
-  &.${numberInputClasses.incrementButton} {
-    grid-column: 2/3;
-    grid-row: 1/2;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border: 1px solid;
-    border-bottom: 0;
+    ({ theme }) => `
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    appearance: none;
+    padding: 0;
+    width: 19px;
+    height: 20px;
+    font-family: system-ui, sans-serif;
+    font-size: 0.875rem;
+    line-height: 1;
+    box-sizing: border-box;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 0;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+  
     &:hover {
+      background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
       cursor: pointer;
-      background: ${blue[400]};
-      color: ${grey[50]};
     }
-
-  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  }
-
-  &.${numberInputClasses.decrementButton} {
-    grid-column: 2/3;
-    grid-row: 2/3;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border: 1px solid;
-    &:hover {
-      cursor: pointer;
-      background: ${blue[400]};
-      color: ${grey[50]};
+  
+    &.${numberInputClasses.incrementButton} {
+      grid-column: 4/5;
+      grid-row: 1/2;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border: 1px solid;
+      border-bottom: 0;
+      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+        border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+      }
     }
-
-  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  }
-  & .arrow {
-    transform: translateY(-1px);
-  }
-`,
-);
+  
+    &.${numberInputClasses.decrementButton} {
+      grid-column: 4/5;
+      grid-row: 2/3;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border: 1px solid;
+      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+        border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+      }
+    }
+  
+    & .arrow {
+      transform: translateY(-1px);
+    }
+  
+    & .arrow {
+      transform: translateY(-1px);
+    }
+  `,
+  );