Add non-destructive dev seed on startup

2026-05-06 22:31:07 +02:00
parent 9f452fccac
commit b686e714ff
77 changed files with 10862 additions and 87 deletions
@@ -0,0 +1,186 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+type AlertEmailProps = {
+  date: string;
+  childName: string;
+  confirmLink: string;
+};
+
+export function AlertEmail({
+  date,
+  childName,
+  confirmLink,
+}: AlertEmailProps) {
+  return (
+    <Html lang="de">
+      <Head />
+      <Preview>Dringender Notdienst-Alarm fuer {date}</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Section style={styles.alertBar}>
+            <Text style={styles.kicker}>Dringend</Text>
+            <Heading style={styles.heading}>Notdienst heute bestaetigen</Heading>
+            <Text style={styles.lead}>
+              Eine Fachkraft ist ausgefallen. Fuer {childName} ist ein
+              Notdienst-Einsatz am {date} hinterlegt.
+            </Text>
+          </Section>
+
+          <Section style={styles.card}>
+            <Text style={styles.text}>
+              Bitte bestaetige schnell, ob du den Notdienst uebernehmen kannst,
+              damit die Kita den Tag verlaesslich planen kann.
+            </Text>
+
+            <Button href={confirmLink} style={styles.button}>
+              Notdienst bestaetigen
+            </Button>
+
+            <Section style={styles.detailBox}>
+              <Text style={styles.detailLabel}>Einsatzdatum</Text>
+              <Text style={styles.detailValue}>{date}</Text>
+              <Text style={styles.detailLabel}>Kind</Text>
+              <Text style={styles.detailValue}>{childName}</Text>
+            </Section>
+
+            <Text style={styles.fallbackText}>
+              Falls der Button nicht funktioniert, kopiere diesen Link in deinen
+              Browser:
+            </Text>
+            <Text style={styles.linkText}>{confirmLink}</Text>
+          </Section>
+
+          <Hr style={styles.hr} />
+          <Text style={styles.footer}>
+            Diese Nachricht wurde automatisch vom Kita-Planer versendet.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    backgroundColor: "#fff7ed",
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    color: "#30170f",
+  },
+  container: {
+    width: "100%",
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "32px 20px",
+  },
+  alertBar: {
+    padding: "26px 28px",
+    backgroundColor: "#9f1239",
+    borderRadius: "8px 8px 0 0",
+  },
+  kicker: {
+    display: "inline-block",
+    margin: "0 0 18px",
+    padding: "6px 10px",
+    backgroundColor: "#fed7aa",
+    color: "#7f1d1d",
+    borderRadius: "999px",
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase" as const,
+  },
+  heading: {
+    margin: "0 0 12px",
+    color: "#ffffff",
+    fontSize: "30px",
+    lineHeight: "1.16",
+    fontWeight: 850,
+  },
+  lead: {
+    margin: 0,
+    color: "#ffe4e6",
+    fontSize: "16px",
+    lineHeight: "1.55",
+  },
+  card: {
+    padding: "28px",
+    backgroundColor: "#ffffff",
+    border: "1px solid #fed7aa",
+    borderTop: "0",
+    borderRadius: "0 0 8px 8px",
+  },
+  text: {
+    margin: "0 0 22px",
+    color: "#44251a",
+    fontSize: "16px",
+    lineHeight: "1.65",
+  },
+  button: {
+    display: "inline-block",
+    padding: "14px 22px",
+    backgroundColor: "#ea580c",
+    color: "#ffffff",
+    borderRadius: "6px",
+    fontSize: "15px",
+    fontWeight: 800,
+    textDecoration: "none",
+  },
+  detailBox: {
+    margin: "28px 0 0",
+    padding: "18px",
+    backgroundColor: "#fff7ed",
+    border: "1px solid #fdba74",
+    borderRadius: "6px",
+  },
+  detailLabel: {
+    margin: "0 0 4px",
+    color: "#9a3412",
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.06em",
+    textTransform: "uppercase" as const,
+  },
+  detailValue: {
+    margin: "0 0 14px",
+    color: "#30170f",
+    fontSize: "16px",
+    fontWeight: 700,
+  },
+  fallbackText: {
+    margin: "26px 0 8px",
+    color: "#7c5a4b",
+    fontSize: "13px",
+    lineHeight: "1.5",
+  },
+  linkText: {
+    margin: 0,
+    color: "#be123c",
+    fontSize: "13px",
+    lineHeight: "1.5",
+    wordBreak: "break-all" as const,
+  },
+  hr: {
+    margin: "24px 0",
+    borderColor: "#fed7aa",
+  },
+  footer: {
+    margin: 0,
+    color: "#8b6f63",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    textAlign: "center" as const,
+  },
+};