From b796464241bee7416e2af44e9599331b1ca13d3a Mon Sep 17 00:00:00 2001
From: karenvicent <karenvergara@msn.com>
Date: Thu, 9 Oct 2025 18:16:25 -0400
Subject: [PATCH 1/2] select component V2

---
 client/src/Components/v2/Inputs/Select.tsx | 73 ++++++++++++++++++++--
 1 file changed, 69 insertions(+), 4 deletions(-)

diff --git a/client/src/Components/v2/Inputs/Select.tsx b/client/src/Components/v2/Inputs/Select.tsx
index fb388b334..cb3e12fcb 100644
--- a/client/src/Components/v2/Inputs/Select.tsx
+++ b/client/src/Components/v2/Inputs/Select.tsx
@@ -1,6 +1,71 @@
-import Select from "@mui/material/Select";
+import { Typography, Select } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import { forwardRef } from "react";
 import type { SelectProps } from "@mui/material/Select";
-
-export const SelectInput: React.FC<SelectProps> = ({ ...props }) => {
-	return <Select {...props} />;
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+type ItemId = string | number;
+interface SelectItem {
+	_id: ItemId;
+	name: string;
+}
+export type CustomSelectProps = SelectProps<ItemId> & {
+	items: SelectItem[];
+	placeholder?: string;
+	isHidden?: boolean;
+	hasError?: boolean;
 };
+
+export const SelectInput = forwardRef<HTMLDivElement, CustomSelectProps>(
+	function SelectInput(
+		{ items, placeholder, isHidden = false, hasError = false, ...props },
+		ref
+	) {
+		return (
+			<Select
+				sx={{
+					"& .MuiSelect-select": {
+						padding: "0",
+					},
+				}}
+				error={hasError}
+				ref={ref}
+				IconComponent={KeyboardArrowDownIcon}
+				displayEmpty
+				MenuProps={{ disableScrollLock: true }}
+				renderValue={(selected) => {
+					if (!selected) {
+						return (
+							<Typography
+								noWrap
+								color="text.secondary"
+							>
+								{placeholder ?? ""}
+							</Typography>
+						);
+					}
+					const selectedItem = items.find((item) => item._id === selected);
+					const displayName = selectedItem ? selectedItem.name : placeholder;
+					return (
+						<Typography
+							noWrap
+							title={displayName}
+						>
+							{displayName}
+						</Typography>
+					);
+				}}
+				{...props}
+			>
+				{items.map((item) => (
+					<MenuItem
+						key={item._id}
+						value={item._id}
+					>
+						{item.name}
+					</MenuItem>
+				))}
+			</Select>
+		);
+	}
+);
+SelectInput.displayName = "SelectInput";

From 104cf194ac52c1e456284f390892a8d48bd93699 Mon Sep 17 00:00:00 2001
From: karenvicent <karenvergara@msn.com>
Date: Tue, 14 Oct 2025 12:22:20 -0400
Subject: [PATCH 2/2] fix create more specific component

---
 client/src/Components/v2/Inputs/Select.tsx | 125 +++++++++++----------
 1 file changed, 66 insertions(+), 59 deletions(-)

diff --git a/client/src/Components/v2/Inputs/Select.tsx b/client/src/Components/v2/Inputs/Select.tsx
index 6aa2498bf..54aacf68a 100644
--- a/client/src/Components/v2/Inputs/Select.tsx
+++ b/client/src/Components/v2/Inputs/Select.tsx
@@ -1,81 +1,88 @@
 import { Typography, Select } from "@mui/material";
 import MenuItem from "@mui/material/MenuItem";
-import { forwardRef } from "react";
 import type { SelectProps } from "@mui/material/Select";
 import { useTheme } from "@mui/material/styles";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-type ItemId = string | number;
+
+export const SelectInput: React.FC<SelectProps> = ({ ...props }) => {
+	const theme = useTheme();
+	return (
+		<Select
+			{...props}
+			sx={{
+				height: "34px",
+				"& .MuiOutlinedInput-notchedOutline": {
+					borderRadius: theme.shape.borderRadius,
+					borderColor: theme.palette.primary.lowContrast,
+				},
+				"&:hover .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.primary.lowContrast,
+				},
+			}}
+		/>
+	);
+};
+
+type ItemTypes = string | number;
 interface SelectItem {
-	_id: ItemId;
+	_id: ItemTypes;
 	name: string;
 }
-export type CustomSelectProps = SelectProps<ItemId> & {
+export type CustomSelectProps = SelectProps & {
 	items: SelectItem[];
 	placeholder?: string;
 	isHidden?: boolean;
 	hasError?: boolean;
 };
 
-export const SelectInput = forwardRef<HTMLDivElement, CustomSelectProps>(
-	function SelectInput(
-		{ items, placeholder, isHidden = false, hasError = false, ...props },
-		ref
-	) {
-		const theme = useTheme();
-		return (
-			<Select
-				sx={{
-					height: "34px",
-					"& .MuiSelect-select": {
-						padding: "0",
-					},
-					"& .MuiOutlinedInput-notchedOutline": {
-						borderRadius: theme.shape.borderRadius,
-						borderColor: theme.palette.primary.lowContrast,
-					},
-					"&:hover .MuiOutlinedInput-notchedOutline": {
-						borderColor: theme.palette.primary.lowContrast,
-					},
-				}}
-				error={hasError}
-				ref={ref}
-				IconComponent={KeyboardArrowDownIcon}
-				displayEmpty
-				MenuProps={{ disableScrollLock: true }}
-				renderValue={(selected) => {
-					if (!selected) {
-						return (
-							<Typography
-								noWrap
-								color="text.secondary"
-							>
-								{placeholder ?? ""}
-							</Typography>
-						);
-					}
-					const selectedItem = items.find((item) => item._id === selected);
-					const displayName = selectedItem ? selectedItem.name : placeholder;
+export const SelectFromItems: React.FC<CustomSelectProps> = ({
+	items,
+	placeholder,
+	isHidden = false,
+	hasError = false,
+	...props
+}) => {
+	return (
+		<SelectInput
+			error={hasError}
+			IconComponent={KeyboardArrowDownIcon}
+			displayEmpty
+			MenuProps={{ disableScrollLock: true }}
+			renderValue={(selected) => {
+				if (!selected) {
 					return (
 						<Typography
 							noWrap
-							title={displayName}
+							color="text.secondary"
 						>
-							{displayName}
+							{placeholder ?? ""}
 						</Typography>
 					);
-				}}
-				{...props}
-			>
-				{items.map((item) => (
-					<MenuItem
-						key={item._id}
-						value={item._id}
+				}
+				const selectedItem = items.find((item) => item._id === selected);
+				const displayName = selectedItem ? selectedItem.name : placeholder;
+				return (
+					<Typography
+						noWrap
+						title={displayName}
 					>
-						{item.name}
-					</MenuItem>
-				))}
-			</Select>
-		);
-	}
-);
+						{displayName}
+					</Typography>
+				);
+			}}
+			{...props}
+		>
+			{items.map((item) => (
+				<MenuItem
+					key={item._id}
+					value={item._id}
+				>
+					{item.name}
+				</MenuItem>
+			))}
+		</SelectInput>
+	);
+};
+
 SelectInput.displayName = "SelectInput";
+SelectFromItems.displayName = "SelectFromItems";