chordia-ui 3.7.2 → 3.7.4

package/src/components/performance/SupervisorSelect.jsx

@@ -0,0 +1,386 @@
+"use client";
+
+import React from "react";
+import { Search, Check } from "lucide-react";
+
+const C = {
+  white: "#FFFFFF",
+  black: "#0B0B0B",
+  borderSubtle: "#E6E6E6",
+  border: "#D9D9D9",
+  searchBg: "#D8D8D8",
+  rowSelected: "#F2F2F0",
+  textMuted: "#989898",
+  textMid: "#676767",
+  textDark: "#323232",
+  applyBg: "#2E3236",
+  scrollbar: "#D5D9E2",
+};
+
+const FONT = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
+
+function Checkbox({ checked, mutedFill = false }) {
+  return (
+    <span
+      style={{
+        width: 20,
+        height: 20,
+        borderRadius: 4,
+        background: checked ? C.black : mutedFill ? C.rowSelected : C.white,
+        border: `1px solid ${checked ? C.black : C.textDark}`,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        boxSizing: "border-box",
+      }}
+    >
+      {checked && <Check size={14} color={C.white} strokeWidth={3} />}
+    </span>
+  );
+}
+
+function Row({ supervisor, checked, muted = false, onToggle }) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        height: 32,
+        padding: "0 16px 0 8px",
+        borderRadius: 10,
+        border: "none",
+        background: checked ? C.rowSelected : "transparent",
+        cursor: "pointer",
+        width: "100%",
+        textAlign: "left",
+        fontFamily: FONT,
+        flexShrink: 0,
+      }}
+    >
+      <span style={{ display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0 }}>
+        <Checkbox checked={checked} mutedFill={muted} />
+        <span
+          style={{
+            fontSize: 14,
+            lineHeight: "20px",
+            fontWeight: 400,
+            color: !checked && muted ? C.textMid : C.black,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {supervisor.name}
+        </span>
+      </span>
+      <span
+        style={{
+          fontSize: 12,
+          fontWeight: 500,
+          lineHeight: 1,
+          color: !checked && muted ? C.textMid : C.black,
+          whiteSpace: "nowrap",
+          padding: "4px 8px",
+        }}
+      >
+        {supervisor.agentCount} agents
+      </span>
+    </button>
+  );
+}
+
+function MetaRow({ left, right }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: 14,
+        fontSize: 12,
+        lineHeight: 1.5,
+        fontFamily: FONT,
+        flexShrink: 0,
+      }}
+    >
+      {left}
+      {right}
+    </div>
+  );
+}
+
+function ActionLink({ children, onClick, faded = false }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        background: "transparent",
+        border: "none",
+        padding: 0,
+        cursor: onClick ? "pointer" : "default",
+        fontFamily: FONT,
+        fontSize: 12,
+        fontWeight: 500,
+        color: faded ? C.textMuted : C.textDark,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default function SupervisorSelect({
+  supervisors = [],
+  value = [],
+  onApply,
+  onClose,
+  totalLabel,
+  className = "",
+  style,
+}) {
+  const initialValueRef = React.useRef(value);
+  const [staged, setStaged] = React.useState(value);
+  const [query, setQuery] = React.useState("");
+
+  React.useEffect(() => {
+    initialValueRef.current = value;
+    setStaged(value);
+  }, [value]);
+
+  const stagedSet = React.useMemo(() => new Set(staged), [staged]);
+
+  const isSearching = query.trim().length > 0;
+
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return supervisors;
+    return supervisors.filter((s) => s.name.toLowerCase().includes(q));
+  }, [supervisors, query]);
+
+  const allSelected = supervisors.length > 0 && staged.length === supervisors.length;
+  const noneSelected = staged.length === 0;
+  const isPartial = !allSelected && !noneSelected;
+
+  const toggle = (id) => {
+    setStaged((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+  };
+  const selectAll = () => setStaged(supervisors.map((s) => s.id));
+  const deselectAll = () => setStaged([]);
+  const reset = () => setStaged(initialValueRef.current);
+  const clearSearch = () => setQuery("");
+  const apply = () => {
+    onApply?.(staged);
+    onClose?.();
+  };
+
+  const headerCount = isSearching
+    ? `${filtered.length} Result${filtered.length === 1 ? "" : "s"}`
+    : totalLabel || `${supervisors.length} Supervisors`;
+
+  let headerRight;
+  if (isSearching) {
+    headerRight = filtered.length > 0 ? <ActionLink onClick={selectAll}>Select all</ActionLink> : null;
+  } else if (allSelected) {
+    headerRight = <ActionLink onClick={deselectAll}>Deselect all</ActionLink>;
+  } else if (noneSelected) {
+    headerRight = <ActionLink onClick={selectAll}>Select all</ActionLink>;
+  } else {
+    headerRight = (
+      <span style={{ display: "inline-flex", gap: 12 }}>
+        <ActionLink onClick={selectAll}>Select all</ActionLink>
+        <ActionLink onClick={deselectAll}>Deselect all</ActionLink>
+      </span>
+    );
+  }
+
+  // Decide which sections to render
+  const renderPartial = !isSearching && isPartial;
+  const flatList = isSearching ? filtered : renderPartial ? [] : supervisors;
+  const partialSelected = renderPartial ? supervisors.filter((s) => stagedSet.has(s.id)) : [];
+  const partialOthers = renderPartial ? supervisors.filter((s) => !stagedSet.has(s.id)) : [];
+
+  return (
+    <div
+      className={className}
+      style={{
+        width: 262,
+        background: C.white,
+        border: `1px solid ${C.borderSubtle}`,
+        borderRadius: 10,
+        padding: 12,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        fontFamily: FONT,
+        boxShadow: "0 8px 24px rgba(11, 11, 11, 0.08)",
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          background: C.searchBg,
+          height: 32,
+          borderRadius: 10,
+          padding: 1,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            background: C.white,
+            flex: 1,
+            height: 30,
+            borderRadius: 10,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "0 8px",
+          }}
+        >
+          <Search size={16} color={C.textMuted} strokeWidth={2} />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search supervisors..."
+            style={{
+              flex: 1,
+              border: "none",
+              outline: "none",
+              background: "transparent",
+              fontFamily: FONT,
+              fontSize: 14,
+              color: C.black,
+              minWidth: 0,
+            }}
+          />
+        </div>
+      </div>
+
+      <MetaRow
+        left={
+          <span style={{ color: C.textMuted, fontWeight: 400 }}>{headerCount}</span>
+        }
+        right={headerRight}
+      />
+
+      {flatList.length > 0 && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {flatList.map((s) => (
+            <Row
+              key={s.id}
+              supervisor={s}
+              checked={stagedSet.has(s.id)}
+              muted={false}
+              onToggle={() => toggle(s.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {renderPartial && (
+        <>
+          {partialSelected.length > 0 && (
+            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              {partialSelected.map((s) => (
+                <Row key={s.id} supervisor={s} checked onToggle={() => toggle(s.id)} />
+              ))}
+            </div>
+          )}
+          {partialSelected.length > 0 && partialOthers.length > 0 && (
+            <div style={{ height: 1, background: C.border, margin: "4px 0" }} />
+          )}
+          {partialOthers.length > 0 && (
+            <>
+              <MetaRow
+                left={<span style={{ color: C.textMuted, fontWeight: 400 }}>Others</span>}
+                right={null}
+              />
+              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                {partialOthers.map((s) => (
+                  <Row
+                    key={s.id}
+                    supervisor={s}
+                    checked={false}
+                    muted
+                    onToggle={() => toggle(s.id)}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+        </>
+      )}
+
+      {isSearching && filtered.length === 0 && (
+        <div
+          style={{
+            padding: "16px 8px",
+            textAlign: "center",
+            fontSize: 14,
+            color: C.textMid,
+            fontFamily: FONT,
+          }}
+        >
+          No results for &ldquo;{query}&rdquo;
+        </div>
+      )}
+      {isSearching && filtered.length > 0 && supervisors.length > filtered.length && (
+        <div
+          style={{
+            padding: "10px 8px",
+            textAlign: "center",
+            fontSize: 14,
+            color: C.textMid,
+            fontFamily: FONT,
+          }}
+        >
+          No other results for &ldquo;{query}&rdquo;
+        </div>
+      )}
+
+      <div style={{ height: 1, background: C.border, margin: "2px 0" }} />
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: 30,
+        }}
+      >
+        {isSearching ? (
+          <ActionLink onClick={clearSearch}>Clear search</ActionLink>
+        ) : (
+          <ActionLink onClick={reset}>Reset</ActionLink>
+        )}
+        <button
+          type="button"
+          onClick={apply}
+          style={{
+            background: C.applyBg,
+            color: C.white,
+            border: "none",
+            borderRadius: 10,
+            height: 28,
+            padding: "0 14px",
+            fontFamily: FONT,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+          }}
+        >
+          Apply
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/performance/index.js

@@ -1 +1,3 @@
-export { default as PerformancePanel } from './PerformancePanel';
+export { default as PerformancePanel, DEFAULT_AGENT_COLUMNS } from './PerformancePanel';
+export { default as PerformanceDetailsPage, DEFAULT_SESSION_COLUMNS } from './PerformanceDetailsPage';
+export { default as SupervisorSelect } from './SupervisorSelect';