Add MissionForm WIP

apps/dispatch/app/_components/Select.tsx

@@ -0,0 +1,119 @@
+"use client";
+import {
+	FieldValues,
+	Path,
+	RegisterOptions,
+	UseFormReturn,
+} from "react-hook-form";
+import SelectTemplate, {
+	Props as SelectTemplateProps,
+	StylesConfig,
+} from "react-select";
+import { cn } from "helpers/cn";
+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>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+}
+
+const customStyles: StylesConfig<any, false> = {
+	control: (provided) => ({
+		...provided,
+		backgroundColor: "var(--color-base-100)",
+		borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
+		borderRadius: "0.5rem",
+		padding: "0.25rem",
+		boxShadow: "none",
+		"&:hover": {
+			borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
+		},
+	}),
+	option: (provided, state) => ({
+		...provided,
+		backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
+		color: "var(--color-primary-content)",
+		"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
+	}),
+	multiValueLabel: (provided) => ({
+		...provided,
+		color: "var(--color-primary-content)",
+	}),
+	singleValue: (provided) => ({
+		...provided,
+		color: "var(--color-primary-content)",
+	}),
+	multiValue: (provided) => ({
+		...provided,
+		backgroundColor: "var(--color-base-300)",
+	}),
+	menu: (provided) => ({
+		...provided,
+		backgroundColor: "var(--color-base-100)",
+		borderRadius: "0.5rem",
+	}),
+};
+
+const SelectCom = <T extends FieldValues>({
+	name,
+	label = name,
+	placeholder = label,
+	form,
+	formOptions,
+	className,
+	...inputProps
+}: SelectProps<T>) => {
+	return (
+		<div>
+			<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,
+						});
+					} else {
+						form.setValue(name, newValue.value, {
+							shouldDirty: true,
+						});
+					}
+					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),
+							)
+				}
+				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>
+			)}
+		</div>
+	);
+};
+
+const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => (
+	<SelectCom {...props} />
+);
+
+export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
+	ssr: false,
+});

apps/dispatch/app/_store/pannelStore.ts

@@ -7,6 +7,6 @@ interface PannelStore {
 }
 
 export const usePannelStore = create<PannelStore>((set) => ({
-	isOpen: false,
+	isOpen: true, // DEBUG, REMOVE LATER FOR PROD
 	setOpen: (isOpen) => set({ isOpen }),
 }));

apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx

@@ -0,0 +1,178 @@
+"use client";
+import React, { useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { MissionSchema } from "@repo/db/zod";
+import { Mission } from "@repo/db/zod";
+import { Trash2 } from "lucide-react";
+import { Select } from "_components/Select";
+
+const clearBtn = () => {
+	return (
+		<button className="btn btn-sm btn-circle btn-info">
+			<Trash2 className="w-4 h-4" />
+		</button>
+	);
+};
+
+const missionFormSchema = MissionSchema.pick({
+	addressLat: true,
+	addressLng: true,
+	addressStreet: true,
+	addressCity: true,
+	addressZip: true,
+	missionCategory: true,
+	missionKeyword: true,
+	missionAdditionalInfo: true,
+	missionPatientInfo: true,
+});
+
+type MissionFormValues = z.infer<typeof missionFormSchema>;
+
+const dummyRettungsmittel = [
+	"Christoph 31",
+	"Christoph 100",
+	"Christoph Berlin",
+	"Christophorus 1",
+];
+
+export const MissionForm: React.FC = () => {
+	const [missionCategory, setMissionCategory] = useState<"PRIMÄR" | "SEKUNDÄR">(
+		"PRIMÄR",
+	);
+	const form = useForm<MissionFormValues>({
+		resolver: zodResolver(missionFormSchema),
+		defaultValues: {
+			addressLat: 0,
+			addressLng: 0,
+			missionCategory: "PRIMÄR",
+		},
+	});
+	const { control, register, handleSubmit, watch } = form;
+
+	const onSubmit = (data: MissionFormValues) => {
+		console.log(data);
+	};
+
+	return (
+		<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+			{/* Koorinaten Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Koordinaten</h2>
+				<div className="grid grid-cols-2 gap-4">
+					<input
+						type="text"
+						{...form.register("addressLat")}
+						className="input input-sm input-neutral input-bordered w-full"
+						readOnly
+					/>
+					<input
+						type="text"
+						{...form.register("addressLng")}
+						className="input input-sm input-neutral input-bordered w-full"
+						readOnly
+					/>
+				</div>
+			</div>
+
+			{/* Adresse Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Adresse</h2>
+				<input
+					type="text"
+					{...form.register("addressStreet")}
+					placeholder="Straße"
+					className="input input-primary input-bordered w-full mb-4"
+				/>
+				<div className="grid grid-cols-2 gap-4">
+					<input
+						type="text"
+						{...form.register("addressCity")}
+						placeholder="Stadt"
+						className="input input-primary input-bordered w-full"
+					/>
+					<input
+						type="text"
+						{...form.register("addressZip")}
+						placeholder="PLZ"
+						className="input input-primary input-bordered w-full"
+					/>
+				</div>
+				<input
+					type="text"
+					{...form.register("missionAdditionalInfo")}
+					placeholder="Zusätzliche Adressinformationen"
+					className="input input-primary input-bordered w-full mt-4"
+				/>
+			</div>
+
+			{/* Rettungsmittel Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Rettungsmittel</h2>
+				<Controller
+					name="rettungsmittel"
+					control={form.control}
+					render={({ field }) => (
+						<Select
+							isMulti
+							form={form}
+							name="rettungsmittel"
+							label={""}
+							options={dummyRettungsmittel.map((item) => ({
+								label: item,
+							}))}
+						/>
+					)}
+				/>
+			</div>
+
+			{/* Einsatzdaten Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Einsatzdaten</h2>
+				<select
+					{...form.register("missionCategory")}
+					className="select select-primary select-bordered w-full mb-4"
+					onChange={(e) =>
+						setMissionCategory(e.target.value as "PRIMÄR" | "SEKUNDÄR")
+					}
+				>
+					<option value="PRIMÄR">PRIMÄR</option>
+					<option value="SEKUNDÄR">SEKUNDÄR</option>
+				</select>
+				<input
+					type="text"
+					{...form.register("missionKeyword")}
+					placeholder="Stichwort"
+					className="input input-primary input-bordered w-full mb-4"
+				/>
+				<textarea
+					{...form.register("missionAdditionalInfo")}
+					placeholder="Einsatzinformationen"
+					className="textarea textarea-primary textarea-bordered w-full mb-4"
+				/>
+				{missionCategory === "SEKUNDÄR" && (
+					<input
+						type="text"
+						placeholder="Zielkrankenhaus"
+						className="input input-primary input-bordered w-full"
+					/>
+				)}
+			</div>
+
+			{/* Patienteninformationen Section */}
+			<div className="form-control">
+				<h2 className="text-lg font-bold mb-2">Patienteninformationen</h2>
+				<textarea
+					{...form.register("missionPatientInfo")}
+					placeholder="Patienteninformationen"
+					className="textarea textarea-primary textarea-bordered w-full"
+				/>
+			</div>
+
+			<button type="submit" className="btn btn-primary mt-4">
+				Alarmieren
+			</button>
+		</form>
+	);
+};

apps/dispatch/app/dispatch/_components/pannel/Pannel.tsx

@@ -1,19 +1,23 @@
-import { Missions } from "dispatch/_components/pannel/Missions";
 import { usePannelStore } from "_store/pannelStore";
 import { cn } from "helpers/cn";
+import { MissionForm } from "./MissionForm";
+import { Trash2 } from "lucide-react";
 
 export const Pannel = () => {
 	const { isOpen, setOpen } = usePannelStore();
 	return (
-		<div className={cn("flex-1 max-w-[400px] z-9999999")}>
+		<div className={cn("flex-1 max-w-[600px] z-9999999")}>
 			<div className="bg-base-100 h-full w-full">
-				<div className="flex justify-between items-center p-4">
+				<div className="flex flex-row justify-between items-center p-4">
-					<h1 className="text-xl font-bold">Pannel</h1>
+					<h1 className="text-xl font-bold">Neuer Einsatz</h1>
 					<button className="btn" onClick={() => setOpen(false)}>
-						Close
+						Schließen
 					</button>
 				</div>
-				<Missions />
+				<div className="divider" />
+				<div className="p-4">
+					<MissionForm />
+				</div>
 			</div>
 		</div>
 	);