import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { useTheme } from "../contexts/ThemeContext"; import { API_BASE } from "../config"; function AdminDashboard() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const { currentTheme, allThemes } = useTheme(); useEffect(() => { fetchPosts(); }, []); const fetchPosts = async () => { try { setLoading(true); const response = await fetch(`${API_BASE}/posts`, { credentials: "include", }); if (!response.ok) throw new Error("Failed to fetch posts"); const data = await response.json(); setPosts(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; const deletePost = async (slug) => { if (!confirm(`Are you sure you want to delete this post?`)) return; try { const response = await fetch(`${API_BASE}/posts/${slug}`, { method: "DELETE", credentials: "include", }); if (!response.ok) throw new Error("Failed to delete post"); // Remove from local state setPosts(posts.filter((post) => post.slug !== slug)); } catch (err) { setError(err.message); } }; if (loading) { return (

Loading posts...

); } if (error) { return (

Error

{error}

); } return (
{/* Header */}

Admin Dashboard

Manage your blog posts

View Blog Themes Media New Post
{/* Stats */}

Total Posts

{posts.length}

Published

{posts.length}

Recent

{ posts.filter( (post) => new Date(post.createdAt) > new Date( Date.now() - 7 * 24 * 60 * 60 * 1000, ), ).length }

Active Theme

{currentTheme?.name || "Loading..."}

{allThemes.length} themes available

{/* Posts Table */}

All Posts

{posts.length === 0 ? (

No posts

Get started by creating your first post.

Create Post
) : (
{posts.map((post) => ( ))}
Title Description Created Updated Actions
{post.title}
{post.slug}
{post.description}
{new Date( post.createdAt, ).toLocaleDateString()} {new Date( post.updatedAt, ).toLocaleDateString()}
View Edit
)}
); } export default AdminDashboard;