@visns-studio/visns-components 6.0.4 → 6.1.0

package/package.json

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

package/src/components/DataGrid.jsx

@@ -236,6 +236,34 @@ const loadData = async (
     }
 };
 
+/**
+ * How tall the grid should be.
+ *
+ * It used to claim 70% of the viewport (or 550px) for any result set larger
+ * than eight rows, whatever the actual row count — so 18 rows on a tall
+ * monitor left several hundred pixels of empty white below the last one.
+ *
+ * Height now follows the content and only falls back to a viewport share when
+ * the rows genuinely overflow, which is the point at which a tall scroller is
+ * useful rather than just empty.
+ */
+const ROW_HEIGHT = 34;
+const GRID_CHROME = ROW_HEIGHT * 2 + 60; // header + filter row + footer
+
+function fitToRows(dataCount, windowHeight) {
+    const roomy = Math.max(windowHeight * 0.7, 550);
+
+    if (!dataCount || dataCount <= 0) {
+        // Nothing to show: enough for the empty state, not a blank screen.
+        return 300;
+    }
+
+    const needed = dataCount * ROW_HEIGHT + GRID_CHROME;
+
+    // Never taller than the rows require, never so short it feels cramped.
+    return Math.min(roomy, Math.max(needed, 260));
+}
+
 const DataGrid = forwardRef(
     (
         {
@@ -1277,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':
@@ -3203,6 +3236,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(RefreshCw);
                     case 'cloudUpload':
                         return getIconComponent(Upload);
+                    case 'cloudDownload':
+                        return getIconComponent(DownloadIcon);
                     case 'oauth2':
                         return getIconComponent(Lock);
                     case 'clone':
@@ -4380,13 +4415,7 @@ const DataGrid = forwardRef(
             minHeight:
                 gridHeight && gridHeight > 0
                     ? gridHeight
-                    : dataCount > 5
-                    ? dataCount > 8
-                        ? windowHeight * 0.7 > 550
-                            ? windowHeight * 0.7
-                            : 550
-                        : 450
-                    : 400,
+                    : fitToRows(dataCount, windowHeight),
             boxShadow: 'none',
             ...(hoverColor ? { '--hover-color': hoverColor } : {}),
         });
@@ -4397,11 +4426,7 @@ const DataGrid = forwardRef(
         useEffect(() => {
             const getMinimumHeight = () => {
                 if (gridHeight > 0) return gridHeight;
-                if (dataCount > 0) {
-                    if (dataCount <= 5) return 400;
-                    if (dataCount <= 8) return 450;
-                }
-                return Math.max(window.innerHeight * 0.7, 550);
+                return fitToRows(dataCount, window.innerHeight);
             };
 
             const minHeight = getMinimumHeight();

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

@@ -1,19 +1,41 @@
 import '../styles/global.css';
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import Reveal from '../utils/Reveal';
 import { toast } from 'react-toastify';
-import { User, Lock } from 'lucide-react';
+import { Eye, EyeOff } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
 import styles from '../styles/Login.module.scss';
 
-const Login = ({ logo, providers, setSystemAuth, setUserProfile, config = {} }) => {
+const Login = ({
+    logo,
+    loginBg,
+    providers,
+    setSystemAuth,
+    setUserProfile,
+    config = {},
+}) => {
     const location = useLocation();
     const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    // Collapsed behind a button, since Microsoft is how nearly everyone signs
+    // in. Open from the start when there is no SSO provider configured —
+    // otherwise the only way in would be hidden behind a disclosure.
+    const ssoAvailable = Array.isArray(providers) && providers.length > 0;
+    const [showEmail, setShowEmail] = useState(!ssoAvailable);
+    const emailRef = useRef(null);
+
+    // Opening the form should put the cursor where typing starts, rather than
+    // leaving it on the button that opened it.
+    useEffect(() => {
+        if (showEmail && ssoAvailable) {
+            emailRef.current?.focus();
+        }
+    }, [showEmail, ssoAvailable]);
 
     const [auth, setAuth] = useState({
         email: '',
@@ -32,43 +54,37 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile, config = {} })
             return null;
         }
 
-        let content = <div className={styles.divider}>OR</div>;
-
-        if (providers) {
-            providers.forEach((provider) => {
-                switch (provider) {
-                    case 'azure':
-                        content = (
-                            <>
-                                {content}
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                >
-                                    <button
-                                        className={styles.ssoButton}
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            window.location.href =
-                                                '/auth/azure';
-                                        }}
-                                    >
-                                        <img
-                                            src={
-                                                'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
-                                            }
-                                            width="18px"
-                                            height="18px"
-                                            alt="Microsoft logo"
-                                        />
-                                        Sign in with Microsoft
-                                    </button>
-                                </div>
-                            </>
-                        );
-                        break;
-                }
-            });
-        }
+        let content = null;
+
+        providers.forEach((provider) => {
+            switch (provider) {
+                case 'azure':
+                    content = (
+                        <button
+                            type="button"
+                            className={styles.sso}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                window.location.href = '/auth/azure';
+                            }}
+                        >
+                            {/* The Microsoft mark keeps its own light tile.
+                                Its four squares are drawn for a white ground
+                                and sit awkwardly straight on navy. */}
+                            <span className={styles.ssoMark}>
+                                <img
+                                    src="https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png"
+                                    width="18"
+                                    height="18"
+                                    alt=""
+                                />
+                            </span>
+                            Sign in with Microsoft
+                        </button>
+                    );
+                    break;
+            }
+        });
 
         return content;
     };
@@ -162,141 +178,153 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile, config = {} })
     };
 
     return (
-        <div className={styles.lcontainer}>
-            <div className={styles.lwrap}>
-                <div className={styles.logincontainer}>
-                    <form onSubmit={handleSubmit}>
-                        <Reveal effect="fadeInUp">
-                            <div className={styles.login}>
-                                <img
-                                    src={logo}
-                                    alt="CRM"
-                                    className={styles.loginlogo}
-                                />
-                                <h2
-                                    style={{
-                                        textAlign: 'center',
-                                        marginBottom: '1.5rem',
-                                        color: '#111827',
-                                        fontWeight: '600',
-                                        fontSize: '1.5rem',
-                                    }}
-                                >
-                                    Sign in to your account
-                                </h2>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="text"
-                                            name="email"
-                                            value={auth.email}
-                                            onChange={handleChange}
-                                            tabIndex="1"
-                                            className={authClass.username}
-                                            placeholder=" "
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Email
-                                        </span>
-                                        <small>
-                                            <User strokeWidth={2} size={18} />
-                                        </small>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <label className={styles.fi__label}>
-                                        <input
-                                            type="password"
-                                            name="password"
-                                            value={auth.password}
-                                            onChange={handleChange}
-                                            tabIndex="2"
-                                            className={authClass.password}
-                                            placeholder=" "
-                                        />
-                                        <span className={styles.fi__span}>
-                                            Password
-                                        </span>
-                                        <small>
-                                            <Lock
-                                                strokeWidth={2}
-                                                size={18}
-                                            />
-                                        </small>
-                                    </label>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
-                                >
-                                    <div className={styles.rememberMeContainer}>
-                                        <div
-                                            style={{
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                            }}
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                id="rememberMe"
-                                                name="remember"
-                                                checked={auth.remember}
-                                                onChange={handleChange}
-                                                className={
-                                                    styles.rememberMeCheckbox
-                                                }
-                                            />
-                                            <label
-                                                htmlFor="rememberMe"
-                                                className={
-                                                    styles.rememberMeLabel
-                                                }
-                                            >
-                                                Remember me
-                                            </label>
-                                        </div>
-                                        {config.passwordReset !== false && (
-                                            <div>
-                                                <Link
-                                                    to="/reset"
-                                                    style={{
-                                                        color: 'var(--primary-color, #4f46e5)',
-                                                        textDecoration: 'none',
-                                                        fontWeight: '500',
-                                                        fontSize: '0.875rem',
-                                                    }}
-                                                    className={
-                                                        styles.forgotPasswordLink
-                                                    }
-                                                >
-                                                    Forgot password?
-                                                </Link>
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                >
-                                    <button
-                                        className={styles.btn}
-                                        type="submit"
-                                        disabled={isLoading}
-                                    >
-                                        {isLoading
-                                            ? 'Signing in...'
-                                            : 'Sign in'}
-                                    </button>
-                                </div>
-                                {renderSsoButton()}
-                            </div>
-                        </Reveal>
-                    </form>
+        <div className={styles.auth}>
+            {/* The company's own work, not decoration. It is the reason the
+                rest of this system exists, so it carries the brand side and
+                the form is left to be a form. */}
+            <aside
+                className={styles.brand}
+                style={
+                    loginBg ? { backgroundImage: `url(${loginBg})` } : undefined
+                }
+                aria-hidden="true"
+            >
+                <div className={styles.brandInk}>
+                    <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.
+                    </p>
+                </div>
+            </aside>
+
+            <main className={styles.panel}>
+                <div className={styles.panelInner}>
+                    <img src={logo} alt="Prime Builders" className={styles.logo} />
+
+                    <h1 className={styles.title}>Sign in</h1>
+                    <p className={styles.subtitle}>
+                        Use your Prime Microsoft account to continue.
+                    </p>
+
+                    {/* Primary: this is how Prime staff actually sign in. The
+                        email form stays available underneath for accounts
+                        without a Microsoft sign-in. */}
+                    {renderSsoButton()}
+
+                    {ssoAvailable && !showEmail && (
+                        <button
+                            type="button"
+                            className={styles.altToggle}
+                            onClick={() => setShowEmail(true)}
+                            aria-expanded="false"
+                            aria-controls="email-signin"
+                        >
+                            Sign in with email instead
+                        </button>
+                    )}
+
+                    {showEmail && ssoAvailable && (
+                        <div className={styles.divider}>
+                            <span>or sign in with email</span>
+                        </div>
+                    )}
+
+                    {/* A grid row animating 0fr -> 1fr, so it opens to whatever
+                        height the form needs without hardcoding one. */}
+                    <div
+                        id="email-signin"
+                        className={`${styles.collapse} ${
+                            showEmail ? styles.collapseOpen : ''
+                        }`}
+                    >
+                      <div className={styles.collapseInner}>
+                        <form onSubmit={handleSubmit} className={styles.form}>
+                          <div className={styles.field}>
+                              <input
+                                  id="login-email"
+                                  ref={emailRef}
+                                  type="text"
+                                  name="email"
+                                  value={auth.email}
+                                  onChange={handleChange}
+                                  tabIndex="1"
+                                  className={authClass.username}
+                                  autoComplete="username"
+                                  placeholder=" "
+                              />
+                              <label htmlFor="login-email">Email</label>
+                          </div>
+
+                          <div className={styles.field}>
+                              <input
+                                  id="login-password"
+                                  type={showPassword ? 'text' : 'password'}
+                                  name="password"
+                                  value={auth.password}
+                                  onChange={handleChange}
+                                  tabIndex="2"
+                                  className={authClass.password}
+                                  autoComplete="current-password"
+                                  placeholder=" "
+                              />
+                              <label htmlFor="login-password">Password</label>
+                              {/* Typing a password blind on a phone in the sun is
+                                  where most failed sign-ins come from. */}
+                              <button
+                                  type="button"
+                                  className={styles.reveal}
+                                  onClick={() => setShowPassword((on) => !on)}
+                                  aria-label={
+                                      showPassword
+                                          ? 'Hide password'
+                                          : 'Show password'
+                                  }
+                                  tabIndex="-1"
+                              >
+                                  {showPassword ? (
+                                      <EyeOff size={18} strokeWidth={1.9} />
+                                  ) : (
+                                      <Eye size={18} strokeWidth={1.9} />
+                                  )}
+                              </button>
+                          </div>
+
+                          <div className={styles.row}>
+                              <label className={styles.remember}>
+                                  <input
+                                      type="checkbox"
+                                      name="remember"
+                                      checked={auth.remember}
+                                      onChange={handleChange}
+                                  />
+                                  Remember me
+                              </label>
+
+                              {config.passwordReset !== false && (
+                                  <Link to="/reset" className={styles.link}>
+                                      Forgot password?
+                                  </Link>
+                              )}
+                          </div>
+
+                          <button
+                              className={styles.submit}
+                              type="submit"
+                              disabled={isLoading}
+                          >
+                              {isLoading ? 'Signing in…' : 'Sign in with email'}
+                          </button>
+                      </form>
+                      </div>
+                    </div>
+
+                    <p className={styles.foot}>
+                        Prime Builders · Perth, Western Australia
+                    </p>
                 </div>
-            </div>
+            </main>
         </div>
     );
 };