@visns-studio/visns-components 6.3.18 → 6.4.1

package/package.json

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

package/src/components/Navigation.jsx

@@ -1,10 +1,16 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
+    BarChart3,
+    Briefcase,
     Bug,
+    Building2,
     Calendar,
     CreditCard,
     FileText,
+    Home,
+    LayoutDashboard,
+    MapPin,
     Users,
     User,
     Search,
@@ -22,6 +28,28 @@ import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
 import styles from './styles/Navigation.module.scss';
 
+// Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
+// via its `icon` key, falling back to its `id`. Unknown names render
+// nothing, and the header layout never renders these, so existing nav
+// configs are unaffected.
+const NAV_ICONS = {
+    billing: CreditCard,
+    calendar: Calendar,
+    clients: Building2,
+    contacts: Users,
+    customers: Building2,
+    dashboard: LayoutDashboard,
+    files: FileText,
+    home: Home,
+    jobs: Briefcase,
+    phone: Phone,
+    reports: BarChart3,
+    safety: Shield,
+    settings: Settings,
+    sites: MapPin,
+    users: Users,
+};
+
 const SearchComponent = ({
     navigate,
     search,
@@ -199,6 +227,19 @@ function Navigation({
     const navigate = useNavigate();
     const currentPage = location.pathname.substr(1) || 'dashboard';
     const [isOpen, setOpen] = useState(false);
+
+    // The mobile drawer is a full-viewport fixed overlay; without a scroll
+    // lock the page behind it keeps scrolling under the user's thumb.
+    useEffect(() => {
+        if (isOpen) {
+            const previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = previousOverflow;
+            };
+        }
+        return undefined;
+    }, [isOpen]);
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
     const [showBusinessCardOcr, setShowBusinessCardOcr] = useState(false);
@@ -320,6 +361,10 @@ function Navigation({
 
     const renderNav = (n) => {
         let navItemClasses;
+        const NavItemIcon =
+            layout === 'simple' || layout === 'cms'
+                ? NAV_ICONS[n.icon || n.id]
+                : undefined;
 
         if (n.class.includes('active')) {
             navItemClasses =
@@ -372,6 +417,7 @@ function Navigation({
                                                     ? styles.active
                                                     : ''
                                             }
+                                            onClick={() => setOpen(false)}
                                         >
                                             {child.label}
                                         </Link>
@@ -391,7 +437,12 @@ function Navigation({
                 onMouseLeave={handleMouseLeave}
             >
                 {n.url ? (
-                    <Link to={n.url}>{n.label}</Link>
+                    // Close the mobile drawer when navigating; no-op for the
+                    // header layout where the drawer state is never opened.
+                    <Link to={n.url} onClick={() => setOpen(false)}>
+                        {NavItemIcon ? <NavItemIcon size={18} /> : null}
+                        {n.label}
+                    </Link>
                 ) : (
                     <span title={n.label}>{n.label}</span>
                 )}

package/src/components/generic/GenericAuth.jsx

@@ -22,10 +22,54 @@ import TwoFactorAuth from '../auth/TwoFactorAuth';
 import ClientLogin from '../auth/ClientLogin';
 import ClientOTPVerify from '../auth/ClientOTPVerify';
 
+// Shown while the profile check is in flight. Rendering null there leaves a
+// blank white page between the sign-in redirect and the first authenticated
+// paint. Self-contained: SMIL animation, no stylesheet dependency, and the
+// consuming app's design tokens with neutral fallbacks.
+const AuthLoading = () => (
+    <div
+        role="status"
+        aria-label="Loading"
+        style={{
+            position: 'fixed',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--bg-color, #f4f4f5)',
+        }}
+    >
+        <svg width="42" height="42" viewBox="0 0 42 42" fill="none">
+            <circle
+                cx="21"
+                cy="21"
+                r="18"
+                stroke="var(--border-color, #dfe3eb)"
+                strokeWidth="4"
+            />
+            <path
+                d="M39 21a18 18 0 0 0-18-18"
+                stroke="var(--primary-color, #52525b)"
+                strokeWidth="4"
+                strokeLinecap="round"
+            >
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 21 21"
+                    to="360 21 21"
+                    dur="0.9s"
+                    repeatCount="indefinite"
+                />
+            </path>
+        </svg>
+    </div>
+);
+
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
 
-    return loading ? null : !user || !user.id ? (
+    return loading ? <AuthLoading /> : !user || !user.id ? (
         <Navigate
             to={redirectPath}
             replace
@@ -43,7 +87,7 @@ const ClientProtectedRoute = ({
 }) => {
     const location = useLocation();
 
-    return loading ? null : !clientUser || !clientUser.id ? (
+    return loading ? <AuthLoading /> : !clientUser || !clientUser.id ? (
         <Navigate
             to={redirectPath}
             replace

package/src/components/styles/Navigation.module.scss

@@ -971,10 +971,22 @@
 
     .aside--cms {
         width: 100%;
+        /* The content header is sticky at z-index 995, so the drawer sits
+           below it: start the drawer under the 50px header instead of
+           letting the header paint over the drawer's top row. This also
+           keeps the hamburger tappable while the drawer is open. */
+        top: 50px;
+        height: calc(100% - 50px);
         transform: translateX(-2000px);
         transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
         will-change: transform;
         z-index: 600;
+
+        /* The header already anchors the screen; the drawer's own logo
+           plate would render as a second 50px brand row. */
+        .logo {
+            display: none;
+        }
     }
 
     .aside--cms--open {