mirror of
https://ghproxy.net/https://github.com/abhijitb/helix.git
synced 2025-08-28 00:34:34 +08:00
341 lines
8.5 KiB
JavaScript
341 lines
8.5 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import './Dashboard.css';
|
||
|
||
export default function Dashboard() {
|
||
const [ dashboardData, setDashboardData ] = useState( {
|
||
postsCount: 0,
|
||
pagesCount: 0,
|
||
commentsCount: 0,
|
||
usersCount: 0,
|
||
recentPosts: [],
|
||
recentComments: [],
|
||
loading: true,
|
||
} );
|
||
|
||
useEffect( () => {
|
||
// Fetch dashboard data from WordPress REST API
|
||
const fetchDashboardData = async () => {
|
||
try {
|
||
const [ posts, pages, comments, users ] = await Promise.all( [
|
||
fetch(
|
||
`${
|
||
window.helixData?.restUrl || '/wp-json/wp/v2/'
|
||
}posts?per_page=5`
|
||
),
|
||
fetch(
|
||
`${
|
||
window.helixData?.restUrl || '/wp-json/wp/v2/'
|
||
}pages?per_page=5`
|
||
),
|
||
fetch(
|
||
`${
|
||
window.helixData?.restUrl || '/wp-json/wp/v2/'
|
||
}comments?per_page=5`
|
||
),
|
||
fetch(
|
||
`${
|
||
window.helixData?.restUrl || '/wp-json/wp/v2/'
|
||
}users?per_page=5`
|
||
),
|
||
] );
|
||
|
||
const [ postsData, pagesData, commentsData, usersData ] =
|
||
await Promise.all( [
|
||
posts.json(),
|
||
pages.json(),
|
||
comments.json(),
|
||
users.json(),
|
||
] );
|
||
|
||
setDashboardData( {
|
||
postsCount:
|
||
posts.headers.get( 'X-WP-Total' ) || postsData.length,
|
||
pagesCount:
|
||
pages.headers.get( 'X-WP-Total' ) || pagesData.length,
|
||
commentsCount:
|
||
comments.headers.get( 'X-WP-Total' ) ||
|
||
commentsData.length,
|
||
usersCount:
|
||
users.headers.get( 'X-WP-Total' ) || usersData.length,
|
||
recentPosts: postsData.slice( 0, 5 ),
|
||
recentComments: commentsData.slice( 0, 5 ),
|
||
loading: false,
|
||
} );
|
||
} catch ( error ) {
|
||
// Error fetching dashboard data
|
||
setDashboardData( ( prev ) => ( { ...prev, loading: false } ) );
|
||
}
|
||
};
|
||
|
||
fetchDashboardData();
|
||
}, [] );
|
||
|
||
const StatsCard = ( { title, count, icon, color } ) => (
|
||
<div className={ `helix-stats-card helix-stats-card--${ color }` }>
|
||
<div className="helix-stats-card__icon">{ icon }</div>
|
||
<div className="helix-stats-card__content">
|
||
<h3 className="helix-stats-card__count">{ count }</h3>
|
||
<p className="helix-stats-card__title">{ title }</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const formatDate = ( dateString ) => {
|
||
return new Date( dateString ).toLocaleDateString( 'en-US', {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
} );
|
||
};
|
||
|
||
if ( dashboardData.loading ) {
|
||
return (
|
||
<div className="helix-dashboard">
|
||
<div className="helix-dashboard__header">
|
||
<h1>Dashboard</h1>
|
||
</div>
|
||
<div className="helix-loading">
|
||
<div className="helix-loading__spinner"></div>
|
||
<p>Loading dashboard...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="helix-dashboard">
|
||
<div className="helix-dashboard__header">
|
||
<h1>Welcome to Helix</h1>
|
||
<p>Your modern WordPress admin experience</p>
|
||
</div>
|
||
|
||
{ /* Statistics Overview */ }
|
||
<div className="helix-dashboard__stats">
|
||
<StatsCard
|
||
title="Posts"
|
||
count={ dashboardData.postsCount }
|
||
icon="📝"
|
||
color="blue"
|
||
/>
|
||
<StatsCard
|
||
title="Pages"
|
||
count={ dashboardData.pagesCount }
|
||
icon="📄"
|
||
color="green"
|
||
/>
|
||
<StatsCard
|
||
title="Comments"
|
||
count={ dashboardData.commentsCount }
|
||
icon="💬"
|
||
color="orange"
|
||
/>
|
||
<StatsCard
|
||
title="Users"
|
||
count={ dashboardData.usersCount }
|
||
icon="👥"
|
||
color="purple"
|
||
/>
|
||
</div>
|
||
|
||
{ /* Main Content Area */ }
|
||
<div className="helix-dashboard__content">
|
||
{ /* Recent Posts Widget */ }
|
||
<div className="helix-widget">
|
||
<div className="helix-widget__header">
|
||
<h2>Recent Posts</h2>
|
||
<a
|
||
href="/wp-admin/edit.php"
|
||
className="helix-widget__link"
|
||
>
|
||
View All
|
||
</a>
|
||
</div>
|
||
<div className="helix-widget__content">
|
||
{ dashboardData.recentPosts.length > 0 ? (
|
||
<ul className="helix-posts-list">
|
||
{ dashboardData.recentPosts.map( ( post ) => (
|
||
<li
|
||
key={ post.id }
|
||
className="helix-posts-list__item"
|
||
>
|
||
<div className="helix-posts-list__content">
|
||
<h3 className="helix-posts-list__title">
|
||
<a
|
||
href={ `/wp-admin/post.php?post=${ post.id }&action=edit` }
|
||
>
|
||
{ post.title.rendered ||
|
||
'Untitled' }
|
||
</a>
|
||
</h3>
|
||
<p className="helix-posts-list__date">
|
||
{ formatDate( post.date ) }
|
||
</p>
|
||
</div>
|
||
<div className="helix-posts-list__status">
|
||
<span
|
||
className={ `helix-status helix-status--${ post.status }` }
|
||
>
|
||
{ post.status }
|
||
</span>
|
||
</div>
|
||
</li>
|
||
) ) }
|
||
</ul>
|
||
) : (
|
||
<p className="helix-widget__empty">
|
||
No posts yet.{ ' ' }
|
||
<a href="/wp-admin/post-new.php">
|
||
Create your first post!
|
||
</a>
|
||
</p>
|
||
) }
|
||
</div>
|
||
</div>
|
||
|
||
{ /* Recent Comments Widget */ }
|
||
<div className="helix-widget">
|
||
<div className="helix-widget__header">
|
||
<h2>Recent Comments</h2>
|
||
<a
|
||
href="/wp-admin/edit-comments.php"
|
||
className="helix-widget__link"
|
||
>
|
||
View All
|
||
</a>
|
||
</div>
|
||
<div className="helix-widget__content">
|
||
{ dashboardData.recentComments.length > 0 ? (
|
||
<ul className="helix-comments-list">
|
||
{ dashboardData.recentComments.map(
|
||
( comment ) => (
|
||
<li
|
||
key={ comment.id }
|
||
className="helix-comments-list__item"
|
||
>
|
||
<div className="helix-comments-list__content">
|
||
<h4 className="helix-comments-list__author">
|
||
{ comment.author_name }
|
||
</h4>
|
||
<p className="helix-comments-list__excerpt">
|
||
{ comment.content.rendered
|
||
.replace(
|
||
/<[^>]*>/g,
|
||
''
|
||
)
|
||
.substring( 0, 100 ) }
|
||
...
|
||
</p>
|
||
<p className="helix-comments-list__date">
|
||
{ formatDate(
|
||
comment.date
|
||
) }
|
||
</p>
|
||
</div>
|
||
<div className="helix-comments-list__status">
|
||
<span
|
||
className={ `helix-status helix-status--${ comment.status }` }
|
||
>
|
||
{ comment.status }
|
||
</span>
|
||
</div>
|
||
</li>
|
||
)
|
||
) }
|
||
</ul>
|
||
) : (
|
||
<p className="helix-widget__empty">
|
||
No comments yet.
|
||
</p>
|
||
) }
|
||
</div>
|
||
</div>
|
||
|
||
{ /* Quick Actions Widget */ }
|
||
<div className="helix-widget">
|
||
<div className="helix-widget__header">
|
||
<h2>Quick Actions</h2>
|
||
</div>
|
||
<div className="helix-widget__content">
|
||
<div className="helix-quick-actions">
|
||
<a
|
||
href="/wp-admin/post-new.php"
|
||
className="helix-quick-action"
|
||
>
|
||
<span className="helix-quick-action__icon">
|
||
✏️
|
||
</span>
|
||
<span className="helix-quick-action__text">
|
||
Write a Post
|
||
</span>
|
||
</a>
|
||
<a
|
||
href="/wp-admin/post-new.php?post_type=page"
|
||
className="helix-quick-action"
|
||
>
|
||
<span className="helix-quick-action__icon">
|
||
📄
|
||
</span>
|
||
<span className="helix-quick-action__text">
|
||
Create a Page
|
||
</span>
|
||
</a>
|
||
<a
|
||
href="/wp-admin/upload.php"
|
||
className="helix-quick-action"
|
||
>
|
||
<span className="helix-quick-action__icon">
|
||
📁
|
||
</span>
|
||
<span className="helix-quick-action__text">
|
||
Upload Media
|
||
</span>
|
||
</a>
|
||
<a
|
||
href="/wp-admin/edit-comments.php"
|
||
className="helix-quick-action"
|
||
>
|
||
<span className="helix-quick-action__icon">
|
||
💬
|
||
</span>
|
||
<span className="helix-quick-action__text">
|
||
Moderate Comments
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{ /* WordPress News Widget */ }
|
||
<div className="helix-widget">
|
||
<div className="helix-widget__header">
|
||
<h2>WordPress News</h2>
|
||
</div>
|
||
<div className="helix-widget__content">
|
||
<p>
|
||
Stay updated with the latest WordPress news and
|
||
updates.
|
||
</p>
|
||
<div className="helix-news-placeholder">
|
||
<div className="helix-news-item">
|
||
<h4>
|
||
WordPress 6.4 “Shirley” Released
|
||
</h4>
|
||
<p>
|
||
The latest version includes new features and
|
||
improvements...
|
||
</p>
|
||
<a
|
||
href="https://wordpress.org/news/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
Read more
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
