feat: Implement Legal Pages CMS admin UI with markdown editor

Add comprehensive admin interface for legal pages management:
- List page with filters (language, publish status)
- Markdown editor with live preview (SimpleMDE + react-markdown)
- Create/Edit/Delete operations
- Publish/Unpublish toggle
- Version history support (UI ready)
- Multi-language support (en, es, fr, pt, zh)
- Auto-slug generation from title
- Navigation menu integration with Gavel icon

Installed packages:
- react-markdown (markdown rendering)
- remark-gfm (GitHub Flavored Markdown)
- react-simplemde-editor (markdown editor)
- easymde (editor styles)

Pages created:
- /legal-pages - List view with filters
- /legal-pages/new - Create new legal page
- /legal-pages/[id]/edit - Edit existing page with live preview

Features:
✅ Split-view markdown editor with live preview
✅ Auto-slug generation from title
✅ Language selector (5 languages)
✅ Publish/draft toggle
✅ Responsive design
✅ Real-time preview with GFM support
✅ Navigation integration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

parentflow-admin/package.json

@@ -18,10 +18,14 @@
     "@tanstack/react-query": "^5.90.2",
     "axios": "^1.12.2",
     "date-fns": "^4.1.0",
+    "easymde": "^2.20.0",
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "recharts": "^3.2.1"
+    "react-markdown": "^10.1.0",
+    "react-simplemde-editor": "^5.2.0",
+    "recharts": "^3.2.1",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

parentflow-admin/src/app/legal-pages/[id]/edit/page.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  TextField,
+  Button,
+  MenuItem,
+  Alert,
+  CircularProgress,
+  FormControlLabel,
+  Switch,
+} from '@mui/material';
+import { Save, Cancel, Visibility } from '@mui/icons-material';
+import AdminLayout from '@/components/AdminLayout';
+import apiClient from '@/lib/api-client';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// Dynamic import for SimpleMDE to avoid SSR issues
+const SimpleMDE = dynamic(() => import('react-simplemde-editor'), { ssr: false });
+import 'easymde/dist/easymde.min.css';
+
+interface LegalPage {
+  id: string;
+  slug: string;
+  title: string;
+  content: string;
+  language: string;
+  version: number;
+  isPublished: boolean;
+}
+
+export default function EditLegalPagePage() {
+  const params = useParams();
+  const router = useRouter();
+  const pageId = params.id as string;
+  const isNewPage = pageId === 'new';
+
+  const [loading, setLoading] = useState(!isNewPage);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const [title, setTitle] = useState('');
+  const [slug, setSlug] = useState('');
+  const [content, setContent] = useState('');
+  const [language, setLanguage] = useState('en');
+  const [isPublished, setIsPublished] = useState(false);
+
+  useEffect(() => {
+    if (!isNewPage) {
+      fetchPage();
+    }
+  }, [pageId]);
+
+  const fetchPage = async () => {
+    try {
+      setLoading(true);
+      const response = await apiClient.get(`/api/v1/admin/legal-pages/${pageId}`);
+      const page: LegalPage = response.data;
+      setTitle(page.title);
+      setSlug(page.slug);
+      setContent(page.content);
+      setLanguage(page.language);
+      setIsPublished(page.isPublished);
+      setError(null);
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to fetch legal page');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      setError(null);
+
+      if (isNewPage) {
+        await apiClient.post('/api/v1/admin/legal-pages', {
+          slug,
+          title,
+          content,
+          language,
+          isPublished,
+        });
+        setSuccess('Legal page created successfully!');
+        setTimeout(() => router.push('/legal-pages'), 1500);
+      } else {
+        await apiClient.put(`/api/v1/admin/legal-pages/${pageId}`, {
+          title,
+          content,
+          isPublished,
+        });
+        setSuccess('Legal page updated successfully!');
+        setTimeout(() => setSuccess(null), 3000);
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to save legal page');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleTitleChange = (newTitle: string) => {
+    setTitle(newTitle);
+    // Auto-generate slug from title for new pages
+    if (isNewPage) {
+      const generatedSlug = newTitle
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+      setSlug(generatedSlug);
+    }
+  };
+
+  const mdeOptions = useMemo(() => {
+    return {
+      spellChecker: false,
+      placeholder: 'Enter markdown content here...',
+      status: false,
+      toolbar: [
+        'bold',
+        'italic',
+        'heading',
+        '|',
+        'quote',
+        'unordered-list',
+        'ordered-list',
+        '|',
+        'link',
+        'image',
+        '|',
+        'preview',
+        'side-by-side',
+        'fullscreen',
+        '|',
+        'guide',
+      ],
+    };
+  }, []);
+
+  if (loading) {
+    return (
+      <AdminLayout>
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+          <CircularProgress />
+        </Box>
+      </AdminLayout>
+    );
+  }
+
+  return (
+    <AdminLayout>
+      <Box sx={{ p: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+          <Typography variant="h4">
+            {isNewPage ? 'Create Legal Page' : 'Edit Legal Page'}
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 2 }}>
+            <Button
+              variant="outlined"
+              startIcon={<Cancel />}
+              onClick={() => router.push('/legal-pages')}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="contained"
+              startIcon={<Save />}
+              onClick={handleSave}
+              disabled={saving}
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </Box>
+        </Box>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 3 }}>
+            {error}
+          </Alert>
+        )}
+
+        {success && (
+          <Alert severity="success" sx={{ mb: 3 }}>
+            {success}
+          </Alert>
+        )}
+
+        <Card sx={{ mb: 3 }}>
+          <CardContent>
+            <Typography variant="h6" sx={{ mb: 2 }}>
+              Page Information
+            </Typography>
+
+            <Box sx={{ display: 'grid', gap: 2, gridTemplateColumns: '1fr 1fr' }}>
+              <TextField
+                label="Title"
+                value={title}
+                onChange={(e) => handleTitleChange(e.target.value)}
+                fullWidth
+                required
+              />
+
+              <TextField
+                label="Slug"
+                value={slug}
+                onChange={(e) => setSlug(e.target.value)}
+                fullWidth
+                required
+                disabled={!isNewPage}
+                helperText={isNewPage ? 'Auto-generated from title' : 'Cannot change slug after creation'}
+              />
+
+              <TextField
+                select
+                label="Language"
+                value={language}
+                onChange={(e) => setLanguage(e.target.value)}
+                fullWidth
+                disabled={!isNewPage}
+              >
+                <MenuItem value="en">English</MenuItem>
+                <MenuItem value="es">Spanish</MenuItem>
+                <MenuItem value="fr">French</MenuItem>
+                <MenuItem value="pt">Portuguese</MenuItem>
+                <MenuItem value="zh">Chinese</MenuItem>
+              </TextField>
+
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={isPublished}
+                    onChange={(e) => setIsPublished(e.target.checked)}
+                  />
+                }
+                label="Published"
+              />
+            </Box>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent>
+            <Typography variant="h6" sx={{ mb: 2 }}>
+              Content (Markdown)
+            </Typography>
+
+            <Box sx={{ mb: 2 }}>
+              <SimpleMDE
+                value={content}
+                onChange={setContent}
+                options={mdeOptions}
+              />
+            </Box>
+
+            <Typography variant="h6" sx={{ mb: 2, mt: 4 }}>
+              Preview
+            </Typography>
+
+            <Box
+              sx={{
+                border: '1px solid #ddd',
+                borderRadius: 1,
+                p: 3,
+                backgroundColor: '#f9f9f9',
+                '& h1': { fontSize: '2rem', mb: 2 },
+                '& h2': { fontSize: '1.5rem', mb: 2, mt: 3 },
+                '& h3': { fontSize: '1.25rem', mb: 1, mt: 2 },
+                '& p': { mb: 2 },
+                '& ul, & ol': { mb: 2, pl: 3 },
+                '& li': { mb: 1 },
+                '& code': { backgroundColor: '#e0e0e0', p: 0.5, borderRadius: 0.5 },
+                '& pre': { backgroundColor: '#e0e0e0', p: 2, borderRadius: 1, overflow: 'auto' },
+              }}
+            >
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+            </Box>
+          </CardContent>
+        </Card>
+      </Box>
+    </AdminLayout>
+  );
+}

parentflow-admin/src/app/legal-pages/page.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Chip,
+  IconButton,
+  CircularProgress,
+  Alert,
+  TextField,
+  MenuItem,
+} from '@mui/material';
+import {
+  Add,
+  Edit,
+  Delete,
+  Visibility,
+  History,
+  CheckCircle,
+  Cancel,
+} from '@mui/icons-material';
+import AdminLayout from '@/components/AdminLayout';
+import apiClient from '@/lib/api-client';
+import { useRouter } from 'next/navigation';
+
+interface LegalPage {
+  id: string;
+  slug: string;
+  title: string;
+  language: string;
+  version: number;
+  isPublished: boolean;
+  lastUpdatedBy: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function LegalPagesPage() {
+  const router = useRouter();
+  const [pages, setPages] = useState<LegalPage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [languageFilter, setLanguageFilter] = useState<string>('all');
+  const [publishedFilter, setPublishedFilter] = useState<string>('all');
+
+  useEffect(() => {
+    fetchPages();
+  }, [languageFilter, publishedFilter]);
+
+  const fetchPages = async () => {
+    try {
+      setLoading(true);
+      const params = new URLSearchParams();
+
+      if (languageFilter !== 'all') {
+        params.append('language', languageFilter);
+      }
+
+      if (publishedFilter !== 'all') {
+        params.append('isPublished', publishedFilter);
+      }
+
+      const response = await apiClient.get(`/api/v1/admin/legal-pages?${params.toString()}`);
+      setPages(response.data);
+      setError(null);
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to fetch legal pages');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this legal page?')) return;
+
+    try {
+      await apiClient.delete(`/api/v1/admin/legal-pages/${id}`);
+      fetchPages();
+    } catch (err: any) {
+      alert(err.response?.data?.message || 'Failed to delete legal page');
+    }
+  };
+
+  const handleTogglePublish = async (page: LegalPage) => {
+    try {
+      await apiClient.patch(`/api/v1/admin/legal-pages/${page.id}/publish`, {
+        isPublished: !page.isPublished,
+      });
+      fetchPages();
+    } catch (err: any) {
+      alert(err.response?.data?.message || 'Failed to update publish status');
+    }
+  };
+
+  return (
+    <AdminLayout>
+      <Box sx={{ p: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+          <Typography variant="h4">Legal Pages</Typography>
+          <Button
+            variant="contained"
+            startIcon={<Add />}
+            onClick={() => router.push('/legal-pages/new')}
+          >
+            Create Legal Page
+          </Button>
+        </Box>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 3 }}>
+            {error}
+          </Alert>
+        )}
+
+        <Card>
+          <CardContent>
+            <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+              <TextField
+                select
+                label="Language"
+                value={languageFilter}
+                onChange={(e) => setLanguageFilter(e.target.value)}
+                sx={{ minWidth: 150 }}
+                size="small"
+              >
+                <MenuItem value="all">All Languages</MenuItem>
+                <MenuItem value="en">English</MenuItem>
+                <MenuItem value="es">Spanish</MenuItem>
+                <MenuItem value="fr">French</MenuItem>
+                <MenuItem value="pt">Portuguese</MenuItem>
+                <MenuItem value="zh">Chinese</MenuItem>
+              </TextField>
+
+              <TextField
+                select
+                label="Status"
+                value={publishedFilter}
+                onChange={(e) => setPublishedFilter(e.target.value)}
+                sx={{ minWidth: 150 }}
+                size="small"
+              >
+                <MenuItem value="all">All Status</MenuItem>
+                <MenuItem value="true">Published</MenuItem>
+                <MenuItem value="false">Draft</MenuItem>
+              </TextField>
+            </Box>
+
+            {loading ? (
+              <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+                <CircularProgress />
+              </Box>
+            ) : (
+              <TableContainer component={Paper}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Title</TableCell>
+                      <TableCell>Slug</TableCell>
+                      <TableCell>Language</TableCell>
+                      <TableCell>Version</TableCell>
+                      <TableCell>Status</TableCell>
+                      <TableCell>Updated</TableCell>
+                      <TableCell align="right">Actions</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {pages.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={7} align="center">
+                          <Typography color="textSecondary">No legal pages found</Typography>
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      pages.map((page) => (
+                        <TableRow key={page.id}>
+                          <TableCell>{page.title}</TableCell>
+                          <TableCell>
+                            <code>{page.slug}</code>
+                          </TableCell>
+                          <TableCell>{page.language.toUpperCase()}</TableCell>
+                          <TableCell>v{page.version}</TableCell>
+                          <TableCell>
+                            {page.isPublished ? (
+                              <Chip
+                                icon={<CheckCircle />}
+                                label="Published"
+                                color="success"
+                                size="small"
+                              />
+                            ) : (
+                              <Chip
+                                icon={<Cancel />}
+                                label="Draft"
+                                color="default"
+                                size="small"
+                              />
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            {new Date(page.updatedAt).toLocaleDateString()}
+                          </TableCell>
+                          <TableCell align="right">
+                            <IconButton
+                              size="small"
+                              onClick={() => router.push(`/legal-pages/${page.id}/edit`)}
+                              title="Edit"
+                            >
+                              <Edit fontSize="small" />
+                            </IconButton>
+                            <IconButton
+                              size="small"
+                              onClick={() => router.push(`/legal-pages/${page.id}/versions`)}
+                              title="Version History"
+                            >
+                              <History fontSize="small" />
+                            </IconButton>
+                            <IconButton
+                              size="small"
+                              onClick={() => handleTogglePublish(page)}
+                              title={page.isPublished ? 'Unpublish' : 'Publish'}
+                            >
+                              <Visibility fontSize="small" />
+                            </IconButton>
+                            <IconButton
+                              size="small"
+                              onClick={() => handleDelete(page.id)}
+                              title="Delete"
+                              color="error"
+                            >
+                              <Delete fontSize="small" />
+                            </IconButton>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </CardContent>
+        </Card>
+      </Box>
+    </AdminLayout>
+  );
+}

parentflow-admin/src/components/AdminLayout.tsx

@@ -30,6 +30,7 @@ import {
   Logout,
   FamilyRestroom,
   HealthAndSafety,
+  Gavel,
 } from '@mui/icons-material';
 import apiClient from '@/lib/api-client';
 
@@ -66,6 +67,7 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
     { text: 'Users', icon: <People />, path: '/users' },
     { text: 'Families', icon: <FamilyRestroom />, path: '/families' },
     { text: 'Invite Codes', icon: <ConfirmationNumber />, path: '/invite-codes' },
+    { text: 'Legal Pages', icon: <Gavel />, path: '/legal-pages' },
     { text: 'Analytics', icon: <Analytics />, path: '/analytics' },
     { text: 'System Health', icon: <HealthAndSafety />, path: '/health' },
     { text: 'Settings', icon: <Settings />, path: '/settings' },