Finished Hub ESLINT rule enforcement

apps/hub/app/(app)/admin/config/action.tsx

@@ -6,8 +6,8 @@ export const addMessage = async (notam: Prisma.ConfigCreateInput) => {
 		await prisma.config.create({
 			data: notam,
 		});
-	} catch (error) {
+	} catch (e) {
-		throw new Error("Failed to add message");
+		throw new Error(`Failed to add message: ${e instanceof Error ? e.message : "Unknown error"}`);
 	}
 };
 
@@ -16,7 +16,7 @@ export const disableMessage = async () => {
 		await prisma.config.create({
 			data: {},
 		});
-	} catch (error) {
+	} catch (e) {
-		throw new Error("Failed to disable message");
+		throw new Error(`Failed to add message: ${e instanceof Error ? e.message : "Unknown error"}`);
 	}
 };

apps/hub/app/(app)/admin/config/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Check, MessageSquareWarning, Settings } from "lucide-react";
+import { Check, Settings } from "lucide-react";
 import { MessageForm } from "./_components/MessageForm";
 import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
 import { ColumnDef } from "@tanstack/react-table";

apps/hub/app/(app)/admin/event/_components/AppointmentModal.tsx

@@ -1,5 +1,5 @@
 import { Event, Participant } from "@repo/db";
-import { EventAppointmentOptionalDefaults } from "@repo/db/zod";
+import { EventAppointmentOptionalDefaults, InputJsonValueType } from "@repo/db/zod";
 import { ColumnDef } from "@tanstack/react-table";
 import { useSession } from "next-auth/react";
 import { RefObject, useRef } from "react";
@@ -45,7 +45,7 @@ export const AppointmentModal = ({
 						✕
 					</button>
 				</form>
-				<h3 className="font-bold text-lg">Termin {appointmentForm.watch("id")}</h3>
+
 				<form
 					onSubmit={appointmentForm.handleSubmit(async (values) => {
 						if (!event) return;
@@ -55,13 +55,13 @@ export const AppointmentModal = ({
 					})}
 					className="flex flex-col"
 				>
+					<div className="flex justify-between mr-7">
+						<h3 className="font-bold text-lg">Termin {appointmentForm.watch("id")}</h3>
 						<DateInput
-						control={appointmentForm.control}
+							value={new Date(appointmentForm.watch("appointmentDate") || Date.now())}
-						name="appointmentDate"
+							onChange={(date) => appointmentForm.setValue("appointmentDate", date)}
-						showTimeInput
-						timeCaption="Uhrzeit"
-						showTimeCaption
 						/>
+					</div>
 					<div>
 						<PaginatedTable
 							hide={appointmentForm.watch("id") === undefined}
@@ -150,7 +150,7 @@ export const AppointmentModal = ({
 																	attended: false,
 																	appointmentCancelled: true,
 																	statusLog: [
-																		...(row.original.statusLog as any),
+																		...(row.original.statusLog as InputJsonValueType[]),
 																		{
 																			event: "Gefehlt an Event",
 																			timestamp: new Date().toISOString(),
@@ -169,7 +169,7 @@ export const AppointmentModal = ({
 											);
 										},
 									},
-								] as ColumnDef<Participant, any>[]
+								] as ColumnDef<Participant>[]
 							}
 							prismaModel={"participant"}
 							filter={{

apps/hub/app/(app)/admin/event/_components/ParticipantModal.tsx

@@ -59,9 +59,7 @@ export const ParticipantModal = ({ participantForm, ref }: ParticipantModalProps
 										if (!participantForm.watch("id")) return;
 
 										const participant = participantForm.getValues();
-										await handleParticipantFinished(participant.id.toString()).catch((e) => {
+										await handleParticipantFinished(participant.id.toString()).catch(() => {});
-											const error = e as AxiosError;
-										});
 
 										toast.success("Workflow erfolgreich ausgeführt");
 										router.refresh();
@@ -119,10 +117,10 @@ export const ParticipantModal = ({ participantForm, ref }: ParticipantModalProps
 					<div className="flex flex-col">
 						<h3 className="text-xl">Verlauf</h3>
 						{(participantForm.watch("statusLog") as unknown as ParticipantLog[])?.map((s) => (
-							<div className="flex justify-between" key={(s as any).timestamp}>
+							<div className="flex justify-between" key={s.timestamp.toString()}>
 								<p>{s.event}</p>
 								<p>{s.user}</p>
-								<p>{new Date((s as any).timestamp).toLocaleString()}</p>
+								<p>{new Date(s.timestamp).toLocaleString()}</p>
 							</div>
 						))}
 					</div>

apps/hub/app/(app)/admin/event/action.ts

@@ -1,11 +1,8 @@
 "use server";
 
-import { prisma, Prisma, Event, Participant, EventAppointment } from "@repo/db";
+import { prisma, Prisma, Event, Participant } from "@repo/db";
 
-export const upsertEvent = async (
+export const upsertEvent = async (event: Prisma.EventCreateInput, id?: Event["id"]) => {
-	event: Prisma.EventCreateInput,
-	id?: Event["id"],
-) => {
 	const newEvent = id
 		? await prisma.event.update({
 				where: { id: id },

apps/hub/app/(app)/admin/event/new/page.tsx

@@ -1,4 +1,3 @@
-import { prisma } from "@repo/db";
 import { Form } from "../_components/Form";
 
 export default async () => {

apps/hub/app/(app)/admin/event/page.tsx

@@ -1,14 +1,16 @@
 import { PartyPopperIcon } from "lucide-react";
 import { PaginatedTable } from "../../../_components/PaginatedTable";
 import Link from "next/link";
+import { ColumnDef } from "@tanstack/react-table";
+import { Event } from "@repo/db";
 
 export default function Page() {
 	return (
 		<>
 			<PaginatedTable
-				showEditButton
 				prismaModel="event"
-				columns={[
+				columns={
+					[
 						{
 							header: "Name",
 							accessorKey: "name",
@@ -17,7 +19,18 @@ export default function Page() {
 							header: "Versteckt",
 							accessorKey: "hidden",
 						},
-				]}
+						{
+							header: "Aktionen",
+							cell: ({ row }) => (
+								<div className="flex items-center gap-1">
+									<Link href={`/admin/event/${row.original.id}`}>
+										<button className="btn btn-sm">Edit</button>
+									</Link>
+								</div>
+							),
+						},
+					] as ColumnDef<Event>[]
+				}
 				leftOfSearch={
 					<span className="flex items-center gap-2">
 						<PartyPopperIcon className="w-5 h-5" /> Events

apps/hub/app/(app)/admin/keyword/_components/Form.tsx

@@ -2,7 +2,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { KeywordOptionalDefaultsSchema } from "@repo/db/zod";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
 import { KEYWORD_CATEGORY, Keyword } from "@repo/db";
 import { FileText } from "lucide-react";
 import { Input } from "../../../../_components/ui/Input";
@@ -24,7 +23,7 @@ export const KeywordForm = ({ keyword }: { keyword?: Keyword }) => {
 			<form
 				onSubmit={form.handleSubmit(async (values) => {
 					setLoading(true);
-					const createdKeyword = await upsertKeyword(values, keyword?.id);
+					await upsertKeyword(values, keyword?.id);
 					setLoading(false);
 					if (!keyword) redirect(`/admin/keyword`);
 				})}

apps/hub/app/(app)/admin/keyword/page.tsx

@@ -9,7 +9,6 @@ export default () => {
 		<>
 			<PaginatedTable
 				initialOrderBy={[{ id: "category", desc: true }]}
-				showEditButton
 				prismaModel="keyword"
 				searchFields={["name", "abreviation", "description"]}
 				columns={
@@ -26,6 +25,16 @@ export default () => {
 							header: "Name",
 							accessorKey: "name",
 						},
+						{
+							header: "Aktionen",
+							cell: ({ row }) => (
+								<div className="flex items-center gap-1">
+									<Link href={`/admin/keyword/${row.original.id}`}>
+										<button className="btn btn-sm">bearbeiten</button>
+									</Link>
+								</div>
+							),
+						},
 					] as ColumnDef<Keyword>[]
 				}
 				leftOfSearch={

apps/hub/app/(app)/admin/station/_components/Form.tsx

@@ -1,8 +1,7 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { StationOptionalDefaultsSchema } from "@repo/db/zod";
-import { set, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
-import { z } from "zod";
 import { BosUse, Country, Station } from "@repo/db";
 import { FileText, LocateIcon, PlaneIcon } from "lucide-react";
 import { Input } from "../../../../_components/ui/Input";

apps/hub/app/(app)/admin/station/page.tsx

@@ -1,15 +1,18 @@
+"use client";
 import { DatabaseBackupIcon } from "lucide-react";
 import { PaginatedTable } from "../../../_components/PaginatedTable";
 import Link from "next/link";
+import { ColumnDef } from "@tanstack/react-table";
+import { Station } from "@repo/db";
 
 const page = () => {
 	return (
 		<>
 			<PaginatedTable
-				showEditButton
 				prismaModel="station"
 				searchFields={["bosCallsign", "bosUse", "country", "operator"]}
-				columns={[
+				columns={
+					[
 						{
 							header: "BOS Name",
 							accessorKey: "bosCallsign",
@@ -26,7 +29,18 @@ const page = () => {
 							header: "operator",
 							accessorKey: "operator",
 						},
-				]}
+						{
+							header: "Aktionen",
+							cell: ({ row }) => (
+								<div className="flex items-center gap-1">
+									<Link href={`/admin/event/${row.original.id}`}>
+										<button className="btn btn-sm">Edit</button>
+									</Link>
+								</div>
+							),
+						},
+					] as ColumnDef<Station>[]
+				}
 				leftOfSearch={
 					<span className="flex items-center gap-2">
 						<DatabaseBackupIcon className="w-5 h-5" /> Stationen
@@ -35,9 +49,7 @@ const page = () => {
 				rightOfSearch={
 					<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
 						<Link href={"/admin/station/new"}>
-							<button className="btn btn-sm btn-outline btn-primary">
+							<button className="btn btn-sm btn-outline btn-primary">Erstellen</button>
-								Erstellen
-							</button>
 						</Link>
 					</p>
 				}

apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx

@@ -39,26 +39,23 @@ import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
 import { cn } from "@repo/shared-components";
 import {
 	ChartBarBigIcon,
-	Check,
 	Eye,
 	LockKeyhole,
 	PlaneIcon,
-	RedoDot,
 	ShieldUser,
 	Timer,
 	Trash2,
 	Users,
-	X,
 } from "lucide-react";
 import Link from "next/link";
 import { ColumnDef } from "@tanstack/react-table";
 import { Error } from "_components/Error";
 import { useSession } from "next-auth/react";
-import { setStandardName } from "../../../../../../helper/discord";
+import { setStandardName } from "(app)/../../helper/discord";
 import { penaltyColumns } from "(app)/admin/penalty/columns";
 import { addPenalty, editPenaltys } from "(app)/admin/penalty/actions";
 import { reportColumns } from "(app)/admin/report/columns";
-import { sendMail, sendMailByTemplate } from "../../../../../../helper/mail";
+import { sendMailByTemplate } from "(app)/../../helper/mail";
 
 interface ProfileFormProps {
 	user: User;

apps/hub/app/(app)/admin/user/page.tsx

@@ -1,13 +1,16 @@
+"use client";
 import { User2 } from "lucide-react";
 import { PaginatedTable } from "../../../_components/PaginatedTable";
-import { getServerSession } from "api/auth/[...nextauth]/auth";
+import Link from "next/link";
+import { ColumnDef } from "@tanstack/react-table";
+import { User } from "@repo/db";
+import { useSession } from "next-auth/react";
 
-const AdminUserPage = async () => {
+const AdminUserPage = () => {
-	const session = await getServerSession();
+	const { data: session } = useSession();
 	return (
 		<>
 			<PaginatedTable
-				showEditButton
 				prismaModel="user"
 				searchFields={["publicId", "firstname", "lastname", "email"]}
 				initialOrderBy={[
@@ -16,7 +19,8 @@ const AdminUserPage = async () => {
 						desc: false,
 					},
 				]}
-				columns={[
+				columns={
+					[
 						{
 							header: "ID",
 							accessorKey: "publicId",
@@ -37,7 +41,18 @@ const AdminUserPage = async () => {
 									},
 								]
 							: []),
-				]}
+						{
+							header: "Aktionen",
+							cell: ({ row }) => (
+								<div className="flex items-center gap-1">
+									<Link href={`/admin/event/${row.original.id}`}>
+										<button className="btn btn-sm">Anzeigen</button>
+									</Link>
+								</div>
+							),
+						},
+					] as ColumnDef<User>[]
+				} // Define the columns for the user table
 				leftOfSearch={
 					<p className="text-2xl font-semibold text-left flex items-center gap-2">
 						<User2 className="w-5 h-5" /> Benutzer

apps/hub/app/(app)/events/_components/EventCard.tsx

@@ -17,7 +17,9 @@ export const EventCard = ({
 		Participants: Participant[];
 	};
 	selectedAppointments: EventAppointment[];
-	appointments: EventAppointment[];
+	appointments: (EventAppointment & {
+		Participants: { userId: string }[];
+	})[];
 }) => {
 	return (
 		<div className="col-span-full">

apps/hub/app/(app)/events/_components/Modal.tsx

@@ -16,7 +16,11 @@ import {
 	TriangleAlert,
 } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { ParticipantOptionalDefaults, ParticipantOptionalDefaultsSchema } from "@repo/db/zod";
+import {
+	InputJsonValueType,
+	ParticipantOptionalDefaults,
+	ParticipantOptionalDefaultsSchema,
+} from "@repo/db/zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Select } from "../../../_components/ui/Select";
 import { useRouter } from "next/navigation";
@@ -24,11 +28,14 @@ import { handleParticipantEnrolled } from "../../../../helper/events";
 import { eventCompleted } from "@repo/shared-components";
 import MDEditor from "@uiw/react-md-editor";
 import toast from "react-hot-toast";
+import { formatDate } from "date-fns";
 
 interface ModalBtnProps {
 	title: string;
 	event: Event;
-	dates: EventAppointment[];
+	dates: (EventAppointment & {
+		Participants: { userId: string }[];
+	})[];
 	selectedAppointments: EventAppointment[];
 	participant?: Participant;
 	user: User;
@@ -88,14 +95,16 @@ const ModalBtn = ({
 		(date) =>
 			date.id === selectAppointmentForm.watch("eventAppointmentId") || selectedAppointment?.id,
 	);
-	const ownIndexInParticipantList = (selectedDate as any)?.Participants?.findIndex(
+	const ownIndexInParticipantList = selectedDate?.Participants?.findIndex(
-		(p: Participant) => p.userId === user.id,
+		(p) => p.userId === user.id,
 	);
 
 	const ownPlaceInParticipantList =
-		ownIndexInParticipantList === -1
+		typeof ownIndexInParticipantList === "number"
-			? (selectedDate as any)?.Participants?.length + 1
+			? ownIndexInParticipantList === -1
-			: ownIndexInParticipantList + 1;
+				? (selectedDate?.Participants?.length ?? 0) + 1
+				: ownIndexInParticipantList + 1
+			: undefined;
 
 	const missingRequirements =
 		event.requiredBadges?.length > 0 &&
@@ -167,13 +176,7 @@ const ModalBtn = ({
 											<Select
 												form={selectAppointmentForm}
 												options={dates.map((date) => ({
-													label: `${new Date(date.appointmentDate).toLocaleString("de-DE", {
+													label: `${formatDate(date.appointmentDate, "dd.MM.yyyy HH:mm")} - (${date.Participants.length}/${event.maxParticipants})`,
-														year: "numeric",
-														month: "2-digit",
-														day: "2-digit",
-														hour: "2-digit",
-														minute: "2-digit",
-													})} - (${(date as any).Participants.length}/${event.maxParticipants})`,
 													value: date.id,
 												}))}
 												name="eventAppointmentId"
@@ -296,7 +299,7 @@ const ModalBtn = ({
 												userId: participant!.userId,
 												appointmentCancelled: true,
 												statusLog: [
-													...(participant?.statusLog as any),
+													...(participant?.statusLog as unknown as InputJsonValueType[]),
 													{
 														data: {
 															appointmentId: selectedAppointment.id,

apps/hub/app/(app)/resources/_components/Card.tsx

@@ -1,4 +1,3 @@
-import { Download } from "lucide-react";
 import Image, { StaticImageData } from "next/image";
 import { ReactNode } from "react";
 

apps/hub/app/(auth)/oauth/_components/Authorize.tsx

@@ -4,7 +4,6 @@ import { Service } from "../page";
 import { generateToken } from "./action";
 import { useSession } from "next-auth/react";
 import { useErrorBoundary } from "react-error-boundary";
-import { se } from "date-fns/locale";
 import { PERMISSION } from "@repo/db";
 
 export const Authorize = ({ service }: { service: Service }) => {

apps/hub/app/_components/ErrorBoundary.tsx

@@ -11,10 +11,10 @@ export const CustomErrorBoundary = ({ children }: { children?: React.ReactNode }
 				let errorTest;
 				let errorCode = 500;
 				if ("statusCode" in error) {
-					errorCode = (error as any).statusCode;
+					errorCode = error.statusCode;
 				}
 				if ("message" in error || error instanceof Error) {
-					errorTest = (error as any).message;
+					errorTest = error.message;
 				} else if (typeof error === "string") {
 					errorTest = error;
 				} else {

apps/hub/app/_components/PaginatedTable.tsx

@@ -1,8 +1,9 @@
 "use client";
-import { useEffect, useState, useCallback, Ref, useImperativeHandle } from "react";
+import { useState, Ref, useImperativeHandle } from "react";
 import SortableTable, { Pagination, SortableTableProps } from "./Table";
 import { PrismaClient } from "@repo/db";
 import { getData } from "./pagiantedTableActions";
+import { useDebounce } from "@repo/shared-components";
 
 export interface PaginatedTableRef {
 	refresh: () => void;
@@ -10,9 +11,8 @@ export interface PaginatedTableRef {
 
 interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "data"> {
 	prismaModel: keyof PrismaClient;
-	filter?: Record<string, any>;
+	filter?: Record<string, unknown>;
 	rowsPerPage?: number;
-	showEditButton?: boolean;
 	searchFields?: string[];
 	include?: Record<string, boolean>;
 	strictQuery?: boolean;
@@ -26,7 +26,6 @@ interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "da
 export function PaginatedTable<TData>({
 	prismaModel,
 	rowsPerPage = 10,
-	showEditButton = false,
 	searchFields = [],
 	filter,
 	include,
@@ -42,7 +41,6 @@ export function PaginatedTable<TData>({
 	const [page, setPage] = useState(0);
 	const [total, setTotal] = useState(0);
 	const [searchTerm, setSearchTerm] = useState("");
-	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
 	const [orderBy, setOrderBy] = useState<Record<string, "asc" | "desc">>(
 		restProps.initialOrderBy
 			? restProps.initialOrderBy.reduce(
@@ -60,16 +58,19 @@ export function PaginatedTable<TData>({
 			prismaModel,
 			rowsPerPage,
 			page * rowsPerPage,
-			debouncedSearchTerm,
+			searchTerm,
 			searchFields,
 			filter,
 			include,
 			orderBy,
 			strictQuery
 				? restProps.columns
-						.filter((col: any) => "accessorKey" in col)
+						.filter(
-						.map((col: any) => col.accessorKey)
+							(col): col is { accessorKey: string } =>
-						.reduce((acc: Record<string, any>, key: string) => {
+								typeof (col as { accessorKey?: unknown }).accessorKey === "string",
+						)
+						.map((col) => col.accessorKey)
+						.reduce<Record<string, boolean>>((acc, key) => {
 							acc[key] = true;
 							return acc;
 						}, {})
@@ -82,34 +83,19 @@ export function PaginatedTable<TData>({
 		});
 	};
 
-	useEffect(() => {
-		RefreshTableData();
-	}, [filter, orderBy]);
-
 	useImperativeHandle(ref, () => ({
 		refresh: () => {
 			RefreshTableData();
 		},
 	}));
 
-	const debounce = (func: Function, delay: number) => {
+	useDebounce(
-		let timer: NodeJS.Timeout;
+		() => {
-		return (...args: any[]) => {
-			clearTimeout(timer);
-			timer = setTimeout(() => func(...args), delay);
-		};
-	};
-
-	const handleSearchChange = useCallback(
-		debounce((value: string) => {
-			setDebouncedSearchTerm(value);
-		}, 500),
-		[],
-	);
-
-	useEffect(() => {
 			RefreshTableData();
-	}, [page, debouncedSearchTerm]);
+		},
+		500,
+		[searchTerm, page, rowsPerPage, orderBy, filter],
+	);
 
 	return (
 		<div className="space-y-4 m-4">
@@ -122,7 +108,6 @@ export function PaginatedTable<TData>({
 						value={searchTerm}
 						onChange={(e) => {
 							setSearchTerm(e.target.value);
-							handleSearchChange(e.target.value);
 							setPage(0); // Reset to first page on search
 						}}
 						className="input input-bordered w-full max-w-xs justify-end"
@@ -134,7 +119,6 @@ export function PaginatedTable<TData>({
 				<SortableTable
 					data={data}
 					prismaModel={prismaModel}
-					showEditButton={showEditButton}
 					setOrderBy={setOrderBy}
 					{...restProps}
 				/>

apps/hub/app/_components/QueryClient.tsx

@@ -3,7 +3,7 @@
 
 import { toast } from "react-hot-toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useState } from "react";
 
 export function QueryProvider({ children }: { children: ReactNode }) {
 	const [queryClient] = useState(

apps/hub/app/_components/Table.tsx

@@ -9,13 +9,11 @@ import {
 	flexRender,
 } from "@tanstack/react-table";
 import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from "lucide-react"; // Icons for sorting
-import Link from "next/link";
 import { PrismaClient } from "@repo/db";
 
 export interface SortableTableProps<TData> {
 	data: TData[];
 	columns: ColumnDef<TData>[];
-	showEditButton?: boolean;
 	prismaModel?: keyof PrismaClient;
 	setOrderBy?: (orderBy: Record<string, "asc" | "desc">) => void;
 	initialOrderBy?: SortingState;
@@ -26,28 +24,13 @@ export default function SortableTable<TData>({
 	columns,
 	initialOrderBy = [],
 	prismaModel,
-	showEditButton,
 	setOrderBy,
 }: SortableTableProps<TData>) {
 	const [sorting, setSorting] = useState<SortingState>(initialOrderBy);
 
 	const table = useReactTable({
 		data,
-		columns: showEditButton
+		columns,
-			? [
-					...columns,
-					{
-						header: "Actions",
-						cell: ({ row }) => (
-							<div className="flex items-center gap-1">
-								<Link href={`/admin/${prismaModel as string}/${(row.original as any).id}`}>
-									<button className="btn btn-sm">Edit</button>
-								</Link>
-							</div>
-						),
-					},
-				]
-			: columns,
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		onSortingChange: setSorting,

apps/hub/app/_components/ui/Button.tsx

@@ -15,7 +15,7 @@ export const Button = ({
 
 	return (
 		<button
-			{...(props as any)}
+			{...props}
 			className={cn("btn", props.className)}
 			disabled={isLoadingState || props.disabled}
 			onClick={async (e) => {
@@ -27,7 +27,7 @@ export const Button = ({
 			}}
 		>
 			{isLoadingState && <span className="loading loading-spinner loading-sm"></span>}
-			{props.children as any}
+			{props.children}
 		</button>
 	);
 };

apps/hub/app/_components/ui/DateInput.tsx

@@ -1,32 +1,24 @@
-import DatePicker, { DatePickerProps, registerLocale } from "react-datepicker";
+import { formatDate } from "date-fns";
-import { Control, Controller, FieldValues, Path } from "react-hook-form";
-import { de } from "date-fns/locale";
-registerLocale("de", de);
 
-interface DateInputProps<T extends FieldValues>
+export const DateInput = ({
-	extends Omit<DatePickerProps, "onChange" | "selected"> {
+	value,
-	control: Control<T>;
+	onChange,
-	name: Path<T>;
-}
-
-export const DateInput = <T extends FieldValues>({
-	control,
-	name,
 	...props
-}: DateInputProps<T>) => {
+}: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+	value?: Date | null;
+	onChange?: (date: Date) => void;
+}) => {
 	return (
-		<Controller
+		<input
-			control={control}
+			type="datetime-local"
-			name={name}
+			className="input"
-			render={({ field }) => (
+			value={formatDate(value || new Date(), "yyyy-MM-dd hh:mm")}
-				<DatePicker
+			onChange={(e) => {
-					className="input input-bordered mt-2"
+				const date = e.target.value ? new Date(e.target.value) : null;
-					locale={"de"}
+				if (!date) return;
-					onChange={(date) => field.onChange(date)}
+				onChange?.(date);
-					selected={field.value}
+			}}
 			{...props}
 		/>
-			)}
-		/>
 	);
 };

packages/shared-components/helper/index.ts

@@ -2,3 +2,5 @@ export * from "./cn";
 export * from "./event";
 export * from "./dates";
 export * from "./simulatorConnected";
+export * from "./useDebounce";
+export * from "./useTimeout";

packages/shared-components/helper/useDebounce.ts

@@ -1,3 +1,4 @@
+"use client";
 import { DependencyList, useEffect } from "react";
 import useTimeout from "./useTimeout";
 

packages/shared-components/helper/useTimeout.ts

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect, useRef } from "react";
 
 export default function useTimeout(callback: () => void, delay: number) {