Add educator email invitations and staff notification preferences

src/emails/InviteEmail.tsx

@@ -16,12 +16,14 @@ type InviteEmailProps = {
   parentName: string;
   kitaName: string;
   inviteLink: string;
+  staffAccount?: boolean;
 };
 
 export function InviteEmail({
   parentName,
   kitaName,
   inviteLink,
+  staffAccount = false,
 }: InviteEmailProps) {
   return (
     <Html lang="de">
@@ -36,13 +38,16 @@ export function InviteEmail({
             <Text style={styles.kicker}>Einladung zur Kita-App</Text>
             <Heading style={styles.heading}>Willkommen bei {kitaName}</Heading>
             <Text style={styles.lead}>
-              Hallo {parentName}, dein Eltern-Account wurde vorbereitet.
+              Hallo {parentName}, dein {staffAccount ? "Fachkraft" : "Eltern"}
+              -Account wurde vorbereitet.
             </Text>
 
             <Text style={styles.text}>
               Über den folgenden Link kannst du dein Passwort setzen und deinen
-              Account aktivieren. Danach hast du Zugriff auf die Kita-Planung,
-              Termine und deine Familiendaten.
+              Account aktivieren.{" "}
+              {staffAccount
+                ? "Danach kannst du deine Arbeitszeiten erfassen, Urlaub beantragen und dein Zeitkonto einsehen. Der Link ist sieben Tage gültig und kann einmal verwendet werden."
+                : "Danach hast du Zugriff auf die Kita-Planung, Termine und deine Familiendaten."}
             </Text>
 
             <Button href={inviteLink} style={styles.button}>

src/emails/StaffNotificationEmail.tsx

@@ -0,0 +1,63 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Text,
+} from "@react-email/components";
+import { baseBodyStyle, colors, fontStack } from "./_styles";
+
+export function StaffNotificationEmail({
+  name,
+  kitaName,
+  message,
+  link,
+}: {
+  name: string;
+  kitaName: string;
+  message: string;
+  link: string;
+}) {
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>Neuer Hinweis im Personalbereich von {kitaName}</Preview>
+      <Body style={baseBodyStyle}>
+        <Container
+          style={{
+            maxWidth: "600px",
+            padding: "32px 24px",
+            fontFamily: fontStack,
+          }}
+        >
+          <Heading style={{ color: colors.textPrimary }}>
+            Personalbereich · {kitaName}
+          </Heading>
+          <Text>Hallo {name},</Text>
+          <Text style={{ lineHeight: "24px" }}>{message}</Text>
+          <Text>
+            Die Einzelheiten findest du nach der Anmeldung im Personalbereich.
+          </Text>
+          <Button
+            href={link}
+            style={{
+              backgroundColor: colors.brandGreen,
+              color: "#fff",
+              padding: "14px 20px",
+              borderRadius: "6px",
+            }}
+          >
+            Personalbereich öffnen
+          </Button>
+          <Text style={{ fontSize: "12px", color: colors.textMuted }}>
+            Fachkräfte können Entscheidungshinweise unter „Mein Profil“
+            abschalten. Hinweise innerhalb der App bleiben erhalten.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}