@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/Navigation.jsx

@@ -21,11 +21,16 @@ import {
     Shield,
     Image,
     Phone,
+    KeyRound,
+    Lock,
+    MessageSquare,
+    MessagesSquare,
 } from 'lucide-react';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
+import { isNavActive } from './navActive';
 import styles from './styles/Navigation.module.scss';
 
 // Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
@@ -56,6 +61,10 @@ const NAV_ICONS = {
 const SETTING_ICONS = {
     bug: Bug,
     calendar: Calendar,
+    key: KeyRound,
+    lock: Lock,
+    message: MessageSquare,
+    messages: MessagesSquare,
     draft: FileText,
     image: Image,
     peopleGroup: Users,
@@ -76,6 +85,31 @@ const RAIL_ACTION_LABELS = {
     notifications: 'Notifications',
 };
 
+/**
+ * A chip is an icon and nothing else, so its name has to come from somewhere:
+ * it is the tooltip, and it is the only thing a screen reader has to go on.
+ * A config entry that forgot its `label` used to produce a nameless button —
+ * so the id, which is always there, is humanised as the last resort
+ * (`callRecordings` -> `Call Recordings`).
+ */
+const actionLabel = (n) => {
+    if (n.label) {
+        return n.label;
+    }
+    if (RAIL_ACTION_LABELS[n.id]) {
+        return RAIL_ACTION_LABELS[n.id];
+    }
+    if (!n.id) {
+        return '';
+    }
+    return n.id
+        .replace(/[-_]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/^./, (c) => c.toUpperCase());
+};
+
 const SearchComponent = ({
     navigate,
     search,
@@ -242,6 +276,22 @@ function Navigation({
     themeType,
     userProfile,
     debugIcons = false, // Add debug flag
+    /*
+     * Per-id renderers for account actions: `{ [setting.id]: ({ setting,
+     * userProfile, setSystemAuth }) => node }`.
+     *
+     * The chain below is hard-coded because every action it knows about ships
+     * with this library. An action that lives in a consuming app — or in a
+     * module the library carries but the header should not import eagerly —
+     * has nowhere to go. This is that slot: a matching id renders the
+     * supplied node inside the same row wrapper the built-in branches use,
+     * on both the header chips and the sidebar rail.
+     *
+     * Checked before the built-in chain, so a project can also override a
+     * shipped action. Empty by default, so nothing changes for anyone who
+     * does not pass it.
+     */
+    renderers = {},
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -304,6 +354,19 @@ function Navigation({
         // Add active class if the setting is active
         const activeClass = isActive ? styles.active : '';
 
+        // A consumer-supplied renderer wins over the built-in chain.
+        if (typeof renderers[n.id] === 'function') {
+            return (
+                <li>
+                    {renderers[n.id]({
+                        setting: n,
+                        userProfile,
+                        setSystemAuth,
+                    })}
+                </li>
+            );
+        }
+
         if (n.id === 'notifications') {
             return (
                 <li>
@@ -314,8 +377,11 @@ function Navigation({
             return (
                 <li>
                     <button
+                        type="button"
                         data-tooltip-id="system-tooltip"
+                        data-tooltip-place="bottom"
                         data-tooltip-content="Scan Business Card"
+                        aria-label="Scan Business Card"
                         onClick={() => setShowBusinessCardOcr(true)}
                         className={activeClass}
                     >
@@ -335,11 +401,15 @@ function Navigation({
             );
         } else if (n.id === 'logout') {
             const IconComponent = iconComponents[n.icon];
+            const label = actionLabel(n);
             return (
                 <li>
                     <button
+                        type="button"
                         data-tooltip-id="system-tooltip"
-                        data-tooltip-content={n.label}
+                        data-tooltip-place="bottom"
+                        data-tooltip-content={label}
+                        aria-label={label}
                         onClick={handleLogout}
                         className={activeClass} // Add active class to the logout button
                     >
@@ -349,13 +419,16 @@ function Navigation({
             );
         } else {
             const IconComponent = iconComponents[n.icon];
+            const label = actionLabel(n);
 
             return (
                 <li>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
-                        data-tooltip-content={n.label}
+                        data-tooltip-place="bottom"
+                        data-tooltip-content={label}
+                        aria-label={label}
                         className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
                     >
@@ -385,11 +458,25 @@ function Navigation({
     const renderRailSetting = (n) => {
         const isActive = n.url && n.url === `/${currentPage}`;
         const activeClass = isActive ? styles.active : '';
-        const label = n.label || RAIL_ACTION_LABELS[n.id] || '';
+        const label = actionLabel(n);
         // A CSS string, quoted and escaped, for `content`.
         const labelVar = { '--nav-action-label': JSON.stringify(label) };
         const IconComponent = SETTING_ICONS[n.icon];
 
+        // Same slot as the header's, publishing the row label the same way a
+        // mounted component gets one (see the note above renderRailSetting).
+        if (typeof renderers[n.id] === 'function') {
+            return (
+                <li style={labelVar}>
+                    {renderers[n.id]({
+                        setting: n,
+                        userProfile,
+                        setSystemAuth,
+                    })}
+                </li>
+            );
+        }
+
         if (n.id === 'notifications') {
             return (
                 <li style={labelVar}>
@@ -510,9 +597,8 @@ function Navigation({
                                     <li key={`nav-child-${childKey}`}>
                                         <Link
                                             to={child.url}
-                                            title={child.label}
                                             className={
-                                                location.pathname === child.url
+                                                isNavActive(child.url, [], currentPage)
                                                     ? styles.active
                                                     : ''
                                             }
@@ -543,7 +629,7 @@ function Navigation({
                         {n.label}
                     </Link>
                 ) : (
-                    <span title={n.label}>{n.label}</span>
+                    <span>{n.label}</span>
                 )}
                 {renderChildren()}
             </li>
@@ -685,52 +771,25 @@ function Navigation({
 
     useEffect(() => {
         setNavData((prevNavData) => {
+            /**
+             * One rule at every depth — see navActive.js, which holds it and
+             * is tested directly. This used to branch on how many segments the
+             * URL happened to have, only consulted an item's children in one
+             * of those branches, and compared paths with `String.includes`.
+             * The visible cost: standing on `/reports`, which Admin owns as a
+             * child, nothing in the bar was marked at all.
+             */
             const updateNavItems = (nav) => {
-                const cleanUrl = (url) => {
-                    if (url) {
-                        // Ensure the URL starts with a slash. If it doesn't, prepend it.
-                        return url.startsWith('/') ? url : `/${url}`;
-                    }
-                    return '';
-                };
-
-                // Ensure both URLs have the leading slash for consistent comparison
-                const currentUrl = cleanUrl(currentPage);
-                const navUrl = nav.url ? cleanUrl(nav.url) : 'dashboard';
-
-                // Split current URL into segments
-                const currentUrlSegments = currentUrl
-                    .split('/')
-                    .filter(Boolean);
-
-                // Handle the case where navUrl is just '/'
-                if (
-                    navUrl === '/' &&
-                    (currentUrl === '/dashboard' || currentUrl === '/')
-                ) {
-                    return { ...nav, class: 'nav-item active' }; // Mark as active for dashboard if navUrl is '/'
-                }
-
-                // If current URL has 2 or fewer segments, check if navUrl is contained in currentUrl
-                if (currentUrlSegments.length <= 2) {
-                    if (currentUrl.includes(navUrl) && nav.id !== 'dashboard') {
-                        return { ...nav, class: 'nav-item active' }; // Mark as active if contained
-                    }
-                } else {
-                    // If more than 2 segments, use exact match logic
-                    if (
-                        navUrl === currentUrl ||
-                        (nav.children &&
-                            nav.children.some(
-                                (child) =>
-                                    cleanUrl(child.url) === `/${currentPage}`
-                            ))
-                    ) {
-                        return { ...nav, class: 'nav-item active' }; // Mark as active
-                    }
-                }
+                const childUrls = (nav.children || []).map(
+                    (child) => child.url
+                );
 
-                return { ...nav, class: 'nav-item' }; // Default class
+                return {
+                    ...nav,
+                    class: isNavActive(nav.url, childUrls, currentPage)
+                        ? 'nav-item active'
+                        : 'nav-item',
+                };
             };
 
             return {

package/src/components/Notification.jsx

@@ -3,10 +3,36 @@ import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Bell, X, Check } from 'lucide-react';
+import { Bell, X, Check, Monitor } from 'lucide-react';
 import CustomFetch from './Fetch';
+import {
+    getPermission,
+    isEnabled as desktopAlertsEnabled,
+    isSupported as desktopAlertsSupported,
+    notify as desktopNotify,
+    requestPermission as requestDesktopPermission,
+    setEnabled as setDesktopAlertsEnabled,
+} from './notify/desktopNotifications';
+// Pure subscription bookkeeping. It lives under sms/ because that is where it
+// was written, but there is nothing messaging-specific in it — importing it
+// keeps one implementation of "has this channel actually been authorised?".
+import { subscriptionMonitor } from './sms/smsLiveState';
 import styles from './styles/Notification.module.scss';
 
+/**
+ * The event Laravel broadcasts a notification as, and what Echo's
+ * `.notification()` helper binds to. Named here so the fallback path below can
+ * unbind it explicitly.
+ */
+const BROADCAST_EVENT = '.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated';
+
+/** Polling, with and without a confirmed websocket. */
+const POLL_INTERVAL = 60000;
+const LIVE_POLL_INTERVAL = 300000;
+
+/** The bold line on a desktop alert. */
+const ALERT_TITLE = 'Throughlife';
+
 // Helper function to sanitize HTML content and remove unwanted styling from anchor tags
 const sanitizeHtml = (html) => {
     if (!html) return '';
@@ -47,6 +73,26 @@ const sanitizeHtml = (html) => {
     return tempDiv.innerHTML;
 };
 
+/**
+ * A label with its markup taken off, for the desktop toast.
+ *
+ * Notification labels are stored as HTML (the bell parses them), and the OS
+ * toast renders text — so "<b>New task</b>" would otherwise appear verbatim.
+ */
+const plainText = (html) => {
+    if (!html) return '';
+
+    if (typeof document === 'undefined') {
+        return String(html).replace(/<[^>]*>/g, '').trim();
+    }
+
+    const holder = document.createElement('div');
+
+    holder.innerHTML = String(html);
+
+    return (holder.textContent || '').replace(/\s+/g, ' ').trim();
+};
+
 function Notification(props) {
     const navigate = useNavigate();
     const wrapperRef = useRef(null);
@@ -54,7 +100,22 @@ function Notification(props) {
     const [show, setShow] = useState(false);
     const [loading, setLoading] = useState(false);
     const [processingIds, setProcessingIds] = useState([]);
-    const { setSystemAuth } = props;
+    const { setSystemAuth, echo = null, channel = null } = props;
+
+    // Live means *confirmed*: Echo hands back a channel object long before
+    // /broadcasting/auth has approved it, and treating that as live is how a
+    // bell ends up subscribed to nothing and polling every five minutes.
+    const [live, setLive] = useState(false);
+    const [alertsOn, setAlertsOn] = useState(() => desktopAlertsEnabled());
+    const [permission, setPermission] = useState(() => getPermission());
+
+    const alertsSupported = desktopAlertsSupported();
+
+    // Read through refs so a consumer passing inline arrows — `echo={() =>
+    // getEcho()}` is the normal way to write it — does not tear the
+    // subscription down on every render. Only the channel name does that.
+    const echoRef = useRef(echo);
+    echoRef.current = echo;
 
     const fetchNotification = useCallback(() => {
         setLoading(true);
@@ -184,26 +245,191 @@ function Notification(props) {
         setShow(false);
     }, [navigate]);
 
+    /**
+     * One notification, straight off the websocket.
+     *
+     * The payload is App\Notifications\SystemAlert::toBroadcast() — the same
+     * id the database row was written under, so a live item and a polled one
+     * are interchangeable and "mark as read" works on either.
+     */
+    const handleBroadcast = useCallback(
+        (payload) => {
+            const label = payload?.label;
+
+            if (!label) return;
+
+            const id = payload.id ?? `live-${Date.now()}`;
+            const url = payload.url ?? null;
+
+            setItems((prev) => {
+                // Pusher can redeliver, and a poll may have raced us here.
+                if (prev.some((item) => item.id === id)) return prev;
+
+                return [
+                    {
+                        id,
+                        data: { label, url },
+                        read_at: null,
+                        created_at: payload.created_at ?? new Date().toISOString(),
+                    },
+                    ...prev,
+                ];
+            });
+
+            desktopNotify({
+                title: ALERT_TITLE,
+                body: plainText(label),
+                tag: `notification-${id}`,
+                url,
+                navigate,
+            });
+        },
+        [navigate]
+    );
+
+    const broadcastRef = useRef(handleBroadcast);
+    broadcastRef.current = handleBroadcast;
+
+    /**
+     * Subscribe to this user's private channel, when the consumer named one.
+     *
+     * `channel` is deliberately allowed to be null — a build with no
+     * VITE_APP_ENV cannot know whether it is dev or production, and dev and
+     * production share one Pusher app. Guessing there would put a developer's
+     * browser on the production channel; polling is the safe answer.
+     */
     useEffect(() => {
-        fetchNotification();
+        if (!channel || typeof window === 'undefined') {
+            setLive(false);
+
+            return undefined;
+        }
+
+        const source = echoRef.current;
+        const instance = typeof source === 'function' ? source() : source;
+
+        if (!instance || typeof instance.private !== 'function') {
+            setLive(false);
+
+            return undefined;
+        }
+
+        let subscription;
+
+        try {
+            subscription = instance.private(channel);
+        } catch (error) {
+            setLive(false);
+
+            return undefined;
+        }
+
+        if (!subscription) {
+            setLive(false);
 
-        const interval = setInterval(() => {
-            if (!document.hidden) {
-                fetchNotification();
+            return undefined;
+        }
+
+        const handler = (payload) => broadcastRef.current?.(payload || {});
+
+        try {
+            // Echo's own helper for Laravel's broadcast notifications; the
+            // raw `listen` is the fallback for anything hand-rolled.
+            if (typeof subscription.notification === 'function') {
+                subscription.notification(handler);
+            } else {
+                subscription.listen(BROADCAST_EVENT, handler);
             }
-        }, 60000);
+        } catch (error) {
+            setLive(false);
+
+            return undefined;
+        }
+
+        const stopMonitoring = subscriptionMonitor(subscription, {
+            onSuccess: () => setLive(true),
+            onError: () => setLive(false),
+        });
+
+        return () => {
+            setLive(false);
+            stopMonitoring();
+
+            try {
+                subscription.stopListening?.(BROADCAST_EVENT);
+                instance.leave(channel);
+            } catch (error) {
+                // Nothing to clean up.
+            }
+        };
+    }, [channel]);
+
+    /**
+     * The fallback, and the safety net.
+     *
+     * Off the websocket this is the only thing keeping the bell current, so it
+     * runs every minute. Once a channel confirms it drops to five — slow
+     * enough to be free, quick enough that a dropped event is invisible.
+     */
+    useEffect(() => {
+        fetchNotification();
+
+        const interval = setInterval(
+            () => {
+                if (!document.hidden) {
+                    fetchNotification();
+                }
+            },
+            live ? LIVE_POLL_INTERVAL : POLL_INTERVAL
+        );
 
+        return () => clearInterval(interval);
+    }, [fetchNotification, live]);
+
+    useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside, false);
 
         return function cleanup() {
-            clearInterval(interval);
             document.removeEventListener(
                 'mousedown',
                 handleClickOutside,
                 false
             );
         };
-    }, [fetchNotification, handleClickOutside]);
+    }, [handleClickOutside]);
+
+    /**
+     * The switch at the foot of the dropdown.
+     *
+     * Turning it on for the first time is what asks the browser for
+     * permission — the prompt only appears inside a user gesture, which is why
+     * this cannot be done on mount. A refusal leaves the switch off and the
+     * row explains itself; the browser will not ask twice.
+     */
+    const toggleDesktopAlerts = useCallback(() => {
+        if (alertsOn) {
+            setDesktopAlertsEnabled(false);
+            setAlertsOn(false);
+
+            return;
+        }
+
+        if (getPermission() === 'granted') {
+            setDesktopAlertsEnabled(true);
+            setAlertsOn(true);
+
+            return;
+        }
+
+        requestDesktopPermission().then((result) => {
+            setPermission(result);
+
+            if (result !== 'granted') return;
+
+            setDesktopAlertsEnabled(true);
+            setAlertsOn(true);
+        });
+    }, [alertsOn]);
 
     const formatTimeAgo = (date) => {
         const now = moment();
@@ -225,6 +451,7 @@ function Notification(props) {
                 className={styles.notificationTrigger}
                 onClick={toggleNotification}
                 data-tooltip-id="system-tooltip"
+                data-tooltip-place="bottom"
                 data-tooltip-content="Notifications"
                 aria-label="Notifications"
             >
@@ -331,6 +558,49 @@ function Notification(props) {
                             )}
                         </div>
 
+                        {alertsSupported && (
+                            <div className={styles.alertsRow}>
+                                <span className={styles.alertsLabel}>
+                                    <Monitor
+                                        size={14}
+                                        strokeWidth={2}
+                                        aria-hidden="true"
+                                    />
+                                    Desktop alerts
+                                </span>
+
+                                {permission === 'denied' ? (
+                                    <span className={styles.alertsBlocked}>
+                                        Blocked in browser settings
+                                    </span>
+                                ) : (
+                                    <button
+                                        type="button"
+                                        className={[
+                                            styles.toggle,
+                                            alertsOn ? styles.toggleOn : '',
+                                        ]
+                                            .filter(Boolean)
+                                            .join(' ')}
+                                        onClick={toggleDesktopAlerts}
+                                        role="switch"
+                                        aria-checked={alertsOn}
+                                        aria-label="Desktop alerts"
+                                    >
+                                        <span
+                                            className={styles.toggleTrack}
+                                            aria-hidden="true"
+                                        >
+                                            <span
+                                                className={styles.toggleKnob}
+                                            />
+                                        </span>
+                                        {alertsOn ? 'On' : 'Off'}
+                                    </button>
+                                )}
+                            </div>
+                        )}
+
                         <div className={styles.notiboxActions}>
                             <button
                                 className={styles.viewAllBtn}

package/src/components/TableFilter.jsx

@@ -9,6 +9,15 @@ function TableFilter({
     type,
     onFilterChange,
     tabs,
+    // `variant="underline"` lays the rail out as a horizontal tab strip with
+    // an accent edge under the selected tab, at every width — the same
+    // treatment narrow viewports already get for a flat rail (see the
+    // `.flatFilter` block in the stylesheet), promoted to an opt-in.
+    //
+    // A vertical rail spends a fifth of the page on navigation, which pays for
+    // itself at seven tabs and does not at two. Pages say which they are; the
+    // default is unchanged.
+    variant,
 }) {
     const [visibleChildren, setVisibleChildren] = useState({});
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -661,11 +670,15 @@ function TableFilter({
         }
     }, [isFlatStrip, activeId]);
 
+    // Gated on `isFlatStrip`: the strip is one row of tabs, and a rail with
+    // expandable parents has no single row to lay out.
+    const isUnderline = variant === 'underline' && isFlatStrip;
+
     return (
         <div
             className={`${styles.tableFilterContainer} ${
                 isFlatStrip ? styles.flatFilter : ''
-            }`}
+            } ${isUnderline ? styles.underlineFilter : ''}`}
         >
             {!isFlatStrip && (
                 <div className={styles.mobileToggle} onClick={toggleMobileMenu}>

package/src/components/auth/AuthBrandPanel.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+/**
+ * The brand side of a two-pane auth screen.
+ *
+ * Markup counterpart to the `auth-brand-panel` mixin in
+ * styles/_authBrandPanel.scss — the staff Login, the shared AuthShell and the
+ * client portal's split layout all render exactly this, and each supplies its
+ * own CSS module (the class names are identical because they all include that
+ * one mixin).
+ *
+ * `aria-hidden` is deliberate and applies to every consumer: everything this
+ * panel says is said again, in words, by the form beside it. A screen reader
+ * announcing the brand line twice before reaching the first field is worse
+ * than not announcing the photograph at all.
+ *
+ * Renders the `<aside>` unconditionally, even with nothing to put in it — it is
+ * a layout column, and a grid with a missing child is a broken screen rather
+ * than a tidier one. Only the ink block is conditional.
+ */
+const AuthBrandPanel = ({ styles, loginBg, branding = {} }) => (
+    <aside
+        className={styles.brand}
+        style={loginBg ? { backgroundImage: `url(${loginBg})` } : undefined}
+        aria-hidden="true"
+    >
+        {(branding.eyebrow || branding.name || branding.tagline) && (
+            <div className={styles.brandInk}>
+                {branding.eyebrow && (
+                    <p className={styles.eyebrow}>{branding.eyebrow}</p>
+                )}
+                {branding.name && (
+                    <p className={styles.brandLine}>{branding.name}</p>
+                )}
+                {branding.tagline && (
+                    <p className={styles.brandSub}>{branding.tagline}</p>
+                )}
+            </div>
+        )}
+    </aside>
+);
+
+export default AuthBrandPanel;