@smartbooks-ai/layout 0.1.0 → 0.1.2

package/dist/components/PageWithMenuLayout/AppsSelect/index.d.ts

@@ -0,0 +1,8 @@
+import type { App } from '@smartbooks-ai/api-client';
+type Props = {
+    applications: App[];
+    isExpanded: boolean;
+};
+export declare const AppsSelect: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PageWithMenuLayout/AppsSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/AppsSelect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAIrD,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,GAAG,EAAE,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyDtC,CAAC"}

package/dist/components/PageWithMenuLayout/AppsSelect/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { useState } from 'react';
+import AppsIcon from '@mui/icons-material/Apps';
+import * as Styled from './styles';
+export const AppsSelect = ({ applications }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleAppClick = (app) => {
+        window.open(app.url, '_blank');
+        setAnchorEl(null);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Styled.AppsIconButton, { size: "small", title: "App Launcher", onClick: (event) => {
+                    setAnchorEl(event.currentTarget);
+                }, children: _jsx(AppsIcon, {}) }), _jsx(Styled.Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorPosition: anchorEl
+                    ? {
+                        left: 0,
+                        top: anchorEl.getBoundingClientRect().bottom + 8,
+                    }
+                    : undefined, anchorReference: "anchorPosition", transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, children: _jsx(Styled.AppsGrid, { children: applications.map((app) => {
+                        return (_jsx(Styled.AppCard, { elevation: 0, children: _jsxs(Styled.AppCardActionArea, { onClick: () => handleAppClick(app), children: [_jsx(Styled.AppIcon, { children: app.icon && (_jsx("img", { src: app.icon, alt: "", style: { width: '100%', height: '100%', objectFit: 'contain' } })) }), _jsx(Styled.AppTitle, { children: app.description })] }) }, app.url));
+                    }) }) })] }));
+};

package/dist/components/PageWithMenuLayout/AppsSelect/styles.d.ts

@@ -0,0 +1,31 @@
+export declare const AppsIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "edge"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const Popover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const AppsGrid: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppCard: import("@emotion/styled").StyledComponent<import("@mui/material").CardOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square" | "raised"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const AppCardActionArea: import("@emotion/styled").StyledComponent<import("@mui/material").CardActionAreaOwnProps & import("@mui/material").CardActionAreaSlotsAndSlotProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "slots" | "slotProps" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const AppIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/PageWithMenuLayout/AppsSelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/AppsSelect/styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc;;;;UAI1B,CAAC;AAEF,eAAO,MAAM,OAAO;;UAcnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yGAMpB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;UASnB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;UAW7B,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAenB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yGAKpB,CAAC"}

package/dist/components/PageWithMenuLayout/AppsSelect/styles.js

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+import MuiCard from '@mui/material/Card';
+import MuiCardActionArea from '@mui/material/CardActionArea';
+import MuiIconButton from '@mui/material/IconButton';
+import MuiPopover from '@mui/material/Popover';
+import { rem } from 'polished';
+export const AppsIconButton = styled(MuiIconButton) `
+  font-size: 1rem;
+
+  color: ${({ theme }) => theme.my.colors.text.white};
+`;
+export const Popover = styled(MuiPopover) `
+  /* stylelint-disable-next-line selector-class-pattern */
+  .MuiPopover-paper {
+    left: 0 !important;
+
+    max-width: 90vw;
+
+    padding: ${({ theme }) => theme.my.spacing.lg};
+    margin: 0 !important;
+
+    border: 0.0625rem solid #20244a;
+    border-radius: ${({ theme }) => theme.my.radius.lg};
+    box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 50%);
+  }
+`;
+export const AppsGrid = styled.div `
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+
+  gap: ${({ theme }) => theme.my.spacing.sm};
+`;
+export const AppCard = styled(MuiCard) `
+  background-color: transparent;
+  border-radius: ${({ theme }) => theme.my.radius.md};
+
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.my.colors.background.hover};
+  }
+`;
+export const AppCardActionArea = styled(MuiCardActionArea) `
+  display: flex;
+
+  flex-direction: column;
+
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+
+  padding: ${({ theme }) => theme.my.spacing.md};
+`;
+export const AppIcon = styled.div `
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: ${rem(40)};
+  height: ${rem(40)};
+
+  margin-bottom: ${({ theme }) => theme.my.spacing.xs};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const AppTitle = styled.div `
+  font-weight: 500;
+
+  text-align: center;
+  overflow-wrap: break-word;
+`;

package/dist/components/PageWithMenuLayout/{AppSelect → CompanySelect}/index.d.ts

@@ -6,6 +6,6 @@ type Props = {
     profile: UserProfile | null;
     onCompanyClicked: (company: AvailableCompany) => Promise<void>;
 };
-export declare const AppSelect: React.FC<Props>;
+export declare const CompanySelect: React.FC<Props>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/PageWithMenuLayout/CompanySelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/CompanySelect/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAI7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI5D,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8CzC,CAAC"}

package/dist/components/PageWithMenuLayout/{AppSelect → CompanySelect}/index.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import * as Styled from './styles';
 import { MenuSelect } from '../MenuSelect';
 import { MultiSubscriptionsMenuItems } from '../MultiSubscriptionsMenuItems';
-export const AppSelect = ({ companyCode, isExpanded, profile, onCompanyClicked }) => {
+export const CompanySelect = ({ companyCode, isExpanded, profile, onCompanyClicked }) => {
     const tenants = profile?.allowedTenants;
     const tenantsWithCompanies = useMemo(() => tenants?.filter(({ companies }) => companies.length > 0) ?? [], [tenants]);
     const currentCompany = companyCode ? profile?.allowedCompanies.find(({ code }) => code === companyCode) : undefined;

package/dist/components/PageWithMenuLayout/CompanySelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/CompanySelect/styles.ts"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,cAAc;;;;kBAuB1B,CAAC"}

package/dist/components/PageWithMenuLayout/PageWithMenuLayout.d.ts

@@ -1,4 +1,4 @@
-import { AvailableCompany } from '@smartbooks-ai/api-client';
+import { App, AvailableCompany } from '@smartbooks-ai/api-client';
 import { MenuStructure } from './types';
 import { UserProfile } from '../../security/UserProfile';
 export type PageWithMenuLayoutProps = {
@@ -9,6 +9,8 @@ export type PageWithMenuLayoutProps = {
     switchToCompany: (company: AvailableCompany) => Promise<void>;
     logout: () => void;
     additionalOutletContent?: React.ReactNode;
+    applicationTitle?: string;
+    applications?: App[];
 };
 export declare const PageWithMenuLayout: React.FC<PageWithMenuLayoutProps>;
 //# sourceMappingURL=PageWithMenuLayout.d.ts.map

package/dist/components/PageWithMenuLayout/PageWithMenuLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageWithMenuLayout.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/PageWithMenuLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAQ7D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,MAAM,uBAAuB,GAAG;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,uBAAuB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyEhE,CAAC"}
+{"version":3,"file":"PageWithMenuLayout.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/PageWithMenuLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAalE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,MAAM,uBAAuB,GAAG;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,uBAAuB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqGhE,CAAC"}

package/dist/components/PageWithMenuLayout/PageWithMenuLayout.js

@@ -1,15 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { useEffect } from 'react';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import Fade from '@mui/material/Fade';
+import IconButton from '@mui/material/IconButton';
 import MenuList from '@mui/material/MenuList';
 import { createPortal } from 'react-dom';
-import { NavLink, Outlet } from 'react-router';
-import LogoHeaderImage from './LogoHeaderImage';
-import LogoHeaderText from './LogoHeaderText';
-import { AppSelect, MenuItemWithChildren, UserProfileSelect } from './index';
+import { NavLink, Outlet, useNavigate } from 'react-router';
+import { AppsSelect, CompanySelect, LogoHeaderImage, LogoHeaderText, MenuItemWithChildren, UserProfileSelect, } from './index';
 import * as Styled from './styles';
 import { useMenuToggle } from './useMenuToggle';
-export const PageWithMenuLayout = ({ resolvedCompanyCode, topMenu, bottomMenu, profile, switchToCompany, logout, additionalOutletContent, }) => {
+import { useLocalStorage } from '../../hooks';
+export const PageWithMenuLayout = ({ resolvedCompanyCode, topMenu, bottomMenu, profile, switchToCompany, logout, additionalOutletContent, applicationTitle, applications, }) => {
     const { isExpanded, openMenu, toggleIsExpanded } = useMenuToggle();
-    return (_jsxs(_Fragment, { children: [_jsx(Styled.LockMenuButton, { onClick: toggleIsExpanded, isExpanded: isExpanded, children: _jsx(KeyboardArrowLeftIcon, { fontSize: "inherit" }) }), createPortal(_jsxs(Styled.Drawer, { open: isExpanded, variant: "permanent", children: [_jsxs(Styled.Header, { children: [_jsx(Styled.LogoContainer, { children: _jsx(NavLink, { to: "/", children: _jsx(LogoHeaderImage, { height: 24, style: { display: 'block' } }) }) }), _jsx(Fade, { in: isExpanded, children: _jsx(NavLink, { to: "/", children: _jsx(LogoHeaderText, { height: 12 }) }) })] }), _jsx(AppSelect, { companyCode: resolvedCompanyCode, isExpanded: isExpanded, profile: profile, onCompanyClicked: switchToCompany }), _jsx(Styled.TopMenuList, { children: topMenu?.map((firstLevelItem) => (_jsx(MenuItemWithChildren, { menuItem: firstLevelItem, isMenuOpen: isExpanded, openMenu: openMenu }, firstLevelItem.title))) }), _jsx(MenuList, { disablePadding: true, children: bottomMenu?.map((firstLevelItem) => (_jsx(MenuItemWithChildren, { menuItem: firstLevelItem, isMenuOpen: isExpanded, openMenu: openMenu }, firstLevelItem.title))) }), _jsx(UserProfileSelect, { isTextVisible: isExpanded, profile: profile, logout: logout })] }), document.body), _jsxs(Styled.Main, { isLocked: isExpanded, children: [_jsx(Outlet, {}), additionalOutletContent] })] }));
+    const navigate = useNavigate();
+    const [displayAppsLauncherLocalStorage, setDisplayAppsLauncherLocalStorage] = useLocalStorage('header.displayAppsLauncher', false);
+    useEffect(() => {
+        if (applications) {
+            setDisplayAppsLauncherLocalStorage(applications.length > 0);
+        }
+    }, [applications, setDisplayAppsLauncherLocalStorage]);
+    const hasApplications = applications !== undefined && applications.length > 0;
+    const showAppsLauncher = hasApplications || displayAppsLauncherLocalStorage;
+    return (_jsxs(_Fragment, { children: [_jsx(Styled.LockMenuButton, { onClick: toggleIsExpanded, isExpanded: isExpanded, children: _jsx(KeyboardArrowLeftIcon, { fontSize: "inherit" }) }), createPortal(_jsxs(Styled.Drawer, { open: isExpanded, variant: "permanent", children: [_jsxs(Styled.Header, { children: [showAppsLauncher ? (_jsx(AppsSelect, { applications: applications ?? [], isExpanded: isExpanded })) : (_jsx(IconButton, { size: "small", title: "Home", onClick: () => {
+                                    navigate('/');
+                                }, children: _jsx(LogoHeaderImage, { height: 24, style: { display: 'block' } }) })), _jsx(Fade, { in: isExpanded, children: _jsx(NavLink, { to: "/", children: applicationTitle ? (_jsx(Styled.SmartBooksTitle, { children: applicationTitle })) : (_jsx(LogoHeaderText, { height: 12 })) }) })] }), _jsx(CompanySelect, { companyCode: resolvedCompanyCode, isExpanded: isExpanded, profile: profile, onCompanyClicked: switchToCompany }), _jsx(Styled.TopMenuList, { children: topMenu?.map((firstLevelItem) => (_jsx(MenuItemWithChildren, { menuItem: firstLevelItem, isMenuOpen: isExpanded, openMenu: openMenu }, firstLevelItem.title))) }), _jsx(MenuList, { disablePadding: true, children: bottomMenu?.map((firstLevelItem) => (_jsx(MenuItemWithChildren, { menuItem: firstLevelItem, isMenuOpen: isExpanded, openMenu: openMenu }, firstLevelItem.title))) }), _jsx(UserProfileSelect, { isTextVisible: isExpanded, profile: profile, logout: logout })] }), document.body), _jsxs(Styled.Main, { isLocked: isExpanded, children: [_jsx(Outlet, {}), additionalOutletContent] })] }));
 };

package/dist/components/PageWithMenuLayout/index.d.ts

@@ -1,8 +1,9 @@
-export { AppSelect } from './AppSelect';
+export { CompanySelect } from './CompanySelect';
 export { MenuSelect } from './MenuSelect';
 export { MultiSubscriptionsMenuItems } from './MultiSubscriptionsMenuItems';
 export { MenuItemWithChildren } from './MenuItemWithChildren/MenuItemWithChildren';
 export { UserProfileSelect } from './UserProfileSelect';
+export { AppsSelect } from './AppsSelect';
 export { PageWithMenuLayout } from './PageWithMenuLayout';
 export { default as LogoHeaderImage } from './LogoHeaderImage';
 export { default as LogoHeaderText } from './LogoHeaderText';

package/dist/components/PageWithMenuLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/PageWithMenuLayout/index.js

@@ -1,8 +1,9 @@
-export { AppSelect } from './AppSelect';
+export { CompanySelect } from './CompanySelect';
 export { MenuSelect } from './MenuSelect';
 export { MultiSubscriptionsMenuItems } from './MultiSubscriptionsMenuItems';
 export { MenuItemWithChildren } from './MenuItemWithChildren/MenuItemWithChildren';
 export { UserProfileSelect } from './UserProfileSelect';
+export { AppsSelect } from './AppsSelect';
 export { PageWithMenuLayout } from './PageWithMenuLayout';
 export { default as LogoHeaderImage } from './LogoHeaderImage';
 export { default as LogoHeaderText } from './LogoHeaderText';

package/dist/components/PageWithMenuLayout/styles.d.ts

@@ -22,6 +22,10 @@ export declare const TopMenuList: import("@emotion/styled").StyledComponent<impo
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "children" | "sx" | "variant" | "dense" | "disablePadding" | "subheader" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+export declare const SmartBooksTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type MainProps = {
     isLocked: boolean;
 };

package/dist/components/PageWithMenuLayout/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM;;UAgBlB,CAAC;AAEF,eAAO,MAAM,MAAM;;;yGAYlB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAQzB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,cAAc;;;;gCA2B1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UASvB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,IAAI;;;qHAUhB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM;;UAgBlB,CAAC;AAEF,eAAO,MAAM,MAAM;;;yGAalB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAQzB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,cAAc;;;;gCA2B1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UASvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAU3B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,IAAI;;;qHAUhB,CAAC"}

package/dist/components/PageWithMenuLayout/styles.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import MuiDrawer, { drawerClasses } from '@mui/material/Drawer';
 import MuiIconButton from '@mui/material/IconButton';
 import MenuList from '@mui/material/MenuList';
+import { OPEN_SANS_FONT_FAMILY } from '../../theme/font';
 import { shouldNotForwardPropsWithKeys } from '../../utils/shouldNotForwardPropsWithKeys';
 const drawerOpenWidthRem = 15.625;
 const drawerClosedWidthRem = 3.75;
@@ -28,6 +29,7 @@ export const Header = styled.div `
 
   column-gap: ${({ theme }) => theme.my.spacing.xxs};
   align-items: center;
+  justify-content: left;
 
   width: max-content;
   min-width: 100%;
@@ -78,6 +80,17 @@ export const TopMenuList = styled(MenuList) `
 
   overflow: hidden auto;
 `;
+export const SmartBooksTitle = styled.div `
+  margin-top: ${({ theme }) => theme.my.spacing.xxxs};
+
+  font-family: ${OPEN_SANS_FONT_FAMILY};
+  font-size: 1rem;
+  font-weight: bold;
+
+  color: ${({ theme }) => theme.my.colors.text.white};
+
+  text-transform: uppercase;
+`;
 export const Main = styled('div', shouldNotForwardPropsWithKeys(['isLocked'])) `
   position: relative;
 

package/dist/components/PageWithMenuLayout/useMenuToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/useMenuToggle.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;;;CAczB,CAAC"}
+{"version":3,"file":"useMenuToggle.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/useMenuToggle.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;CAczB,CAAC"}

package/dist/components/PageWithMenuLayout/useMenuToggle.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo } from 'react';
-import { useProfile, useToggle } from '@smartbooks-ai/layout';
+import { useToggle } from '../../hooks';
+import { useProfile } from '../../security/ProfileContext';
 export const useMenuToggle = () => {
     const { value: isExpanded, toggle: toggleIsExpanded, switchOn: openMenu, switchOff: closeMenu } = useToggle(true);
     const { profile } = useProfile();

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useIsAuthorized } from './useIsAuthorized';
+export { useLocalStorage } from './useLocalStorage';
 export { useToggle } from './useToggle';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/hooks/index.js

@@ -1,2 +1,3 @@
 export { useIsAuthorized } from './useIsAuthorized';
+export { useLocalStorage } from './useLocalStorage';
 export { useToggle } from './useToggle';

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,12 @@
+type Serializer<T> = (object: T | undefined) => string;
+type Parser<T> = (val: string) => T | undefined;
+type Setter<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
+type Options<T> = Partial<{
+    serializer: Serializer<T>;
+    parser: Parser<T>;
+    logger: (error: unknown) => void;
+    syncData: boolean;
+}>;
+declare function useLocalStorage<T>(key: string, defaultValue: T, options?: Options<T>): [T, Setter<T>];
+export { useLocalStorage };
+//# sourceMappingURL=useLocalStorage.d.ts.map

package/dist/hooks/useLocalStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../src/hooks/useLocalStorage.ts"],"names":[],"mappings":"AAGA,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;AACvD,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,CAAC;AAChD,KAAK,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;AAErE,KAAK,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAClB,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iBAAS,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AA6FhG,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/hooks/useLocalStorage.js

@@ -0,0 +1,86 @@
+// https://github.com/nas5w/use-local-storage/blob/main/src/index.ts
+import { useEffect, useMemo, useRef, useState } from 'react';
+function useLocalStorage(key, defaultValue, options) {
+    const opts = useMemo(() => {
+        return {
+            serializer: JSON.stringify,
+            parser: JSON.parse,
+            logger: console.log,
+            syncData: true,
+            ...options,
+        };
+    }, [options]);
+    const { serializer, parser, logger, syncData } = opts;
+    const rawValueRef = useRef(null);
+    const [value, setValue] = useState(() => {
+        if (typeof window === 'undefined')
+            return defaultValue;
+        try {
+            rawValueRef.current = window.localStorage.getItem(key);
+            const res = rawValueRef.current ? parser(rawValueRef.current) : defaultValue;
+            return res;
+        }
+        catch (e) {
+            logger(e);
+            return defaultValue;
+        }
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const updateLocalStorage = () => {
+            // Browser ONLY dispatch storage events to other tabs, NOT current tab.
+            // We need to manually dispatch storage event for current tab
+            if (value !== undefined) {
+                const newValue = serializer(value);
+                const oldValue = rawValueRef.current;
+                rawValueRef.current = newValue;
+                window.localStorage.setItem(key, newValue);
+                window.dispatchEvent(new StorageEvent('storage', {
+                    storageArea: window.localStorage,
+                    url: window.location.href,
+                    key,
+                    newValue,
+                    oldValue,
+                }));
+            }
+            else {
+                window.localStorage.removeItem(key);
+                window.dispatchEvent(new StorageEvent('storage', {
+                    storageArea: window.localStorage,
+                    url: window.location.href,
+                    key,
+                }));
+            }
+        };
+        try {
+            updateLocalStorage();
+        }
+        catch (e) {
+            logger(e);
+        }
+    }, [value, key, serializer, rawValueRef, logger]);
+    useEffect(() => {
+        if (!syncData)
+            return;
+        const handleStorageChange = (e) => {
+            if (e.key !== key || e.storageArea !== window.localStorage)
+                return;
+            try {
+                if (e.newValue !== rawValueRef.current) {
+                    rawValueRef.current = e.newValue;
+                    setValue(e.newValue ? parser(e.newValue) : undefined);
+                }
+            }
+            catch (e) {
+                logger(e);
+            }
+        };
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('storage', handleStorageChange);
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, [key, syncData, parser, rawValueRef, logger]);
+    return [value, setValue];
+}
+export { useLocalStorage };

package/dist/theme/font.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from '@emotion/react';
 export declare const FONT_FAMILY = "Arial, sans-serif";
+export declare const OPEN_SANS_FONT_FAMILY = "Open Sans, Arial, sans-serif";
 export declare const font: Theme['my']['font'];
 //# sourceMappingURL=font.d.ts.map

package/dist/theme/font.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/theme/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAE/C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAsBpC,CAAC"}
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/theme/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AAEpE,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAsBpC,CAAC"}

package/dist/theme/font.js

@@ -1,4 +1,5 @@
 export const FONT_FAMILY = 'Arial, sans-serif';
+export const OPEN_SANS_FONT_FAMILY = 'Open Sans, Arial, sans-serif';
 export const font = {
     h1: `        600 1.5rem/2       ${FONT_FAMILY}`,
     h2: `        700 1.25rem/1.75   ${FONT_FAMILY}`,

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.tsx"],"names":[],"mappings":"AAoNA,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,oDAc3D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.tsx"],"names":[],"mappings":"AAqNA,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,oDAc3D"}

package/dist/theme/index.js

@@ -39,7 +39,7 @@ const muiTheme = {
         MuiCssBaseline: {
             styleOverrides: {
                 a: css `
-          color: '#000000';
+          color: #000;
 
           text-decoration: none;
         `,

package/package.json

@@ -1,7 +1,7 @@
 {
   "author": "smartbooks",
   "dependencies": {
-    "@smartbooks-ai/api-client": "0.1.0",
+    "@smartbooks-ai/api-client": "0.1.2",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.1.0"
+  "version": "0.1.2"
 }

package/dist/components/PageWithMenuLayout/AppSelect/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/AppSelect/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAI7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI5D,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8CrC,CAAC"}

package/dist/components/PageWithMenuLayout/AppSelect/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/AppSelect/styles.ts"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,cAAc;;;;kBAuB1B,CAAC"}