chordia-ui 3.7.2 → 3.7.4

package/src/components/performance/PerformanceDetailsPage.jsx

@@ -0,0 +1,940 @@
+"use client";
+
+import React from "react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Calendar,
+  Download,
+  Phone,
+  ChevronDown,
+  ChevronUp,
+  ChevronLeft,
+  ChevronRight,
+  TrendingUp,
+  Lightbulb,
+  ShieldCheck,
+  FolderKanban,
+  Layers,
+} from "lucide-react";
+import DataTable2 from "../data/DataTable2";
+
+const C = {
+  ink: "#2E3236",
+  muted: "#808183",
+  border: "#D9D9D9",
+  borderSubtle: "#E6E6E6",
+  iconCircle: "#F3F7F7",
+  black: "#0B0B0B",
+  white: "#FFFFFF",
+  neutralBorder: "#BFBFBF",
+  neutral800: "#323232",
+  neutral600: "#676767",
+  neutral450: "#8B8B8B",
+  neutral400: "#989898",
+  neutral300: "#B2B2B0",
+  neutral150: "#D8D8D8",
+  neutral100: "#E6E6E6",
+  beige: "rgba(243, 241, 229, 0.4)",
+};
+
+const FONT_DISPLAY = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
+const FONT_BODY = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
+
+function Sparkline({ trend = "up", width = 49.618, height = 35 }) {
+  const id = React.useId();
+  const linePath =
+    "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024";
+  const areaPath =
+    "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 52 36"
+      fill="none"
+      style={{
+        flexShrink: 0,
+        transform: trend === "down" ? "scaleX(-1)" : undefined,
+      }}
+    >
+      <defs>
+        <linearGradient
+          id={`spark-${id}`}
+          x1="9.96776"
+          y1="16.2053"
+          x2="9.96776"
+          y2="36.0002"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={C.ink} />
+          <stop offset="1" stopColor={C.white} stopOpacity="0.01" />
+        </linearGradient>
+      </defs>
+      <path
+        d={areaPath}
+        fill={`url(#spark-${id})`}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        opacity="0.1"
+      />
+      <path
+        d={linePath}
+        stroke={C.ink}
+        strokeWidth="2"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeDasharray={trend === "down" ? "2 4" : undefined}
+      />
+    </svg>
+  );
+}
+
+function KpiCell({ value, label, sub, trend = "up" }) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 16,
+        minWidth: 0,
+      }}
+    >
+      <Sparkline trend={trend} />
+      <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
+        <div
+          style={{
+            fontFamily: FONT_DISPLAY,
+            fontSize: 28,
+            fontWeight: 400,
+            lineHeight: "1.2",
+            color: C.muted,
+            letterSpacing: "-0.01em",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {value}
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <span
+            style={{
+              fontFamily: FONT_BODY,
+              fontSize: 13,
+              color: C.ink,
+              lineHeight: "1.2",
+            }}
+          >
+            {label}
+          </span>
+          <span
+            style={{
+              fontFamily: FONT_BODY,
+              fontSize: 13,
+              color: C.neutral600,
+              lineHeight: "1.2",
+            }}
+          >
+            {sub}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RangeChip({ label, active = false }) {
+  return (
+    <button
+      type="button"
+      style={{
+        height: 32,
+        minWidth: 31,
+        padding: "0 12px",
+        borderRadius: 10,
+        border: active ? "none" : `1px solid ${C.borderSubtle}`,
+        background: active ? C.black : C.white,
+        color: active ? C.white : C.black,
+        fontFamily: FONT_BODY,
+        fontSize: 14,
+        cursor: "pointer",
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+function FilterButton({ icon: Icon, children }) {
+  return (
+    <button
+      type="button"
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        height: 32,
+        padding: "0 16px",
+        borderRadius: 10,
+        border: `1px solid ${C.neutralBorder}`,
+        background: C.white,
+        cursor: "pointer",
+        fontFamily: FONT_BODY,
+        fontSize: 14,
+        color: C.neutral800,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {Icon && <Icon size={18} strokeWidth={1.75} />}
+      {children}
+    </button>
+  );
+}
+
+const DEFAULT_LINE_POINTS = [
+  [0, 30],
+  [60, 50],
+  [120, 95],
+  [180, 60],
+  [240, 70],
+  [300, 80],
+];
+
+function CompassLineChart({
+  yLabels = ["4.6", "4.4", "4.2", "4.0", "3.9"],
+  xLabels = ["Mar 16", "Mar 23", "Mar 30", "Apr 6", "Apr 13", "Apr 15"],
+  // points: array of [x, y] pairs OR array of y-numbers (auto-distributed in x).
+  // y is in pixel space 0..height (top to bottom). x is auto-scaled to the chart width.
+  points = DEFAULT_LINE_POINTS,
+  // index of the marker to render filled (defaults to the last point)
+  highlightIndex,
+}) {
+  const width = 460;
+  const height = 110;
+  const normalized = (Array.isArray(points) && points.length > 0)
+    ? (Array.isArray(points[0])
+        ? points
+        : points.map((y, i) => [i, y]))
+    : DEFAULT_LINE_POINTS;
+  const minX = normalized[0][0];
+  const maxX = normalized[normalized.length - 1][0];
+  const xSpan = maxX - minX || 1;
+  const sx = (x) => ((x - minX) / xSpan) * width;
+  const linePath = normalized
+    .map(([x, y], i) => `${i === 0 ? "M" : "L"}${sx(x)},${y}`)
+    .join(" ");
+  const areaPath = `${linePath} L${sx(normalized[normalized.length - 1][0])},${height} L${sx(normalized[0][0])},${height} Z`;
+  const gradId = React.useId();
+  const highlight = highlightIndex == null ? normalized.length - 1 : highlightIndex;
+  // Vertical grid lines at evenly-spaced x-label positions (not every data point)
+  const gridCount = Math.max(2, xLabels.length);
+  const gridXs = Array.from({ length: gridCount }, (_, i) => (i / (gridCount - 1)) * width);
+  return (
+    <div style={{ display: "flex", gap: 8, height: 133, width: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          padding: "14px 0",
+          fontFamily: FONT_BODY,
+          fontSize: 10,
+          color: C.neutral800,
+          flexShrink: 0,
+        }}
+      >
+        {yLabels.map((l) => (
+          <span key={l}>{l}</span>
+        ))}
+      </div>
+      <div style={{ flex: 1, position: "relative", minWidth: 0 }}>
+        <svg
+          width="100%"
+          height={height + 14}
+          viewBox={`0 0 ${width} ${height + 14}`}
+          preserveAspectRatio="none"
+        >
+          <defs>
+            <linearGradient id={`area-${gradId}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#0B0B0B" stopOpacity="0.08" />
+              <stop offset="100%" stopColor="#0B0B0B" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          {gridXs.map((gx, i) => (
+            <line
+              key={`grid-${i}`}
+              x1={gx}
+              y1="0"
+              x2={gx}
+              y2={height}
+              stroke={C.borderSubtle}
+              strokeDasharray="2 3"
+              strokeWidth="1"
+              vectorEffect="non-scaling-stroke"
+            />
+          ))}
+          <path d={areaPath} fill={`url(#area-${gradId})`} />
+          <path
+            d={linePath}
+            stroke={C.black}
+            strokeWidth="1.5"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            vectorEffect="non-scaling-stroke"
+          />
+          {normalized.map(([x, y], i) => {
+            const isHighlight = i === highlight;
+            return (
+              <circle
+                key={i}
+                cx={sx(x)}
+                cy={y}
+                r={isHighlight ? 4 : 3}
+                fill={isHighlight ? C.black : C.white}
+                stroke={C.black}
+                strokeWidth="1.5"
+                vectorEffect="non-scaling-stroke"
+              />
+            );
+          })}
+        </svg>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            paddingRight: 6,
+            fontFamily: FONT_BODY,
+            fontSize: 10,
+            color: C.neutral800,
+            marginTop: 6,
+          }}
+        >
+          {xLabels.map((l) => (
+            <span key={l}>{l}</span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChartCard({ title, value, delta, children }) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        background: C.white,
+        border: `1px solid ${C.border}`,
+        borderRadius: 8,
+        padding: 24,
+        display: "flex",
+        flexDirection: "column",
+        gap: 24,
+        minWidth: 0,
+        boxShadow: "0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 12px rgba(11, 11, 11, 0.06)",
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
+        <span
+          style={{
+            fontFamily: FONT_DISPLAY,
+            fontWeight: 700,
+            fontSize: 15,
+            color: C.ink,
+            lineHeight: 1.2,
+          }}
+        >
+          {title}
+        </span>
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "flex-end",
+            gap: 4,
+            fontFamily: FONT_DISPLAY,
+            fontWeight: 600,
+          }}
+        >
+          <span style={{ fontSize: 20, color: C.black, lineHeight: 1 }}>{value}</span>
+          <span style={{ fontSize: 10, color: C.neutral300, lineHeight: 1 }}>{delta}</span>
+        </span>
+      </div>
+      <div style={{ flex: 1 }}>{children}</div>
+    </div>
+  );
+}
+
+function SectionHeading({ icon: Icon, title, trailing, iconColor = C.ink, bordered = false }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        width: "100%",
+        paddingBottom: bordered ? 12 : 0,
+        borderBottom: bordered ? `1px solid ${C.border}` : "none",
+      }}
+    >
+      <div
+        style={{
+          width: 24,
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        <Icon size={22} color={iconColor} strokeWidth={1.75} />
+      </div>
+      <div
+        style={{
+          flex: 1,
+          fontFamily: FONT_DISPLAY,
+          fontWeight: 600,
+          fontSize: 16,
+          color: C.ink,
+          lineHeight: 1.2,
+          textTransform: "uppercase",
+          letterSpacing: "0.02em",
+        }}
+      >
+        {title}
+      </div>
+      {trailing && (
+        <div style={{ fontFamily: FONT_BODY, fontSize: 14, color: C.ink }}>{trailing}</div>
+      )}
+    </div>
+  );
+}
+
+function CitationRow({ bullet, citation, date }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontFamily: FONT_BODY,
+        fontSize: 14,
+        color: C.ink,
+        lineHeight: "24px",
+      }}
+    >
+      <span>{bullet}</span>
+      <span style={{ display: "inline-flex", gap: 4 }}>
+        <span>{citation}</span>
+        <span style={{ color: C.muted }}>({date})</span>
+      </span>
+    </div>
+  );
+}
+
+function AccordionRow({ title, summary, calls, delta, expanded = false, bullets }) {
+  return (
+    <div
+      style={{
+        borderTop: `1px solid ${C.border}`,
+        padding: 16,
+        display: "flex",
+        gap: 12,
+        alignItems: "flex-start",
+        cursor: "pointer",
+      }}
+    >
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: expanded ? 16 : 12, minWidth: 0 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <span
+            style={{
+              fontFamily: FONT_BODY,
+              fontWeight: 500,
+              fontSize: 14,
+              color: C.black,
+              lineHeight: "24px",
+            }}
+          >
+            {title}
+          </span>
+          <span style={{ fontFamily: FONT_BODY, fontSize: 14, color: C.muted, lineHeight: "24px" }}>
+            {summary}
+          </span>
+        </div>
+        {expanded && bullets && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            {bullets.map((b, i) => (
+              <CitationRow key={i} {...b} />
+            ))}
+          </div>
+        )}
+        <div style={{ display: "flex", gap: 16 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            <Phone size={12} color={C.ink} strokeWidth={1.75} />
+            <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink }}>{calls}</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            <TrendingUp size={12} color={C.ink} strokeWidth={1.75} />
+            <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink }}>{delta}</span>
+          </div>
+        </div>
+      </div>
+      {expanded ? (
+        <ChevronUp size={20} color={C.ink} strokeWidth={2} />
+      ) : (
+        <ChevronDown size={20} color={C.ink} strokeWidth={2} />
+      )}
+    </div>
+  );
+}
+
+function PercentRow({ label, value }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "8px 8px 12px",
+        borderBottom: `1px solid ${C.border}`,
+        fontFamily: FONT_BODY,
+        fontSize: 13,
+        lineHeight: "1.2",
+      }}
+    >
+      <span style={{ color: C.ink }}>{label}</span>
+      <span style={{ color: C.muted }}>{value}</span>
+    </div>
+  );
+}
+
+function CompassDots({ value = 0, max = 5 }) {
+  const v = typeof value === "number" ? value : parseFloat(value) || 0;
+  const full = Math.floor(v);
+  const hasPartial = v % 1 > 0 && full < max;
+  return (
+    <div style={{ display: "flex", gap: 4 }}>
+      {Array.from({ length: max }).map((_, i) => {
+        if (i < full) {
+          return (
+            <span
+              key={i}
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                background: C.black,
+                display: "inline-block",
+              }}
+            />
+          );
+        }
+        if (i === full && hasPartial) {
+          return (
+            <span
+              key={i}
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                  background: C.black,
+                  display: "inline-block",
+                }}
+              />
+            </span>
+          );
+        }
+        return (
+          <span
+            key={i}
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              background: C.white,
+              border: `1px solid ${C.border}`,
+              display: "inline-block",
+              boxSizing: "border-box",
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export const DEFAULT_SESSION_COLUMNS = [
+  { id: "title", label: "Title", width: 220, sortable: true, filterable: true },
+  { id: "date", label: "Date", width: 170, sortable: true },
+  { id: "duration", label: "Duration", width: 170, sortable: true },
+  { id: "lift", label: "Lift", width: 120, sortable: true },
+  {
+    id: "compass",
+    label: "Compass Score",
+    width: 220,
+    sortable: true,
+    render: (value) => {
+      const num = typeof value === "number" ? value : parseFloat(value) || 0;
+      return (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
+          <span style={{ minWidth: 32 }}>{value}</span>
+          <CompassDots value={num} />
+        </span>
+      );
+    },
+  },
+];
+
+
+function SubSectionHeading({ icon: Icon, title }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 16, width: "100%" }}>
+      <div
+        style={{
+          width: 34,
+          height: 34,
+          borderRadius: 9999,
+          background: C.iconCircle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        <Icon size={20} color={C.ink} strokeWidth={1.75} />
+      </div>
+      <span
+        style={{
+          fontFamily: FONT_DISPLAY,
+          fontWeight: 600,
+          fontSize: 16,
+          color: C.ink,
+          lineHeight: 1.2,
+        }}
+      >
+        {title}
+      </span>
+    </div>
+  );
+}
+
+export default function PerformanceDetailsPage({
+  agentName = "",
+  startDate = "",
+  endDate = "",
+  totalCalls = "",
+  onBack,
+  className = "",
+  // KPI strip
+  kpiBaseline = { value: "", label: "", sub: "", trend: "up" },
+  kpiAgentLift = { value: "", label: "", sub: "", trend: "down" },
+  kpiScore = { value: "", label: "", sub: "", trend: "up" },
+  // Chart cards (Baseline / Agent Lift / Score / CSAT / Volume)
+  // Each takes { value, delta, yLabels?, xLabels?, points? }.
+  // points is an array of [x, y] pairs OR a flat array of y-numbers.
+  baselineChart = { value: "", delta: "" },
+  agentLiftChart = { value: "", delta: "" },
+  scoreChart = { value: "", delta: "" },
+  csatChart = { value: "", delta: "" },
+  volumeChart = { value: "", delta: "" },
+  // Insight sections
+  guidanceItems = [],
+  strengthItems = [],
+  callDrivers = [],
+  callParadigms = [],
+  // Sessions table
+  sessions = [],
+  sessionColumns = [],
+  initialPageSize = 10,
+}) {
+  return (
+    <div
+      className={className}
+      style={{
+        background: C.white,
+        fontFamily: FONT_BODY,
+        color: C.ink,
+        width: "100%",
+        minWidth: 1192,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "23px 32px",
+          minHeight: 78,
+          boxSizing: "border-box",
+        }}
+      >
+        <button
+          type="button"
+          aria-label="Back"
+          onClick={onBack}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            background: "transparent",
+            border: "none",
+            cursor: "pointer",
+            color: C.ink,
+            padding: 0,
+            flexShrink: 0,
+          }}
+        >
+          <ArrowLeft size={20} strokeWidth={1.75} />
+        </button>
+        <div
+          style={{
+            paddingLeft: 16,
+            borderLeft: `1px solid ${C.border}`,
+            flex: 1,
+            minWidth: 0,
+            alignSelf: "stretch",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <h1
+            style={{
+              fontFamily: FONT_DISPLAY,
+              fontSize: 24,
+              fontWeight: 400,
+              color: C.ink,
+              margin: 0,
+              lineHeight: 1,
+              whiteSpace: "nowrap",
+            }}
+          >
+            {agentName}
+          </h1>
+        </div>
+        <button
+          type="button"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            height: 32,
+            padding: "0 16px",
+            borderRadius: 10,
+            border: `1px solid ${C.neutralBorder}`,
+            background: C.white,
+            cursor: "pointer",
+            fontFamily: FONT_BODY,
+            fontSize: 14,
+            lineHeight: "24px",
+            color: C.neutral800,
+            flexShrink: 0,
+          }}
+        >
+          <Download size={18} strokeWidth={1.75} />
+          Export Data
+        </button>
+      </div>
+
+      <div
+        style={{
+          padding: "0 32px 32px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 16,
+            paddingLeft: 49,
+          }}
+        >
+          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
+            <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+              <Calendar size={14} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
+              <span
+                style={{
+                  fontFamily: FONT_BODY,
+                  fontSize: 12,
+                  color: C.ink,
+                  lineHeight: 1.5,
+                }}
+              >
+                {startDate}
+              </span>
+              <ArrowRight size={12} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
+              <span
+                style={{
+                  fontFamily: FONT_BODY,
+                  fontSize: 12,
+                  color: C.ink,
+                  lineHeight: 1.5,
+                }}
+              >
+                {endDate}
+              </span>
+            </div>
+            <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+              <Phone size={14} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
+              <span
+                style={{
+                  fontFamily: FONT_BODY,
+                  fontSize: 12,
+                  color: C.ink,
+                  lineHeight: 1.5,
+                }}
+              >
+                {totalCalls}
+              </span>
+            </div>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <RangeChip label="8h" />
+            <RangeChip label="1d" />
+            <RangeChip label="7d" />
+            <RangeChip label="30d" active />
+            <FilterButton icon={Calendar}>Date Range</FilterButton>
+          </div>
+        </div>
+
+        <div
+          style={{
+            background: C.beige,
+            border: `1px solid ${C.border}`,
+            borderRadius: 8,
+            padding: 16,
+            display: "flex",
+            gap: 24,
+            alignItems: "center",
+          }}
+        >
+          <KpiCell value={kpiBaseline.value} label={kpiBaseline.label} sub={kpiBaseline.sub} trend={kpiBaseline.trend} />
+          <ArrowRight size={20} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
+          <KpiCell value={kpiAgentLift.value} label={kpiAgentLift.label} sub={kpiAgentLift.sub} trend={kpiAgentLift.trend} />
+          <ArrowRight size={20} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
+          <KpiCell value={kpiScore.value} label={kpiScore.label} sub={kpiScore.sub} trend={kpiScore.trend} />
+        </div>
+
+        <div style={{ display: "flex", gap: 24 }}>
+          <ChartCard title="Baseline" value={baselineChart.value} delta={baselineChart.delta}>
+            <CompassLineChart
+              yLabels={baselineChart.yLabels}
+              xLabels={baselineChart.xLabels}
+              points={baselineChart.points}
+            />
+          </ChartCard>
+          <ChartCard title="Agent Lift" value={agentLiftChart.value} delta={agentLiftChart.delta}>
+            <CompassLineChart
+              yLabels={agentLiftChart.yLabels}
+              xLabels={agentLiftChart.xLabels}
+              points={agentLiftChart.points}
+            />
+          </ChartCard>
+          <ChartCard title="Score" value={scoreChart.value} delta={scoreChart.delta}>
+            <CompassLineChart
+              yLabels={scoreChart.yLabels}
+              xLabels={scoreChart.xLabels}
+              points={scoreChart.points}
+            />
+          </ChartCard>
+        </div>
+
+        <div style={{ display: "flex", gap: 24 }}>
+          <ChartCard title="CSAT" value={csatChart.value} delta={csatChart.delta}>
+            <CompassLineChart
+              yLabels={csatChart.yLabels}
+              xLabels={csatChart.xLabels}
+              points={csatChart.points}
+            />
+          </ChartCard>
+          <ChartCard title="Volume" value={volumeChart.value} delta={volumeChart.delta}>
+            <CompassLineChart
+              yLabels={volumeChart.yLabels}
+              xLabels={volumeChart.xLabels}
+              points={volumeChart.points}
+            />
+          </ChartCard>
+        </div>
+
+        <div style={{ display: "flex", gap: 24, marginTop: 8 }}>
+          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
+            <SectionHeading icon={Lightbulb} title="Guidance" iconColor="#F4B400" />
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              {guidanceItems.map((item, i) => (
+                <AccordionRow key={i} {...item} />
+              ))}
+            </div>
+          </div>
+          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
+            <SectionHeading icon={ShieldCheck} title="Strengths" iconColor="#C98A5A" />
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              {strengthItems.map((item, i) => (
+                <AccordionRow key={i} {...item} />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }}>
+          <SectionHeading icon={Phone} title="Call Mix" iconColor="#C98A5A" />
+          <div style={{ display: "flex", gap: 24 }}>
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }}>
+              <SubSectionHeading icon={FolderKanban} title="Drivers" />
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                {callDrivers.map((row, i) => (
+                  <PercentRow key={i} {...row} />
+                ))}
+              </div>
+            </div>
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }}>
+              <SubSectionHeading icon={Layers} title="Paradigms" />
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                {callParadigms.map((row, i) => (
+                  <PercentRow key={i} {...row} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 8 }}>
+          <span
+            style={{
+              fontFamily: FONT_DISPLAY,
+              fontWeight: 600,
+              fontSize: 16,
+              color: C.ink,
+              lineHeight: 1.2,
+            }}
+          >
+            Sessions History
+          </span>
+          <DataTable2
+            data={sessions}
+            columns={sessionColumns}
+            initialPageSize={initialPageSize}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}