lots of changes with docker

frontend/src/lib/formSutff/DynamicInput.Field.tsx

@@ -0,0 +1,87 @@
+import { Trash2 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "../../components/ui/button";
+import { useFieldContext } from ".";
+import { FieldErrors } from "./Errors.Field";
+
+type DynamicInputField = {
+	name?: string;
+	label: string;
+	inputType: "text" | "email" | "password" | "number" | "username";
+	required?: boolean;
+	description?: string;
+	addLabel?: string;
+	placeholder?: string;
+	disabled?: boolean;
+};
+
+const autoCompleteMap: Record<string, string> = {
+	email: "email",
+	password: "current-password",
+	text: "off",
+	username: "username",
+};
+
+export const DynamicInputField = ({
+	label,
+	inputType = "text",
+	required = false,
+	description,
+	addLabel,
+}: DynamicInputField) => {
+	const field = useFieldContext<any>();
+	const values = Array.isArray(field.state.value) ? field.state.value : [];
+
+	return (
+		<div className="grid gap-3 mt-2">
+			<div className="flex items-start justify-between gap-4">
+				<div className="space-y-1">
+					<Label>{label}</Label>
+					{description ? (
+						<p className="text-sm text-muted-foreground">{description}</p>
+					) : null}
+				</div>
+
+				<Button
+					type="button"
+					variant="secondary"
+					onClick={() => {
+						field.pushValue("");
+					}}
+				>
+					{addLabel}
+				</Button>
+			</div>
+			<div className="grid gap-3">
+				{values.map((_: string, index: number) => (
+					<div key={`${field.name}-${index}`} className="grid gap-2">
+						<div className="flex items-center gap-2">
+							<Label htmlFor={field.name}>{label}</Label>
+							<Input
+								id={field.name}
+								autoComplete={autoCompleteMap[inputType] ?? "off"}
+								value={field.state.value?.[index] ?? ""}
+								onChange={(e) => field.replaceValue(index, e.target.value)}
+								onBlur={field.handleBlur}
+								type={inputType}
+								required={required}
+							/>
+							{values.length > 1 ? (
+								<Button
+									type="button"
+									size={"icon"}
+									variant="destructive"
+									onClick={() => field.removeValue(index)}
+								>
+									<Trash2 className="w-32 h-32" />
+								</Button>
+							) : null}
+							<FieldErrors meta={field.state.meta} />
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};

frontend/src/lib/formSutff/Select.Field.tsx

@@ -0,0 +1,57 @@
+import { Label } from "../../components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../components/ui/select";
+import { useFieldContext } from ".";
+import { FieldErrors } from "./Errors.Field";
+
+type SelectOption = {
+	value: string;
+	label: string;
+};
+
+type SelectFieldProps = {
+	label: string;
+	options: SelectOption[];
+	placeholder?: string;
+};
+
+export const SelectField = ({
+	label,
+	options,
+	placeholder,
+}: SelectFieldProps) => {
+	const field = useFieldContext<string>();
+
+	return (
+		<div className="grid gap-3">
+			<div className="grid gap-3">
+				<Label htmlFor={field.name}>{label}</Label>
+				<Select
+					value={field.state.value}
+					onValueChange={(value) => field.handleChange(value)}
+				>
+					<SelectTrigger
+						id={field.name}
+						onBlur={field.handleBlur}
+						className="w-min-2/3 w-max-fit"
+					>
+						<SelectValue placeholder={placeholder} />
+					</SelectTrigger>
+					<SelectContent>
+						{options.map((option) => (
+							<SelectItem key={option.value} value={option.value}>
+								{option.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+			<FieldErrors meta={field.state.meta} />
+		</div>
+	);
+};

frontend/src/lib/formSutff/index.tsx

@@ -1,7 +1,9 @@
 import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
 import { CheckboxField } from "./CheckBox.Field";
+import { DynamicInputField } from "./DynamicInput.Field";
 import { InputField } from "./Input.Field";
 import { InputPasswordField } from "./InputPassword.Field";
+import { SelectField } from "./Select.Field";
 import { SubmitButton } from "./SubmitButton";
 import { SwitchField } from "./Switch.Field";
 
@@ -12,12 +14,13 @@ export const { useAppForm } = createFormHook({
 	fieldComponents: {
 		InputField,
 		InputPasswordField,
-		//SelectField,
+		SelectField,
 		CheckboxField,
 		//DateField,
 		//TextArea,
 		//Searchable,
 		SwitchField,
+		DynamicInputField,
 	},
 	formComponents: { SubmitButton },
 	fieldContext,