add controls to all inputs

Client/src/Components/Inputs/Search/index.jsx

@@ -15,6 +15,29 @@ import SearchIcon from "../../../assets/icons/search.svg?react";
  * @param {Object} props.sx - Additional styles to apply to the component
  * @returns {JSX.Element} The rendered Search component
  */
+
+const SearchAdornment = () => {
+  const theme = useTheme();
+  return (
+    <Box
+      mr={theme.spacing(4)}
+      height={16}
+      sx={{
+        "& svg": {
+          width: 16,
+          height: 16,
+          "& path": {
+            stroke: theme.palette.text.tertiary,
+            strokeWidth: 1.2,
+          },
+        },
+      }}
+    >
+      <SearchIcon />
+    </Box>
+  );
+};
+
 const Search = ({
   id,
   options,
@@ -24,11 +47,14 @@ const Search = ({
   handleInputChange,
   handleChange,
   sx,
+  multiple = false,
+  isAdorned = true,
 }) => {
   const theme = useTheme();
 
   return (
     <Autocomplete
+      multiple={multiple}
       id={id}
       inputValue={value}
       onInputChange={(_, newValue) => {
@@ -38,7 +64,7 @@ const Search = ({
         handleChange && handleChange(newValue);
       }}
       fullWidth
-      // freeSolo
+      freeSolo
       disableClearable
       options={options}
       getOptionLabel={(option) => option[filteredBy]}
@@ -48,24 +74,7 @@ const Search = ({
           placeholder="Type to search"
           InputProps={{
             ...params.InputProps,
-            startAdornment: (
-              <Box
-                mr={theme.spacing(4)}
-                height={16}
-                sx={{
-                  "& svg": {
-                    width: 16,
-                    height: 16,
-                    "& path": {
-                      stroke: theme.palette.text.tertiary,
-                      strokeWidth: 1.2,
-                    },
-                  },
-                }}
-              >
-                <SearchIcon />
-              </Box>
-            ),
+            ...(isAdorned && { startAdornment: <SearchAdornment /> }),
           }}
           sx={{
             "& fieldset": {
@@ -141,12 +150,14 @@ const Search = ({
 
 Search.propTypes = {
   id: PropTypes.string,
+  multiple: PropTypes.bool,
   options: PropTypes.array.isRequired,
   filteredBy: PropTypes.string.isRequired,
   secondaryLabel: PropTypes.string,
   value: PropTypes.string.isRequired,
   handleInputChange: PropTypes.func.isRequired,
   handleChange: PropTypes.func,
+  isAdorned: PropTypes.bool,
   sx: PropTypes.object,
 };
 

Client/src/Components/Inputs/Select/index.jsx

@@ -34,6 +34,7 @@ import "./index.css";
  *
  * <Select
  *  id="frequency-id"
+ *  name="my-name"
  *  label="Check frequency"
  *  placeholder="Select frequency"
  *  value={value}
@@ -51,6 +52,7 @@ const Select = ({
   items,
   onChange,
   sx,
+  name = "",
 }) => {
   const theme = useTheme();
   const itemStyles = {
@@ -77,6 +79,7 @@ const Select = ({
         value={value}
         onChange={onChange}
         displayEmpty
+        name={name}
         inputProps={{ id: id }}
         IconComponent={KeyboardArrowDownIcon}
         MenuProps={{ disableScrollLock: true }}
@@ -127,6 +130,7 @@ const Select = ({
 
 Select.propTypes = {
   id: PropTypes.string.isRequired,
+  name: PropTypes.string,
   label: PropTypes.string,
   placeholder: PropTypes.string,
   isHidden: PropTypes.bool,