p 1 and 2 compeleted

apps/admin/src/emails/recommendation-email.tsx

@@ -0,0 +1,99 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+
+interface RecommendationEmailProps {
+  clientName: string;
+  recommendationText: string;
+}
+
+export function RecommendationEmail({
+  clientName,
+  recommendationText,
+}: RecommendationEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>New fitness recommendation from your trainer</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Heading style={h1}>New Recommendation! 📋</Heading>
+          <Text style={text}>Hi {clientName},</Text>
+          <Text style={text}>
+            Your trainer has created a new personalized recommendation for you:
+          </Text>
+          <Section style={section}>
+            <Text style={recommendationContent}>{recommendationText}</Text>
+          </Section>
+          <Text style={text}>
+            Open your FitAI mobile app to view the complete recommendation
+            including your activity plan and nutrition guidance.
+          </Text>
+          <Text style={text}>
+            Keep up the great work!
+            <br />
+            The FitAI Team
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+// Default export for email previews
+export default RecommendationEmail;
+
+// Styles
+const main = {
+  backgroundColor: "#f6f9fc",
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+  backgroundColor: "#ffffff",
+  margin: "0 auto",
+  padding: "20px 0 48px",
+  marginBottom: "64px",
+  maxWidth: "600px",
+};
+
+const h1 = {
+  color: "#333",
+  fontSize: "28px",
+  fontWeight: "bold",
+  margin: "40px 0 20px",
+  padding: "0 40px",
+};
+
+const text = {
+  color: "#333",
+  fontSize: "16px",
+  lineHeight: "26px",
+  padding: "0 40px",
+  margin: "16px 0",
+};
+
+const section = {
+  padding: "20px 40px",
+  backgroundColor: "#f0fdf4",
+  margin: "20px 0",
+  borderLeft: "4px solid #10b981",
+  borderRadius: "4px",
+};
+
+const recommendationContent = {
+  color: "#333",
+  fontSize: "16px",
+  lineHeight: "26px",
+  margin: "0",
+  padding: "0",
+  fontStyle: "italic" as const,
+};