fix: Email template improvements

frontend/src/pages/admin/AdminEmailTemplatesPage.tsx

@@ -59,6 +59,8 @@ export const AdminEmailTemplatesPage: React.FC = () => {
   const [editIsActive, setEditIsActive] = useState(true);
   const [previewSubject, setPreviewSubject] = useState('');
   const [previewBody, setPreviewBody] = useState('');
+  const [previewHtml, setPreviewHtml] = useState('');
+  const [showHtmlPreview, setShowHtmlPreview] = useState(false);
 
   // Queries
   const { data: templates, isLoading } = useQuery({
@@ -87,6 +89,7 @@ export const AdminEmailTemplatesPage: React.FC = () => {
     onSuccess: (data) => {
       setPreviewSubject(data.subject);
       setPreviewBody(data.body);
+      setPreviewHtml(data.html || '');
       setPreviewDialogOpen(true);
     },
     onError: () => {
@@ -141,6 +144,8 @@ export const AdminEmailTemplatesPage: React.FC = () => {
     setPreviewDialogOpen(false);
     setPreviewSubject('');
     setPreviewBody('');
+    setPreviewHtml('');
+    setShowHtmlPreview(false);
   }, []);
 
   const handleSave = useCallback(() => {
@@ -362,6 +367,16 @@ export const AdminEmailTemplatesPage: React.FC = () => {
               This preview uses sample data to show how the template will appear.
             </Alert>
 
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={showHtmlPreview}
+                  onChange={(e) => setShowHtmlPreview(e.target.checked)}
+                />
+              }
+              label="Show HTML Preview"
+            />
+
             <TextField
               label="Subject"
               fullWidth
@@ -371,19 +386,41 @@ export const AdminEmailTemplatesPage: React.FC = () => {
               }}
             />
 
-            <TextField
-              label="Body"
-              fullWidth
-              multiline
-              rows={12}
-              value={previewBody}
-              InputProps={{
-                readOnly: true,
-              }}
-              inputProps={{
-                style: { fontFamily: 'monospace' },
-              }}
-            />
+            {showHtmlPreview ? (
+              <Box>
+                <Typography variant="subtitle2" gutterBottom>
+                  HTML Preview
+                </Typography>
+                <Box
+                  sx={{
+                    border: '1px solid #e2e8f0',
+                    borderRadius: 1,
+                    overflow: 'hidden',
+                    backgroundColor: '#f8f9fa',
+                  }}
+                >
+                  <iframe
+                    srcDoc={previewHtml}
+                    style={{ width: '100%', height: '500px', border: 'none' }}
+                    title="Email HTML Preview"
+                  />
+                </Box>
+              </Box>
+            ) : (
+              <TextField
+                label="Body (Plain Text)"
+                fullWidth
+                multiline
+                rows={12}
+                value={previewBody}
+                InputProps={{
+                  readOnly: true,
+                }}
+                inputProps={{
+                  style: { fontFamily: 'monospace' },
+                }}
+              />
+            )}
           </Box>
         </DialogContent>
         <DialogActions>