qantler-flaz-dataview 1.0.0

package/src/MdtSidebarNav.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const MdtSidebarNav = ({ items = [], activeKey = null, onItemClick }) => {
+  return (
+    <nav className="mdt-sidebar-nav" aria-label="Master data navigation">
+      {items.map((item) => {
+        const key = item?.key;
+        const isActive = key === activeKey;
+        return (
+          <button
+            key={String(key)}
+            type="button"
+            className={`mdt-sidebar-nav-item${isActive ? " mdt-sidebar-nav-item--active" : ""}`}
+            onClick={() => onItemClick && onItemClick(item)}
+            disabled={Boolean(item?.disabled)}
+            title={item?.label || ""}
+          >
+            <span className="mdt-sidebar-nav-item-label">{item?.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+};
+
+export default MdtSidebarNav;

package/src/MdtTabsRow.jsx

@@ -0,0 +1,354 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { MoreHorizontal, Pencil } from "lucide-react";
+
+const TAB_GAP = 8;
+const MORE_BTN_FALLBACK = 40;
+
+const MdtTabsRow = ({
+  tabs = [],
+  activeTabId,
+  onTabClick,
+  onEditSavedView,
+  tabsConfig = {},
+  leadingSlot = null,
+  rowClassName = "",
+}) => {
+  const {
+    showCounts = true,
+    showSavedViewEdit = true,
+    moreButtonAriaLabel = "More views",
+    className: tabsClassName = "",
+  } = tabsConfig;
+
+  const currentUserId = React.useMemo(() => {
+    try {
+      const userInfo = JSON.parse(localStorage.getItem("UserInfoRMS") || "{}");
+      return userInfo?.userId ?? null;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const isAdmin = React.useMemo(() => {
+    try {
+      const roles = localStorage.getItem("rmsRoles") || "";
+      return roles.includes("Admin");
+    } catch {
+      return false;
+    }
+  }, []);
+
+  const canEditTab = React.useCallback(
+    (tab) => {
+      if (!tab.isSavedView) return false;
+      if (isAdmin && tab.isSystem) return true;
+      return currentUserId != null && tab.createdBy === currentUserId;
+    },
+    [currentUserId, isAdmin],
+  );
+  const tabsRowRef = useRef(null);
+  const tabsMeasureRef = useRef(null);
+  const moreBtnRef = useRef(null);
+  const overflowRef = useRef(null);
+  const measureRetryRef = useRef(0);
+  const [visibleCount, setVisibleCount] = useState(tabs.length);
+  const [overflowOpen, setOverflowOpen] = useState(false);
+  const [moreBtnWidth, setMoreBtnWidth] = useState(MORE_BTN_FALLBACK);
+  const [menuPosition, setMenuPosition] = useState(null);
+
+  const getAvailableWidth = useCallback(() => {
+    const row = tabsRowRef.current;
+    if (!row) return 0;
+    const style = window.getComputedStyle(row);
+    const padding =
+      parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0");
+    return Math.max(0, row.clientWidth - padding);
+  }, []);
+
+  const measureTabs = useCallback(() => {
+    const measure = tabsMeasureRef.current;
+    if (!measure || tabs.length === 0) {
+      setVisibleCount(tabs.length);
+      return;
+    }
+
+    const available = getAvailableWidth();
+    if (available <= 0) return;
+
+    const entries = measure.querySelectorAll("[data-tab-measure]");
+    const widths = Array.from(entries).map((el) => el.getBoundingClientRect().width);
+
+    if (widths.length !== tabs.length || widths.some((w) => w <= 0)) {
+      if (measureRetryRef.current < 8) {
+        measureRetryRef.current += 1;
+        requestAnimationFrame(measureTabs);
+      }
+      return;
+    }
+    measureRetryRef.current = 0;
+
+    const reserve = (moreBtnRef.current?.offsetWidth ?? moreBtnWidth) + TAB_GAP;
+
+    let sum = 0;
+    for (let i = 0; i < widths.length; i++) {
+      sum += widths[i] + (i > 0 ? TAB_GAP : 0);
+    }
+    if (sum <= available) {
+      setVisibleCount(tabs.length);
+      return;
+    }
+
+    sum = 0;
+    let count = 0;
+    for (let i = 0; i < widths.length; i++) {
+      const w = widths[i] + (i > 0 ? TAB_GAP : 0);
+      if (sum + w + reserve > available) break;
+      sum += w;
+      count = i + 1;
+    }
+    setVisibleCount(Math.max(1, count));
+  }, [tabs, getAvailableWidth, moreBtnWidth]);
+
+  const scheduleMeasure = useCallback(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(measureTabs);
+    });
+  }, [measureTabs]);
+
+  useLayoutEffect(() => {
+    measureRetryRef.current = 0;
+    scheduleMeasure();
+  }, [scheduleMeasure, activeTabId, tabs]);
+
+  useEffect(() => {
+    scheduleMeasure();
+  }, [moreBtnWidth, scheduleMeasure]);
+
+  useEffect(() => {
+    const row = tabsRowRef.current;
+    if (!row) return undefined;
+
+    const ro = new ResizeObserver(() => scheduleMeasure());
+    ro.observe(row);
+
+    window.addEventListener("resize", scheduleMeasure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", scheduleMeasure);
+    };
+  }, [scheduleMeasure]);
+
+  useEffect(() => {
+    if (moreBtnRef.current) {
+      setMoreBtnWidth(moreBtnRef.current.offsetWidth || MORE_BTN_FALLBACK);
+    }
+  }, [overflowOpen, tabs.length]);
+
+  const updateMenuPosition = useCallback(() => {
+    const btn = moreBtnRef.current;
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    setMenuPosition({
+      top: rect.bottom + 4,
+      left: rect.right,
+    });
+  }, []);
+
+  const { visibleTabs, overflowTabs } = useMemo(() => {
+    if (tabs.length === 0) {
+      return { visibleTabs: [], overflowTabs: [] };
+    }
+
+    const activeIdx = tabs.findIndex((t) => t.id === activeTabId);
+    const hasOverflow = visibleCount < tabs.length;
+    let visible = tabs.slice(0, visibleCount);
+
+    if (hasOverflow && activeIdx >= visibleCount) {
+      visible = [
+        ...tabs.slice(0, Math.max(0, visibleCount - 1)),
+        tabs[activeIdx],
+      ];
+    }
+
+    const visibleIds = new Set(visible.map((t) => t.id));
+    const overflow = tabs.filter((t) => !visibleIds.has(t.id));
+    return { visibleTabs: visible, overflowTabs: overflow };
+  }, [tabs, visibleCount, activeTabId]);
+
+  useLayoutEffect(() => {
+    if (!overflowOpen) {
+      setMenuPosition(null);
+      return undefined;
+    }
+    updateMenuPosition();
+    window.addEventListener("resize", updateMenuPosition);
+    window.addEventListener("scroll", updateMenuPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateMenuPosition);
+      window.removeEventListener("scroll", updateMenuPosition, true);
+    };
+  }, [overflowOpen, updateMenuPosition, overflowTabs.length]);
+
+  useEffect(() => {
+    if (!overflowOpen) return undefined;
+    const onOutside = (e) => {
+      const inWrap = overflowRef.current?.contains(e.target);
+      const inMenu = e.target.closest?.(".mdt-tabs-overflow-menu--portal");
+      if (!inWrap && !inMenu) setOverflowOpen(false);
+    };
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, [overflowOpen]);
+
+  const renderTabEntry = (tab, { forMeasure = false } = {}) => {
+    const isActive = activeTabId === tab.id;
+    return (
+      <div
+        key={forMeasure ? `measure-${tab.id}` : tab.id}
+        data-tab-measure={forMeasure ? "true" : undefined}
+        className={`mdt-tab-entry${isActive ? " mdt-tab-entry--active" : ""}`}
+      >
+        <button
+          type="button"
+          className={`mdt-tab-item${isActive ? " mdt-tab-active" : ""}${tab.isSavedView && isActive ? " mdt-tab-item--editable" : ""}`}
+          onClick={() => !forMeasure && onTabClick(tab)}
+        >
+          <span className="mdt-tab-item-inner">
+            {tab.label}
+            {showCounts && tab.count !== undefined && tab.count !== null && (
+              <span className="mdt-tab-count">({tab.count})</span>
+            )}
+            {showSavedViewEdit && tab.isSavedView && isActive && !forMeasure && canEditTab(tab) && (
+              <span
+                role="button"
+                tabIndex={0}
+                className="mdt-tab-edit-btn"
+                aria-label={`Edit view ${tab.label}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEditSavedView?.(tab.savedViewId);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onEditSavedView?.(tab.savedViewId);
+                  }
+                }}
+              >
+                <Pencil size={11} />
+              </span>
+            )}
+            {showSavedViewEdit && tab.isSavedView && isActive && forMeasure && canEditTab(tab) && (
+              <span className="mdt-tab-edit-btn mdt-tab-edit-btn--measure" aria-hidden="true">
+                <Pencil size={11} />
+              </span>
+            )}
+          </span>
+        </button>
+      </div>
+    );
+  };
+
+  const overflowMenu =
+    overflowOpen && overflowTabs.length > 0 && menuPosition ? (
+      <div
+        className="mdt-tabs-overflow-menu mdt-tabs-overflow-menu--portal"
+        role="menu"
+        style={{
+          position: "fixed",
+          top: menuPosition.top,
+          left: menuPosition.left,
+          transform: "translateX(-100%)",
+        }}
+      >
+        {overflowTabs.map((tab) => {
+          const isActive = activeTabId === tab.id;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              role="menuitem"
+              className={`mdt-tabs-overflow-item${isActive ? " mdt-tabs-overflow-item--active" : ""}`}
+              onClick={() => {
+                onTabClick(tab);
+                setOverflowOpen(false);
+              }}
+            >
+              <span className="mdt-tabs-overflow-label">{tab.label}</span>
+              {showCounts && tab.count !== undefined && tab.count !== null && (
+                <span className="mdt-tabs-overflow-count">({tab.count})</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    ) : null;
+
+  if (tabs.length === 0) return null;
+
+  const showOverflow = overflowTabs.length > 0;
+
+  return (
+    <div
+      className={[
+        "mdt-tabs-row",
+        leadingSlot ? "mdt-tabs-row--with-leading" : "",
+        tabsClassName,
+        rowClassName,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      ref={tabsRowRef}
+    >
+      {leadingSlot}
+      <div className="mdt-tabs-strip">
+        <div className="mdt-tabs-visible">
+          {visibleTabs.map((tab) => renderTabEntry(tab))}
+        </div>
+
+        {showOverflow && (
+          <div className="mdt-tabs-overflow-wrap" ref={overflowRef}>
+            <button
+              ref={moreBtnRef}
+              type="button"
+              className={`mdt-tabs-more-btn${overflowOpen ? " mdt-tabs-more-btn--open" : ""}`}
+              aria-label={moreButtonAriaLabel}
+              aria-expanded={overflowOpen}
+              onClick={() => {
+                setOverflowOpen((v) => {
+                  const next = !v;
+                  if (next) requestAnimationFrame(updateMenuPosition);
+                  return next;
+                });
+              }}
+            >
+              <MoreHorizontal size={16} />
+            </button>
+            {overflowMenu && createPortal(overflowMenu, document.body)}
+          </div>
+        )}
+
+        {/* Hidden more button for width measurement before overflow renders */}
+        {!showOverflow && tabs.length > 1 && (
+          <button
+            ref={moreBtnRef}
+            type="button"
+            className="mdt-tabs-more-btn mdt-tabs-more-btn--measure"
+            tabIndex={-1}
+            aria-hidden="true"
+          >
+            <MoreHorizontal size={16} />
+          </button>
+        )}
+      </div>
+
+      <div className="mdt-tabs-measure" aria-hidden="true" ref={tabsMeasureRef}>
+        {tabs.map((tab) => renderTabEntry(tab, { forMeasure: true }))}
+      </div>
+    </div>
+  );
+};
+
+export default MdtTabsRow;

package/src/MdtTabsSection.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import MdtTabsRow from "./MdtTabsRow";
+import { resolveTabsConfig } from "./mdtFilterUtils";
+
+/**
+ * Configurable tabs row wrapper (status tabs + saved views).
+ */
+const MdtTabsSection = ({
+  tabs = [],
+  activeTabId,
+  onTabClick,
+  onEditSavedView,
+  tabsConfig: tabsConfigProp,
+  show = true,
+  leadingSlot = null,
+  rowClassName = "",
+}) => {
+  const config = resolveTabsConfig(tabsConfigProp);
+
+  if (!show || tabs.length === 0) return null;
+
+  return (
+    <MdtTabsRow
+      tabs={tabs}
+      activeTabId={activeTabId}
+      onTabClick={onTabClick}
+      onEditSavedView={onEditSavedView}
+      tabsConfig={config}
+      leadingSlot={leadingSlot}
+      rowClassName={rowClassName}
+    />
+  );
+};
+
+export default MdtTabsSection;

package/src/MdtTruncateWithTooltip.jsx

@@ -0,0 +1,82 @@
+import React, { useRef, useState, useEffect, useCallback } from "react";
+import Tooltip from "@mui/material/Tooltip";
+
+const TOOLTIP_SLOT_PROPS = {
+  tooltip: {
+    sx: {
+      bgcolor: "#ffffff",
+      color: "#18181b",
+      border: "1px solid #e4e4e7",
+      borderRadius: 0,
+      boxShadow:
+        "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      padding: "6px 10px",
+      maxWidth: 420,
+      fontSize: "12px",
+      lineHeight: 1.4,
+    },
+  },
+};
+
+/**
+ * Single-line ellipsis; shows tooltip only when content overflows.
+ */
+const MdtTruncateWithTooltip = ({
+  children,
+  title,
+  className = "",
+  as: Component = "span",
+  ...rest
+}) => {
+  const ref = useRef(null);
+  const [overflow, setOverflow] = useState(false);
+
+  const tooltipTitle =
+    title != null && String(title).trim() !== ""
+      ? String(title)
+      : typeof children === "string" || typeof children === "number"
+        ? String(children)
+        : "";
+
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    setOverflow(el.scrollWidth > el.clientWidth + 1);
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return undefined;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [children, title, measure]);
+
+  const inner = (
+    <Component
+      ref={ref}
+      className={["mdt-cell-truncate", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+
+  if (!overflow || !tooltipTitle) {
+    return <span className="mdt-cell-truncate-host">{inner}</span>;
+  }
+
+  return (
+    <Tooltip
+      title={tooltipTitle}
+      arrow
+      placement="top"
+      slotProps={TOOLTIP_SLOT_PROPS}
+    >
+      <span className="mdt-cell-truncate-host">{inner}</span>
+    </Tooltip>
+  );
+};
+
+export default MdtTruncateWithTooltip;