@visns-studio/visns-components 6.0.5 → 6.1.1

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.0.5",
+    "version": "6.1.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -1305,6 +1305,11 @@ const DataGrid = forwardRef(
 
         const handleSettingClick = (s, d) => {
             switch (s.id) {
+                case 'cloudDownload':
+                    // File download: open the URL directly and let the
+                    // browser handle the response's content disposition.
+                    window.open(`${s.url}/${d[s.key]}`, '_blank');
+                    break;
                 case 'activate':
                 case 'arrowCycle':
                 case 'cloudUpload':
@@ -1818,6 +1823,23 @@ const DataGrid = forwardRef(
                 )
             );
 
+        /**
+         * A settings entry reserved for the platform owner.
+         *
+         * `roles` cannot express this: it matches Spatie role *names*, and
+         * super admin is deliberately not a role — roles are handed out from
+         * the console by the very administrators this privilege sits above.
+         * Navigation.jsx already reads `superAdminOnly` on menu entries the
+         * same way; this is the row-action twin of it.
+         *
+         * Presentation only, like every check in this file: it takes the icon
+         * away, it does not protect the endpoint behind it. A setting without
+         * the flag is unaffected, so this is dormant for every config that
+         * does not opt in.
+         */
+        const settingAllowedBySuperAdmin = (s) =>
+            s?.superAdminOnly !== true || Boolean(userProfile?.is_super_admin);
+
         const shouldShowGroupAction = (iconConfig, groupValue) => {
             // `showAll` is the every-row form of `show`: the icon appears only
             // when the condition holds for the whole group (e.g. close a tag
@@ -2929,6 +2951,12 @@ const DataGrid = forwardRef(
                 }
             }
 
+            // Owner-only actions (import a form template, etc.) — see
+            // settingAllowedBySuperAdmin
+            if (!settingAllowedBySuperAdmin(s)) {
+                allow = false;
+            }
+
             if (s.active) {
                 // Helper function to get nested values for main active condition (searches for target value)
                 const getNestedValueForMain = (data, path, targetValue) => {
@@ -3231,6 +3259,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(RefreshCw);
                     case 'cloudUpload':
                         return getIconComponent(Upload);
+                    case 'cloudDownload':
+                        return getIconComponent(DownloadIcon);
                     case 'oauth2':
                         return getIconComponent(Lock);
                     case 'clone':
@@ -4179,6 +4209,16 @@ const DataGrid = forwardRef(
                             if (actionColumnSettingIds.has(setting.id)) {
                                 return false;
                             }
+                            // Owner-only actions never render for anyone else,
+                            // so they must not reserve width either — a grid
+                            // whose only actions are super-admin ones gets no
+                            // Action column at all.
+                            if (
+                                setting.superAdminOnly === true &&
+                                !userProfile?.is_super_admin
+                            ) {
+                                return false;
+                            }
                             if (
                                 setting.roles &&
                                 Array.isArray(setting.roles) &&

package/src/components/Navigation.jsx

@@ -361,6 +361,7 @@ function Navigation({
                     <ul className={styles.navDropdown}>
                         {n.children.map(
                             (child, childKey) =>
+                                child.hidden !== true &&
                                 child.permission === true && (
                                     <li key={`nav-child-${childKey}`}>
                                         <Link
@@ -422,11 +423,57 @@ function Navigation({
         return [];
     };
 
+    /**
+     * Feature switches, if the consuming app publishes any.
+     *
+     * A platform owner can retire a half-finished feature from the menu
+     * without a deploy, so the profile response may carry a map of feature
+     * ids that are switched off. Apps that publish nothing get `null` and
+     * behave exactly as before — this filter is additive, and every unknown
+     * id stays visible, so a stale or missing map can never empty a menu.
+     */
+    const getFeatureFlags = () => {
+        const flags = userProfile?.feature_visibility;
+
+        if (!flags || typeof flags !== 'object') {
+            return null;
+        }
+
+        // The map is keyed by app; this component only ever draws the console.
+        const appFlags = flags.backend;
+
+        return appFlags && typeof appFlags === 'object' ? appFlags : null;
+    };
+
     useEffect(() => {
         const permissions = getUserPermissions();
+        const featureFlags = getFeatureFlags();
+
+        // Carried as its own flag rather than folded into `permission`: an
+        // item with an empty permissionKey renders whatever its permission
+        // says, and this state has to be reversible — switching a feature
+        // back on must restore the menu item without a page reload, which
+        // dropping it from the list would not.
+        const isSwitchedOff = (nav) =>
+            featureFlags !== null &&
+            Boolean(nav.id) &&
+            featureFlags[nav.id] === false;
 
         setNavData((prevNavData) => {
             const updatePermissions = (nav) => {
+                const hidden = isSwitchedOff(nav);
+
+                // Reserved for the platform owner — a privilege that sits
+                // above the roles an administrator can hand out, so it is
+                // never expressed as a permission key.
+                if (nav.superAdminOnly === true) {
+                    return {
+                        ...nav,
+                        hidden,
+                        permission: Boolean(userProfile?.is_super_admin),
+                    };
+                }
+
                 if (nav.children && nav.children.length > 0) {
                     const updatedChildren = nav.children
                         .map(updatePermissions)
@@ -439,12 +486,14 @@ function Navigation({
                         );
                         return {
                             ...nav,
+                            hidden,
                             permission: matchingPermission,
                             children: updatedChildren,
                         };
                     } else {
                         return {
                             ...nav,
+                            hidden,
                             permission: childPermission,
                             children: updatedChildren,
                         };
@@ -457,12 +506,14 @@ function Navigation({
                     );
                     return {
                         ...nav,
+                        hidden,
                         permission: matchingPermission,
                     };
                 }
 
                 return {
                     ...nav,
+                    hidden,
                     permission: true,
                 };
             };
@@ -620,8 +671,9 @@ function Navigation({
                     <nav className={styles.navwrap} ref={navWrapRef}>
                         <ul className={appNavClasses}>
                             {navData.navigations.map((nav, navKey) =>
-                                nav.permission === true ||
-                                nav.permissionKey === '' ? (
+                                nav.hidden !== true &&
+                                (nav.permission === true ||
+                                    nav.permissionKey === '') ? (
                                     <React.Fragment key={`nav-item-${navKey}`}>
                                         {renderNav(nav)}
                                     </React.Fragment>
@@ -671,6 +723,7 @@ function Navigation({
                     >
                         <ul>
                             {navData.settings.map((setting, settingKey) =>
+                                setting.hidden !== true &&
                                 setting.permission === true ? (
                                     <React.Fragment
                                         key={`setting-${settingKey}`}
@@ -711,7 +764,9 @@ function Navigation({
             <div className={styles.navwrap} ref={navWrapRef}>
                 <ul className={appNavClasses}>
                     {navData.navigations.map((nav, navKey) =>
-                        nav.permission === true || nav.permissionKey === '' ? (
+                        nav.hidden !== true &&
+                        (nav.permission === true ||
+                            nav.permissionKey === '') ? (
                             <React.Fragment key={`nav-item-${navKey}`}>
                                 {renderNav(nav)}
                             </React.Fragment>
@@ -729,6 +784,7 @@ function Navigation({
             >
                 <ul>
                     {navData.settings.map((setting, settingKey) =>
+                        setting.hidden !== true &&
                         setting.permission === true ? (
                             <React.Fragment key={`setting-${settingKey}`}>
                                 {renderSetting(setting)}

package/src/components/auth/Login.jsx

@@ -190,8 +190,8 @@ const Login = ({
                 aria-hidden="true"
             >
                 <div className={styles.brandInk}>
-                    <p className={styles.eyebrow}>Prime Builders</p>
-                    <p className={styles.brandLine}>Prime Projects</p>
+                    <p className={styles.eyebrow}>Construction Management</p>
+                    <p className={styles.brandLine}>Prime Builders</p>
                     <p className={styles.brandSub}>
                         Job tracking, inspections, site forms and labour
                         scheduling — in one place.

package/src/components/generic/GenericDashboard.jsx

@@ -575,6 +575,9 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         )
     );
     const [data, setData] = useState({});
+    // Per-widget load state ('loading' | 'ready' | 'failed') keyed by widget.id.
+    // Tracked per widget so one slow/failed request only affects its own tile.
+    const [widgetStatus, setWidgetStatus] = useState({});
     const [dropdowns, setDropdowns] = useState({});
     const [filters, setFilters] = useState({});
     const [editMode, setEditMode] = useState(false);
@@ -631,8 +634,23 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         updateDashboardSetting(dashboardSetting);
     }, [dashboardSetting]);
 
+    // A widget only fetches when it has both a url and a method — anything else
+    // never loads, so it must never be marked 'loading'.
+    const widgetFetches = (widget) => Boolean(widget.api?.url && widget.api?.method);
+
     const fetchData = async (appliedFilters = {}) => {
         try {
+            const loadingStatus = dashboardSetting.widgets.reduce(
+                (acc, widget) => {
+                    acc[widget.id] = widgetFetches(widget)
+                        ? 'loading'
+                        : 'ready';
+                    return acc;
+                },
+                {}
+            );
+            setWidgetStatus((prev) => ({ ...prev, ...loadingStatus }));
+
             const promises = dashboardSetting.widgets.map(async (widget) => {
                 const widgetFilters = appliedFilters[widget.id] || {};
 
@@ -714,9 +732,40 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 },
                 {}
             );
+            // Resolve each widget's status from the same settled results: a
+            // rejected promise or an API-error payload is a failure, anything
+            // else has finished loading.
+            const nextStatus = dashboardSetting.widgets.reduce(
+                (acc, widget, index) => {
+                    if (!widgetFetches(widget)) {
+                        acc[widget.id] = 'ready';
+                        return acc;
+                    }
+
+                    const result = results[index];
+                    acc[widget.id] =
+                        result?.status === 'rejected' ||
+                        result?.value?.data?.value
+                            ? 'failed'
+                            : 'ready';
+                    return acc;
+                },
+                {}
+            );
+
             setData(fetchedData);
+            setWidgetStatus((prev) => ({ ...prev, ...nextStatus }));
         } catch (error) {
             console.error('Error fetching dashboard data:', error);
+            // Never leave a widget stuck on a skeleton — a hard failure of the
+            // whole fetch marks everything still in flight as failed.
+            setWidgetStatus((prev) =>
+                Object.keys(prev).reduce((acc, widgetId) => {
+                    acc[widgetId] =
+                        prev[widgetId] === 'loading' ? 'failed' : prev[widgetId];
+                    return acc;
+                }, {})
+            );
         }
     };
 
@@ -1085,6 +1134,137 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         );
     };
 
+    // Placeholder shaped like the widget's real content. Every block reserves
+    // the dimensions the loaded content occupies so nothing shifts on arrival.
+    const renderWidgetSkeleton = (widget) => {
+        const chartHeight = widget.height || '600px';
+        const block = (extraClass, style, key) => (
+            <div
+                key={key}
+                className={`${styles.skeletonBlock} ${extraClass}`}
+                style={style}
+            />
+        );
+
+        const renderBody = () => {
+            switch (widget.type) {
+                case 'counter':
+                    return (
+                        <>
+                            <div className={styles.skeletonCounter}>
+                                {block(styles.skeletonCounterValue)}
+                            </div>
+                            {widget.button && (
+                                <div className={styles.skeletonButtonRow}>
+                                    {block(styles.skeletonButton)}
+                                </div>
+                            )}
+                        </>
+                    );
+                case 'pie':
+                    return (
+                        <div
+                            className={styles.skeletonChart}
+                            style={{ height: chartHeight }}
+                        >
+                            {block(styles.skeletonCircle)}
+                        </div>
+                    );
+                case 'bar':
+                case 'line':
+                    return (
+                        <div
+                            className={`${styles.skeletonChart} ${styles.skeletonChartStrips}`}
+                            style={{ height: chartHeight }}
+                        >
+                            {[70, 45, 88, 58, 34].map((width, index) =>
+                                block(
+                                    styles.skeletonStrip,
+                                    { width: `${width}%` },
+                                    `${widget.id}-skeleton-strip-${index}`
+                                )
+                            )}
+                        </div>
+                    );
+                case 'table':
+                    return (
+                        <div
+                            className={styles.skeletonTable}
+                            style={
+                                widget.height
+                                    ? {
+                                          maxHeight: widget.height,
+                                          overflow: 'hidden',
+                                      }
+                                    : undefined
+                            }
+                        >
+                            {block(styles.skeletonTableHeader)}
+                            {[0, 1, 2, 3, 4].map((index) =>
+                                block(
+                                    styles.skeletonTableRow,
+                                    undefined,
+                                    `${widget.id}-skeleton-row-${index}`
+                                )
+                            )}
+                        </div>
+                    );
+                case 'list':
+                    return (
+                        <div className={styles.skeletonList}>
+                            {[0, 1, 2, 3].map((index) =>
+                                block(
+                                    styles.skeletonListRow,
+                                    undefined,
+                                    `${widget.id}-skeleton-list-${index}`
+                                )
+                            )}
+                        </div>
+                    );
+                case 'timeline':
+                    return block(styles.skeletonTimeline, {
+                        height: widget.height || '500px',
+                    });
+                default:
+                    return block(styles.skeletonGeneric);
+            }
+        };
+
+        return (
+            <div
+                className={styles.skeleton}
+                role="status"
+                aria-busy="true"
+                aria-label={`Loading ${widget.title || 'widget'}`}
+            >
+                {renderBody()}
+            </div>
+        );
+    };
+
+    // Skeletons show only until a widget has data for the first time: a
+    // background auto-refresh must never blank a value someone is reading.
+    const renderWidgetBody = (widget) => {
+        const status = widgetStatus[widget.id];
+        const hasLoadedOnce = data[widget.id] !== undefined;
+
+        if (!hasLoadedOnce) {
+            if (status === 'loading') {
+                return renderWidgetSkeleton(widget);
+            }
+
+            if (status === 'failed') {
+                return (
+                    <div className={styles.noData}>
+                        Couldn&apos;t load this widget.
+                    </div>
+                );
+            }
+        }
+
+        return renderWidget(widget);
+    };
+
     const renderWidget = (widget) => {
         const widgetData = data[widget.id] || [];
 
@@ -1914,7 +2094,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         )}
                     </div>
                     {renderFilters(widget)}
-                    <div>{renderWidget(widget)}</div>
+                    <div>{renderWidgetBody(widget)}</div>
                     {editMode && (
                         <div className={styles.widgetTools}>
                             <div className={styles.resizeTools}>