Phase 6

frontend/src/pages/Sites/PageManager.tsx

@@ -0,0 +1,170 @@
+/**
+ * Page Manager
+ * Phase 6: Site Integration & Multi-Destination Publishing
+ */
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { PlusIcon, EditIcon, TrashIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
+import PageMeta from '../../components/common/PageMeta';
+import { Card } from '../../components/ui/card';
+import Button from '../../components/ui/button/Button';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { fetchAPI } from '../../services/api';
+
+interface Page {
+  id: number;
+  slug: string;
+  title: string;
+  type: string;
+  status: string;
+  order: number;
+  blocks: any[];
+}
+
+export default function PageManager() {
+  const { siteId } = useParams<{ siteId: string }>();
+  const toast = useToast();
+  const [pages, setPages] = useState<Page[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (siteId) {
+      loadPages();
+    }
+  }, [siteId]);
+
+  const loadPages = async () => {
+    try {
+      setLoading(true);
+      // TODO: Load pages from SiteBlueprint API
+      // For now, placeholder
+      setPages([]);
+    } catch (error: any) {
+      toast.error(`Failed to load pages: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddPage = () => {
+    // TODO: Navigate to page creation
+    toast.info('Page creation will be implemented in Phase 7');
+  };
+
+  const handleEditPage = (pageId: number) => {
+    // TODO: Navigate to page editor
+    toast.info('Page editor will be implemented in Phase 7');
+  };
+
+  const handleDeletePage = async (pageId: number) => {
+    if (!confirm('Are you sure you want to delete this page?')) return;
+    // TODO: Delete page
+    toast.info('Page deletion will be implemented in Phase 7');
+  };
+
+  const handleMovePage = async (pageId: number, direction: 'up' | 'down') => {
+    // TODO: Update page order
+    toast.info('Page reordering will be implemented in Phase 7');
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Page Manager" />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading pages...</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <PageMeta title="Page Manager - IGNY8" />
+      
+      <div className="mb-6 flex justify-between items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Page Manager
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Manage pages for your site
+          </p>
+        </div>
+        <Button onClick={handleAddPage} variant="primary">
+          <PlusIcon className="w-4 h-4 mr-2" />
+          Add Page
+        </Button>
+      </div>
+
+      {pages.length === 0 ? (
+        <Card className="p-12 text-center">
+          <p className="text-gray-600 dark:text-gray-400 mb-4">
+            No pages created yet
+          </p>
+          <Button onClick={handleAddPage} variant="primary">
+            Add Your First Page
+          </Button>
+        </Card>
+      ) : (
+        <Card className="p-6">
+          <div className="space-y-3">
+            {pages.map((page, index) => (
+              <div
+                key={page.id}
+                className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg"
+              >
+                <div className="flex items-center gap-4 flex-1">
+                  <div className="flex flex-col gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleMovePage(page.id, 'up')}
+                      disabled={index === 0}
+                    >
+                      <ArrowUpIcon className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleMovePage(page.id, 'down')}
+                      disabled={index === pages.length - 1}
+                    >
+                      <ArrowDownIcon className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-gray-900 dark:text-white">
+                      {page.title}
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      /{page.slug} • {page.type} • {page.status}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEditPage(page.id)}
+                  >
+                    <EditIcon className="w-4 h-4 mr-1" />
+                    Edit
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDeletePage(page.id)}
+                  >
+                    <TrashIcon className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
+