Overview Category Cards

Recent Posts Card

Location: app/src/pages/dashboard/src/cards/recent-posts/

Features

• Post Statistics: Displays total count of posts with breakdown by status
  • Published posts count
  • Draft posts count
  • Scheduled posts count
• Post List: Shows the 10 most recent posts within the selected date range
  • Post title with link to edit
  • Post status badge (Published, Draft, Scheduled)
  • Publication date
  • Author information
  • Post type indicator
• Date Range Filtering: Automatically filters posts based on the dashboard date range
• Status Filtering: Includes published, draft, and scheduled posts
• Embedded Data: Includes author and post metadata via WordPress REST API

Data Source

• WordPress REST API: wp/v2/posts
• Parameters:
  • per_page: 10
  • orderby: date
  • order: desc
  • after: [startDate]
  • before: [endDate]
  • status: publish,draft,future
  • _embed: true

Visual Elements

• Status badges with color coding
• Post type icons
• Author avatars
• Responsive card layout
• Empty state message when no posts found

Scheduled Posts Card

Location: app/src/pages/dashboard/src/cards/scheduled-posts/

Features

• Calendar View: Monthly calendar displaying scheduled posts
• Month Navigation: Previous/next month buttons
• Post Indicators: Visual dots showing days with scheduled posts
• Post Count: Displays number of scheduled posts per day
• Date Selection: Clickable dates showing scheduled post details
• Date Range Integration: Shows scheduled posts within selected date range

Visual Elements

• Calendar grid layout
• Day indicators with post counts
• Month/year navigation
• Hover states for interactive dates
• Empty state for days without scheduled posts

Recent Comments Card

Location: app/src/pages/dashboard/src/cards/recent-comments/

Features

• Comment Statistics: Total count with breakdown by status
  • Approved comments
  • Pending comments
  • Spam comments
• Comment List: Shows the 10 most recent comments
  • Comment author with avatar
  • Comment excerpt
  • Post title link
  • Comment date
  • Comment status badge
  • Author email and URL
• Date Range Filtering: Filters comments based on dashboard date range
• Status Filtering: Includes all comment statuses
• Embedded Data: Includes author and post information

Data Source

• WordPress REST API: wp/v2/comments
• Parameters:
  • context: edit
  • per_page: 10
  • orderby: date
  • order: desc
  • after: [startDate]
  • before: [endDate]
  • status: approve
  • _embed: true

Visual Elements

• Author avatars
• Status badges
• Comment excerpts with truncation
• Post title links
• Empty state message

User Analytics Card

Location: app/src/pages/dashboard/src/cards/users-chart/

Features

• User Statistics:
  • Total users count
  • Users within selected date range
  • Recent users (last 7 days)
• Registration Chart: Visual chart showing user registration trends
  • Line or bar chart visualization
  • Time-based data points
  • Registration spikes identification
• Date Range Integration: Filters user data based on selected date range
• Trend Analysis: Shows registration patterns over time

Visual Elements

• Statistical cards with large numbers
• Chart visualization (Chart.js)
• Trend indicators
• Color-coded metrics

Media Analytics Card

Location: app/src/pages/dashboard/src/cards/media-analytics/

Features

• Media Statistics:
  • Total files count
  • Total storage size
  • Recent uploads (30 days)
  • Unused files count
  • Large files count
  • Disk usage percentage
• File Type Breakdown: Distribution by file type
  • Image files
  • Video files
  • Audio files
  • Application files
  • Text files
• File Type Icons: Visual indicators for each file type
• Storage Management: Quick access to media library management
• Size Formatting: Human-readable file sizes (KB, MB, GB)

Data Source

• Custom REST API: uixpress/v1/media-analytics
• Returns:
  • Total files and size
  • File type distribution
  • Unused files count
  • Large files information

Visual Elements

• File type icons with color coding
• Progress bars for storage usage
• Statistical cards
• "Manage Media" action button
• Empty states for no media

Server Health Card

Location: app/src/pages/dashboard/src/cards/server-health/

Features

• System Information:
  • WordPress version with update status
  • PHP version
  • Server timezone
  • SSL status
• Resource Usage:
  • Memory usage percentage and amount
  • Disk space usage percentage and amount
  • Color-coded status indicators (green/amber/red)
• Update Notifications:
  • Plugin updates count with link
  • Theme updates count with link
  • Core updates count with link
• Status Indicators: Visual feedback for system health
  • Green: Healthy (< 75% usage)
  • Amber: Warning (75-90% usage)
  • Red: Critical (> 90% usage)

Data Source

• Custom REST API: uixpress/v1/server-health
• Returns:
  • WordPress and PHP versions
  • Memory and disk usage
  • Update counts
  • SSL and timezone information

Visual Elements

• Status color coding
• Progress bars for resource usage
• Update count badges
• Quick links to update pages
• System information cards

Capability Requirements

• Requires manage_options capability
• Only visible to administrators

Card Interactions

All Overview category cards share common interaction patterns:

1. Date Range Updates: Cards automatically refresh when date range changes
2. Loading States: Show loading indicators during data fetching
3. Error Handling: Display error messages with retry options
4. Empty States: Show helpful messages when no data is available
5. Responsive Design: Adapt to mobile and desktop screen sizes
6. Dark Mode: Full support for dark theme

Technical Implementation

Common Patterns

All cards follow these patterns:

// Props
const props = defineProps({
  dateRange: { type: Array, required: true },
  appData: { type: Object, required: true },
});

// State
const data = ref([]);
const loading = ref(false);
const error = ref(null);

// Data Loading
const loadData = async () => {
  loading.value = true;
  try {
    // Fetch data based on dateRange
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
};

// Watch date range changes
watch(() => props.dateRange, loadData, { deep: true });

// Load on mount
onMounted(loadData);

Metadata Configuration

Each card includes metadata:

export default {
  id: 'card-id',
  title: 'Card Title',
  description: 'Card description',
  width: 4, // 1-12 columns
  mobileWidth: 12,
  category: 'site',
  requires_capabilities: ['manage_options'], // Optional
};