Global Messages

apps/hub/app/(app)/admin/message/_components/messageForm.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Message } from "@repo/db";
+import { MessageOptionalDefaultsSchema } from "@repo/db/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { addMessage, disableMessage } from "../action";
+import { useState } from "react";
+
+export const MessageForm = ({ message }: { message?: Message }) => {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const getDefaultShowUntilDate = () => {
+		const date = new Date();
+		date.setDate(date.getDate() + 5);
+		return date;
+	};
+
+	const disableMessageClient = async () => {
+		disableMessage();
+	};
+
+	const form = useForm<z.infer<typeof MessageOptionalDefaultsSchema>>({
+		resolver: zodResolver(MessageOptionalDefaultsSchema),
+		defaultValues: {
+			message: message?.message,
+			color: message?.color,
+			isMainMsg: true,
+			active: true,
+			showUntil: getDefaultShowUntilDate(),
+		},
+	});
+
+	return (
+		<form
+			onSubmit={form.handleSubmit(async (values) => {
+				setIsSubmitting(true);
+				try {
+					const msg = await addMessage(values);
+				} catch (error) {
+					setIsSubmitting(false);
+					console.error("Failed to add message", error);
+				}
+			})}
+			className="grid grid-cols-6 gap-3"
+		>
+			<label className="floating-label col-span-6">
+				<span>Globale Service Nachricht</span>
+				<input
+					type="text"
+					placeholder="Globale Service Nachricht"
+					className="input input-md w-full mb-2"
+					{...form.register("message")}
+				/>
+			</label>
+			<div className="gap-2 flex justify-between col-span-6">
+				<div className="content-center">
+					<input
+						type="radio"
+						value="INFO"
+						{...form.register("color")}
+						className="radio radio-info ml-2 mr-2"
+					/>
+					<span>Info</span>
+					<input
+						type="radio"
+						value="SUCCESS"
+						{...form.register("color")}
+						className="radio radio-success ml-2 mr-2"
+					/>
+					<span>Success</span>
+					<input
+						type="radio"
+						value="WARNING"
+						{...form.register("color")}
+						className="radio radio-warning ml-2 mr-2"
+					/>
+					<span>Warning</span>
+					<input
+						type="radio"
+						value="ERROR"
+						{...form.register("color")}
+						className="radio radio-error ml-2 mr-2"
+					/>
+					<span>Error</span>
+				</div>
+				<div>
+					<button
+						type="submit"
+						className="btn btn-soft mr-2"
+						onClick={disableMessageClient}
+					>
+						Aktuelle Nachricht deaktivieren
+					</button>
+					<button
+						type="submit"
+						className="btn btn-primary"
+						disabled={isSubmitting}
+					>
+						Speichern
+					</button>
+				</div>
+			</div>
+		</form>
+	);
+};

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

@@ -0,0 +1,36 @@
+"use server";
+import { prisma, Prisma } from "@repo/db";
+
+export const addMessage = async (message: Prisma.MessageCreateInput) => {
+	try {
+		// Set all current messages with isMainMsg=true to active=false
+		await prisma.message.updateMany({
+			where: { isMainMsg: true },
+			data: { active: false },
+		});
+
+		await prisma.message.create({
+			data: {
+				message: message.message,
+				color: message.color,
+				isMainMsg: true,
+				active: true,
+				showUntil: new Date().toISOString(),
+			},
+		});
+	} catch (error) {
+		throw new Error("Failed to add message");
+	}
+};
+
+export const disableMessage = async () => {
+	try {
+		// Set all current messages with isMainMsg=true to active=false
+		await prisma.message.updateMany({
+			where: { isMainMsg: true },
+			data: { active: false },
+		});
+	} catch (error) {
+		throw new Error("Failed to disable message");
+	}
+};

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

@@ -0,0 +1,19 @@
+import { MessageSquareWarning } from "lucide-react";
+import { MessageForm } from "./_components/messageForm";
+
+export default function MessagePage() {
+	return (
+		<div className="grid grid-cols-6 gap-4">
+			<div className="col-span-full">
+				<p className="text-2xl font-semibold text-left flex items-center gap-2">
+					<MessageSquareWarning className="w-5 h-5" /> Service Nachrichten
+				</p>
+			</div>
+			<div className="card bg-base-200 shadow-xl mb-4 col-span-6">
+				<div className="card-body">
+					<MessageForm />
+				</div>
+			</div>
+		</div>
+	);
+}