@visns-studio/visns-components 6.0.3 → 6.0.5

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.0.3",
+    "version": "6.0.5",
     "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(
     (
         {
@@ -4380,13 +4408,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 +4419,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/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}>Prime Builders</p>
+                    <p className={styles.brandLine}>Prime Projects</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>
     );
 };

package/src/components/columns/ColumnRenderers.jsx

@@ -152,6 +152,40 @@ export const renderBooleanColumn = ({
         render: ({ data }) => {
             const rawValue = data[column.id];
             const formattedValue = formatCellContent(rawValue, { ...column, type: 'boolean' });
+
+            // Coloured pill variant — opt in via column.badge, matching the
+            // option renderer. A yes/no column rendered as plain text reads
+            // the same as every other cell, so the state has to be read
+            // rather than scanned. Without column.badge nothing changes.
+            if (column.badge) {
+                const on = Boolean(rawValue) && rawValue !== '0';
+                const palette = on
+                    ? (column.badgeOn || { bg: '#eaf6ef', fg: '#1f6b41' })
+                    : (column.badgeOff || { bg: '#f1f1ee', fg: '#6b7688' });
+
+                return (
+                    <CellWithTooltip value={rawValue} columnType="boolean">
+                        <span
+                            style={{
+                                display: 'inline-block',
+                                padding: '2px 10px',
+                                borderRadius: '999px',
+                                fontSize: '11px',
+                                fontWeight: 600,
+                                lineHeight: 1.6,
+                                letterSpacing: '0.02em',
+                                textTransform: 'uppercase',
+                                whiteSpace: 'nowrap',
+                                backgroundColor: palette.bg,
+                                color: palette.fg,
+                            }}
+                        >
+                            {formattedValue}
+                        </span>
+                    </CellWithTooltip>
+                );
+            }
+
             return (
                 <CellWithTooltip value={rawValue} columnType="boolean">
                     <span>{formattedValue}</span>