@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/generic/GenericDetail.jsx

@@ -63,6 +63,10 @@ import {
     X as CircleX,
 } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import {
+    isBlankValue,
+    overviewFieldLabel,
+} from '../utils/displayValue';
 import OcrTemplateEnhanced from './OcrTemplateEnhanced';
 
 import 'react-big-calendar/lib/css/react-big-calendar.css';
@@ -269,9 +273,15 @@ function GenericDetail({
     /** Window Width State for Responsive Modal */
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
-    // Handle window resize for responsive modal
+    // Handle window resize for responsive modal — and for the grid height
+    // below, which is 65% of the window. `setWindowHeight` was never called,
+    // so a detail page opened on one screen and dragged to another (or a
+    // window resized at all) kept the grid it was born with.
     useEffect(() => {
-        const handleResize = () => setWindowWidth(window.innerWidth);
+        const handleResize = () => {
+            setWindowWidth(window.innerWidth);
+            setWindowHeight(window.innerHeight);
+        };
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
@@ -2778,6 +2788,55 @@ function GenericDetail({
                                                             <span>
                                                                 {section.title}
                                                             </span>
+                                                            {/* Optional right-hand meta on a section heading —
+                                                                the same item shape as `content`, rendered as
+                                                                quiet "label value" pairs. It is for the one or
+                                                                two facts that describe the whole card (a count,
+                                                                a last-updated stamp), which otherwise have to
+                                                                be spent as full-width fields among the real
+                                                                ones. */}
+                                                            {Array.isArray(
+                                                                section.meta
+                                                            ) &&
+                                                                section.meta
+                                                                    .length >
+                                                                    0 && (
+                                                                    <span
+                                                                        className={
+                                                                            styles.gridtxt__meta
+                                                                        }
+                                                                    >
+                                                                        {section.meta.map(
+                                                                            (
+                                                                                metaItem,
+                                                                                metaKey
+                                                                            ) => {
+                                                                                const metaValue =
+                                                                                    renderValue(
+                                                                                        metaItem,
+                                                                                        data
+                                                                                    );
+
+                                                                                return (
+                                                                                    <span
+                                                                                        key={`meta-${activeTabConfig.id}-${sectionIndex}-${metaKey}`}
+                                                                                    >
+                                                                                        {metaItem.label
+                                                                                            ? `${overviewFieldLabel(
+                                                                                                  metaItem.label
+                                                                                              )} `
+                                                                                            : ''}
+                                                                                        {isBlankValue(
+                                                                                            metaValue
+                                                                                        )
+                                                                                            ? '—'
+                                                                                            : metaValue}
+                                                                                    </span>
+                                                                                );
+                                                                            }
+                                                                        )}
+                                                                    </span>
+                                                                )}
                                                         </div>
                                                         {section.content &&
                                                             section.content
@@ -2791,41 +2850,76 @@ function GenericDetail({
                                                                         (
                                                                             item,
                                                                             itemKey
-                                                                        ) => (
-                                                                            <li
-                                                                                key={`li-${item.id}-${itemKey}`}
-                                                                                className={
-                                                                                    item.size ===
-                                                                                    'full'
-                                                                                        ? item.type ===
-                                                                                          'ocrTemplate'
-                                                                                            ? styles[
-                                                                                                  'fw-grid-item'
-                                                                                              ]
-                                                                                            : `${styles['fw-grid-item']} ${styles.notecolor}`
-                                                                                        : null
-                                                                                }
-                                                                            >
-                                                                                {item.type !==
-                                                                                    'ocrTemplate' && (
-                                                                                    <strong>
-                                                                                        {item.label
-                                                                                            ? `${item.label}:`
-                                                                                            : null}
-                                                                                    </strong>
-                                                                                )}
-                                                                                {item.type !==
+                                                                        ) => {
+                                                                            const liClass =
+                                                                                item.size ===
+                                                                                'full'
+                                                                                    ? item.type ===
+                                                                                      'ocrTemplate'
+                                                                                        ? styles[
+                                                                                              'fw-grid-item'
+                                                                                          ]
+                                                                                        : `${styles['fw-grid-item']} ${styles.notecolor}`
+                                                                                    : null;
+
+                                                                            // An embedded editor owns its whole
+                                                                            // cell — no stacked label, no
+                                                                            // placeholder.
+                                                                            if (
+                                                                                item.type ===
                                                                                 'ocrTemplate'
-                                                                                    ? ' '
-                                                                                    : ''}
-                                                                                {item
+                                                                            ) {
+                                                                                return (
+                                                                                    <li
+                                                                                        key={`li-${item.id}-${itemKey}`}
+                                                                                        className={
+                                                                                            liClass
+                                                                                        }
+                                                                                    >
+                                                                                        {renderValue(
+                                                                                            item,
+                                                                                            data
+                                                                                        )}
+                                                                                    </li>
+                                                                                );
+                                                                            }
+
+                                                                            const rendered =
+                                                                                renderValue(
+                                                                                    item,
+                                                                                    data
+                                                                                );
+
+                                                                            const hasHref =
+                                                                                item
                                                                                     .href
                                                                                     ?.url &&
                                                                                 item
                                                                                     .href
                                                                                     ?.key &&
-                                                                                item.type !== 'link' &&
-                                                                                item.type !== 'file' ? (
+                                                                                item.type !==
+                                                                                    'link' &&
+                                                                                item.type !==
+                                                                                    'file';
+
+                                                                            // A field with no value used to
+                                                                            // render as a label followed by
+                                                                            // nothing, which reads as a broken
+                                                                            // page rather than as "not set" —
+                                                                            // and an href wrapped that nothing
+                                                                            // in a link with no text to click.
+                                                                            const body =
+                                                                                isBlankValue(
+                                                                                    rendered
+                                                                                ) ? (
+                                                                                    <span
+                                                                                        className={
+                                                                                            styles.overviewEmpty
+                                                                                        }
+                                                                                    >
+                                                                                        —
+                                                                                    </span>
+                                                                                ) : hasHref ? (
                                                                                     <Link
                                                                                         to={`${
                                                                                             item
@@ -2839,21 +2933,44 @@ function GenericDetail({
                                                                                             ]
                                                                                         }`}
                                                                                     >
-                                                                                        {renderValue(
-                                                                                            item,
-                                                                                            data
-                                                                                        )}
+                                                                                        {
+                                                                                            rendered
+                                                                                        }
                                                                                     </Link>
                                                                                 ) : (
-                                                                                    <>
-                                                                                        {renderValue(
-                                                                                            item,
-                                                                                            data
-                                                                                        )}
-                                                                                    </>
-                                                                                )}
-                                                                            </li>
-                                                                        )
+                                                                                    rendered
+                                                                                );
+
+                                                                            return (
+                                                                                <li
+                                                                                    key={`li-${item.id}-${itemKey}`}
+                                                                                    className={
+                                                                                        liClass
+                                                                                    }
+                                                                                >
+                                                                                    {item.label && (
+                                                                                        <strong
+                                                                                            className={
+                                                                                                styles.overviewLabel
+                                                                                            }
+                                                                                        >
+                                                                                            {overviewFieldLabel(
+                                                                                                item.label
+                                                                                            )}
+                                                                                        </strong>
+                                                                                    )}
+                                                                                    <span
+                                                                                        className={
+                                                                                            styles.overviewValue
+                                                                                        }
+                                                                                    >
+                                                                                        {
+                                                                                            body
+                                                                                        }
+                                                                                    </span>
+                                                                                </li>
+                                                                            );
+                                                                        }
                                                                     )}
                                                                 </ul>
                                                             )}
@@ -2869,17 +2986,14 @@ function GenericDetail({
                                             {!inPlaceEditing ? (
                                                 <button
                                                     className={styles.btn}
-                                                    title="Edit"
-                                                    aria-label="Edit"
-                                                    style={{
-                                                        display: 'inline-flex',
-                                                        alignItems: 'center',
-                                                        justifyContent:
-                                                            'center',
-                                                        gap: '7px',
-                                                        minWidth: '92px',
-                                                        height: '42px',
-                                                    }}
+                                                    title={
+                                                        activeTabConfig.form
+                                                            .editLabel || 'Edit'
+                                                    }
+                                                    aria-label={
+                                                        activeTabConfig.form
+                                                            .editLabel || 'Edit'
+                                                    }
                                                     onClick={() => {
                                                         if (
                                                             activeTabConfig.form
@@ -2902,25 +3016,27 @@ function GenericDetail({
                                                         size={18}
                                                         strokeWidth={2.25}
                                                     />
-                                                    <span>Edit</span>
+                                                    <span>
+                                                        {activeTabConfig.form
+                                                            .editLabel ||
+                                                            'Edit'}
+                                                    </span>
                                                 </button>
                                             ) : (
                                                 editingTabId ===
                                                     activeTabConfig.id && (
                                                     <>
+                                                        {/* Cancel is the way back out of editing, not a
+                                                            destructive act — it was painted in error red,
+                                                            the loudest thing on the page, next to the
+                                                            Save it competes with. Ghost secondary. */}
                                                         <button
                                                             className={
-                                                                styles.btn
+                                                                styles.btnSecondary
                                                             }
                                                             onClick={
                                                                 cancelInPlaceEditing
                                                             }
-                                                            style={{
-                                                                backgroundColor:
-                                                                    '#fff0f0',
-                                                                color: '#d32f2f',
-                                                                border: '1px solid #ffcdd2',
-                                                            }}
                                                         >
                                                             Cancel
                                                         </button>
@@ -3010,14 +3126,6 @@ function GenericDetail({
                                             {activeTabConfig.export && (
                                                 <button
                                                     className={styles.btn}
-                                                    style={{
-                                                        display: 'inline-flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        gap: '7px',
-                                                        minWidth: '92px',
-                                                        height: '42px',
-                                                    }}
                                                     onClick={() =>
                                                         handleExport(
                                                             activeTabConfig.export
@@ -3032,14 +3140,6 @@ function GenericDetail({
                                             {activeTabConfig.customAction && (
                                                 <button
                                                     className={styles.btn}
-                                                    style={{
-                                                        display: 'inline-flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        gap: '7px',
-                                                        minWidth: '92px',
-                                                        height: '42px',
-                                                    }}
                                                     onClick={() =>
                                                         handleCustomAction(
                                                             activeTabConfig.customAction
@@ -3057,14 +3157,6 @@ function GenericDetail({
                                                 <button
                                                     key={index}
                                                     className={styles.btn}
-                                                    style={{
-                                                        display: 'inline-flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        gap: '7px',
-                                                        minWidth: '92px',
-                                                        height: '42px',
-                                                    }}
                                                     onClick={() =>
                                                         handleCustomAction(customAction)
                                                     }
@@ -3305,6 +3397,14 @@ function GenericDetail({
                                                 <Table
                                                     {...processedConfig}
                                                     ref={gridRef}
+                                                    /* Deliberately a
+                                                       fraction of the window,
+                                                       not the fill-the-window
+                                                       measurement: a detail
+                                                       page stacks several
+                                                       grids down one tab and
+                                                       they cannot all own the
+                                                       viewport. */
                                                     gridHeight={
                                                         windowHeight * 0.65
                                                     }
@@ -3854,6 +3954,17 @@ function GenericDetail({
         setEditingTabId(null);
     };
 
+    /**
+     * `page.tabLayout: "underline"` lays the tabs out as a horizontal strip
+     * above the content instead of a rail down its left edge.
+     *
+     * The rail costs a fifth of the page width, which is worth paying when
+     * there are seven tabs to keep in view and is not when there are two — a
+     * two-item rail beside a wide panel reads as an empty column. Opt-in, so
+     * every existing page keeps the rail it was designed against.
+     */
+    const tabsUnderlined = page?.tabLayout === 'underline';
+
     return (
         <>
             <div className={styles.grid}>
@@ -4046,9 +4157,23 @@ function GenericDetail({
             )}
 
             <div className={styles.grid}>
-                <div className={styles.grid__subrow}>
-                    <div className={styles.grid__subnav}>
-                        <TableFilter filters={subnav} setFilters={setSubnav} />
+                <div
+                    className={`${styles.grid__subrow} ${
+                        tabsUnderlined ? styles['grid__subrow--stacked'] : ''
+                    }`}
+                >
+                    <div
+                        className={`${styles.grid__subnav} ${
+                            tabsUnderlined
+                                ? styles['grid__subnav--underline']
+                                : ''
+                        }`}
+                    >
+                        <TableFilter
+                            filters={subnav}
+                            setFilters={setSubnav}
+                            variant={tabsUnderlined ? 'underline' : undefined}
+                        />
                     </div>
                     <div className={styles.grid__subcontent}>
                         {config ? renderContent() : null}

package/src/components/generic/GenericIndex.jsx

@@ -16,26 +16,10 @@ import TableFilter from '../TableFilter';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
 import StandardModal from './StandardModal';
-import { useDensity, useAvailableHeight } from '../utils/useDensity';
+import { useDensity } from '../utils/useDensity';
 
 import styles from '../styles/GenericIndex.module.scss';
 
-function useWindowDimensions() {
-    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setWindowHeight(window.innerHeight);
-            setWindowWidth(window.innerWidth);
-        };
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    return { windowHeight, windowWidth };
-}
-
 /**
  * Returns a copy of `filters` with the `show` flags adjusted so the subnav
  * item (or child) whose id matches `tabId` is active, enabling deep-links
@@ -301,24 +285,21 @@ function GenericIndex({
     const [customActionModalShow, setCustomActionModalShow] = useState(false);
     const [customActionFormData, setCustomActionFormData] = useState({});
     const [customActionConfig, setCustomActionConfig] = useState(null);
-    const { windowHeight, windowWidth } = useWindowDimensions();
-
-    // Grid height. The long-standing behaviour is a flat 80% of the viewport,
-    // which leaves a dead band below the table; at large density the screen is
-    // the point, so measure what is actually left below the grid instead.
-    // `useAvailableHeight` returns null until it can measure (and always when
-    // disabled), so the 80% rule stays the fallback and remains exactly what
-    // every non-density app gets.
+    // Grid height is NOT set here any more.
+    //
+    // This used to measure the wrapper below and hand the result to <Table> as
+    // `gridHeight`. The wrapper contains the whole Table — the search/create
+    // bar and the colour legend as well as the grid — but `gridHeight` is
+    // applied to the datagrid alone, so every index page asked for the room
+    // below the search bar *and* rendered the search bar on top of it. The
+    // grid overflowed the window by the height of its own toolbar, the page
+    // grew a scrollbar and the pager sat below the fold (reported on /clients).
+    //
+    // The datagrid measures itself from `.dataGridContainer`, which starts
+    // below that toolbar, so leaving `gridHeight` unset is both correct and one
+    // code path instead of two. Pages that genuinely want a fixed height (a
+    // grid inside a modal, a secondary grid on a detail page) still pass one.
     const { isLarge } = useDensity();
-    const gridWrapperRef = useRef(null);
-    const measuredGridHeight = useAvailableHeight(gridWrapperRef, {
-        enabled: isLarge,
-        recomputeKey: windowHeight,
-    });
-    const gridHeight =
-        isLarge && measuredGridHeight != null
-            ? measuredGridHeight
-            : windowHeight * 0.8;
 
     // Toggle a body-level "tablet-mode" class when this view opts in via
     // setting.tabletMode. Lets consumer projects style the whole UI
@@ -686,7 +667,6 @@ function GenericIndex({
                     {...configWithStyle}
                     ref={gridRef}
                     hoverColor={configWithStyle.style?.hoverColor}
-                    gridHeight={gridHeight}
                     setConfig={setConfig}
                     setTableData={setTableData}
                     setTotal={setTotal}
@@ -696,17 +676,11 @@ function GenericIndex({
                 />
             );
 
-            // The measuring wrapper only exists in large density — every other
-            // app renders the exact tree it always has.
-            return isLarge ? (
-                <div
-                    ref={gridWrapperRef}
-                    style={{ flex: '1 1 auto', minHeight: 0 }}
-                >
-                    {table}
-                </div>
-            ) : (
-                table
+            // A plain flex cell. It no longer measures anything — the grid
+            // measures itself — but it still has to be allowed to shrink, or
+            // the flex parent floors it at its content height.
+            return (
+                <div style={{ flex: '1 1 auto', minHeight: 0 }}>{table}</div>
             );
         };
 
@@ -724,7 +698,6 @@ function GenericIndex({
     }, [
         config,
         subnav,
-        gridHeight,
         isLarge,
         userProfile,
         setConfig,

package/src/components/generic/GenericMain.jsx

@@ -35,6 +35,9 @@ const GenericMain = ({
     // attribute that actually drives the CSS is written by GenericAuth, and
     // nothing in here reads the value yet.
     density = 'default',
+    // Passed straight to Navigation: per-id renderers for account actions.
+    // See the `renderers` note in Navigation.jsx.
+    navRenderers = {},
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -147,6 +150,7 @@ const GenericMain = ({
                     setSystemAuth={setSystemAuth}
                     themeType={themeType}
                     userProfile={userProfile}
+                    renderers={navRenderers}
                 />
             </header>
             {navigation.hasOwnProperty('quickActions') && (
@@ -177,6 +181,7 @@ const GenericMain = ({
             setSystemAuth={setSystemAuth}
             themeType={themeType}
             userProfile={userProfile}
+            renderers={navRenderers}
         >
             <div className={styles['content-main']} id="app">
                 <div className={styles.paddingSimple}>

package/src/components/generic/GroupedReportRenderer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import SectionGroupedReport from './SectionGroupedReport';
 import './groupedReport.css';
 
-const GroupedReportRenderer = ({ data, config, columns, onExport }) => {
+const GroupedReportRenderer = ({ data, config, columns, onExport = null }) => {
     const renderByType = () => {
         switch (config?.type) {
             case 'sections':
@@ -81,8 +81,4 @@ GroupedReportRenderer.propTypes = {
     onExport: PropTypes.func
 };
 
-GroupedReportRenderer.defaultProps = {
-    onExport: null
-};
-
 export default GroupedReportRenderer;

package/src/components/generic/StandardModal.jsx

@@ -138,10 +138,19 @@ const StandardModal = ({
             borderRadius: '8px',
             boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3)',
             maxHeight: isMobile || isTablet ? '85vh' : '90vh',
-            overflowY: 'auto',
-            ...customStyles.modal
+            overflowY: 'auto'
         };
 
+        /*
+         * customStyles.modal is spread LAST, after the size preset, because a
+         * caller that bothers to pass one is overriding the default rather
+         * than asking to be overridden by it. Spread before the preset (as it
+         * once was) the width/minWidth/maxWidth a size sets could never be
+         * touched - which is what the SMS compose modal needs: a form-shaped
+         * width, and a visible overflow so its templates menu can open past
+         * the modal's own edge.
+         */
+
         // Apply size-based styles with device considerations
         switch (size) {
             case 'small':
@@ -149,14 +158,16 @@ const StandardModal = ({
                     ...baseStyle,
                     width: isMobile ? '95vw' : '400px',
                     minWidth: isMobile ? '300px' : '400px',
-                    maxWidth: isMobile ? '95vw' : '600px'
+                    maxWidth: isMobile ? '95vw' : '600px',
+                    ...customStyles.modal
                 };
             case 'large':
                 return {
                     ...baseStyle,
                     width: '95vw',
                     minWidth: isMobile ? '300px' : '800px',
-                    maxWidth: isMobile ? '95vw' : '1600px'
+                    maxWidth: isMobile ? '95vw' : '1600px',
+                    ...customStyles.modal
                 };
             case 'medium':
             default:
@@ -164,7 +175,8 @@ const StandardModal = ({
                     ...baseStyle,
                     width: isMobile ? '95vw' : '80vw',
                     minWidth: isMobile ? '300px' : '600px',
-                    maxWidth: isMobile ? '95vw' : '1200px'
+                    maxWidth: isMobile ? '95vw' : '1200px',
+                    ...customStyles.modal
                 };
         }
     };

package/src/components/generic/reportSemanticSteps/SemanticEntityStep.jsx

@@ -10,7 +10,7 @@ import styles from '../../styles/ReportSemantic.module.scss';
  * Only business labels and descriptions are shown — the entity id is never
  * rendered, because it is an opaque server handle.
  */
-const SemanticEntityStep = ({ model, selectedEntity, onSelect }) => {
+const SemanticEntityStep = ({ model = null, selectedEntity = '', onSelect }) => {
     const entities = listEntities(model);
 
     if (entities.length === 0) {
@@ -73,9 +73,4 @@ SemanticEntityStep.propTypes = {
     onSelect: PropTypes.func.isRequired,
 };
 
-SemanticEntityStep.defaultProps = {
-    model: null,
-    selectedEntity: '',
-};
-
 export default SemanticEntityStep;