Fahrzeugauswahl überarbeitet

apps/dispatch/app/_components/Select.tsx

@@ -1,16 +1,8 @@
 "use client";
-import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
+import { FieldValues, Path } from "react-hook-form";
 import SelectTemplate, { Props as SelectTemplateProps, StylesConfig } from "react-select";
 import { cn } from "@repo/shared-components";
 import dynamic from "next/dynamic";
-import { CSSProperties } from "react";
-
-interface SelectProps<T extends FieldValues> extends Omit<SelectTemplateProps, "form"> {
-	label?: any;
-	name: Path<T>;
-	form: UseFormReturn<T> | any;
-	formOptions?: RegisterOptions<T>;
-}
 
 const customStyles: StylesConfig<any, false> = {
 	control: (provided) => ({
@@ -28,7 +20,7 @@ const customStyles: StylesConfig<any, false> = {
 		...provided,
 		backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
 		color: "var(--color-primary-content)",
-		"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
+		"&:hover": { backgroundColor: "var(--color-base-200)" },
 	}),
 	multiValueLabel: (provided) => ({
 		...provided,
@@ -46,53 +38,55 @@ const customStyles: StylesConfig<any, false> = {
 		...provided,
 		backgroundColor: "var(--color-base-100)",
 		borderRadius: "0.5rem",
+		zIndex: 9999,
 	}),
 };
 
-const SelectCom = <T extends FieldValues>({
-	name,
-	label = name,
+interface SelectProps extends Omit<SelectTemplateProps, "form" | "value" | "onChange"> {
+	label?: any;
+	value: any;
+	onChange: (value: any) => void;
+	error?: string;
+}
+
+const SelectCom = ({
+	label,
 	placeholder = label,
-	form,
-	formOptions,
+	value,
+	onChange,
+	error,
 	className,
 	...inputProps
-}: SelectProps<T>) => {
+}: SelectProps) => {
 	return (
-		<div>
+		<div className="relative">
 			<span className="label-text text-lg flex items-center gap-2">{label}</span>
 			<SelectTemplate
 				onChange={(newValue: any) => {
-					if (Array.isArray(newValue)) {
-						form.setValue(name, newValue.map((v: any) => v.value) as any, {
-							shouldDirty: true,
-						});
+					if ((inputProps as any)?.isMulti) {
+						onChange(Array.isArray(newValue) ? newValue.map((v: any) => v.value) : []);
 					} else {
-						form.setValue(name, newValue.value, {
-							shouldDirty: true,
-						});
+						onChange(newValue ? newValue.value : null);
 					}
-					form.trigger(name);
-					form.Dirty;
 				}}
 				value={
 					(inputProps as any)?.isMulti
-						? (inputProps as any).options?.filter((o: any) => form.watch(name)?.includes(o.value))
-						: (inputProps as any).options?.find((o: any) => o.value === form.watch(name))
+						? (inputProps as any).options?.filter(
+								(o: any) => Array.isArray(value) && value.includes(o.value),
+							)
+						: (inputProps as any).options?.find((o: any) => o.value === value)
 				}
 				styles={customStyles as any}
 				className={cn("w-full placeholder:text-neutral-600", className)}
 				placeholder={placeholder}
 				{...inputProps}
 			/>
-			{form.formState.errors[name]?.message && (
-				<p className="text-error">{form.formState.errors[name].message as string}</p>
-			)}
+			{error && <p className="text-error">{error}</p>}
 		</div>
 	);
 };
 
-const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => <SelectCom {...props} />;
+const SelectWrapper = <T extends FieldValues>(props: SelectProps) => <SelectCom {...props} />;
 
 export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
 	ssr: false,