feat: setup analytics-mailer with gitea cron pipeline for e-tib and klz

packages/mail/src/index.ts

@@ -25,3 +25,4 @@ export * from "./templates/ConfirmationMessage";
 export * from "./templates/FollowUpTemplate";
 export * from "./templates/ProjectEstimateTemplate";
 export * from "./templates/SiteAuditTemplate";
+export * from "./templates/MonthlyAnalyticsTemplate";

packages/mail/src/templates/MonthlyAnalyticsTemplate.tsx

@@ -0,0 +1,205 @@
+import * as React from "react";
+import { Heading, Section, Text, Row, Column } from "@react-email/components";
+import { MintelLayout } from "../layouts/MintelLayout";
+
+export interface MonthlyAnalyticsTemplateProps {
+  clientName: string;
+  domain: string;
+  month: string;
+  year: string;
+  totalVisitors: number;
+  totalPageviews: number;
+  topPages: { url: string; views: number }[];
+  topReferrers: { url: string; visitors: number }[];
+}
+
+export const MonthlyAnalyticsTemplate = ({
+  clientName,
+  domain,
+  month,
+  year,
+  totalVisitors,
+  totalPageviews,
+  topPages,
+  topReferrers,
+}: MonthlyAnalyticsTemplateProps) => {
+  const preview = `Ihr Website-Report für ${month} ${year}: ${domain}`;
+
+  return (
+    <MintelLayout preview={preview}>
+      <Heading style={h1}>Monatsreport: {month} {year}</Heading>
+      <Text style={intro}>
+        Hallo {clientName},<br /><br />
+        hier ist der monatliche Performance-Report für Ihre Website ({domain}). 
+        Die Daten zeigen, wie viele Menschen Ihre Seite besucht haben und welche Inhalte am beliebtesten waren.
+      </Text>
+
+      <Section style={metricsContainer}>
+        <Row>
+          <Column style={metricColumn}>
+            <Text style={metricLabel}>BESUCHER</Text>
+            <Text style={metricValue}>{totalVisitors.toLocaleString('de-DE')}</Text>
+          </Column>
+          <Column style={metricColumn}>
+            <Text style={metricLabel}>SEITENAUFRUFE</Text>
+            <Text style={metricValue}>{totalPageviews.toLocaleString('de-DE')}</Text>
+          </Column>
+        </Row>
+      </Section>
+
+      <Section style={auditContainer}>
+        <Heading as="h2" style={h2}>Top Seiten</Heading>
+        {topPages.map((page, i) => (
+          <Row key={i} style={highlightRow}>
+            <Column style={bulletCol}>
+              <div style={bullet} />
+            </Column>
+            <Column>
+              <Text style={highlightText}>{page.url}</Text>
+            </Column>
+            <Column align="right">
+              <Text style={highlightNumber}>{page.views.toLocaleString('de-DE')} Aufrufe</Text>
+            </Column>
+          </Row>
+        ))}
+      </Section>
+
+      <Section style={auditContainer}>
+        <Heading as="h2" style={h2}>Top Besucherquellen</Heading>
+        {topReferrers.length > 0 ? topReferrers.map((ref, i) => (
+          <Row key={i} style={highlightRow}>
+            <Column style={bulletCol}>
+              <div style={bullet} />
+            </Column>
+            <Column>
+              <Text style={highlightText}>{ref.url || "Direktaufruf"}</Text>
+            </Column>
+            <Column align="right">
+              <Text style={highlightNumber}>{ref.visitors.toLocaleString('de-DE')} Besucher</Text>
+            </Column>
+          </Row>
+        )) : (
+          <Text style={highlightText}>Keine externen Quellen verzeichnet.</Text>
+        )}
+      </Section>
+
+      <Text style={bodyText}>
+        Haben Sie Fragen zu diesen Zahlen oder möchten Sie die Reichweite Ihrer Seite weiter ausbauen? 
+        Antworten Sie einfach auf diese E-Mail.
+      </Text>
+
+      <Text style={footerText}>
+        Beste Grüße,<br />
+        <strong>Marc Mintel</strong><br />
+        Digitaler Architekt
+      </Text>
+    </MintelLayout>
+  );
+};
+
+export default MonthlyAnalyticsTemplate;
+
+const h1 = {
+  fontSize: "28px",
+  fontWeight: "900",
+  margin: "0 0 24px",
+  color: "#ffffff",
+  letterSpacing: "-0.04em",
+};
+
+const h2 = {
+  fontSize: "14px",
+  fontWeight: "900",
+  textTransform: "uppercase" as const,
+  color: "#444444",
+  margin: "0 0 16px",
+  letterSpacing: "0.1em",
+};
+
+const intro = {
+  fontSize: "16px",
+  lineHeight: "24px",
+  color: "#cccccc",
+  margin: "0 0 32px",
+};
+
+const metricsContainer = {
+  backgroundColor: "#151515",
+  padding: "32px",
+  borderRadius: "8px",
+  marginBottom: "32px",
+  border: "1px solid #222222",
+  textAlign: "center" as const,
+};
+
+const metricColumn = {
+  width: "50%",
+};
+
+const metricLabel = {
+  fontSize: "12px",
+  fontWeight: "bold",
+  color: "#888888",
+  letterSpacing: "0.1em",
+  margin: "0 0 8px",
+};
+
+const metricValue = {
+  fontSize: "36px",
+  fontWeight: "900",
+  color: "#4CAF50",
+  margin: "0",
+  letterSpacing: "-0.02em",
+};
+
+const auditContainer = {
+  backgroundColor: "#151515",
+  padding: "32px",
+  borderRadius: "8px",
+  marginBottom: "32px",
+  border: "1px solid #222222",
+};
+
+const highlightRow = {
+  marginBottom: "12px",
+};
+
+const bulletCol = {
+  width: "24px",
+  verticalAlign: "top" as const,
+};
+
+const bullet = {
+  width: "6px",
+  height: "6px",
+  backgroundColor: "#4CAF50",
+  marginTop: "8px",
+};
+
+const highlightText = {
+  fontSize: "15px",
+  color: "#ffffff",
+  margin: "0",
+  lineHeight: "22px",
+  wordBreak: "break-all" as const,
+};
+
+const highlightNumber = {
+  fontSize: "15px",
+  color: "#888888",
+  margin: "0",
+  whiteSpace: "nowrap" as const,
+};
+
+const bodyText = {
+  fontSize: "16px",
+  lineHeight: "24px",
+  color: "#888888",
+  margin: "0 0 32px",
+};
+
+const footerText = {
+  fontSize: "14px",
+  color: "#666666",
+  lineHeight: "20px",
+};