Knowledge Base

Project Details Documentation

This document explains the structure and behaviour of the Project Details page. It contains the project header, CMS icon, domain row and the entire panel grid including Branding, Web Design, Performance, Hosting and Agency panels.

Contents

Overview

The Project Details page is the core control center for each project. It shows the project identity and contains the entire suite of dashboard panels. All dynamic operations such as performance metric trend comparisons and data loading happen here.

Page layout

ProjectDetailsPage PageWrapper Project Header Name Domain CMS Icon Panels Grid BrandingPanel WebDesignPanel PerformancePanel HostingPanel AgencyPanel

Data flow

The data flow for the Project Details page follows a structured pattern.

  • Load project metadata from /api/projects/[id]
  • Display project name and CMS
  • Load each panel asynchronously
  • Each panel hits its own API route
  • API routes fetch definitions and values
  • Panels render grouped metrics

Database structure

  • projectsStores the core identity of the project. Includes CMS type, domain, custom settings (JSON), and timestamps.
  • project_panel_metric_definitionsMaster dictionary of all possible metrics. Specifies:
    • panel_key
    • metric_key
    • label
    • description
    • sort_order
  • project_panel_metricsContains raw values for each metric and each time period. This is the backbone of the Performance Panel.
    • project_id
    • metric_key
    • panel_key
    • period_type (daily, weekly, monthly, yearly)
    • value

Future expansion

  • Full CMS sync
  • Full performance integrations with real Google APIs
  • Historical tracking engine
  • Better branding asset management