| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import React from "react"; |
| 3 |
|
| 4 |
import { I } from "../../analytics/components/common/icons"; |
| 5 |
import { CopyIcon, FauxBtn } from "./primitives"; |
| 6 |
|
| 7 |
/** |
| 8 |
* Inert mock of Pro's Content Intelligence Overview |
| 9 |
* (betterdocs-pro/react-src/admin/content-intelligence/views/CIOverviewView.js). |
| 10 |
* |
| 11 |
* Same three bands as the real screen, in the same order: the KPI strip that |
| 12 |
* answers "how is the knowledge base doing", the "this week's top action" hero |
| 13 |
* with the evidence behind it, and the module tiles that navigate. Numbers are |
| 14 |
* invented but plausible for a mid-size knowledge base — the point is that a |
| 15 |
* Free user recognises this screen the day they upgrade. |
| 16 |
*/ |
| 17 |
|
| 18 |
// Per-module accent, copied from Pro so the same hue keys the same module in |
| 19 |
// both plugins (gaps green, stale amber, duplicates violet, health blue). |
| 20 |
const ACCENT = { |
| 21 |
gaps: "#00b884", |
| 22 |
stale: "#f59e0b", |
| 23 |
duplicates: "#8b5cf6", |
| 24 |
health: "#3b82f6" |
| 25 |
}; |
| 26 |
|
| 27 |
const GRADE_COLOR = "#16C098"; |
| 28 |
|
| 29 |
function Kpi( { label, color, icon: Icon, children, footer } ) { |
| 30 |
return ( |
| 31 |
<div className="bda-kpi bd-cit-kpi"> |
| 32 |
<div className="bda-kpi-top"> |
| 33 |
<div className="bda-kpi-label">{ label }</div> |
| 34 |
<div className="bda-kpi-ico" style={ { background: color + "1A", color } }><Icon size={ 15 } /></div> |
| 35 |
</div> |
| 36 |
<div className="bd-cit-kpi-body">{ children }</div> |
| 37 |
{ footer && <div className="bd-cit-kpi-foot">{ footer }</div> } |
| 38 |
</div> |
| 39 |
); |
| 40 |
} |
| 41 |
|
| 42 |
function Tile( { id, icon: Icon, value, unit, title, blurb } ) { |
| 43 |
const color = ACCENT[ id ]; |
| 44 |
return ( |
| 45 |
<div className="bd-cit-tile"> |
| 46 |
<span className="bd-cit-tile-ico" style={ { background: color + "18", color } }><Icon size={ 18 } /></span> |
| 47 |
<span className="bd-cit-tile-num"> |
| 48 |
<strong>{ value }</strong> |
| 49 |
<span className="bd-cit-tile-unit">{ unit }</span> |
| 50 |
</span> |
| 51 |
<span className="bd-cit-tile-title">{ title }</span> |
| 52 |
<span className="bd-cit-tile-blurb">{ blurb }</span> |
| 53 |
<span className="bd-cit-tile-cta">{ __( "View", "betterdocs" ) } <I.ArrowRight size={ 12 } /></span> |
| 54 |
</div> |
| 55 |
); |
| 56 |
} |
| 57 |
|
| 58 |
// The evidence block under the hero: which reader signals point at the topic. |
| 59 |
const SIGNALS = [ |
| 60 |
{ n: "86", label: __( "zero-result searches", "betterdocs" ) }, |
| 61 |
{ n: "27", label: __( "high-bounce exits", "betterdocs" ) }, |
| 62 |
{ n: "15", label: __( "feedback mentions", "betterdocs" ) } |
| 63 |
]; |
| 64 |
|
| 65 |
export default function CIOverviewMock() { |
| 66 |
return ( |
| 67 |
<div className="bda-stack-sm"> |
| 68 |
<div className="bda-kpi-grid"> |
| 69 |
<Kpi label={ __( "Content Gaps Detected", "betterdocs" ) } color={ ACCENT.gaps } icon={ I.Sparkle } |
| 70 |
footer={ <span className="bd-cit-hint">{ __( "3 new this week", "betterdocs" ) }</span> }> |
| 71 |
<div className="bda-kpi-value">14</div> |
| 72 |
</Kpi> |
| 73 |
|
| 74 |
<Kpi label={ __( "Stale Docs", "betterdocs" ) } color={ ACCENT.stale } icon={ I.Clock } |
| 75 |
footer={ <span className="bd-cit-hint">{ __( "5 critical", "betterdocs" ) }</span> }> |
| 76 |
<div className="bda-kpi-value">26</div> |
| 77 |
</Kpi> |
| 78 |
|
| 79 |
<Kpi label={ __( "Content Health Score", "betterdocs" ) } color={ GRADE_COLOR } icon={ I.PieChart } |
| 80 |
footer={ <> |
| 81 |
<span className="bda-trend up"><I.ArrowUp size={ 11 } />{ __( "+4 pts", "betterdocs" ) }</span> |
| 82 |
<span className="bd-cit-hint">{ __( "site-wide", "betterdocs" ) }</span> |
| 83 |
</> }> |
| 84 |
<div className="bd-cit-score"> |
| 85 |
<span className="bda-kpi-value">78</span> |
| 86 |
<span className="bd-cit-grade" style={ { background: GRADE_COLOR + "1A", color: GRADE_COLOR } }>B</span> |
| 87 |
</div> |
| 88 |
</Kpi> |
| 89 |
|
| 90 |
<Kpi label={ __( "AI Suggestions Applied", "betterdocs" ) } color="#8b5cf6" icon={ I.Check } |
| 91 |
footer={ <div className="bd-cit-bar"><div className="bd-cit-bar-fill" style={ { width: "68%" } } /></div> }> |
| 92 |
<div className="bd-cit-score"> |
| 93 |
<span className="bda-kpi-value">31</span> |
| 94 |
<span className="bd-cit-rate"><strong>68%</strong> { __( "accepted", "betterdocs" ) }</span> |
| 95 |
</div> |
| 96 |
</Kpi> |
| 97 |
</div> |
| 98 |
|
| 99 |
<div className="bd-cit-hero"> |
| 100 |
<div className="bd-cit-hero-main"> |
| 101 |
<span className="bd-cit-hero-ico"><I.Sparkle size={ 22 } /></span> |
| 102 |
<div className="bd-cit-hero-copy"> |
| 103 |
<div className="bd-cit-hero-eyebrow"> |
| 104 |
<span>{ __( "This week's top action", "betterdocs" ) }</span> |
| 105 |
<span className="bd-cit-conf is-high">{ __( "High confidence", "betterdocs" ) }</span> |
| 106 |
</div> |
| 107 |
<h2 className="bd-cit-hero-title"> |
| 108 |
{ __( "Write the missing", "betterdocs" ) } <em>SSO login errors</em> { __( "guide", "betterdocs" ) } |
| 109 |
</h2> |
| 110 |
<p className="bd-cit-hero-sub"> |
| 111 |
{ __( "128 reader signals point to this missing topic. It's your highest-demand gap, and no doc covers it yet.", "betterdocs" ) } |
| 112 |
</p> |
| 113 |
<div className="bd-cit-hero-actions"> |
| 114 |
<FauxBtn kind="primary">{ __( "Review this gap", "betterdocs" ) }</FauxBtn> |
| 115 |
<FauxBtn kind="ghost">{ __( "See all gaps", "betterdocs" ) }</FauxBtn> |
| 116 |
</div> |
| 117 |
</div> |
| 118 |
</div> |
| 119 |
|
| 120 |
<div className="bd-cit-signals"> |
| 121 |
{ SIGNALS.map( ( s, i ) => ( |
| 122 |
<div className="bd-cit-signal" key={ i }> |
| 123 |
<div className="bd-cit-signal-num">{ s.n }</div> |
| 124 |
<div className="bd-cit-signal-label">{ s.label }</div> |
| 125 |
</div> |
| 126 |
) ) } |
| 127 |
</div> |
| 128 |
</div> |
| 129 |
|
| 130 |
<div> |
| 131 |
<h3 className="bd-cit-section">{ __( "Intelligence modules", "betterdocs" ) }</h3> |
| 132 |
<div className="bd-cit-tiles"> |
| 133 |
<Tile id="gaps" icon={ I.Sparkle } value="14" unit={ __( "topics", "betterdocs" ) } |
| 134 |
title={ __( "Content Gaps", "betterdocs" ) } |
| 135 |
blurb={ __( "Demand your docs don't answer yet.", "betterdocs" ) } /> |
| 136 |
<Tile id="stale" icon={ I.Clock } value="26" unit={ __( "docs", "betterdocs" ) } |
| 137 |
title={ __( "Stale Content", "betterdocs" ) } |
| 138 |
blurb={ __( "Docs losing freshness and accuracy.", "betterdocs" ) } /> |
| 139 |
<Tile id="duplicates" icon={ CopyIcon } value="9" unit={ __( "pairs", "betterdocs" ) } |
| 140 |
title={ __( "Duplicates & Overlaps", "betterdocs" ) } |
| 141 |
blurb={ __( "Docs covering the same ground.", "betterdocs" ) } /> |
| 142 |
<Tile id="health" icon={ I.PieChart } value="B·78" unit={ __( "score", "betterdocs" ) } |
| 143 |
title={ __( "Content Health", "betterdocs" ) } |
| 144 |
blurb={ __( "How healthy your KB is overall.", "betterdocs" ) } /> |
| 145 |
</div> |
| 146 |
</div> |
| 147 |
</div> |
| 148 |
); |
| 149 |
} |
| 150 |
|
