chordia-ui 3.9.2 → 3.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PerformancePanel.cjs.js +1 -1
- package/dist/PerformancePanel.cjs.js.map +1 -1
- package/dist/PerformancePanel.es.js +587 -749
- package/dist/PerformancePanel.es.js.map +1 -1
- package/dist/components/chat.cjs.js +3 -3
- package/dist/components/chat.cjs.js.map +1 -1
- package/dist/components/chat.es.js +67 -67
- package/dist/components/chat.es.js.map +1 -1
- package/dist/components/media.cjs.js +1 -1
- package/dist/components/media.cjs.js.map +1 -1
- package/dist/components/media.es.js +4 -4
- package/dist/components/media.es.js.map +1 -1
- package/dist/components/reports.cjs.js +2 -2
- package/dist/components/reports.cjs.js.map +1 -1
- package/dist/components/reports.es.js +18 -18
- package/dist/components/reports.es.js.map +1 -1
- package/package.json +1 -1
- package/src/components/chat/ChatHistoryPanel.jsx +3 -3
- package/src/components/chat/ChatInterface.jsx +3 -3
- package/src/components/media/InteractionSummaryCard.jsx +1 -1
- package/src/components/performance/PerformanceDetailsPage.jsx +51 -52
- package/src/components/performance/performanceRangeFormat.js +3 -2
- package/src/components/reports/ReportsDetails.jsx +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media.cjs.js","sources":["../../src/components/media/InteractionSummaryCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n/**\n * Direction rail color mapping.\n * Uses rail colors for categorization, not judgment.\n */\nconst DIRECTION_COLORS = {\n inbound: \"var(--rail-discovery, #5E88B0)\",\n outbound: \"var(--rail-purple, #9B7AA8)\",\n internal: \"var(--rail-outcome, #6B7C93)\",\n chat: \"var(--rail-teal, #7BA89D)\",\n};\n\n/**\n * Format seconds to mm:ss or h:mm:ss\n */\nconst formatDuration = (seconds) => {\n if (seconds == null || seconds <= 0) return null;\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.round(seconds % 60);\n if (h > 0) return `${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n};\n\n/**\n * Format a date string to a compact, readable form.\n */\nconst formatDate = (dateStr) => {\n if (!dateStr) return null;\n try {\n return new Date(dateStr).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n } catch {\n return null;\n }\n};\n\n/**\n * InteractionCard Component\n * Displays a summary card for a completed interaction (call/chat).\n * Designed for use in history lists, search results, and monitoring views.\n *\n * Uses the Chordia design language: left rail, muted metadata,\n * non-judgmental score display, subtle hover states.\n *\n * @param {Object} props\n * @param {string} [props.title] - Primary label (e.g., call purpose, one-liner)\n * @param {string} [props.agentName] - Agent who handled the interaction\n * @param {string} [props.customerName] - Customer name (omit if unknown)\n * @param {string} [props.date] - ISO date string for when the interaction occurred\n * @param {number} [props.duration] - Duration in seconds\n * @param {string} [props.direction] - \"inbound\" | \"outbound\" | \"internal\" | \"chat\"\n * @param {string} [props.driver] - Call driver / reason\n * @param {string} [props.sentiment] - Customer sentiment label\n * @param {string} [props.disposition] - Call disposition / outcome label\n * @param {Array} [props.scores] - [{label, value}] score metrics to display\n * @param {Array} [props.tags] - [{label, color?}] additional tag pills\n * @param {string} [props.railColor] - Override the left rail color\n * @param {boolean} [props.isActive] - Whether this card is currently selected/active\n * @param {Function} [props.onClick] - Click handler\n * @param {React.ReactNode} [props.children] - Additional content below the card body\n */\nexport default function InteractionCard({\n title,\n agentName,\n customerName,\n date,\n duration,\n direction,\n driver,\n sentiment,\n disposition,\n scores,\n tags,\n railColor,\n isActive = false,\n onClick,\n children,\n}) {\n const resolvedRailColor =\n railColor || DIRECTION_COLORS[direction] || \"var(--rail-outcome, #6B7C93)\";\n const formattedDuration = formatDuration(duration);\n const formattedDate = formatDate(date);\n\n // Collect metadata items\n const metaItems = [];\n if (agentName) metaItems.push(agentName);\n if (customerName) metaItems.push(customerName);\n if (formattedDate) metaItems.push(formattedDate);\n if (formattedDuration) metaItems.push(formattedDuration);\n\n // Collect tag items from explicit tags + contextual fields\n const allTags = [];\n if (direction) allTags.push({ label: direction });\n if (driver) allTags.push({ label: driver });\n if (sentiment) allTags.push({ label: sentiment });\n if (disposition) allTags.push({ label: disposition });\n if (tags) allTags.push(...tags);\n\n return (\n <div\n onClick={onClick}\n style={{\n position: \"relative\",\n padding: \"10px 14px 10px 18px\",\n borderRadius: \"var(--radius-md, 8px)\",\n overflow: \"hidden\",\n background: isActive\n ? \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\"\n : \"var(--paper-elevated, rgba(255,255,255,0.82))\",\n border: `1px solid ${\n isActive\n ? \"var(--border-hover, rgba(52,58,64,0.18))\"\n : \"var(--border, rgba(52,58,64,0.12))\"\n }`,\n cursor: onClick ? \"pointer\" : \"default\",\n transition: \"background 0.15s, border-color 0.15s\",\n }}\n onMouseEnter={(e) => {\n if (!isActive && onClick) {\n e.currentTarget.style.background =\n \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\";\n e.currentTarget.style.borderColor =\n \"var(--border-hover, rgba(52,58,64,0.18))\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isActive) {\n e.currentTarget.style.background =\n \"var(--paper-elevated, rgba(255,255,255,0.82))\";\n e.currentTarget.style.borderColor =\n \"var(--border, rgba(52,58,64,0.12))\";\n }\n }}\n >\n {/* Left rail */}\n <div\n style={{\n position: \"absolute\",\n left: 0,\n top: 0,\n bottom: 0,\n width: \"var(--rail-width-thin, 4px)\",\n backgroundColor: resolvedRailColor,\n borderRadius: \"var(--radius-md, 8px) 0 0 var(--radius-md, 8px)\",\n }}\n />\n\n {/* Main content row */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"space-between\",\n gap: 12,\n }}\n >\n {/* Left: title + metadata */}\n <div style={{ flex: 1, minWidth: 0 }}>\n {/* Title */}\n {title ? (\n <div\n style={{\n fontSize: \"var(--text-md, 13px)\",\n fontWeight: 550,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {title}\n </div>\n ) : null}\n\n {/* Metadata row */}\n {metaItems.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 6,\n marginTop: 3,\n fontSize: \"var(--text-sm, 11px)\",\n color: \"var(--text-muted, rgba(30,33,37,0.56))\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {metaItems.map((item, i) => (\n <React.Fragment key={i}>\n {i > 0 ? (\n <span\n style={{\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n }}\n >\n ·\n </span>\n ) : null}\n <span>{item}</span>\n </React.Fragment>\n ))}\n </div>\n ) : null}\n\n {/* Tags row */}\n {allTags.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 4,\n marginTop: 6,\n }}\n >\n {allTags.map((tag, i) => (\n <span\n key={i}\n style={{\n display: \"inline-block\",\n fontSize: \"var(--text-xs, 10px)\",\n fontWeight: 500,\n padding: \"1px 7px\",\n borderRadius: 999,\n background: \"var(--paper, rgba(255,255,255,0.78))\",\n border: \"1px solid var(--border-subtle, rgba(52,58,64,0.08))\",\n color: tag.color || \"var(--text-faint, rgba(30,33,37,0.36))\",\n textTransform: \"capitalize\",\n letterSpacing: \"0.01em\",\n lineHeight: 1.5,\n }}\n >\n {tag.label}\n </span>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Right: score pills */}\n {scores && scores.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n gap: 10,\n flexShrink: 0,\n alignItems: \"flex-start\",\n paddingTop: 2,\n }}\n >\n {scores.map((score, i) => (\n <div key={i} style={{ textAlign: \"center\", minWidth: 28 }}>\n <div\n style={{\n fontSize: \"var(--text-lg, 14px)\",\n fontWeight: 600,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n fontFamily: \"var(--font-mono, monospace)\",\n lineHeight: 1.2,\n }}\n >\n {score.value != null ? Math.round(score.value) : \"—\"}\n </div>\n <div\n style={{\n fontSize: \"var(--text-xxs, 9px)\",\n fontWeight: 650,\n textTransform: \"uppercase\",\n letterSpacing: \"var(--tracking-label, 0.16em)\",\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n marginTop: 1,\n }}\n >\n {score.label}\n </div>\n </div>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Optional children slot */}\n {children}\n </div>\n );\n}\n"],"names":["DIRECTION_COLORS","formatDuration","seconds","h","m","formatDate","dateStr","InteractionCard","title","agentName","customerName","date","duration","direction","driver","sentiment","disposition","scores","tags","railColor","isActive","onClick","children","resolvedRailColor","formattedDuration","formattedDate","metaItems","allTags","jsxs","jsx","item","i","React","tag","score"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"media.cjs.js","sources":["../../src/components/media/InteractionSummaryCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n/**\n * Direction rail color mapping.\n * Uses rail colors for categorization, not judgment.\n */\nconst DIRECTION_COLORS = {\n inbound: \"var(--rail-discovery, #5E88B0)\",\n outbound: \"var(--rail-purple, #9B7AA8)\",\n internal: \"var(--rail-outcome, #6B7C93)\",\n chat: \"var(--rail-teal, #7BA89D)\",\n};\n\n/**\n * Format seconds to mm:ss or h:mm:ss\n */\nconst formatDuration = (seconds) => {\n if (seconds == null || seconds <= 0) return null;\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.round(seconds % 60);\n if (h > 0) return `${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n};\n\n/**\n * Format a date string to a compact, readable form.\n */\nconst formatDate = (dateStr) => {\n if (!dateStr) return null;\n try {\n return new Date(dateStr).toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n } catch {\n return null;\n }\n};\n\n/**\n * InteractionCard Component\n * Displays a summary card for a completed interaction (call/chat).\n * Designed for use in history lists, search results, and monitoring views.\n *\n * Uses the Chordia design language: left rail, muted metadata,\n * non-judgmental score display, subtle hover states.\n *\n * @param {Object} props\n * @param {string} [props.title] - Primary label (e.g., call purpose, one-liner)\n * @param {string} [props.agentName] - Agent who handled the interaction\n * @param {string} [props.customerName] - Customer name (omit if unknown)\n * @param {string} [props.date] - ISO date string for when the interaction occurred\n * @param {number} [props.duration] - Duration in seconds\n * @param {string} [props.direction] - \"inbound\" | \"outbound\" | \"internal\" | \"chat\"\n * @param {string} [props.driver] - Call driver / reason\n * @param {string} [props.sentiment] - Customer sentiment label\n * @param {string} [props.disposition] - Call disposition / outcome label\n * @param {Array} [props.scores] - [{label, value}] score metrics to display\n * @param {Array} [props.tags] - [{label, color?}] additional tag pills\n * @param {string} [props.railColor] - Override the left rail color\n * @param {boolean} [props.isActive] - Whether this card is currently selected/active\n * @param {Function} [props.onClick] - Click handler\n * @param {React.ReactNode} [props.children] - Additional content below the card body\n */\nexport default function InteractionCard({\n title,\n agentName,\n customerName,\n date,\n duration,\n direction,\n driver,\n sentiment,\n disposition,\n scores,\n tags,\n railColor,\n isActive = false,\n onClick,\n children,\n}) {\n const resolvedRailColor =\n railColor || DIRECTION_COLORS[direction] || \"var(--rail-outcome, #6B7C93)\";\n const formattedDuration = formatDuration(duration);\n const formattedDate = formatDate(date);\n\n // Collect metadata items\n const metaItems = [];\n if (agentName) metaItems.push(agentName);\n if (customerName) metaItems.push(customerName);\n if (formattedDate) metaItems.push(formattedDate);\n if (formattedDuration) metaItems.push(formattedDuration);\n\n // Collect tag items from explicit tags + contextual fields\n const allTags = [];\n if (direction) allTags.push({ label: direction });\n if (driver) allTags.push({ label: driver });\n if (sentiment) allTags.push({ label: sentiment });\n if (disposition) allTags.push({ label: disposition });\n if (tags) allTags.push(...tags);\n\n return (\n <div\n onClick={onClick}\n style={{\n position: \"relative\",\n padding: \"10px 14px 10px 18px\",\n borderRadius: \"var(--radius-md, 8px)\",\n overflow: \"hidden\",\n background: isActive\n ? \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\"\n : \"var(--paper-elevated, rgba(255,255,255,0.82))\",\n border: `1px solid ${\n isActive\n ? \"var(--border-hover, rgba(52,58,64,0.18))\"\n : \"var(--border, rgba(52,58,64,0.12))\"\n }`,\n cursor: onClick ? \"pointer\" : \"default\",\n transition: \"background 0.15s, border-color 0.15s\",\n }}\n onMouseEnter={(e) => {\n if (!isActive && onClick) {\n e.currentTarget.style.background =\n \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\";\n e.currentTarget.style.borderColor =\n \"var(--border-hover, rgba(52,58,64,0.18))\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isActive) {\n e.currentTarget.style.background =\n \"var(--paper-elevated, rgba(255,255,255,0.82))\";\n e.currentTarget.style.borderColor =\n \"var(--border, rgba(52,58,64,0.12))\";\n }\n }}\n >\n {/* Left rail */}\n <div\n style={{\n position: \"absolute\",\n left: 0,\n top: 0,\n bottom: 0,\n width: \"var(--rail-width-thin, 4px)\",\n backgroundColor: resolvedRailColor,\n borderRadius: \"var(--radius-md, 8px) 0 0 var(--radius-md, 8px)\",\n }}\n />\n\n {/* Main content row */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"space-between\",\n gap: 12,\n }}\n >\n {/* Left: title + metadata */}\n <div style={{ flex: 1, minWidth: 0 }}>\n {/* Title */}\n {title ? (\n <div\n style={{\n fontSize: \"var(--text-md, 13px)\",\n fontWeight: 550,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {title}\n </div>\n ) : null}\n\n {/* Metadata row */}\n {metaItems.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 6,\n marginTop: 3,\n fontSize: \"var(--text-sm, 11px)\",\n color: \"var(--text-muted, rgba(30,33,37,0.56))\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {metaItems.map((item, i) => (\n <React.Fragment key={i}>\n {i > 0 ? (\n <span\n style={{\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n }}\n >\n ·\n </span>\n ) : null}\n <span>{item}</span>\n </React.Fragment>\n ))}\n </div>\n ) : null}\n\n {/* Tags row */}\n {allTags.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 4,\n marginTop: 6,\n }}\n >\n {allTags.map((tag, i) => (\n <span\n key={i}\n style={{\n display: \"inline-block\",\n fontSize: \"var(--text-xs, 10px)\",\n fontWeight: 500,\n padding: \"1px 7px\",\n borderRadius: 999,\n background: \"var(--paper, rgba(255,255,255,0.78))\",\n border: \"1px solid var(--border-subtle, rgba(52,58,64,0.08))\",\n color: tag.color || \"var(--text-faint, rgba(30,33,37,0.36))\",\n textTransform: \"capitalize\",\n letterSpacing: \"0.01em\",\n lineHeight: 1.5,\n }}\n >\n {tag.label}\n </span>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Right: score pills */}\n {scores && scores.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n gap: 10,\n flexShrink: 0,\n alignItems: \"flex-start\",\n paddingTop: 2,\n }}\n >\n {scores.map((score, i) => (\n <div key={i} style={{ textAlign: \"center\", minWidth: 28 }}>\n <div\n style={{\n fontSize: \"var(--text-lg, 14px)\",\n fontWeight: 600,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n fontFamily: \"var(--font-mono, monospace)\",\n lineHeight: 1.2,\n }}\n >\n {score.value != null ? Math.round(score.value) : \"—\"}\n </div>\n <div\n style={{\n fontSize: \"var(--text-xxs, 9px)\",\n fontWeight: 650,\n textTransform: \"uppercase\",\n letterSpacing: \"var(--tracking-label, 0.16em)\",\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n marginTop: 1,\n }}\n >\n {score.label}\n </div>\n </div>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Optional children slot */}\n {children}\n </div>\n );\n}\n"],"names":["DIRECTION_COLORS","formatDuration","seconds","h","m","formatDate","dateStr","InteractionCard","title","agentName","customerName","date","duration","direction","driver","sentiment","disposition","scores","tags","railColor","isActive","onClick","children","resolvedRailColor","formattedDuration","formattedDate","metaItems","allTags","jsxs","jsx","item","i","React","tag","score"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const D = {
|
|
|
16
16
|
if (!t)
|
|
17
17
|
return null;
|
|
18
18
|
try {
|
|
19
|
-
return new Date(t).toLocaleDateString(
|
|
19
|
+
return new Date(t).toLocaleDateString(void 0, {
|
|
20
20
|
month: "short",
|
|
21
21
|
day: "numeric",
|
|
22
22
|
hour: "2-digit",
|
|
@@ -33,8 +33,8 @@ function M({
|
|
|
33
33
|
date: p,
|
|
34
34
|
duration: y,
|
|
35
35
|
direction: u,
|
|
36
|
-
driver:
|
|
37
|
-
sentiment:
|
|
36
|
+
driver: v,
|
|
37
|
+
sentiment: h,
|
|
38
38
|
disposition: b,
|
|
39
39
|
scores: g,
|
|
40
40
|
tags: c,
|
|
@@ -46,7 +46,7 @@ function M({
|
|
|
46
46
|
const w = S || D[u] || "var(--rail-outcome, #6B7C93)", x = W(y), m = k(p), l = [];
|
|
47
47
|
o && l.push(o), i && l.push(i), m && l.push(m), x && l.push(x);
|
|
48
48
|
const e = [];
|
|
49
|
-
return u && e.push({ label: u }),
|
|
49
|
+
return u && e.push({ label: u }), v && e.push({ label: v }), h && e.push({ label: h }), b && e.push({ label: b }), c && e.push(...c), /* @__PURE__ */ d(
|
|
50
50
|
"div",
|
|
51
51
|
{
|
|
52
52
|
onClick: f,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media.es.js","sources":["../../src/components/media/InteractionSummaryCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n/**\n * Direction rail color mapping.\n * Uses rail colors for categorization, not judgment.\n */\nconst DIRECTION_COLORS = {\n inbound: \"var(--rail-discovery, #5E88B0)\",\n outbound: \"var(--rail-purple, #9B7AA8)\",\n internal: \"var(--rail-outcome, #6B7C93)\",\n chat: \"var(--rail-teal, #7BA89D)\",\n};\n\n/**\n * Format seconds to mm:ss or h:mm:ss\n */\nconst formatDuration = (seconds) => {\n if (seconds == null || seconds <= 0) return null;\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.round(seconds % 60);\n if (h > 0) return `${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n};\n\n/**\n * Format a date string to a compact, readable form.\n */\nconst formatDate = (dateStr) => {\n if (!dateStr) return null;\n try {\n return new Date(dateStr).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n } catch {\n return null;\n }\n};\n\n/**\n * InteractionCard Component\n * Displays a summary card for a completed interaction (call/chat).\n * Designed for use in history lists, search results, and monitoring views.\n *\n * Uses the Chordia design language: left rail, muted metadata,\n * non-judgmental score display, subtle hover states.\n *\n * @param {Object} props\n * @param {string} [props.title] - Primary label (e.g., call purpose, one-liner)\n * @param {string} [props.agentName] - Agent who handled the interaction\n * @param {string} [props.customerName] - Customer name (omit if unknown)\n * @param {string} [props.date] - ISO date string for when the interaction occurred\n * @param {number} [props.duration] - Duration in seconds\n * @param {string} [props.direction] - \"inbound\" | \"outbound\" | \"internal\" | \"chat\"\n * @param {string} [props.driver] - Call driver / reason\n * @param {string} [props.sentiment] - Customer sentiment label\n * @param {string} [props.disposition] - Call disposition / outcome label\n * @param {Array} [props.scores] - [{label, value}] score metrics to display\n * @param {Array} [props.tags] - [{label, color?}] additional tag pills\n * @param {string} [props.railColor] - Override the left rail color\n * @param {boolean} [props.isActive] - Whether this card is currently selected/active\n * @param {Function} [props.onClick] - Click handler\n * @param {React.ReactNode} [props.children] - Additional content below the card body\n */\nexport default function InteractionCard({\n title,\n agentName,\n customerName,\n date,\n duration,\n direction,\n driver,\n sentiment,\n disposition,\n scores,\n tags,\n railColor,\n isActive = false,\n onClick,\n children,\n}) {\n const resolvedRailColor =\n railColor || DIRECTION_COLORS[direction] || \"var(--rail-outcome, #6B7C93)\";\n const formattedDuration = formatDuration(duration);\n const formattedDate = formatDate(date);\n\n // Collect metadata items\n const metaItems = [];\n if (agentName) metaItems.push(agentName);\n if (customerName) metaItems.push(customerName);\n if (formattedDate) metaItems.push(formattedDate);\n if (formattedDuration) metaItems.push(formattedDuration);\n\n // Collect tag items from explicit tags + contextual fields\n const allTags = [];\n if (direction) allTags.push({ label: direction });\n if (driver) allTags.push({ label: driver });\n if (sentiment) allTags.push({ label: sentiment });\n if (disposition) allTags.push({ label: disposition });\n if (tags) allTags.push(...tags);\n\n return (\n <div\n onClick={onClick}\n style={{\n position: \"relative\",\n padding: \"10px 14px 10px 18px\",\n borderRadius: \"var(--radius-md, 8px)\",\n overflow: \"hidden\",\n background: isActive\n ? \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\"\n : \"var(--paper-elevated, rgba(255,255,255,0.82))\",\n border: `1px solid ${\n isActive\n ? \"var(--border-hover, rgba(52,58,64,0.18))\"\n : \"var(--border, rgba(52,58,64,0.12))\"\n }`,\n cursor: onClick ? \"pointer\" : \"default\",\n transition: \"background 0.15s, border-color 0.15s\",\n }}\n onMouseEnter={(e) => {\n if (!isActive && onClick) {\n e.currentTarget.style.background =\n \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\";\n e.currentTarget.style.borderColor =\n \"var(--border-hover, rgba(52,58,64,0.18))\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isActive) {\n e.currentTarget.style.background =\n \"var(--paper-elevated, rgba(255,255,255,0.82))\";\n e.currentTarget.style.borderColor =\n \"var(--border, rgba(52,58,64,0.12))\";\n }\n }}\n >\n {/* Left rail */}\n <div\n style={{\n position: \"absolute\",\n left: 0,\n top: 0,\n bottom: 0,\n width: \"var(--rail-width-thin, 4px)\",\n backgroundColor: resolvedRailColor,\n borderRadius: \"var(--radius-md, 8px) 0 0 var(--radius-md, 8px)\",\n }}\n />\n\n {/* Main content row */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"space-between\",\n gap: 12,\n }}\n >\n {/* Left: title + metadata */}\n <div style={{ flex: 1, minWidth: 0 }}>\n {/* Title */}\n {title ? (\n <div\n style={{\n fontSize: \"var(--text-md, 13px)\",\n fontWeight: 550,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {title}\n </div>\n ) : null}\n\n {/* Metadata row */}\n {metaItems.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 6,\n marginTop: 3,\n fontSize: \"var(--text-sm, 11px)\",\n color: \"var(--text-muted, rgba(30,33,37,0.56))\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {metaItems.map((item, i) => (\n <React.Fragment key={i}>\n {i > 0 ? (\n <span\n style={{\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n }}\n >\n ·\n </span>\n ) : null}\n <span>{item}</span>\n </React.Fragment>\n ))}\n </div>\n ) : null}\n\n {/* Tags row */}\n {allTags.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 4,\n marginTop: 6,\n }}\n >\n {allTags.map((tag, i) => (\n <span\n key={i}\n style={{\n display: \"inline-block\",\n fontSize: \"var(--text-xs, 10px)\",\n fontWeight: 500,\n padding: \"1px 7px\",\n borderRadius: 999,\n background: \"var(--paper, rgba(255,255,255,0.78))\",\n border: \"1px solid var(--border-subtle, rgba(52,58,64,0.08))\",\n color: tag.color || \"var(--text-faint, rgba(30,33,37,0.36))\",\n textTransform: \"capitalize\",\n letterSpacing: \"0.01em\",\n lineHeight: 1.5,\n }}\n >\n {tag.label}\n </span>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Right: score pills */}\n {scores && scores.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n gap: 10,\n flexShrink: 0,\n alignItems: \"flex-start\",\n paddingTop: 2,\n }}\n >\n {scores.map((score, i) => (\n <div key={i} style={{ textAlign: \"center\", minWidth: 28 }}>\n <div\n style={{\n fontSize: \"var(--text-lg, 14px)\",\n fontWeight: 600,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n fontFamily: \"var(--font-mono, monospace)\",\n lineHeight: 1.2,\n }}\n >\n {score.value != null ? Math.round(score.value) : \"—\"}\n </div>\n <div\n style={{\n fontSize: \"var(--text-xxs, 9px)\",\n fontWeight: 650,\n textTransform: \"uppercase\",\n letterSpacing: \"var(--tracking-label, 0.16em)\",\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n marginTop: 1,\n }}\n >\n {score.label}\n </div>\n </div>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Optional children slot */}\n {children}\n </div>\n );\n}\n"],"names":["DIRECTION_COLORS","formatDuration","seconds","h","m","s","formatDate","dateStr","InteractionCard","title","agentName","customerName","date","duration","direction","driver","sentiment","disposition","scores","tags","railColor","isActive","onClick","children","resolvedRailColor","formattedDuration","formattedDate","metaItems","allTags","jsxs","e","jsx","item","i","React","tag","score"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"media.es.js","sources":["../../src/components/media/InteractionSummaryCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n/**\n * Direction rail color mapping.\n * Uses rail colors for categorization, not judgment.\n */\nconst DIRECTION_COLORS = {\n inbound: \"var(--rail-discovery, #5E88B0)\",\n outbound: \"var(--rail-purple, #9B7AA8)\",\n internal: \"var(--rail-outcome, #6B7C93)\",\n chat: \"var(--rail-teal, #7BA89D)\",\n};\n\n/**\n * Format seconds to mm:ss or h:mm:ss\n */\nconst formatDuration = (seconds) => {\n if (seconds == null || seconds <= 0) return null;\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.round(seconds % 60);\n if (h > 0) return `${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n};\n\n/**\n * Format a date string to a compact, readable form.\n */\nconst formatDate = (dateStr) => {\n if (!dateStr) return null;\n try {\n return new Date(dateStr).toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n } catch {\n return null;\n }\n};\n\n/**\n * InteractionCard Component\n * Displays a summary card for a completed interaction (call/chat).\n * Designed for use in history lists, search results, and monitoring views.\n *\n * Uses the Chordia design language: left rail, muted metadata,\n * non-judgmental score display, subtle hover states.\n *\n * @param {Object} props\n * @param {string} [props.title] - Primary label (e.g., call purpose, one-liner)\n * @param {string} [props.agentName] - Agent who handled the interaction\n * @param {string} [props.customerName] - Customer name (omit if unknown)\n * @param {string} [props.date] - ISO date string for when the interaction occurred\n * @param {number} [props.duration] - Duration in seconds\n * @param {string} [props.direction] - \"inbound\" | \"outbound\" | \"internal\" | \"chat\"\n * @param {string} [props.driver] - Call driver / reason\n * @param {string} [props.sentiment] - Customer sentiment label\n * @param {string} [props.disposition] - Call disposition / outcome label\n * @param {Array} [props.scores] - [{label, value}] score metrics to display\n * @param {Array} [props.tags] - [{label, color?}] additional tag pills\n * @param {string} [props.railColor] - Override the left rail color\n * @param {boolean} [props.isActive] - Whether this card is currently selected/active\n * @param {Function} [props.onClick] - Click handler\n * @param {React.ReactNode} [props.children] - Additional content below the card body\n */\nexport default function InteractionCard({\n title,\n agentName,\n customerName,\n date,\n duration,\n direction,\n driver,\n sentiment,\n disposition,\n scores,\n tags,\n railColor,\n isActive = false,\n onClick,\n children,\n}) {\n const resolvedRailColor =\n railColor || DIRECTION_COLORS[direction] || \"var(--rail-outcome, #6B7C93)\";\n const formattedDuration = formatDuration(duration);\n const formattedDate = formatDate(date);\n\n // Collect metadata items\n const metaItems = [];\n if (agentName) metaItems.push(agentName);\n if (customerName) metaItems.push(customerName);\n if (formattedDate) metaItems.push(formattedDate);\n if (formattedDuration) metaItems.push(formattedDuration);\n\n // Collect tag items from explicit tags + contextual fields\n const allTags = [];\n if (direction) allTags.push({ label: direction });\n if (driver) allTags.push({ label: driver });\n if (sentiment) allTags.push({ label: sentiment });\n if (disposition) allTags.push({ label: disposition });\n if (tags) allTags.push(...tags);\n\n return (\n <div\n onClick={onClick}\n style={{\n position: \"relative\",\n padding: \"10px 14px 10px 18px\",\n borderRadius: \"var(--radius-md, 8px)\",\n overflow: \"hidden\",\n background: isActive\n ? \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\"\n : \"var(--paper-elevated, rgba(255,255,255,0.82))\",\n border: `1px solid ${\n isActive\n ? \"var(--border-hover, rgba(52,58,64,0.18))\"\n : \"var(--border, rgba(52,58,64,0.12))\"\n }`,\n cursor: onClick ? \"pointer\" : \"default\",\n transition: \"background 0.15s, border-color 0.15s\",\n }}\n onMouseEnter={(e) => {\n if (!isActive && onClick) {\n e.currentTarget.style.background =\n \"var(--hover-warm-subtle, rgba(231,212,162,0.08))\";\n e.currentTarget.style.borderColor =\n \"var(--border-hover, rgba(52,58,64,0.18))\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isActive) {\n e.currentTarget.style.background =\n \"var(--paper-elevated, rgba(255,255,255,0.82))\";\n e.currentTarget.style.borderColor =\n \"var(--border, rgba(52,58,64,0.12))\";\n }\n }}\n >\n {/* Left rail */}\n <div\n style={{\n position: \"absolute\",\n left: 0,\n top: 0,\n bottom: 0,\n width: \"var(--rail-width-thin, 4px)\",\n backgroundColor: resolvedRailColor,\n borderRadius: \"var(--radius-md, 8px) 0 0 var(--radius-md, 8px)\",\n }}\n />\n\n {/* Main content row */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"space-between\",\n gap: 12,\n }}\n >\n {/* Left: title + metadata */}\n <div style={{ flex: 1, minWidth: 0 }}>\n {/* Title */}\n {title ? (\n <div\n style={{\n fontSize: \"var(--text-md, 13px)\",\n fontWeight: 550,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {title}\n </div>\n ) : null}\n\n {/* Metadata row */}\n {metaItems.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 6,\n marginTop: 3,\n fontSize: \"var(--text-sm, 11px)\",\n color: \"var(--text-muted, rgba(30,33,37,0.56))\",\n lineHeight: \"var(--leading-snug, 1.375)\",\n }}\n >\n {metaItems.map((item, i) => (\n <React.Fragment key={i}>\n {i > 0 ? (\n <span\n style={{\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n }}\n >\n ·\n </span>\n ) : null}\n <span>{item}</span>\n </React.Fragment>\n ))}\n </div>\n ) : null}\n\n {/* Tags row */}\n {allTags.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 4,\n marginTop: 6,\n }}\n >\n {allTags.map((tag, i) => (\n <span\n key={i}\n style={{\n display: \"inline-block\",\n fontSize: \"var(--text-xs, 10px)\",\n fontWeight: 500,\n padding: \"1px 7px\",\n borderRadius: 999,\n background: \"var(--paper, rgba(255,255,255,0.78))\",\n border: \"1px solid var(--border-subtle, rgba(52,58,64,0.08))\",\n color: tag.color || \"var(--text-faint, rgba(30,33,37,0.36))\",\n textTransform: \"capitalize\",\n letterSpacing: \"0.01em\",\n lineHeight: 1.5,\n }}\n >\n {tag.label}\n </span>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Right: score pills */}\n {scores && scores.length > 0 ? (\n <div\n style={{\n display: \"flex\",\n gap: 10,\n flexShrink: 0,\n alignItems: \"flex-start\",\n paddingTop: 2,\n }}\n >\n {scores.map((score, i) => (\n <div key={i} style={{ textAlign: \"center\", minWidth: 28 }}>\n <div\n style={{\n fontSize: \"var(--text-lg, 14px)\",\n fontWeight: 600,\n color: \"var(--text-strong, rgba(30,33,37,0.92))\",\n fontFamily: \"var(--font-mono, monospace)\",\n lineHeight: 1.2,\n }}\n >\n {score.value != null ? Math.round(score.value) : \"—\"}\n </div>\n <div\n style={{\n fontSize: \"var(--text-xxs, 9px)\",\n fontWeight: 650,\n textTransform: \"uppercase\",\n letterSpacing: \"var(--tracking-label, 0.16em)\",\n color: \"var(--text-xfaint, rgba(30,33,37,0.28))\",\n marginTop: 1,\n }}\n >\n {score.label}\n </div>\n </div>\n ))}\n </div>\n ) : null}\n </div>\n\n {/* Optional children slot */}\n {children}\n </div>\n );\n}\n"],"names":["DIRECTION_COLORS","formatDuration","seconds","h","m","s","formatDate","dateStr","InteractionCard","title","agentName","customerName","date","duration","direction","driver","sentiment","disposition","scores","tags","railColor","isActive","onClick","children","resolvedRailColor","formattedDuration","formattedDate","metaItems","allTags","jsxs","e","jsx","item","i","React","tag","score"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),c=require("lucide-react"),ue=require("../DataTable2.cjs.js"),V=require("../PerformancePanel.cjs.js"),he=require("../ConfirmationPopup.cjs.js");require("../sortable.esm.cjs.js");require("react-dom");require("../CustomFilterChips.cjs.js");require("motion/react");require("recharts");require("../AgentLiftAnalysisCard.cjs.js");require("../TourGuideTooltip.cjs.js");const a={ink:"var(--color-text)",muted:"var(--color-text-secondary)",border:"var(--grey-absent)",borderSubtle:"var(--neutral-100)",black:"var(--neutral-900)",white:"var(--grey-white)",neutralBorder:"var(--neutral-250)",neutralLight:"var(--neutral-100)",neutral850:"var(--neutral-850)",neutral800:"var(--neutral-800)",neutral50:"var(--neutral-50)"},F="var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)",xe=[{id:"8h",label:"8h"},{id:"1d",label:"1d"},{id:"7d",label:"7d"},{id:"30d",label:"30d"}];function pe({label:t,active:l=!1,onClick:n}){return e.jsx("button",{type:"button",onClick:n,style:{height:32,minWidth:31,padding:"0 12px",borderRadius:10,border:l?"none":`1px solid ${a.borderSubtle}`,background:l?a.black:a.white,color:l?a.white:a.black,fontFamily:F,fontSize:14,cursor:"pointer"},children:t})}const fe={active:c.CloudCheck,failed:c.GlobeX,suspended:c.Ban,paused:c.CirclePause};function ye({value:t}){if(t==null||t==="")return null;const l=String(t).toLowerCase(),n=fe[l]||c.CloudCheck;return e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:4,fontFamily:F,fontSize:12,color:a.ink,lineHeight:"16px"},children:[e.jsx(n,{size:20,strokeWidth:1.5,style:{color:a.ink}}),t]})}function ee({icon:t,label:l,onClick:n}){return e.jsx("button",{type:"button","aria-label":l||void 0,title:l||void 0,onClick:s=>{s.stopPropagation(),n==null||n()},style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:4,borderRadius:4,border:"none",background:"transparent",cursor:n?"pointer":"default",color:a.ink},children:e.jsx(t,{size:16,strokeWidth:1.5})})}function be({enabled:t}){return e.jsx("span",{"aria-hidden":"true",style:{position:"relative",display:"inline-block",width:32,height:18,flexShrink:0,borderRadius:18/2,background:t?a.neutral850:a.white,border:t?"1px solid transparent":`1px solid ${a.neutralBorder}`,boxSizing:"border-box",transition:"background 0.15s ease, border-color 0.15s ease"},children:e.jsx("span",{style:{position:"absolute",top:"50%",left:t?"auto":3-1,right:t?3-1:"auto",width:12,height:12,borderRadius:"50%",background:t?a.white:"var(--neutral-500, #949494)",transform:"translateY(-50%)",transition:"background 0.15s ease"}})})}function ge({value:t,enabledLabel:l,disabledLabel:n,onToggle:s}){const r=t!==!1&&t!=="disabled"&&t!=="off",[d,u]=k.useState(r);k.useEffect(()=>{u(r)},[r]);const h=d?l:n;return e.jsxs("button",{type:"button",onClick:j=>{j.stopPropagation();const p=!d;u(p),s==null||s(p)},style:{display:"inline-flex",alignItems:"center",gap:8,height:20,padding:"4px 8px",borderRadius:24,border:"none",background:"transparent",cursor:"pointer",fontFamily:F,fontSize:14,lineHeight:"20px",color:a.black},children:[e.jsx(be,{enabled:d}),h]})}const ne=[{id:"task",label:"Task",width:336,sortable:!0,filterable:!0},{id:"schedule",label:"Schedule",width:164,sortable:!0,filterable:!0},{id:"status",label:"Status",width:140,sortable:!0,filterable:!0,render:t=>e.jsx(ye,{value:t})},{id:"lastRunDate",label:"Last Run Date",width:140,sortable:!0},{id:"nextScheduled",label:"Next Scheduled",width:140,sortable:!0}];function me({className:t="",title:l="",dateRangeLabel:n="",onExport:s,exportLabel:r="",onCreateReport:d,createReportLabel:u="",rangeOptions:h=xe,selectedWindow:j="30d",onWindowChange:p,dateRangePicker:M,dateRange:$,onDateRangeChange:S,reports:X=[],reportColumns:E=ne,initialPageSize:T=10,onReportClick:C,onVisibleColumnsChange:H,onToggleReport:b,toggleEnabledLabel:w="",toggleDisabledLabel:g="",onEditReport:D,onDeleteReport:v,editLabel:A="Edit",deleteLabel:m="Delete",deleteConfirmTitle:L="Delete Report",deleteConfirmMessage:O="Do you really want to delete this report? This action cannot be undone.",deleteConfirmCancelLabel:B="Cancel",reportsTotal:N=null,reportsPage:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),c=require("lucide-react"),ue=require("../DataTable2.cjs.js"),V=require("../PerformancePanel.cjs.js"),he=require("../ConfirmationPopup.cjs.js");require("../sortable.esm.cjs.js");require("react-dom");require("../CustomFilterChips.cjs.js");require("motion/react");require("recharts");require("../AgentLiftAnalysisCard.cjs.js");require("../TourGuideTooltip.cjs.js");const a={ink:"var(--color-text)",muted:"var(--color-text-secondary)",border:"var(--grey-absent)",borderSubtle:"var(--neutral-100)",black:"var(--neutral-900)",white:"var(--grey-white)",neutralBorder:"var(--neutral-250)",neutralLight:"var(--neutral-100)",neutral850:"var(--neutral-850)",neutral800:"var(--neutral-800)",neutral50:"var(--neutral-50)"},F="var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)",xe=[{id:"8h",label:"8h"},{id:"1d",label:"1d"},{id:"7d",label:"7d"},{id:"30d",label:"30d"}];function pe({label:t,active:l=!1,onClick:n}){return e.jsx("button",{type:"button",onClick:n,style:{height:32,minWidth:31,padding:"0 12px",borderRadius:10,border:l?"none":`1px solid ${a.borderSubtle}`,background:l?a.black:a.white,color:l?a.white:a.black,fontFamily:F,fontSize:14,cursor:"pointer"},children:t})}const fe={active:c.CloudCheck,failed:c.GlobeX,suspended:c.Ban,paused:c.CirclePause};function ye({value:t}){if(t==null||t==="")return null;const l=String(t).toLowerCase(),n=fe[l]||c.CloudCheck;return e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:4,fontFamily:F,fontSize:12,color:a.ink,lineHeight:"16px"},children:[e.jsx(n,{size:20,strokeWidth:1.5,style:{color:a.ink}}),t]})}function ee({icon:t,label:l,onClick:n}){return e.jsx("button",{type:"button","aria-label":l||void 0,title:l||void 0,onClick:s=>{s.stopPropagation(),n==null||n()},style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:4,borderRadius:4,border:"none",background:"transparent",cursor:n?"pointer":"default",color:a.ink},children:e.jsx(t,{size:16,strokeWidth:1.5})})}function be({enabled:t}){return e.jsx("span",{"aria-hidden":"true",style:{position:"relative",display:"inline-block",width:32,height:18,flexShrink:0,borderRadius:18/2,background:t?a.neutral850:a.white,border:t?"1px solid transparent":`1px solid ${a.neutralBorder}`,boxSizing:"border-box",transition:"background 0.15s ease, border-color 0.15s ease"},children:e.jsx("span",{style:{position:"absolute",top:"50%",left:t?"auto":3-1,right:t?3-1:"auto",width:12,height:12,borderRadius:"50%",background:t?a.white:"var(--neutral-500, #949494)",transform:"translateY(-50%)",transition:"background 0.15s ease"}})})}function ge({value:t,enabledLabel:l,disabledLabel:n,onToggle:s}){const r=t!==!1&&t!=="disabled"&&t!=="off",[d,u]=k.useState(r);k.useEffect(()=>{u(r)},[r]);const h=d?l:n;return e.jsxs("button",{type:"button",onClick:j=>{j.stopPropagation();const p=!d;u(p),s==null||s(p)},style:{display:"inline-flex",alignItems:"center",gap:8,height:20,padding:"4px 8px",borderRadius:24,border:"none",background:"transparent",cursor:"pointer",fontFamily:F,fontSize:14,lineHeight:"20px",color:a.black},children:[e.jsx(be,{enabled:d}),h]})}const ne=[{id:"task",label:"Task",width:336,sortable:!0,filterable:!0},{id:"schedule",label:"Schedule",width:164,sortable:!0,filterable:!0},{id:"status",label:"Status",width:140,sortable:!0,filterable:!0,render:t=>e.jsx(ye,{value:t})},{id:"lastRunDate",label:"Last Run Date",width:140,sortable:!0},{id:"nextScheduled",label:"Next Scheduled",width:140,sortable:!0}];function me({className:t="",title:l="",dateRangeLabel:n="",onExport:s,exportLabel:r="",onCreateReport:d,createReportLabel:u="",rangeOptions:h=xe,selectedWindow:j="30d",onWindowChange:p,dateRangePicker:M,dateRange:$,onDateRangeChange:S,reports:X=[],reportColumns:E=ne,initialPageSize:T=10,onReportClick:C,onVisibleColumnsChange:H,onToggleReport:b,toggleEnabledLabel:w="",toggleDisabledLabel:g="",onEditReport:D,onDeleteReport:v,editLabel:A="Edit",deleteLabel:m="Delete",deleteConfirmTitle:L="Delete Report",deleteConfirmMessage:O="Do you really want to delete this report? This action cannot be undone.",deleteConfirmCancelLabel:B="Cancel",reportsTotal:N=null,reportsPage:_=null,reportsPageSize:Z=null,onReportsPageChange:U,onReportsPageSizeChange:J}){const[P,R]=k.useState(null),[q,z]=k.useState(null),f=$!==void 0?$:P,W=!!(f!=null&&f.from&&(f!=null&&f.to)),Y=x=>{R(x),S==null||S(x)},y=x=>{R(null),S==null||S(null),p==null||p(x)},I=W?`${V.formatLocalDate(f.from)} – ${V.formatLocalDate(f.to)}`:V.computeWindowLabel(j)||n,oe=k.useMemo(()=>{const x=!!(D||v),de={id:"action",label:"",width:x?200:117,sortable:!1,filterable:!1,render:(Fe,G)=>{const ae=G.enabled===void 0?!0:!!G.enabled,Q=w||g||b;return!Q&&!x?null:e.jsxs("div",{style:{display:"inline-flex",alignItems:"center",gap:16,width:"100%",justifyContent:"flex-end"},children:[Q&&e.jsx(ge,{value:ae,enabledLabel:w,disabledLabel:g,onToggle:ce=>b==null?void 0:b(G,ce)}),x&&e.jsxs("span",{className:"cdr-reports-row-actions",style:{display:"inline-flex",gap:12},children:[D&&e.jsx(ee,{icon:c.Pencil,label:A,onClick:()=>D(G)}),v&&e.jsx(ee,{icon:c.Trash2,label:m,onClick:()=>z(G)})]})]})}};return[...E,de]},[E,b,w,g,D,v,A,m]);return e.jsxs("div",{className:`cdr-reports-list${t?` ${t}`:""}`,style:{background:a.white,fontFamily:F,color:a.ink,width:"100%",minWidth:1192,boxSizing:"border-box",padding:"12px 32px 32px",display:"flex",flexDirection:"column",gap:24},children:[e.jsx("style",{children:`
|
|
2
2
|
.cdr-reports-list .cdr-reports-row-actions {
|
|
3
3
|
opacity: 0;
|
|
4
4
|
transition: opacity 0.12s ease;
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
.cdr-reports-list tr:focus-within .cdr-reports-row-actions {
|
|
8
8
|
opacity: 1;
|
|
9
9
|
}
|
|
10
|
-
`}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,paddingTop:12,flexWrap:"wrap"},children:[e.jsx("h1",{style:{fontFamily:F,fontSize:24,fontWeight:400,color:a.ink,margin:0,lineHeight:1.2,letterSpacing:"-0.01em",flex:1,minWidth:0},children:l}),e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center",flexWrap:"wrap"},children:[I&&e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:6,fontFamily:F,fontSize:13,color:a.ink,marginRight:6,whiteSpace:"nowrap"},children:[e.jsx(c.CalendarDays,{size:16,strokeWidth:1.75,style:{color:a.muted}}),I]}),h.map(x=>e.jsx(pe,{label:x.label,active:!W&&x.id===j,onClick:()=>y(x.id)},x.id)),M||e.jsx(V.DateRangeButton,{value:f,onChange:Y}),r&&e.jsxs("button",{type:"button",onClick:()=>s==null?void 0:s(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:`1px solid ${a.neutralBorder}`,background:a.white,cursor:"pointer",fontFamily:F,fontSize:14,color:a.neutral800},children:[e.jsx(c.Download,{size:18,strokeWidth:1.75}),r]}),u&&e.jsxs("button",{type:"button",onClick:()=>d==null?void 0:d(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:"none",background:a.neutral850,cursor:"pointer",fontFamily:F,fontSize:16,fontWeight:400,color:a.neutral50,whiteSpace:"nowrap"},children:[e.jsx(c.Plus,{size:20,strokeWidth:1.75}),u]})]})]}),e.jsx(ue.DataTable2,{data:X,columns:oe,initialPageSize:T,onRowClick:C,onVisibleColumnsChange:H,hideColumnPicker:!0,totalCount:N,page:U,pageSize:Z,onPageChange:_,onPageSizeChange:J}),e.jsx(he.ConfirmationPopup,{open:!!q,title:L,content:O,primaryLabel:B,secondaryLabel:m,onPrimary:()=>z(null),onSecondary:()=>{const x=q;z(null),x&&(v==null||v(x))},onClose:()=>z(null)})]})}const i={ink:"var(--color-text)",muted:"var(--color-text-secondary)",border:"var(--grey-absent)",borderSubtle:"var(--neutral-100)",black:"var(--neutral-900)",white:"var(--grey-white)",neutralBorder:"var(--neutral-250)",neutralLight:"var(--neutral-100)",neutral850:"var(--neutral-850)",neutral800:"var(--neutral-800)",neutral50:"var(--neutral-50)",neutral200:"var(--neutral-200)",textSecondary:"var(--text-item)",textMidtone:"var(--text-subtle-warm)",selectedRow:"var(--focus-2)",summaryBg:"var(--surface-warm-40)",hoverGrey:"var(--surface-hover)"},o="var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)",te="Varta, var(--font-sans, sans-serif)";function le({as:t="span",text:l,style:n,...s}){const r=k.useRef(null),[d,u]=k.useState(!1);return k.useEffect(()=>{const h=r.current;if(!h)return;const j=()=>u(h.scrollWidth>h.clientWidth);if(j(),typeof ResizeObserver>"u")return;const p=new ResizeObserver(j);return p.observe(h),()=>p.disconnect()},[l]),e.jsx(t,{ref:r,title:d&&l!=null?String(l):void 0,style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",minWidth:0,...n},...s,children:l})}function je(t){if(t==null||t==="")return"";const l=t instanceof Date?t:new Date(String(t));if(Number.isNaN(l.getTime()))return String(t);const n=l.toLocaleDateString("en-US",{month:"2-digit",day:"2-digit",year:"numeric"}),s=l.toLocaleTimeString("en-US",{hour:"numeric",minute:"2-digit",hour12:!0});return`${n} at ${s}`}const ke={active:c.CloudCheck,paused:c.CirclePause,suspended:c.Ban};function re({value:t,size:l=20}){if(t==null||t==="")return null;const n=ke[String(t).toLowerCase()]||c.CloudCheck;return e.jsx(n,{size:l,strokeWidth:1.5,style:{color:i.ink}})}function Se({value:t}){return t==null||t===""?null:e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:4,fontFamily:o,fontSize:12,color:i.ink,lineHeight:"16px"},children:[e.jsx(re,{value:t}),t]})}function we({item:t,selected:l,onClick:n}){return e.jsxs("button",{type:"button",onClick:n,style:{display:"flex",gap:4,padding:"8px 4px",borderRadius:8,border:"none",background:l?i.selectedRow:i.white,cursor:n?"pointer":"default",textAlign:"left",width:"100%",fontFamily:o},children:[e.jsx("div",{style:{width:40,height:40,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx(re,{value:t.status})}),e.jsxs("div",{style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:2},children:[e.jsx(le,{text:t.title,style:{fontFamily:o,fontWeight:600,fontSize:14,color:i.ink,lineHeight:1.2}}),(()=>{const s=je(t.timestamp);return s?e.jsx("span",{style:{fontFamily:o,fontSize:12,color:i.ink,lineHeight:1.5},children:s}):null})()]})]})}function K({label:t,active:l=!1,disabled:n=!1,onClick:s,leading:r,trailing:d}){return e.jsxs("button",{type:"button",onClick:s,disabled:n,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:4,height:24,minWidth:22,padding:"4px 8px",borderRadius:10,border:l?"none":`1px solid ${i.borderSubtle}`,background:l?i.black:i.white,color:l?i.white:i.black,cursor:n?"not-allowed":"pointer",opacity:n?.5:1,fontFamily:o,fontSize:12,lineHeight:"16px"},children:[r,t,d]})}function ve({page:t=1,totalPages:l=1,onPageChange:n,backLabel:s="",nextLabel:r=""}){const d=Array.from({length:l},(u,h)=>h+1);return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:6,padding:"16px 0",borderTop:`1px solid ${i.border}`},children:[e.jsx(K,{label:s,leading:e.jsx(c.ChevronLeft,{size:12,strokeWidth:1.75}),disabled:t<=1,onClick:()=>n==null?void 0:n(Math.max(1,t-1))}),d.map(u=>e.jsx(K,{label:String(u),active:u===t,onClick:()=>n==null?void 0:n(u)},u)),e.jsx(K,{label:r,trailing:e.jsx(c.ChevronRight,{size:12,strokeWidth:1.75}),disabled:t>=l,onClick:()=>n==null?void 0:n(Math.min(l,t+1))})]})}function ie({children:t}){return e.jsx("div",{style:{height:40,display:"flex",alignItems:"center",borderBottom:`1px solid ${i.border}`,fontFamily:o,fontSize:16,color:i.ink},children:t})}function ze({columns:t,rows:l,totalRow:n}){if(!(t!=null&&t.length))return null;const s={padding:12,fontFamily:o,fontSize:14,lineHeight:"20px",color:i.black,boxSizing:"border-box"};return e.jsx("div",{style:{border:`1px solid ${i.neutral200}`,borderRadius:4,background:i.white,overflow:"hidden"},children:e.jsxs("table",{style:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:[e.jsx("colgroup",{children:t.map(r=>e.jsx("col",{style:r.width?{width:r.width}:void 0},r.id))}),e.jsx("thead",{children:e.jsx("tr",{style:{background:i.neutral50,height:36},children:t.map((r,d)=>e.jsx("th",{style:{...s,fontWeight:500,textAlign:r.align||(d===0?"left":"right"),borderBottom:`1px solid ${i.borderSubtle}`},children:r.label},r.id))})}),e.jsxs("tbody",{children:[(l||[]).map((r,d)=>e.jsx("tr",{style:{height:36},children:t.map((u,h)=>e.jsx("td",{style:{...s,textAlign:u.align||(h===0?"left":"right"),borderBottom:`1px solid ${i.borderSubtle}`},children:r[u.id]},u.id))},r.id??d)),n&&e.jsx("tr",{style:{height:36,background:i.neutral50},children:t.map((r,d)=>e.jsx("td",{style:{...s,fontWeight:500,textAlign:r.align||(d===0?"left":"right")},children:n[r.id]},r.id))})]})]})})}const se=[{id:"location",label:"Location",width:242,align:"left"},{id:"calls",label:"Calls",width:90,align:"right"},{id:"percentOfTotal",label:"% of Total",width:90,align:"right"},{id:"avgCsat",label:"Avg CSAT",width:90,align:"right"},{id:"inbound",label:"Inbound",width:90,align:"right"},{id:"client",label:"Client",width:90,align:"right"}];function Ie({className:t="",reportTitle:l="",onBack:n,onManage:s,manageLabel:r="",onCreateReport:d,createReportLabel:u="",previousReports:h=[],selectedReportId:j=null,onSelectReport:p,previousReportsPage:M=1,previousReportsTotalPages:$=1,onPreviousReportsPageChange:S,paginationBackLabel:X="",paginationNextLabel:E="",reportSubtitle:T="",dateLabel:C="",dateValue:H="",status:b="",shareLabel:w="",onShare:g,shareCopied:D=!1,shareCopiedLabel:v="Link copied",pdfLabel:A="",onPdf:m,summaryTitle:L="",summaryBody:O="",introBold:B="",introMeta:N="",distributionTitle:U="",distributionColumns:Z=se,distributionRows:_=[],distributionTotalRow:J,observationsTitle:P="",observations:R=[],closingBoldLines:q=[],closingMeta:z="",rightColumnExtra:f=null}){const[W,Y]=k.useState(!1);return e.jsxs("div",{className:t,style:{background:i.white,fontFamily:o,color:i.ink,width:"100%",minWidth:1192,boxSizing:"border-box",display:"flex",flexDirection:"column"},children:[e.jsxs("div",{"data-print-hide":"true",style:{display:"flex",alignItems:"center",gap:12,padding:"12px 32px",minHeight:78,boxSizing:"border-box"},children:[e.jsx("button",{type:"button","aria-label":"Back",onClick:n,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,background:"transparent",border:"none",cursor:n?"pointer":"default",color:i.ink,padding:0,flexShrink:0},children:e.jsx(c.ArrowLeft,{size:20,strokeWidth:1.75})}),e.jsx("div",{style:{flex:1,minWidth:0,paddingLeft:16,borderLeft:`1px solid ${i.border}`,alignSelf:"stretch",display:"flex",alignItems:"center"},children:e.jsx("h1",{style:{fontFamily:o,fontSize:24,fontWeight:400,color:i.ink,margin:0,lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:l})}),r&&e.jsxs("button",{type:"button",onClick:()=>s==null?void 0:s(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:`1px solid ${i.neutralBorder}`,background:i.white,cursor:"pointer",fontFamily:o,fontSize:14,color:i.neutral800,flexShrink:0},children:[e.jsx(c.Settings2,{size:20,strokeWidth:1.75}),r]}),u&&e.jsxs("button",{type:"button",onClick:()=>d==null?void 0:d(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:"none",background:i.neutral850,cursor:"pointer",fontFamily:o,fontSize:16,fontWeight:400,color:i.neutral50,whiteSpace:"nowrap",flexShrink:0},children:[e.jsx(c.Plus,{size:20,strokeWidth:1.75}),u]})]}),e.jsxs("div",{style:{display:"flex",gap:24,padding:"24px 32px",borderTop:`1px solid ${i.border}`,alignItems:"flex-start"},children:[!W&&e.jsxs("aside",{"data-print-hide":"true",style:{width:360,flexShrink:0,borderRight:`1px solid ${i.borderSubtle}`,paddingRight:20,display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,paddingLeft:4,paddingTop:12},children:[e.jsx("span",{style:{fontFamily:o,fontSize:14,color:i.ink,lineHeight:1.2},children:`History (${h.length} ${h.length===1?"Report":"Reports"})`}),e.jsx("button",{type:"button","aria-label":"Collapse history",title:"Collapse history",onClick:()=>Y(!0),style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:0,borderRadius:4,border:"none",background:"transparent",cursor:"pointer",color:i.ink},children:e.jsx(c.PanelLeftClose,{size:16,strokeWidth:1.75})})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:h.map((y,I)=>e.jsx(we,{item:y,selected:y.id!=null&&y.id===j,onClick:p?()=>p(y):void 0},y.id??I))}),$>1&&e.jsx(ve,{page:M,totalPages:$,onPageChange:S,backLabel:X,nextLabel:E})]}),e.jsxs("div",{style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:16},children:[(W||T||C||H||b||w)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,width:"100%"},children:[(W||T)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flex:1,minWidth:0},children:[W&&e.jsxs("button",{type:"button","aria-label":"Show history",title:"Show history",onClick:()=>Y(!1),"data-print-hide":"true",style:{display:"inline-flex",alignItems:"center",gap:8,height:28,padding:"8px 16px",borderRadius:10,border:`1px solid ${i.neutralBorder}`,background:i.white,cursor:"pointer",fontFamily:o,fontSize:14,lineHeight:"24px",color:i.neutral800,flexShrink:0},children:["History",e.jsx(c.PanelLeftOpen,{size:16,strokeWidth:1.75})]}),T&&e.jsx(le,{text:T,style:{flex:1,minWidth:0,fontFamily:te,fontSize:20,color:i.ink,fontWeight:400,lineHeight:"normal"}})]}),(C||H||b||w||A)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,flexShrink:0,justifyContent:"flex-end"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,justifyContent:"flex-end",flex:1,minWidth:0},children:[(C||H)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"8px 0",fontSize:13,color:i.ink,lineHeight:1.2},children:[C&&e.jsx("span",{style:{fontFamily:o,whiteSpace:"nowrap"},children:C}),H&&e.jsx("span",{style:{fontFamily:te,whiteSpace:"nowrap"},children:H})]}),b&&e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:4,paddingLeft:16,borderLeft:`1px solid ${i.border}`},children:e.jsx(Se,{value:b})})]}),A&&e.jsx("div",{"data-print-hide":"true",style:{flexShrink:0},children:e.jsxs("button",{type:"button",onClick:()=>m==null?void 0:m(),disabled:!m,"aria-label":"Download as PDF",title:"Download as PDF",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:8,height:28,padding:"8px 16px",boxSizing:"border-box",borderRadius:10,border:"none",background:i.hoverGrey,cursor:m?"pointer":"not-allowed",opacity:m?1:.6,fontFamily:o,fontSize:14,lineHeight:"24px",color:i.ink,whiteSpace:"nowrap"},children:[e.jsx(c.FileDown,{size:16,strokeWidth:1.5}),A]})}),w&&e.jsxs("div",{"data-print-hide":"true",style:{position:"relative",flexShrink:0},children:[e.jsxs("button",{type:"button",onClick:()=>g==null?void 0:g(),disabled:!g,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:8,height:28,padding:"8px 16px",boxSizing:"border-box",borderRadius:10,border:"none",background:i.hoverGrey,cursor:g?"pointer":"not-allowed",opacity:g?1:.6,fontFamily:o,fontSize:14,lineHeight:"24px",color:i.ink,whiteSpace:"nowrap"},children:[e.jsx(c.Share2,{size:16,strokeWidth:1.75}),w]}),D&&e.jsxs("div",{role:"status","aria-live":"polite",style:{position:"absolute",top:"calc(100% + 8px)",right:0,zIndex:50,background:"#2e3236",color:"#ffffff",borderRadius:10,boxShadow:"0 8px 24px rgba(11,11,11,0.18)",padding:"8px 12px",display:"inline-flex",alignItems:"center",gap:8,fontFamily:o,fontSize:13,lineHeight:1,whiteSpace:"nowrap"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M2.66683 10.6667C1.9335 10.6667 1.3335 10.0667 1.3335 9.33337V2.66671C1.3335 1.93337 1.9335 1.33337 2.66683 1.33337H9.3335C10.0668 1.33337 10.6668 1.93337 10.6668 2.66671M6.66683 5.33337H13.3335C14.0699 5.33337 14.6668 5.93033 14.6668 6.66671V13.3334C14.6668 14.0698 14.0699 14.6667 13.3335 14.6667H6.66683C5.93045 14.6667 5.3335 14.0698 5.3335 13.3334V6.66671C5.3335 5.93033 5.93045 5.33337 6.66683 5.33337Z",stroke:"#F2F2F0",strokeLinecap:"round",strokeLinejoin:"round"})}),v]})]})]})]}),(L||O)&&e.jsxs("div",{style:{background:i.summaryBg,border:`1px solid ${i.border}`,borderRadius:8,padding:24,display:"flex",flexDirection:"column",gap:12},children:[L&&e.jsx("span",{style:{fontFamily:o,fontWeight:600,fontSize:15,color:i.ink,lineHeight:1.2},children:L}),O&&e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.ink,margin:0,lineHeight:1.5},children:O})]}),(B||N)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[B&&e.jsx("p",{style:{fontFamily:o,fontWeight:500,fontSize:14,color:i.textSecondary,margin:0,lineHeight:1.5},children:B}),N&&e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.textMidtone,margin:0,lineHeight:1.5},children:N})]}),(U||_.length>0)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[U&&e.jsx(ie,{children:U}),_.length>0&&e.jsx(ze,{columns:Z,rows:_,totalRow:J})]}),(P||R.length>0)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[P&&e.jsx(ie,{children:P}),R.map((y,I)=>e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.ink,margin:0,padding:"12px 0 16px",borderBottom:`1px solid ${i.border}`,lineHeight:1.5},children:y},I))]}),(q.length>0||z)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:14,padding:"12px 0"},children:[q.map((y,I)=>e.jsx("p",{style:{fontFamily:o,fontWeight:500,fontSize:14,color:i.textSecondary,margin:0,lineHeight:1.5},children:y},I)),z&&e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.textMidtone,margin:0,lineHeight:1.5},children:z})]}),f]})]})]})}exports.DEFAULT_DISTRIBUTION_COLUMNS=se;exports.DEFAULT_REPORTS_COLUMNS=ne;exports.ReportsDetails=Ie;exports.ReportsList=me;
|
|
10
|
+
`}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,paddingTop:12,flexWrap:"wrap"},children:[e.jsx("h1",{style:{fontFamily:F,fontSize:24,fontWeight:400,color:a.ink,margin:0,lineHeight:1.2,letterSpacing:"-0.01em",flex:1,minWidth:0},children:l}),e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center",flexWrap:"wrap"},children:[I&&e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:6,fontFamily:F,fontSize:13,color:a.ink,marginRight:6,whiteSpace:"nowrap"},children:[e.jsx(c.CalendarDays,{size:16,strokeWidth:1.75,style:{color:a.muted}}),I]}),h.map(x=>e.jsx(pe,{label:x.label,active:!W&&x.id===j,onClick:()=>y(x.id)},x.id)),M||e.jsx(V.DateRangeButton,{value:f,onChange:Y}),r&&e.jsxs("button",{type:"button",onClick:()=>s==null?void 0:s(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:`1px solid ${a.neutralBorder}`,background:a.white,cursor:"pointer",fontFamily:F,fontSize:14,color:a.neutral800},children:[e.jsx(c.Download,{size:18,strokeWidth:1.75}),r]}),u&&e.jsxs("button",{type:"button",onClick:()=>d==null?void 0:d(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:"none",background:a.neutral850,cursor:"pointer",fontFamily:F,fontSize:16,fontWeight:400,color:a.neutral50,whiteSpace:"nowrap"},children:[e.jsx(c.Plus,{size:20,strokeWidth:1.75}),u]})]})]}),e.jsx(ue.DataTable2,{data:X,columns:oe,initialPageSize:T,onRowClick:C,onVisibleColumnsChange:H,hideColumnPicker:!0,totalCount:N,page:_,pageSize:Z,onPageChange:U,onPageSizeChange:J}),e.jsx(he.ConfirmationPopup,{open:!!q,title:L,content:O,primaryLabel:B,secondaryLabel:m,onPrimary:()=>z(null),onSecondary:()=>{const x=q;z(null),x&&(v==null||v(x))},onClose:()=>z(null)})]})}const i={ink:"var(--color-text)",muted:"var(--color-text-secondary)",border:"var(--grey-absent)",borderSubtle:"var(--neutral-100)",black:"var(--neutral-900)",white:"var(--grey-white)",neutralBorder:"var(--neutral-250)",neutralLight:"var(--neutral-100)",neutral850:"var(--neutral-850)",neutral800:"var(--neutral-800)",neutral50:"var(--neutral-50)",neutral200:"var(--neutral-200)",textSecondary:"var(--text-item)",textMidtone:"var(--text-subtle-warm)",selectedRow:"var(--focus-2)",summaryBg:"var(--surface-warm-40)",hoverGrey:"var(--surface-hover)"},o="var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)",te="Varta, var(--font-sans, sans-serif)";function le({as:t="span",text:l,style:n,...s}){const r=k.useRef(null),[d,u]=k.useState(!1);return k.useEffect(()=>{const h=r.current;if(!h)return;const j=()=>u(h.scrollWidth>h.clientWidth);if(j(),typeof ResizeObserver>"u")return;const p=new ResizeObserver(j);return p.observe(h),()=>p.disconnect()},[l]),e.jsx(t,{ref:r,title:d&&l!=null?String(l):void 0,style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",minWidth:0,...n},...s,children:l})}function je(t){if(t==null||t==="")return"";const l=t instanceof Date?t:new Date(String(t));if(Number.isNaN(l.getTime()))return String(t);const n=l.toLocaleDateString(void 0,{month:"2-digit",day:"2-digit",year:"numeric"}),s=l.toLocaleTimeString(void 0,{hour:"numeric",minute:"2-digit",hour12:!0});return`${n} at ${s}`}const ke={active:c.CloudCheck,paused:c.CirclePause,suspended:c.Ban};function re({value:t,size:l=20}){if(t==null||t==="")return null;const n=ke[String(t).toLowerCase()]||c.CloudCheck;return e.jsx(n,{size:l,strokeWidth:1.5,style:{color:i.ink}})}function Se({value:t}){return t==null||t===""?null:e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:4,fontFamily:o,fontSize:12,color:i.ink,lineHeight:"16px"},children:[e.jsx(re,{value:t}),t]})}function we({item:t,selected:l,onClick:n}){return e.jsxs("button",{type:"button",onClick:n,style:{display:"flex",gap:4,padding:"8px 4px",borderRadius:8,border:"none",background:l?i.selectedRow:i.white,cursor:n?"pointer":"default",textAlign:"left",width:"100%",fontFamily:o},children:[e.jsx("div",{style:{width:40,height:40,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx(re,{value:t.status})}),e.jsxs("div",{style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:2},children:[e.jsx(le,{text:t.title,style:{fontFamily:o,fontWeight:600,fontSize:14,color:i.ink,lineHeight:1.2}}),(()=>{const s=je(t.timestamp);return s?e.jsx("span",{style:{fontFamily:o,fontSize:12,color:i.ink,lineHeight:1.5},children:s}):null})()]})]})}function K({label:t,active:l=!1,disabled:n=!1,onClick:s,leading:r,trailing:d}){return e.jsxs("button",{type:"button",onClick:s,disabled:n,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:4,height:24,minWidth:22,padding:"4px 8px",borderRadius:10,border:l?"none":`1px solid ${i.borderSubtle}`,background:l?i.black:i.white,color:l?i.white:i.black,cursor:n?"not-allowed":"pointer",opacity:n?.5:1,fontFamily:o,fontSize:12,lineHeight:"16px"},children:[r,t,d]})}function ve({page:t=1,totalPages:l=1,onPageChange:n,backLabel:s="",nextLabel:r=""}){const d=Array.from({length:l},(u,h)=>h+1);return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:6,padding:"16px 0",borderTop:`1px solid ${i.border}`},children:[e.jsx(K,{label:s,leading:e.jsx(c.ChevronLeft,{size:12,strokeWidth:1.75}),disabled:t<=1,onClick:()=>n==null?void 0:n(Math.max(1,t-1))}),d.map(u=>e.jsx(K,{label:String(u),active:u===t,onClick:()=>n==null?void 0:n(u)},u)),e.jsx(K,{label:r,trailing:e.jsx(c.ChevronRight,{size:12,strokeWidth:1.75}),disabled:t>=l,onClick:()=>n==null?void 0:n(Math.min(l,t+1))})]})}function ie({children:t}){return e.jsx("div",{style:{height:40,display:"flex",alignItems:"center",borderBottom:`1px solid ${i.border}`,fontFamily:o,fontSize:16,color:i.ink},children:t})}function ze({columns:t,rows:l,totalRow:n}){if(!(t!=null&&t.length))return null;const s={padding:12,fontFamily:o,fontSize:14,lineHeight:"20px",color:i.black,boxSizing:"border-box"};return e.jsx("div",{style:{border:`1px solid ${i.neutral200}`,borderRadius:4,background:i.white,overflow:"hidden"},children:e.jsxs("table",{style:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:[e.jsx("colgroup",{children:t.map(r=>e.jsx("col",{style:r.width?{width:r.width}:void 0},r.id))}),e.jsx("thead",{children:e.jsx("tr",{style:{background:i.neutral50,height:36},children:t.map((r,d)=>e.jsx("th",{style:{...s,fontWeight:500,textAlign:r.align||(d===0?"left":"right"),borderBottom:`1px solid ${i.borderSubtle}`},children:r.label},r.id))})}),e.jsxs("tbody",{children:[(l||[]).map((r,d)=>e.jsx("tr",{style:{height:36},children:t.map((u,h)=>e.jsx("td",{style:{...s,textAlign:u.align||(h===0?"left":"right"),borderBottom:`1px solid ${i.borderSubtle}`},children:r[u.id]},u.id))},r.id??d)),n&&e.jsx("tr",{style:{height:36,background:i.neutral50},children:t.map((r,d)=>e.jsx("td",{style:{...s,fontWeight:500,textAlign:r.align||(d===0?"left":"right")},children:n[r.id]},r.id))})]})]})})}const se=[{id:"location",label:"Location",width:242,align:"left"},{id:"calls",label:"Calls",width:90,align:"right"},{id:"percentOfTotal",label:"% of Total",width:90,align:"right"},{id:"avgCsat",label:"Avg CSAT",width:90,align:"right"},{id:"inbound",label:"Inbound",width:90,align:"right"},{id:"client",label:"Client",width:90,align:"right"}];function Ie({className:t="",reportTitle:l="",onBack:n,onManage:s,manageLabel:r="",onCreateReport:d,createReportLabel:u="",previousReports:h=[],selectedReportId:j=null,onSelectReport:p,previousReportsPage:M=1,previousReportsTotalPages:$=1,onPreviousReportsPageChange:S,paginationBackLabel:X="",paginationNextLabel:E="",reportSubtitle:T="",dateLabel:C="",dateValue:H="",status:b="",shareLabel:w="",onShare:g,shareCopied:D=!1,shareCopiedLabel:v="Link copied",pdfLabel:A="",onPdf:m,summaryTitle:L="",summaryBody:O="",introBold:B="",introMeta:N="",distributionTitle:_="",distributionColumns:Z=se,distributionRows:U=[],distributionTotalRow:J,observationsTitle:P="",observations:R=[],closingBoldLines:q=[],closingMeta:z="",rightColumnExtra:f=null}){const[W,Y]=k.useState(!1);return e.jsxs("div",{className:t,style:{background:i.white,fontFamily:o,color:i.ink,width:"100%",minWidth:1192,boxSizing:"border-box",display:"flex",flexDirection:"column"},children:[e.jsxs("div",{"data-print-hide":"true",style:{display:"flex",alignItems:"center",gap:12,padding:"12px 32px",minHeight:78,boxSizing:"border-box"},children:[e.jsx("button",{type:"button","aria-label":"Back",onClick:n,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,background:"transparent",border:"none",cursor:n?"pointer":"default",color:i.ink,padding:0,flexShrink:0},children:e.jsx(c.ArrowLeft,{size:20,strokeWidth:1.75})}),e.jsx("div",{style:{flex:1,minWidth:0,paddingLeft:16,borderLeft:`1px solid ${i.border}`,alignSelf:"stretch",display:"flex",alignItems:"center"},children:e.jsx("h1",{style:{fontFamily:o,fontSize:24,fontWeight:400,color:i.ink,margin:0,lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:l})}),r&&e.jsxs("button",{type:"button",onClick:()=>s==null?void 0:s(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:`1px solid ${i.neutralBorder}`,background:i.white,cursor:"pointer",fontFamily:o,fontSize:14,color:i.neutral800,flexShrink:0},children:[e.jsx(c.Settings2,{size:20,strokeWidth:1.75}),r]}),u&&e.jsxs("button",{type:"button",onClick:()=>d==null?void 0:d(),style:{display:"inline-flex",alignItems:"center",gap:8,height:32,padding:"0 16px",borderRadius:10,border:"none",background:i.neutral850,cursor:"pointer",fontFamily:o,fontSize:16,fontWeight:400,color:i.neutral50,whiteSpace:"nowrap",flexShrink:0},children:[e.jsx(c.Plus,{size:20,strokeWidth:1.75}),u]})]}),e.jsxs("div",{style:{display:"flex",gap:24,padding:"24px 32px",borderTop:`1px solid ${i.border}`,alignItems:"flex-start"},children:[!W&&e.jsxs("aside",{"data-print-hide":"true",style:{width:360,flexShrink:0,borderRight:`1px solid ${i.borderSubtle}`,paddingRight:20,display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,paddingLeft:4,paddingTop:12},children:[e.jsx("span",{style:{fontFamily:o,fontSize:14,color:i.ink,lineHeight:1.2},children:`History (${h.length} ${h.length===1?"Report":"Reports"})`}),e.jsx("button",{type:"button","aria-label":"Collapse history",title:"Collapse history",onClick:()=>Y(!0),style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:0,borderRadius:4,border:"none",background:"transparent",cursor:"pointer",color:i.ink},children:e.jsx(c.PanelLeftClose,{size:16,strokeWidth:1.75})})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:h.map((y,I)=>e.jsx(we,{item:y,selected:y.id!=null&&y.id===j,onClick:p?()=>p(y):void 0},y.id??I))}),$>1&&e.jsx(ve,{page:M,totalPages:$,onPageChange:S,backLabel:X,nextLabel:E})]}),e.jsxs("div",{style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:16},children:[(W||T||C||H||b||w)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,width:"100%"},children:[(W||T)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flex:1,minWidth:0},children:[W&&e.jsxs("button",{type:"button","aria-label":"Show history",title:"Show history",onClick:()=>Y(!1),"data-print-hide":"true",style:{display:"inline-flex",alignItems:"center",gap:8,height:28,padding:"8px 16px",borderRadius:10,border:`1px solid ${i.neutralBorder}`,background:i.white,cursor:"pointer",fontFamily:o,fontSize:14,lineHeight:"24px",color:i.neutral800,flexShrink:0},children:["History",e.jsx(c.PanelLeftOpen,{size:16,strokeWidth:1.75})]}),T&&e.jsx(le,{text:T,style:{flex:1,minWidth:0,fontFamily:te,fontSize:20,color:i.ink,fontWeight:400,lineHeight:"normal"}})]}),(C||H||b||w||A)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,flexShrink:0,justifyContent:"flex-end"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,justifyContent:"flex-end",flex:1,minWidth:0},children:[(C||H)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"8px 0",fontSize:13,color:i.ink,lineHeight:1.2},children:[C&&e.jsx("span",{style:{fontFamily:o,whiteSpace:"nowrap"},children:C}),H&&e.jsx("span",{style:{fontFamily:te,whiteSpace:"nowrap"},children:H})]}),b&&e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:4,paddingLeft:16,borderLeft:`1px solid ${i.border}`},children:e.jsx(Se,{value:b})})]}),A&&e.jsx("div",{"data-print-hide":"true",style:{flexShrink:0},children:e.jsxs("button",{type:"button",onClick:()=>m==null?void 0:m(),disabled:!m,"aria-label":"Download as PDF",title:"Download as PDF",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:8,height:28,padding:"8px 16px",boxSizing:"border-box",borderRadius:10,border:"none",background:i.hoverGrey,cursor:m?"pointer":"not-allowed",opacity:m?1:.6,fontFamily:o,fontSize:14,lineHeight:"24px",color:i.ink,whiteSpace:"nowrap"},children:[e.jsx(c.FileDown,{size:16,strokeWidth:1.5}),A]})}),w&&e.jsxs("div",{"data-print-hide":"true",style:{position:"relative",flexShrink:0},children:[e.jsxs("button",{type:"button",onClick:()=>g==null?void 0:g(),disabled:!g,style:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:8,height:28,padding:"8px 16px",boxSizing:"border-box",borderRadius:10,border:"none",background:i.hoverGrey,cursor:g?"pointer":"not-allowed",opacity:g?1:.6,fontFamily:o,fontSize:14,lineHeight:"24px",color:i.ink,whiteSpace:"nowrap"},children:[e.jsx(c.Share2,{size:16,strokeWidth:1.75}),w]}),D&&e.jsxs("div",{role:"status","aria-live":"polite",style:{position:"absolute",top:"calc(100% + 8px)",right:0,zIndex:50,background:"#2e3236",color:"#ffffff",borderRadius:10,boxShadow:"0 8px 24px rgba(11,11,11,0.18)",padding:"8px 12px",display:"inline-flex",alignItems:"center",gap:8,fontFamily:o,fontSize:13,lineHeight:1,whiteSpace:"nowrap"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M2.66683 10.6667C1.9335 10.6667 1.3335 10.0667 1.3335 9.33337V2.66671C1.3335 1.93337 1.9335 1.33337 2.66683 1.33337H9.3335C10.0668 1.33337 10.6668 1.93337 10.6668 2.66671M6.66683 5.33337H13.3335C14.0699 5.33337 14.6668 5.93033 14.6668 6.66671V13.3334C14.6668 14.0698 14.0699 14.6667 13.3335 14.6667H6.66683C5.93045 14.6667 5.3335 14.0698 5.3335 13.3334V6.66671C5.3335 5.93033 5.93045 5.33337 6.66683 5.33337Z",stroke:"#F2F2F0",strokeLinecap:"round",strokeLinejoin:"round"})}),v]})]})]})]}),(L||O)&&e.jsxs("div",{style:{background:i.summaryBg,border:`1px solid ${i.border}`,borderRadius:8,padding:24,display:"flex",flexDirection:"column",gap:12},children:[L&&e.jsx("span",{style:{fontFamily:o,fontWeight:600,fontSize:15,color:i.ink,lineHeight:1.2},children:L}),O&&e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.ink,margin:0,lineHeight:1.5},children:O})]}),(B||N)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[B&&e.jsx("p",{style:{fontFamily:o,fontWeight:500,fontSize:14,color:i.textSecondary,margin:0,lineHeight:1.5},children:B}),N&&e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.textMidtone,margin:0,lineHeight:1.5},children:N})]}),(_||U.length>0)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[_&&e.jsx(ie,{children:_}),U.length>0&&e.jsx(ze,{columns:Z,rows:U,totalRow:J})]}),(P||R.length>0)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[P&&e.jsx(ie,{children:P}),R.map((y,I)=>e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.ink,margin:0,padding:"12px 0 16px",borderBottom:`1px solid ${i.border}`,lineHeight:1.5},children:y},I))]}),(q.length>0||z)&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:14,padding:"12px 0"},children:[q.map((y,I)=>e.jsx("p",{style:{fontFamily:o,fontWeight:500,fontSize:14,color:i.textSecondary,margin:0,lineHeight:1.5},children:y},I)),z&&e.jsx("p",{style:{fontFamily:o,fontSize:14,color:i.textMidtone,margin:0,lineHeight:1.5},children:z})]}),f]})]})]})}exports.DEFAULT_DISTRIBUTION_COLUMNS=se;exports.DEFAULT_REPORTS_COLUMNS=ne;exports.ReportsDetails=Ie;exports.ReportsList=me;
|
|
11
11
|
//# sourceMappingURL=reports.cjs.js.map
|