chordia-ui 3.7.2 → 3.7.4

package/src/components/performance/PerformancePanel.jsx

@@ -3,7 +3,6 @@
 import React from "react";
 import {
   Download,
-  Users,
   ChevronDown,
   Calendar,
   Search,
@@ -13,8 +12,15 @@ import {
   Lightbulb,
   ShieldCheck,
   Phone,
-  Activity,
+  Signal,
+  FolderKanban,
+  Layers,
+  Check,
 } from "lucide-react";
+import DataTable2 from "../data/DataTable2";
+import PerformanceDetailsPage from "./PerformanceDetailsPage";
+
+const EMPTY_STAT = { value: "", label: "", trend: "up" };
 
 const C = {
   ink: "#2E3236",
@@ -258,219 +264,142 @@ function SearchBar() {
 }
 
 function CompassRating({ value = 0, max = 5 }) {
-  const filled = Math.round(value);
+  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) => (
-        <span
-          key={i}
-          style={{
-            width: 10,
-            height: 10,
-            borderRadius: "50%",
-            background: i < filled ? C.black : C.white,
-            border: i < filled ? "none" : `1px solid ${C.border}`,
-            display: "inline-block",
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-const TABLE_COLS = [
-  { key: "agent", label: "Agent", width: 170, align: "left", bold: true },
-  { key: "supervisor", label: "Supervisor", width: 170, align: "left" },
-  { key: "calls", label: "Calls", width: 80, align: "right" },
-  { key: "baseline", label: "Baseline", width: 80, align: "right" },
-  { key: "lift", label: "Lift", width: 80, align: "right" },
-  { key: "score", label: "Score", width: 80, align: "right" },
-  { key: "compass", label: "Compass Score", suffix: "(Out of 5)", width: 170, align: "left" },
-  { key: "totalDuration", label: "Total Duration", flex: 1, align: "right" },
-  { key: "avgDuration", label: "Average Duration", flex: 1, align: "right" },
-];
-
-const TABLE_ROWS = [
-  { agent: "Alex Johnson", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 3, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Ricardo Odom", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 3.25, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Latoya Tillman", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Javier Lawmon", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Naomi Wilkenmare", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Latoya Tillman", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 3.75, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Latoya Tillman", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Latoya Tillman", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Latoya Tillman", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-  { agent: "Latoya Tillman", supervisor: "Jordan Smith", calls: "1423", baseline: "97.2%", lift: "-5.7pp", score: "78.3%", compass: 4, totalDuration: "20h 25m", avgDuration: "52s" },
-];
-
-function PerfTable() {
-  return (
-    <div style={{ width: "100%" }}>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          background: C.iconCircle,
-          border: `1px solid ${C.border}`,
-          borderTopLeftRadius: 4,
-          borderTopRightRadius: 4,
-        }}
-      >
-        {TABLE_COLS.map((col) => (
-          <div
-            key={col.key}
+      {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: col.width,
-              flex: col.flex,
-              padding: "0 12px",
-              height: 36,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: col.align === "right" ? "flex-end" : "flex-start",
-              fontFamily: FONT_DISPLAY,
-              fontSize: 14,
-              fontWeight: 500,
-              color: C.black,
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              background: C.white,
+              border: `1px solid ${C.border}`,
+              display: "inline-block",
               boxSizing: "border-box",
             }}
-          >
-            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-              {col.label}
-              {col.suffix && (
-                <span style={{ fontWeight: 400, color: C.muted, marginLeft: 4 }}>{col.suffix}</span>
-              )}
-            </span>
-          </div>
-        ))}
-      </div>
-      {TABLE_ROWS.map((row, i) => (
-        <div
-          key={i}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            borderLeft: `1px solid ${C.border}`,
-            borderRight: `1px solid ${C.border}`,
-            borderBottom: `1px solid ${C.border}`,
-            background: C.white,
-          }}
-        >
-          {TABLE_COLS.map((col) => {
-            const value = row[col.key];
-            const isCompass = col.key === "compass";
-            return (
-              <div
-                key={col.key}
-                style={{
-                  width: col.width,
-                  flex: col.flex,
-                  padding: "0 12px",
-                  height: 36,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: col.align === "right" ? "flex-end" : "flex-start",
-                  gap: isCompass ? 12 : 0,
-                  fontFamily: FONT_BODY,
-                  fontSize: 14,
-                  fontWeight: col.bold ? 500 : 400,
-                  color: col.bold ? C.black : C.ink,
-                  boxSizing: "border-box",
-                }}
-              >
-                {isCompass ? (
-                  <>
-                    <span style={{ width: 32, textAlign: "right", color: C.ink }}>{value}</span>
-                    <CompassRating value={value} />
-                  </>
-                ) : (
-                  <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{value}</span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      ))}
+          />
+        );
+      })}
     </div>
   );
 }
 
-function PaginationBar() {
-  const PageBtn = ({ children, active, disabled }) => (
-    <button
-      type="button"
-      disabled={disabled}
-      style={{
-        height: 24,
-        minWidth: 22,
-        padding: "0 8px",
-        borderRadius: 10,
-        border: active ? "none" : `1px solid ${C.borderSubtle}`,
-        background: active ? C.black : C.white,
-        color: active ? C.white : C.black,
-        opacity: disabled ? 0.5 : 1,
-        fontFamily: FONT_BODY,
-        fontSize: 12,
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        cursor: disabled ? "default" : "pointer",
-      }}
-    >
-      {children}
-    </button>
-  );
+export const DEFAULT_AGENT_COLUMNS = [
+  { id: "agent", label: "Agent", width: 180, sortable: true, filterable: true },
+  { id: "supervisor", label: "Supervisor", width: 170, sortable: true, filterable: true },
+  { id: "calls", label: "Calls", width: 100, sortable: true },
+  { id: "baseline", label: "Baseline", width: 110, sortable: true },
+  { id: "lift", label: "Lift", width: 100, sortable: true },
+  { id: "score", label: "Score", width: 100, sortable: true },
+  {
+    id: "compass",
+    label: "Compass Score",
+    width: 200,
+    sortable: true,
+    render: (value) => (
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
+        <span style={{ minWidth: 32 }}>{value}</span>
+        <CompassRating value={typeof value === "number" ? value : 0} />
+      </span>
+    ),
+  },
+  { id: "totalDuration", label: "Total Duration", width: 150, sortable: true },
+  { id: "avgDuration", label: "Average Duration", width: 170, sortable: true },
+];
 
+
+function SectionHeading({ icon: Icon, title, trailing, iconColor = C.ink, bordered = false }) {
   return (
     <div
       style={{
         display: "flex",
-        justifyContent: "space-between",
         alignItems: "center",
-        padding: "12px 0",
+        gap: 8,
+        width: "100%",
+        paddingBottom: bordered ? 12 : 0,
+        borderBottom: bordered ? `1px solid ${C.border}` : "none",
       }}
     >
-      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <span style={{ fontFamily: FONT_BODY, fontSize: 14, color: "#323232" }}>Result per page</span>
-          <PageBtn>
-            10
-            <ChevronDown size={12} strokeWidth={2} />
-          </PageBtn>
-        </div>
-        <span style={{ fontFamily: FONT_BODY, fontSize: 14, color: "#323232" }}>1-10 of 50</span>
+      <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={{ display: "flex", alignItems: "center", gap: 6 }}>
-        <PageBtn disabled>
-          <ChevronLeft size={12} strokeWidth={2} />
-          Back
-        </PageBtn>
-        <PageBtn active>1</PageBtn>
-        <PageBtn>2</PageBtn>
-        <PageBtn>3</PageBtn>
-        <PageBtn>4</PageBtn>
-        <PageBtn>5</PageBtn>
-        <PageBtn>
-          Next
-          <ChevronRight size={12} strokeWidth={2} />
-        </PageBtn>
+      <div
+        style={{
+          flex: 1,
+          fontFamily: FONT_DISPLAY,
+          fontWeight: 700,
+          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 SectionHeading({ icon: Icon, title, trailing }) {
+function SubSectionHeading({ icon: Icon, title }) {
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 16,
-        width: "100%",
-        paddingBottom: 12,
-        borderBottom: `1px solid ${C.border}`,
-      }}
-    >
+    <div style={{ display: "flex", alignItems: "center", gap: 16, width: "100%" }}>
       <div
         style={{
           width: 34,
@@ -485,109 +414,130 @@ function SectionHeading({ icon: Icon, title, trailing }) {
       >
         <Icon size={20} color={C.ink} strokeWidth={1.75} />
       </div>
-      <div
+      <span
         style={{
-          flex: 1,
           fontFamily: FONT_DISPLAY,
-          fontWeight: 600,
+          fontWeight: 700,
           fontSize: 16,
           color: C.ink,
-          lineHeight: "1.2",
+          lineHeight: "24px",
         }}
       >
         {title}
-      </div>
-      {trailing && (
-        <div style={{ fontFamily: FONT_BODY, fontSize: 14, color: C.ink }}>{trailing}</div>
-      )}
+      </span>
     </div>
   );
 }
 
-function AccordionItem({ title, summary, calls, percent }) {
+const DEFAULT_BULLETS = [
+  { text: "Bullet point one", citation: "Q:83", date: "2026-04-14" },
+  { text: "Bullet point one", citation: "Q:83", date: "2026-04-14" },
+  { text: "Bullet point one", citation: "Q:83", date: "2026-04-14" },
+];
+
+function AccordionItem({ title, summary, calls, percent, bullets, defaultExpanded = false }) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const rows = bullets && bullets.length > 0 ? bullets : DEFAULT_BULLETS;
   return (
-    <div
+    <button
+      type="button"
+      onClick={() => setExpanded((v) => !v)}
+      aria-expanded={expanded}
       style={{
         borderTop: `1px solid ${C.border}`,
+        borderLeft: "none",
+        borderRight: "none",
+        borderBottom: "none",
+        background: "transparent",
         padding: 16,
         display: "flex",
-        gap: 16,
+        gap: 12,
         alignItems: "flex-start",
         cursor: "pointer",
+        width: "100%",
+        textAlign: "left",
+        fontFamily: FONT_BODY,
       }}
     >
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 12, minWidth: 0 }}>
-        <div style={{ fontFamily: FONT_BODY, fontWeight: 500, fontSize: 14, color: C.black, lineHeight: "24px" }}>
-          {title}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: expanded ? 16 : 12,
+          minWidth: 0,
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <div
+            style={{
+              fontFamily: FONT_DISPLAY,
+              fontWeight: 600,
+              fontSize: 14,
+              color: C.black,
+              lineHeight: "24px",
+            }}
+          >
+            {title}
+          </div>
+          <div style={{ fontFamily: FONT_BODY, fontSize: 14, color: C.muted, lineHeight: "24px" }}>
+            {summary}
+          </div>
         </div>
-        <div style={{ fontFamily: FONT_BODY, fontSize: 14, color: C.muted, lineHeight: "24px" }}>{summary}</div>
+        {expanded && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            {rows.map((b, i) => (
+              <div
+                key={i}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  fontFamily: FONT_BODY,
+                  fontSize: 14,
+                  color: C.ink,
+                  lineHeight: "24px",
+                  gap: 16,
+                }}
+              >
+                <span>{b.text}</span>
+                <span style={{ display: "inline-flex", gap: 4, whiteSpace: "nowrap" }}>
+                  <span style={{ color: C.ink }}>{b.citation}</span>
+                  <span style={{ color: C.muted }}>({b.date})</span>
+                </span>
+              </div>
+            ))}
+          </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>
+            <Phone size={14} color={C.ink} strokeWidth={1.75} />
+            <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink, lineHeight: 1.5 }}>
+              {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 }}>{percent}</span>
+            <TrendingUp size={14} color={C.ink} strokeWidth={1.75} />
+            <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink, lineHeight: 1.5 }}>
+              {percent}
+            </span>
           </div>
         </div>
       </div>
-      <ChevronDown size={18} color={C.ink} strokeWidth={2} />
-    </div>
+      <ChevronDown
+        size={20}
+        color={C.ink}
+        strokeWidth={2}
+        style={{
+          flexShrink: 0,
+          transform: expanded ? "rotate(180deg)" : "none",
+          transition: "transform 150ms ease",
+        }}
+      />
+    </button>
   );
 }
 
-const GUIDANCE_ITEMS = [
-  { title: "Close the loop:", summary: "Restate the plan and confirm what happens next so the customer", calls: "9411 Calls", percent: "95.5% (0.6pp)" },
-  { title: "Frame solutions positively:", summary: "Lead with what you can do rather than what you can’t", calls: "9411 Calls", percent: "95.5% (0.6pp)" },
-  { title: "Show expertise:", summary: "Lead with what you can do rather than what you can’t", calls: "9411 Calls", percent: "95.5% (0.6pp)" },
-  { title: "Demonstrate active listening:", summary: "Lead with what you can do rather than what you can’t", calls: "9411 Calls", percent: "95.5% (0.6pp)" },
-  { title: "Close the call properly:", summary: "Lead with what you can do rather than what you can’t", calls: "9411 Calls", percent: "95.5% (0.6pp)" },
-  { title: "Address confusion:", summary: "Lead with what you can do rather than what you can’t", calls: "9411 Calls", percent: "95.5% (0.6pp)" },
-];
-
-const STRENGTH_ITEMS = [
-  { title: "Excellence:", summary: "Used solution focused, Positive framing", calls: "9411 Calls", percent: "15.1% (0.6pp)" },
-  { title: "Excellence:", summary: "Demonstrated strong product knowledge - The no. 1 behavioral predictor", calls: "9411 Calls", percent: "5.7% (0.6pp)" },
-  { title: "Excellence:", summary: "Customer explicitly confirmed their issue was resolved", calls: "9411 Calls", percent: "5.7% (0.6pp)" },
-];
-
-const CALL_DRIVERS = [
-  { label: "General Information Request", value: "26.3 %" },
-  { label: "Appointment Scheduling", value: "12.2 %" },
-  { label: "Order Placement", value: "12.3 %" },
-  { label: "Order Status", value: "10.5 %" },
-  { label: "Appointment Follow-up", value: "8.3 %" },
-];
-
-const CALL_PARADIGMS = [
-  { label: "Resolutions", value: "43.6 %" },
-  { label: "Informational", value: "32.6 %" },
-  { label: "Conversion", value: "23.7 %" },
-  { label: "Recovery", value: "0.2 %" },
-];
-
-const TOP_SIGNALS_LEFT = [
-  { label: "Closure Quality Adequate", value: "99 %" },
-  { label: "Evaluation Review", value: "96.5 %" },
-  { label: "Customer Needs Fully Addressed", value: "59.1 %" },
-  { label: "Call Flow Expectation Set", value: "57.6 %" },
-  { label: "Next Steps Stated", value: "37 %" },
-  { label: "Active Listening Demonstrated", value: "31 %" },
-  { label: "Agent Courtesy Demonstrated", value: "30.5 %" },
-  { label: "Engagement Budget Discussed", value: "29.8 %" },
-];
-
-const TOP_SIGNALS_RIGHT = [
-  { label: "Fee or Cost Discussed", value: "26.6 %" },
-  { label: "Objection Handling Effective", value: "27.2 %" },
-  { label: "Opening Expectations Set", value: "26.6 %" },
-  { label: "Empathy or Acknowledgement Expressed", value: "24.2 %" },
-  { label: "Follow up Required", value: "22.4 %" },
-  { label: "Estimate Provided", value: "18.9 %" },
-  { label: "Script Adherence Likely", value: "17.5 %" },
-];
-
 function PercentRow({ label, value }) {
   return (
     <div
@@ -608,7 +558,80 @@ function PercentRow({ label, value }) {
   );
 }
 
-export default function PerformancePanel({ className = "" }) {
+export default function PerformancePanel({
+  className = "",
+  onAgentClick,
+  // Header text
+  title = "Performance",
+  subtitle = "Agent performance metrics, trends and coaching Insights",
+  dateRangeLabel = "",
+  // View-by dropdown
+  viewByOptions = [],
+  initialViewBy = "",
+  // KPI strip
+  volumeStat = EMPTY_STAT,
+  compassStat = EMPTY_STAT,
+  baselineSubStat = EMPTY_STAT,
+  agentLiftSubStat = EMPTY_STAT,
+  scoreSubStat = EMPTY_STAT,
+  // Agent table
+  agentRows = [],
+  agentColumns = [],
+  initialPageSize = 10,
+  // Insight sections
+  guidanceItems = [],
+  strengthItems = [],
+  callDrivers = [],
+  callParadigms = [],
+  topSignalsLeft = [],
+  topSignalsRight = [],
+  topSignalsTrailing = "",
+}) {
+  const [selectedAgent, setSelectedAgent] = React.useState(null);
+  const [viewByOpen, setViewByOpen] = React.useState(false);
+  const [viewBy, setViewBy] = React.useState(initialViewBy);
+  const viewByTriggerRef = React.useRef(null);
+  const viewByPopoverRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!viewByOpen) return;
+    const handler = (e) => {
+      if (
+        viewByPopoverRef.current?.contains(e.target) ||
+        viewByTriggerRef.current?.contains(e.target)
+      ) {
+        return;
+      }
+      setViewByOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [viewByOpen]);
+
+  const viewByLabel =
+    viewByOptions.find((o) => o.id === viewBy)?.label || (viewByOptions[0]?.label ?? "");
+
+  const handleRowClick = (row) => {
+    if (onAgentClick) {
+      onAgentClick(row);
+      return;
+    }
+    setSelectedAgent(row);
+  };
+
+  if (selectedAgent) {
+    return (
+      <PerformanceDetailsPage
+        className={className}
+        agentName={selectedAgent.agent}
+        startDate="2026-03-16"
+        endDate="2026-04-15"
+        totalCalls={`${selectedAgent.calls} Calls`}
+        onBack={() => setSelectedAgent(null)}
+      />
+    );
+  }
+
   return (
     <div
       className={className}
@@ -638,10 +661,10 @@ export default function PerformancePanel({ className = "" }) {
               letterSpacing: "-0.01em",
             }}
           >
-            Performance
+            {title}
           </h1>
           <p style={{ fontFamily: FONT_BODY, fontSize: 14, color: "#1E1E1E", margin: 0, lineHeight: "1.4" }}>
-            Agent performance metrics, trends and coaching Insights
+            {subtitle}
           </p>
         </div>
         <button
@@ -667,11 +690,116 @@ export default function PerformancePanel({ className = "" }) {
       </div>
 
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <FilterButton icon={Users} trailing={ChevronDown}>
-          32 Supervisors
-        </FilterButton>
+        <div style={{ position: "relative" }}>
+          <button
+            type="button"
+            ref={viewByTriggerRef}
+            onClick={() => setViewByOpen((v) => !v)}
+            aria-haspopup="listbox"
+            aria-expanded={viewByOpen}
+            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: "#323232",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {viewByLabel}
+            <ChevronDown
+              size={20}
+              strokeWidth={1.75}
+              style={{
+                transform: viewByOpen ? "rotate(180deg)" : "none",
+                transition: "transform 120ms ease",
+              }}
+            />
+          </button>
+          {viewByOpen && (
+            <div
+              ref={viewByPopoverRef}
+              role="listbox"
+              style={{
+                position: "absolute",
+                top: 36,
+                left: 0,
+                zIndex: 20,
+                background: C.white,
+                border: `1px solid ${C.border}`,
+                borderRadius: 4,
+                boxShadow: "-2px 2px 1px rgba(0, 0, 0, 0.25)",
+                display: "flex",
+                flexDirection: "column",
+                minWidth: 144,
+                fontFamily: FONT_BODY,
+              }}
+            >
+              <div
+                style={{
+                  padding: 12,
+                  fontFamily: FONT_DISPLAY,
+                  fontWeight: 700,
+                  fontSize: 13,
+                  color: C.ink,
+                  lineHeight: 1.2,
+                }}
+              >
+                View by
+              </div>
+              {viewByOptions.map((opt) => {
+                const isSelected = viewBy === opt.id;
+                return (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    role="option"
+                    aria-selected={isSelected}
+                    onClick={() => {
+                      setViewBy(opt.id);
+                      setViewByOpen(false);
+                    }}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      padding: isSelected ? 12 : "12px 12px 12px 40px",
+                      borderTop: `1px solid ${C.border}`,
+                      borderLeft: "none",
+                      borderRight: "none",
+                      borderBottom: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontFamily: FONT_BODY,
+                      fontSize: 13,
+                      lineHeight: 1.2,
+                      color: C.ink,
+                      width: "100%",
+                    }}
+                  >
+                    {isSelected && (
+                      <Check size={20} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
+                    )}
+                    <span>{opt.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
         <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
-          <span style={{ fontFamily: FONT_BODY, fontSize: 13, color: C.ink }}>2026-03-16 to 2026-04-15</span>
+          {dateRangeLabel && (
+            <span style={{ fontFamily: FONT_BODY, fontSize: 13, color: C.ink }}>{dateRangeLabel}</span>
+          )}
           <RangeChip label="8h" />
           <RangeChip label="1d" />
           <RangeChip label="7d" />
@@ -682,8 +810,8 @@ export default function PerformancePanel({ className = "" }) {
       </div>
 
       <div style={{ display: "flex", gap: 24 }}>
-        <StatCard value="10956" label="Volume" trend="up" style={{ width: 264, flexShrink: 0 }} />
-        <StatCard value="4.0" label="Compass Score (0.4)" trend="down" style={{ width: 264, flexShrink: 0 }} />
+        <StatCard value={volumeStat.value} label={volumeStat.label} trend={volumeStat.trend} style={{ width: 264, flexShrink: 0 }} />
+        <StatCard value={compassStat.value} label={compassStat.label} trend={compassStat.trend} style={{ width: 264, flexShrink: 0 }} />
         <div
           style={{
             flex: 1,
@@ -697,30 +825,32 @@ export default function PerformancePanel({ className = "" }) {
             boxSizing: "border-box",
           }}
         >
-          <StatSubCell value="97.3%" label="Baseline (2.0)" trend="up" />
-          <StatSubCell value="-6.3pp" label="Agent Lift (6.0)" trend="down" withDivider />
-          <StatSubCell value="76.9%" label="Score (6.0)" trend="up" withDivider />
+          <StatSubCell value={baselineSubStat.value} label={baselineSubStat.label} trend={baselineSubStat.trend} />
+          <StatSubCell value={agentLiftSubStat.value} label={agentLiftSubStat.label} trend={agentLiftSubStat.trend} withDivider />
+          <StatSubCell value={scoreSubStat.value} label={scoreSubStat.label} trend={scoreSubStat.trend} withDivider />
         </div>
       </div>
 
-      <div>
-        <PerfTable />
-        <PaginationBar />
-      </div>
+      <DataTable2
+        data={agentRows}
+        columns={agentColumns}
+        initialPageSize={initialPageSize}
+        onRowClick={handleRowClick}
+      />
 
       <div style={{ display: "flex", gap: 24 }}>
         <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16 }}>
-          <SectionHeading icon={Lightbulb} title="Guidance" />
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            {GUIDANCE_ITEMS.map((item, i) => (
+          <SectionHeading icon={Lightbulb} title="Guidance" iconColor="#C98A5A" />
+          <div style={{ display: "flex", flexDirection: "column", borderBottom: `1px solid ${C.border}` }}>
+            {guidanceItems.map((item, i) => (
               <AccordionItem key={i} {...item} />
             ))}
           </div>
         </div>
         <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16 }}>
-          <SectionHeading icon={ShieldCheck} title="Consistent Strengths" />
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            {STRENGTH_ITEMS.map((item, i) => (
+          <SectionHeading icon={ShieldCheck} title="Strengths" iconColor="#C98A5A" />
+          <div style={{ display: "flex", flexDirection: "column", borderBottom: `1px solid ${C.border}` }}>
+            {strengthItems.map((item, i) => (
               <AccordionItem key={i} {...item} />
             ))}
           </div>
@@ -728,24 +858,20 @@ export default function PerformancePanel({ className = "" }) {
       </div>
 
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <SectionHeading icon={Phone} title="Call Mix" />
+        <SectionHeading icon={Phone} title="Call Mix" iconColor="#C98A5A" />
         <div style={{ display: "flex", gap: 24 }}>
           <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
-            <div style={{ padding: "8px 0", fontFamily: FONT_DISPLAY, fontWeight: 600, fontSize: 15, color: C.ink, lineHeight: "24px" }}>
-              Drivers
-            </div>
+            <SubSectionHeading icon={FolderKanban} title="Drivers" />
             <div style={{ display: "flex", flexDirection: "column" }}>
-              {CALL_DRIVERS.map((row, i) => (
+              {callDrivers.map((row, i) => (
                 <PercentRow key={i} {...row} />
               ))}
             </div>
           </div>
           <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
-            <div style={{ padding: "8px 0", fontFamily: FONT_DISPLAY, fontWeight: 600, fontSize: 15, color: C.ink, lineHeight: "24px" }}>
-              Paradigms
-            </div>
+            <SubSectionHeading icon={Layers} title="Paradigms" />
             <div style={{ display: "flex", flexDirection: "column" }}>
-              {CALL_PARADIGMS.map((row, i) => (
+              {callParadigms.map((row, i) => (
                 <PercentRow key={i} {...row} />
               ))}
             </div>
@@ -754,15 +880,15 @@ export default function PerformancePanel({ className = "" }) {
       </div>
 
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <SectionHeading icon={Activity} title="Top Signals" trailing="15 Signals Detected" />
+        <SectionHeading icon={Signal} title="Top Signals" iconColor="#C98A5A" trailing={topSignalsTrailing} bordered />
         <div style={{ display: "flex", gap: 24 }}>
           <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
-            {TOP_SIGNALS_LEFT.map((row, i) => (
+            {topSignalsLeft.map((row, i) => (
               <PercentRow key={i} {...row} />
             ))}
           </div>
           <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
-            {TOP_SIGNALS_RIGHT.map((row, i) => (
+            {topSignalsRight.map((row, i) => (
               <PercentRow key={i} {...row} />
             ))}
           </div>