chordia-ui 3.7.2 → 3.7.4

package/src/components/data/DataTableFilters2.jsx

@@ -0,0 +1,186 @@
+"use client";
+
+import React, { useState, useEffect, useRef, Suspense } from "react";
+import { Download, ChevronDown, CalendarClock, CalendarDays } from "lucide-react";
+import { createPortal } from "react-dom";
+import { CustomFilterChips } from "../common";
+
+/**
+ * DataTableFilters Component
+ * Displays filter buttons (Week to Date, Select Date Range, Export) and filter chips
+ * 
+ * @param {Object} props
+ * @param {React.ReactNode} props.dateRangePicker - DateRangePicker component (wrapped in Suspense)
+ * @param {Function} props.onWeekToDate - Handler for "Week to Date" button
+ * @param {Object} props.exportConfig - Export configuration
+ * @param {boolean} props.exportConfig.isExporting - Whether export is in progress
+ * @param {Function} props.exportConfig.onExport - Export handler (type) => void
+ * @param {Array} props.exportConfig.types - Export types array (default: ['csv'])
+ * @param {Object} props.filterChipsConfig - Filter chips configuration
+ * @param {Object} props.filterChipsConfig.filters - Current filter values
+ * @param {Function} props.filterChipsConfig.onChange - Filter chips change handler
+ * @param {Function} props.filterChipsConfig.onClear - Clear all filters handler
+ * @param {Array} props.filterChipsConfig.customFilters - Custom filter chips (e.g., date range)
+ */
+export default function DataTableFilters2({
+  dateRangePicker,
+  onWeekToDate,
+  exportConfig,
+  filterChipsConfig,
+  trailingActions, // Optional extra actions rendered after Export (e.g., Add Users button)
+}) {
+  const [showExportMenu, setShowExportMenu] = useState(false);
+  const exportButtonRef = useRef(null);
+  const exportMenuRef = useRef(null);
+
+  // Handle click outside to close export menu
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        exportMenuRef.current &&
+        !exportMenuRef.current.contains(event.target) &&
+        exportButtonRef.current &&
+        !exportButtonRef.current.contains(event.target)
+      ) {
+        setShowExportMenu(false);
+      }
+    };
+
+    if (showExportMenu) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [showExportMenu]);
+
+  const openExportMenu = () => {
+    setShowExportMenu((prev) => !prev);
+  };
+
+  const handleExport = (type) => {
+    setShowExportMenu(false);
+    if (exportConfig?.onExport) {
+      exportConfig.onExport(type);
+    }
+  };
+
+  // Check if there are any filter chips to display
+  const hasFilterChips = () => {
+    if (!filterChipsConfig?.filters) return false;
+    
+    const filters = filterChipsConfig.filters;
+    const customFilters = filterChipsConfig.customFilters || [];
+    
+    // Check if any regular filters have values
+    const hasRegularFilters = Object.entries(filters).some(([key, value]) => {
+      if (Array.isArray(value) && value.length) return true;
+      if (typeof value === "string" && value.trim() !== "") return true;
+      if (value && typeof value === "object" && (value.min != null || value.max != null)) return true;
+      return false;
+    });
+    
+    // Check if any custom filters are active
+    const hasCustomFilters = customFilters.some(filterObj => filterObj.active);
+    
+    return hasRegularFilters || hasCustomFilters;
+  };
+
+  const shouldShowChips = hasFilterChips();
+
+  return (
+    <div className="flex items-center gap-3 flex-wrap">
+      {/* Week to Date Button */}
+      {onWeekToDate && (
+        <button
+          onClick={onWeekToDate}
+          className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white/80 px-4 py-2.5 transition-colors hover:bg-white text-sm font-medium text-gray-900"
+          style={{ fontFamily: 'var(--font-sans)' }}
+        >
+          <CalendarClock size={16} />
+          <span>Week to Date</span>
+        </button>
+      )}
+
+      {/* Select Date Range */}
+      {dateRangePicker && (
+        <Suspense
+          fallback={
+            <div className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-400">
+              <CalendarClock size={16} />
+              <span>Loading...</span>
+            </div>
+          }
+        >
+          {dateRangePicker}
+        </Suspense>
+      )}
+
+      {/* Export Button */}
+      {exportConfig && (
+        <div className="relative">
+          <button
+            ref={exportButtonRef}
+            onClick={openExportMenu}
+            disabled={exportConfig.isExporting}
+            className="inline-flex items-center justify-between gap-2 rounded-lg border border-gray-300 bg-white/80 px-4 py-2.5 transition-colors hover:bg-white text-sm font-medium text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed min-w-[120px]"
+            style={{ fontFamily: 'var(--font-sans)' }}
+          >
+            <div className="flex items-center gap-2">
+              <Download size={16} />
+              <span>{exportConfig.isExporting ? "Exporting..." : "Export"}</span>
+            </div>
+            <ChevronDown size={16} />
+          </button>
+          {showExportMenu && (
+            <div
+              ref={exportMenuRef}
+              className="absolute top-full right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50 min-w-[120px]"
+            >
+              {(exportConfig.types || ["csv"]).map((type) => (
+                <button
+                  key={type}
+                  onClick={() => handleExport(type)}
+                  className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+                  style={{ fontFamily: 'var(--font-sans)' }}
+                >
+                  Export {type.toUpperCase()}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Filter chips + optional trailing actions (e.g., Add Users / Add Agent) */}
+      {(shouldShowChips || trailingActions) && (
+        <>
+          {/* Vertical line only when there are actual chips; this avoids double lines
+              when we only show trailingActions (like Add Agent) with no chips. */}
+          {shouldShowChips && (
+            <div className="h-9 mt-1 w-px bg-gray-300 flex-shrink-0"></div>
+          )}
+
+          {/* Filter Chips + trailing actions */}
+          <div className="flex items-center gap-3 justify-end">
+            {shouldShowChips && filterChipsConfig && (
+              <CustomFilterChips
+                filters={filterChipsConfig.filters}
+                onChange={filterChipsConfig.onChange}
+                onClear={filterChipsConfig.onClear}
+                customFilters={filterChipsConfig.customFilters || []}
+                fieldOptions={filterChipsConfig.fieldOptions || {}}
+              />
+            )}
+            {trailingActions && (
+              <div className="flex-shrink-0">
+                {trailingActions}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+

package/src/components/data/index.js

@@ -1,3 +1,5 @@
 export { default as DataTable } from './DataTable';
+export { default as DataTable2 } from './DataTable2';
 export { default as DataTableFilters } from './DataTableFilters';
+export { default as DataTableFilters2 } from './DataTableFilters2';
 export { default as SummaryStatsPanel } from './SummaryStatsPanel';

package/src/components/index.js

@@ -23,7 +23,7 @@ export {
 } from './primitives';
 
 // Data display
-export { DataTable, DataTableFilters, SummaryStatsPanel } from './data';
+export { DataTable, DataTable2, DataTableFilters, DataTableFilters2, SummaryStatsPanel } from './data';
 
 // Compass evaluation
 export { AskCompass, SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, AutoSearch, SideDrawer, DrawerButton, DrawerLabel, DrawerInput, FileUploadingState, FileUploadSuccessState, TourGuideTooltip, Toast, ToastContainer } from './common';
@@ -46,7 +46,7 @@ export { FirstCallScreen, OnboardingChecklist, DemoProjectBanner, IntegrationCar
 export { NotificationPanel, NotificationItem } from './notifications';
 
 // Performance
-export { PerformancePanel } from './performance';
+export { PerformancePanel, PerformanceDetailsPage, SupervisorSelect } from './performance';
 
 export { OverlayPanel } from './models';