ui-soxo-bootstrap-core 2.6.29 → 2.6.30

package/core/lib/components/global-header/global-header.scss

@@ -81,7 +81,7 @@
     }
 
     &.open {
-      width: 256px;
+      width: var(--sidemenu-width, 211px);
     }
 
     &.close {
@@ -92,7 +92,7 @@
       transition: 0.3s;
 
       &.open {
-        width: 256px;
+        width: var(--sidemenu-width, 211px);
         transition: 0.1s;
       }
 
@@ -109,7 +109,7 @@
     }
 
     @media only screen and (min-width: 800px) {
-      width: 256px;
+      width: var(--sidemenu-width, 211px);
     }
   }
 
@@ -126,7 +126,7 @@
     overflow-x: scroll;
     position: relative;
     padding: 15px;
-    margin-left: 212px;
+    margin-left: calc(var(--sidemenu-width, 211px) + 1px);
 
     &.kioskon {
       overflow-x: hidden;
@@ -213,9 +213,9 @@
     padding: 15px;
 
     &.open {
-      width: calc(100% - 212px);
+      width: calc(100% - (var(--sidemenu-width, 211px) + 1px));
       transition: 0.1s;
-      left: 212px;
+      left: calc(var(--sidemenu-width, 211px) + 1px);
     }
 
     @media only screen and (max-width: 768px) {

package/core/lib/components/sidemenu/sidemenu.js

@@ -8,7 +8,7 @@
  *
  */
 
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';
 
 import { animationControls, motion, useAnimation } from 'framer-motion';
 
@@ -24,10 +24,75 @@ import { useTranslation, Trans } from 'react-i18next';
 
 import { Menus } from '../../models';
 
+import { expandFaAliases, ensureFontAwesomeAvailable } from '../../utils/font-awesome.utils';
+
 import './sidemenu.scss';
 
 const { SubMenu } = Menu;
 
+const SIDEMENU_WIDTH_KEY = 'soxo:sidemenu-width';
+const DEFAULT_SIDEMENU_WIDTH = 211;
+const MIN_SIDEMENU_WIDTH = 180;
+const MAX_SIDEMENU_WIDTH = 420;
+
+/**
+ * Renders the menu's image if present, falling back to the Font Awesome icon.
+ * The FA icon is rendered immediately so something is always visible during
+ * a slow image fetch (e.g. cold reload, route change before the image is
+ * cached). The image takes over only after it successfully loads; if it
+ * fails, the FA icon stays.
+ */
+function MenuIcon({ menu, icon, size = 25 }) {
+  const src = menu && typeof menu.image_path === 'string' ? menu.image_path.trim() : '';
+  const [imageStatus, setImageStatus] = useState(src ? 'loading' : 'none');
+  const imgRef = useRef(null);
+
+  // Reset and probe whenever src changes. This covers two cases that were
+  // breaking icon rendering on direct URL navigation / reload:
+  //   1. Cached images: the browser may fire `load` synchronously before
+  //      React attaches the onLoad handler, leaving status stuck at
+  //      'loading'. We re-check `img.complete` after mount.
+  //   2. Broken responses (200 with empty/corrupt body, CSP blocked, etc.)
+  //      that fire `load` but with naturalWidth=0 — treat as failed so the
+  //      Font Awesome fallback shows instead of an invisible <img>.
+  useEffect(() => {
+    if (!src) {
+      setImageStatus('none');
+      return;
+    }
+    const img = imgRef.current;
+    if (img && img.complete) {
+      setImageStatus(img.naturalWidth > 0 ? 'loaded' : 'failed');
+    } else {
+      setImageStatus('loading');
+    }
+  }, [src]);
+
+  const handleLoad = () => {
+    const img = imgRef.current;
+    setImageStatus(img && img.naturalWidth > 0 ? 'loaded' : 'failed');
+  };
+
+  const showImage = src && imageStatus !== 'failed';
+  const showIcon = !showImage || imageStatus !== 'loaded';
+
+  return (
+    <>
+      {showIcon && <i className={`fa-solid fas ${expandFaAliases(icon)}`} />}
+      {showImage && (
+        <img
+          ref={imgRef}
+          style={{ width: size, display: imageStatus === 'loaded' ? 'inline-block' : 'none' }}
+          src={src}
+          alt=""
+          onLoad={handleLoad}
+          onError={() => setImageStatus('failed')}
+        />
+      )}
+    </>
+  );
+}
+
 /**
  *
  * @param {*} collapsed
@@ -59,7 +124,7 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
       {!collapsed ? (
         <div className="menu-collapsed">
           <div>
-            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+            <MenuIcon menu={menu} icon={icon} />
           </div>
 
           <div style={{ color: state.theme.colors.leftSectionColor }}>
@@ -73,7 +138,7 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
       ) : (
         <div className="menu-collapsed">
           <span className="anticon">
-            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+            <MenuIcon menu={menu} icon={icon} />
           </span>
 
           <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
@@ -106,8 +171,62 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
   const [openKeys, setOpenKeys] = useState([]);
   const [menu, setMenu] = useState({});
 
+  const [sidebarWidth, setSidebarWidth] = useState(() => {
+    const saved = parseInt(typeof window !== 'undefined' ? localStorage.getItem(SIDEMENU_WIDTH_KEY) : null, 10);
+    return Number.isFinite(saved) && saved >= MIN_SIDEMENU_WIDTH && saved <= MAX_SIDEMENU_WIDTH ? saved : DEFAULT_SIDEMENU_WIDTH;
+  });
+  const [isDragging, setIsDragging] = useState(false);
+
   const { user = { locations: [] }, dispatch, state } = useContext(GlobalContext);
 
+  // Expose the current expanded sidebar width as a CSS variable so the
+  // surrounding layout (right-section, page-wrapper) can follow the drag.
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    document.documentElement.style.setProperty('--sidemenu-width', `${sidebarWidth}px`);
+  }, [sidebarWidth]);
+
+  // Make sure Font Awesome is actually rendering glyphs in this app; if the
+  // host hasn't loaded it (or shipped a broken build), inject FA6 from a CDN
+  // so menu icons appear.
+  useEffect(() => {
+    ensureFontAwesomeAvailable();
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(SIDEMENU_WIDTH_KEY, String(sidebarWidth));
+  }, [sidebarWidth]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e) => {
+      const next = Math.min(Math.max(e.clientX, MIN_SIDEMENU_WIDTH), MAX_SIDEMENU_WIDTH);
+      setSidebarWidth(next);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const handleResizeStart = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
   useEffect(() => {
     // Here we have to consider three cases now ,
     // One is firebase for which it is primarly designed for
@@ -528,6 +647,17 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
         {/* {renderFooter(footerLogo)} */}
         {/* Footer Logo Ends */}
       </div>
+
+      {!collapsed && (
+        <div
+          className={`sidemenu-resize-handle${isDragging ? ' dragging' : ''}`}
+          onMouseDown={handleResizeStart}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize sidebar"
+          title="Drag to resize"
+        />
+      )}
     </div>
   );
 }

package/core/lib/components/sidemenu/sidemenu.scss

@@ -40,7 +40,7 @@
     padding: 5px 16px;
     position: fixed;
     z-index: 1000;
-    width: 17%;
+    width: var(--sidemenu-width, 211px);
     background: #fff;
     // border-bottom: 1.5px solid #24aeb8;
     &.close {
@@ -106,7 +106,7 @@
     margin-top: 0;
     overflow-y: scroll;
     overflow-x: hidden;
-    width: 211px;
+    width: var(--sidemenu-width, 211px);
     padding-bottom: 50px;
 
     /* Custom Scrollbar like macOS */
@@ -132,7 +132,7 @@
     }
     // when toggle open and close
     &.open {
-      width: 211px !important;
+      width: var(--sidemenu-width, 211px) !important;
     }
 
     &.close {
@@ -202,6 +202,39 @@
     }
   }
 
+  .sidemenu-resize-handle {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: var(--sidemenu-width, 211px);
+    width: 6px;
+    margin-left: -3px;
+    cursor: col-resize;
+    z-index: 1100;
+    background: transparent;
+    transition: background 0.15s ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: 1px;
+      background: transparent;
+      transition: background 0.15s ease;
+    }
+
+    &:hover::after,
+    &.dragging::after {
+      background: #24aeb8;
+    }
+
+    &.dragging {
+      background: rgba(36, 174, 184, 0.08);
+    }
+  }
+
   .sidebar-footer {
     position: fixed;
 
@@ -258,6 +291,10 @@
     .sidebar-footer {
       width: 100% !important;
     }
+
+    .sidemenu-resize-handle {
+      display: none;
+    }
   }
 }
 

package/core/lib/pages/login/login.js

@@ -1,10 +1,8 @@
-import React, { useState, useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
-import { Form, Input, message, Result, Radio, Divider, Typography } from 'antd';
+import { Divider, Form, Input, message, Radio, Typography } from 'antd';
 
-import { withRouter, Link } from 'react-router-dom';
-
-import backgroundImage from './../../../assets/images/vector.png';
+import { Link, withRouter } from 'react-router-dom';
 
 import OTPInput from 'otp-input-react';
 
@@ -32,7 +30,7 @@ import { Location } from '../../utils';
 
 import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
 
-import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
+import { MailOutlined, MessageOutlined } from '@ant-design/icons';
 
 import ResetPassword from './reset-password';
 
@@ -50,7 +48,6 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
-
 const headers = {
   db_ptr: 'nuraho',
 };
@@ -443,6 +440,20 @@ function LoginPhone({ history, appSettings }) {
     setOtpSuccess(false);
   };
 
+  // Paste handler runs in capture phase so it pre-empts otp-input-react's
+  // internal handler, which otherwise drops digits when the focused box is
+  // not the first one and does not strip spaces/dashes/surrounding text
+  const handleOtpPaste = (e) => {
+    const raw = e.clipboardData?.getData('text') || '';
+    const digits = raw.replace(/\D/g, '').slice(0, 6);
+    if (!digits) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setOtpValue(digits);
+    setOtpError(false);
+    setOtpSuccess(false);
+  };
+
   /**
    * Otp resend Logic
    */
@@ -495,6 +506,18 @@ function LoginPhone({ history, appSettings }) {
       setOtpError(false);
     }
   }, [otpExpired]);
+
+  // Auto-submit once the user has filled all 6 digits (typed or pasted).
+  // verifyOtp clears otpValue on failure (back to length 0) and sets
+  // otpSuccess on success, both of which prevent this from re-firing.
+  useEffect(() => {
+    if (otpValue.length !== 6) return;
+    if (loading || otpExpired || otpSuccess || !otpVerification) return;
+    verifyOtp();
+    // verifyOtp intentionally omitted from deps — it's redefined every render;
+    // including it would re-fire on every state change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [otpValue, otpVerification]);
   /**
    * Function to get Ldap users
    * @returns
@@ -611,28 +634,28 @@ function LoginPhone({ history, appSettings }) {
     return user.username;
   };
 
-  const { globalCustomerHeader = () => { } } = appSettings;
+  const { globalCustomerHeader = () => {} } = appSettings;
 
   const themeName = process.env.REACT_APP_THEME; // e.g., 'purple'
   const isPurple = themeName === 'purple';
 
   const sectionStyle = isPurple
     ? {
-      width: '100%',
-      height: '100vh',
-      backgroundImage: `${state.theme.colors.loginPageBackground}`,
-      backgroundPosition: 'center bottom, center',
-      backgroundRepeat: 'no-repeat, no-repeat',
-      backgroundSize: 'cover, cover',
-    }
+        width: '100%',
+        height: '100vh',
+        backgroundImage: `${state.theme.colors.loginPageBackground}`,
+        backgroundPosition: 'center bottom, center',
+        backgroundRepeat: 'no-repeat, no-repeat',
+        backgroundSize: 'cover, cover',
+      }
     : {
-      width: '100%',
-      height: '100vh',
-      background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
-      backgroundPosition: 'center bottom, center',
-      backgroundRepeat: 'no-repeat, no-repeat',
-      backgroundSize: 'cover, cover',
-    };
+        width: '100%',
+        height: '100vh',
+        background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
+        backgroundPosition: 'center bottom, center',
+        backgroundRepeat: 'no-repeat, no-repeat',
+        backgroundSize: 'cover, cover',
+      };
 
   return (
     <section className="full-page" style={sectionStyle}>
@@ -732,26 +755,24 @@ function LoginPhone({ history, appSettings }) {
                             <strong>{getOtpDestinationText()}</strong>
                           </span>
                         </p>
-                        <OTPInput
-                          value={otpValue}
-                          onChange={handleOtpChange}
-                          autoFocus
-                          OTPLength={6}
-                          disabled={loading || otpExpired}
-                          inputStyles={{
-                            border: otpSuccess
-                              ? '2px solid #52c41a' // green
-                              : otpError
-                                ? '2px solid #FF5C5C' // red
-                                : '1px solid #d9d9d9', // default
-                            borderRadius: 4,
-                            width: isMobile ? 28 : 45, //  MOBILE FIX
-                            height: isMobile ? 36 : 40, //  MOBILE FIX
-                            margin: isMobile ? '2px' : '0 4px',
-                            fontSize: isMobile ? 16 : 18,
-                            textAlign: 'center',
-                          }}
-                        />
+                        <div onPasteCapture={handleOtpPaste}>
+                          <OTPInput
+                            value={otpValue}
+                            onChange={handleOtpChange}
+                            autoFocus
+                            OTPLength={6}
+                            disabled={loading || otpExpired}
+                            inputStyles={{
+                              border: otpSuccess ? '2px solid #52c41a' : otpError ? '2px solid #FF5C5C' : '1px solid #d9d9d9',
+                              borderRadius: 4,
+                              width: isMobile ? 28 : 45,
+                              height: isMobile ? 36 : 40,
+                              margin: isMobile ? '2px' : '0 4px',
+                              fontSize: isMobile ? 16 : 18,
+                              textAlign: 'center',
+                            }}
+                          />
+                        </div>
                         {/* Timer below OTP */}
                         <div className="otp-timer">
                           {/* {!otpExpired ?  */}

package/core/lib/utils/font-awesome.utils.js

@@ -0,0 +1,168 @@
+/**
+ * Font Awesome compatibility helpers.
+ *
+ * Two failure modes are addressed here:
+ *   1. The host app ships FA6 Free but menu/data uses FA5 names that were
+ *      renamed (e.g. fa-search-dollar → fa-magnifying-glass-dollar). Rendering
+ *      the old class alone produces a blank glyph.
+ *   2. The host app doesn't ship Font Awesome at all, or ships a build whose
+ *      font file fails to load. Every <i> renders blank regardless of class.
+ *
+ * `expandFaAliases` handles (1) by emitting both old and new class names so
+ * whichever the loaded stylesheet recognises will paint the glyph.
+ * `ensureFontAwesomeAvailable` handles (2) by probing the page for a working
+ * FA install and, if absent, injecting FA6 Free from a CDN.
+ */
+
+// Font Awesome 5 → Font Awesome 6 Free renames. FA Pro keeps the FA5 names
+// as aliases so emitting both is safe there too.
+export const FA5_TO_FA6_FREE_ALIASES = {
+  // search / magnifier
+  'fa-search': 'fa-magnifying-glass',
+  'fa-search-dollar': 'fa-magnifying-glass-dollar',
+  'fa-search-plus': 'fa-magnifying-glass-plus',
+  'fa-search-minus': 'fa-magnifying-glass-minus',
+  'fa-search-location': 'fa-magnifying-glass-location',
+  // layout / lists
+  'fa-th': 'fa-table-cells',
+  'fa-th-large': 'fa-table-cells-large',
+  'fa-th-list': 'fa-table-list',
+  'fa-list-alt': 'fa-rectangle-list',
+  'fa-tasks': 'fa-list-check',
+  // auth / users
+  'fa-sign-in-alt': 'fa-right-to-bracket',
+  'fa-sign-out-alt': 'fa-right-from-bracket',
+  'fa-user-circle': 'fa-circle-user',
+  'fa-user-cog': 'fa-user-gear',
+  'fa-user-md': 'fa-user-doctor',
+  'fa-users-cog': 'fa-users-gear',
+  // common actions
+  'fa-times': 'fa-xmark',
+  'fa-times-circle': 'fa-circle-xmark',
+  'fa-trash-alt': 'fa-trash-can',
+  'fa-edit': 'fa-pen-to-square',
+  'fa-pencil-alt': 'fa-pencil',
+  'fa-save': 'fa-floppy-disk',
+  'fa-share-alt': 'fa-share-nodes',
+  'fa-unlink': 'fa-link-slash',
+  // settings / dashboards
+  'fa-cog': 'fa-gear',
+  'fa-cogs': 'fa-gears',
+  'fa-tachometer-alt': 'fa-gauge',
+  'fa-tachometer': 'fa-gauge',
+  // navigation / pages
+  'fa-home': 'fa-house',
+  'fa-file-alt': 'fa-file-lines',
+  // feedback / status
+  'fa-info-circle': 'fa-circle-info',
+  'fa-question-circle': 'fa-circle-question',
+  'fa-check-circle': 'fa-circle-check',
+  'fa-check-square': 'fa-square-check',
+  'fa-exclamation-triangle': 'fa-triangle-exclamation',
+  'fa-exclamation-circle': 'fa-circle-exclamation',
+  'fa-plus-circle': 'fa-circle-plus',
+  'fa-plus-square': 'fa-square-plus',
+  'fa-minus-circle': 'fa-circle-minus',
+  'fa-minus-square': 'fa-square-minus',
+  // charts
+  'fa-chart-bar': 'fa-chart-column',
+  // calendar / time
+  'fa-calendar-alt': 'fa-calendar-days',
+  'fa-calendar-times': 'fa-calendar-xmark',
+  'fa-history': 'fa-clock-rotate-left',
+  // money / billing
+  'fa-money-check-alt': 'fa-money-check-dollar',
+  'fa-money-bill-alt': 'fa-money-bill-1',
+  // shopping
+  'fa-shopping-cart': 'fa-cart-shopping',
+  'fa-shopping-bag': 'fa-bag-shopping',
+  'fa-shopping-basket': 'fa-basket-shopping',
+  // devices / contact
+  'fa-mobile-alt': 'fa-mobile-screen-button',
+  'fa-tablet-alt': 'fa-tablet-screen-button',
+  'fa-phone-alt': 'fa-phone',
+  'fa-mail-bulk': 'fa-envelopes-bulk',
+  // map / location
+  'fa-map-marker': 'fa-location-pin',
+  'fa-map-marker-alt': 'fa-location-dot',
+  'fa-globe-americas': 'fa-earth-americas',
+  // security / id
+  'fa-shield-alt': 'fa-shield-halved',
+  'fa-id-card-alt': 'fa-id-card-clip',
+  // healthcare (this codebase skews this way)
+  'fa-prescription-bottle-alt': 'fa-prescription-bottle-medical',
+  'fa-procedures': 'fa-bed-pulse',
+  'fa-heartbeat': 'fa-heart-pulse',
+  'fa-clinic-medical': 'fa-house-chimney-medical',
+  'fa-hospital-alt': 'fa-hospital',
+  'fa-allergies': 'fa-hand-dots',
+  'fa-file-medical-alt': 'fa-file-waveform',
+  'fa-running': 'fa-person-running',
+  'fa-walking': 'fa-person-walking',
+};
+
+/**
+ * Expand a Font Awesome icon class string so that both the FA5 name and its
+ * FA6-Free equivalent are present. Same-name tokens are emitted once.
+ * Non-string input is returned as-is.
+ */
+export function expandFaAliases(icon) {
+  if (typeof icon !== 'string' || !icon) return icon || '';
+  const seen = new Set();
+  const out = [];
+  for (const token of icon.split(/\s+/)) {
+    if (!token || seen.has(token)) continue;
+    seen.add(token);
+    out.push(token);
+    const alias = FA5_TO_FA6_FREE_ALIASES[token];
+    if (alias && !seen.has(alias)) {
+      seen.add(alias);
+      out.push(alias);
+    }
+  }
+  return out.join(' ');
+}
+
+const FA_FALLBACK_LINK_ID = 'soxo-fa-fallback';
+const FA_FALLBACK_HREF = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css';
+
+/**
+ * Probe the page for a working Font Awesome install. If the probe glyph
+ * doesn't render, inject FA6 Free from a CDN. No-op when FA already works
+ * or when the fallback has already been injected.
+ */
+export function ensureFontAwesomeAvailable() {
+  if (typeof document === 'undefined' || !document.body) return;
+  if (document.getElementById(FA_FALLBACK_LINK_ID)) return;
+
+  // Render a hidden probe <i> with a class that exists in every recent FA
+  // build (`fa-circle`). If the ::before content is empty/none or the
+  // font-family doesn't claim to be Font Awesome, FA isn't usable here.
+  const probe = document.createElement('i');
+  probe.className = 'fa-solid fas fa-circle';
+  probe.style.cssText = 'position:absolute;left:-9999px;top:-9999px;visibility:hidden;';
+  document.body.appendChild(probe);
+
+  let working = false;
+  try {
+    const before = window.getComputedStyle(probe, '::before');
+    const content = before && before.content;
+    const fontFamily = before && before.fontFamily;
+    const hasGlyph = content && content !== 'none' && content !== '""' && content !== "''";
+    const isFaFont = fontFamily && /font\s*awesome/i.test(fontFamily);
+    working = Boolean(hasGlyph && isFaFont);
+  } catch (e) {
+    working = false;
+  } finally {
+    document.body.removeChild(probe);
+  }
+
+  if (working) return;
+
+  const link = document.createElement('link');
+  link.id = FA_FALLBACK_LINK_ID;
+  link.rel = 'stylesheet';
+  link.href = FA_FALLBACK_HREF;
+  link.crossOrigin = 'anonymous';
+  document.head.appendChild(link);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.29",
+  "version": "2.6.30",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"