quidproquo-web-admin 0.0.255 → 0.0.256

package/lib/commonjs/App/App.js

@@ -11,7 +11,7 @@ const react_router_dom_1 = require("react-router-dom");
 const CssBaseline_1 = __importDefault(require("@mui/material/CssBaseline"));
 const styles_1 = require("@mui/material/styles");
 const Auth_1 = require("../Auth/Auth");
-const LogViewer_1 = require("../LogViewer");
+const components_1 = require("../components");
 const contexts_1 = require("../platformLogic/contexts");
 const view_1 = require("../view");
 const WebSocketAuthProvider_1 = require("../WebSocketAuthProvider");
@@ -25,6 +25,6 @@ const App = ({ urlResolvers }) => {
         api: urlResolvers.getApiUrl(),
         ws: urlResolvers.getWsUrl(),
     }), [urlResolvers]);
-    return ((0, jsx_runtime_1.jsx)(quidproquo_web_react_1.QpqContextProvider, { contextIdentifier: contexts_1.baseUrlsContext, value: baseUrls, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(quidproquo_web_react_1.BaseUrlProvider, { urlResolvers: urlResolvers, children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, { theme: darkTheme, children: [(0, jsx_runtime_1.jsx)(CssBaseline_1.default, {}), (0, jsx_runtime_1.jsx)(view_1.LoadingProvider, { children: (0, jsx_runtime_1.jsx)(Auth_1.Auth, { children: (0, jsx_runtime_1.jsx)(quidproquo_web_react_1.WebsocketProvider, { wsUrl: urlResolvers.getWsUrl(), children: (0, jsx_runtime_1.jsx)(WebSocketAuthProvider_1.WebSocketAuthProvider, { children: (0, jsx_runtime_1.jsx)(LogViewer_1.LogViewer, {}) }) }) }) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(quidproquo_web_react_1.QpqContextProvider, { contextIdentifier: contexts_1.baseUrlsContext, value: baseUrls, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(quidproquo_web_react_1.BaseUrlProvider, { urlResolvers: urlResolvers, children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, { theme: darkTheme, children: [(0, jsx_runtime_1.jsx)(CssBaseline_1.default, {}), (0, jsx_runtime_1.jsx)(view_1.LoadingProvider, { children: (0, jsx_runtime_1.jsx)(Auth_1.Auth, { children: (0, jsx_runtime_1.jsx)(quidproquo_web_react_1.WebsocketProvider, { wsUrl: urlResolvers.getWsUrl(), children: (0, jsx_runtime_1.jsx)(WebSocketAuthProvider_1.WebSocketAuthProvider, { children: (0, jsx_runtime_1.jsx)(components_1.MainLayout, {}) }) }) }) })] }) }) }) }));
 };
 exports.App = App;

package/lib/commonjs/Config/Config.d.ts

@@ -0,0 +1,2 @@
+export declare function Config(): import("react/jsx-runtime").JSX.Element;
+export default Config;

package/lib/commonjs/Config/Config.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Config = Config;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const quidproquo_web_react_1 = require("quidproquo-web-react");
+const quidproquo_webserver_1 = require("quidproquo-webserver");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const internals_1 = require("@mui/x-data-grid/internals");
+const hooks_1 = require("../LogViewer/hooks");
+const drawerWidth = 240;
+const sections = ['General', 'Settings', 'Advanced'];
+function Config() {
+    var _a;
+    const [selectedServiceOverride, setSelectedServiceOverride] = (0, react_1.useState)('');
+    const [tabIndex, setTabIndex] = (0, react_1.useState)(0);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const services = (0, hooks_1.useServiceNames)();
+    const sendMessage = (0, quidproquo_web_react_1.useWebsocketSendEvent)();
+    (0, internals_1.useOnMount)(() => {
+        const configSyncRequestEvent = {
+            type: quidproquo_webserver_1.WebsocketAdminClientMessageEventType.ConfigSyncRequest,
+            payload: {},
+        };
+        sendMessage(configSyncRequestEvent);
+    });
+    const handleServiceClick = (service) => {
+        setSelectedServiceOverride(service);
+        setTabIndex(0);
+    };
+    const handleTabChange = (event, newIndex) => {
+        setTabIndex(newIndex);
+    };
+    const filteredServices = services.filter((s) => s.label.toLowerCase().includes(search.toLowerCase()));
+    const selectedService = selectedServiceOverride || ((_a = services[0]) === null || _a === void 0 ? void 0 : _a.label);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(material_1.CssBaseline, {}), (0, jsx_runtime_1.jsxs)(material_1.Drawer, { variant: "permanent", sx: {
+                    width: drawerWidth,
+                    flexShrink: 0,
+                    [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Toolbar, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, size: "small", variant: "outlined", placeholder: "Search services", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+                                var _a, _b;
+                                if (e.key === 'Enter') {
+                                    setSearch((_a = filteredServices[0]) === null || _a === void 0 ? void 0 : _a.label);
+                                    handleServiceClick((_b = filteredServices[0]) === null || _b === void 0 ? void 0 : _b.label);
+                                }
+                            }, sx: { mt: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { overflow: 'auto', p: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: filteredServices.map((service) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { selected: service.label === selectedService, onClick: () => handleServiceClick(service.label), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: service.label }) }) }, service.value))) }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h5", gutterBottom: true, children: [selectedService, " Service"] }), (0, jsx_runtime_1.jsx)(material_1.Tabs, { value: tabIndex, onChange: handleTabChange, sx: { borderBottom: 1, borderColor: 'divider' }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: section }, index))) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [sections[tabIndex] === 'General' && (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["General settings for ", selectedService] }), sections[tabIndex] === 'Settings' && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Custom configuration options" }), sections[tabIndex] === 'Advanced' && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Advanced tuning and overrides" })] })] })] }));
+}
+exports.default = Config;

package/lib/commonjs/Config/index.d.ts

@@ -0,0 +1 @@
+export * from './Config';

package/lib/commonjs/{LogViewer → Config}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./LogViewer"), exports);
+__exportStar(require("./Config"), exports);

package/lib/commonjs/FederatedAddon.d.ts

@@ -1,7 +1,7 @@
-import { ComponentType, MemoExoticComponent } from 'react';
 export type FederatedTab = {
     name: string;
-    View: ComponentType | MemoExoticComponent<ComponentType>;
+    View: React.ComponentType;
+    icon?: React.ReactElement;
 };
 export type FederatedAddon = {
     tab: FederatedTab;

package/lib/commonjs/components/MainLayout/MainLayout.d.ts

@@ -0,0 +1 @@
+export declare function MainLayout(): import("react/jsx-runtime").JSX.Element;

package/lib/commonjs/components/MainLayout/MainLayout.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainLayout = MainLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const queryParams_1 = require("../../queryParams");
+const hooks_1 = require("./hooks");
+function MainLayout() {
+    const { tabs, loading } = (0, hooks_1.useTabs)();
+    const { tab, handleTabOnChange } = (0, queryParams_1.useUrlFields)();
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            width: '100%',
+        }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+                    flexGrow: 1,
+                    overflow: 'auto',
+                    pb: '56px', // <— prevent content from being hidden behind bottom nav
+                }, children: tabs
+                    .filter((t, index) => index === tab)
+                    .map((tab) => ((0, jsx_runtime_1.jsx)(tab.View, {}, tab.name))) }), (0, jsx_runtime_1.jsxs)(material_1.BottomNavigation, { value: tab, onChange: (event, newValue) => handleTabOnChange(event, newValue), showLabels: true, sx: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: (theme) => theme.zIndex.drawer + 1,
+                    borderTop: 1,
+                    borderColor: 'divider',
+                    bgcolor: 'background.paper',
+                }, children: [tabs.map((t) => ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { label: t.name, icon: t.icon }, t.name))), loading && (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { label: "Loading", icon: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 18 }), disabled: true })] })] }));
+}

package/lib/commonjs/components/MainLayout/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTabs';

package/lib/commonjs/components/MainLayout/hooks/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useTabs"), exports);

package/lib/commonjs/components/MainLayout/hooks/useTabs.d.ts

@@ -0,0 +1,5 @@
+import { FederatedTab } from '../../../FederatedAddon';
+export declare function useTabs(): {
+    tabs: FederatedTab[];
+    loading: boolean;
+};

package/lib/commonjs/components/MainLayout/hooks/useTabs.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = useTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BugReport_1 = __importDefault(require("@mui/icons-material/BugReport"));
+const Extension_1 = __importDefault(require("@mui/icons-material/Extension"));
+const Restore_1 = __importDefault(require("@mui/icons-material/Restore"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const Terminal_1 = __importDefault(require("@mui/icons-material/Terminal"));
+const Config_1 = require("../../../Config");
+const AdminLogs_1 = require("../../../LogViewer/AdminLogs");
+const Dashboard_1 = require("../../../LogViewer/Dashboard");
+const LogSearch_1 = require("../../../LogViewer/LogSearch");
+const useFederatedAddon_1 = require("../../../useFederatedAddon");
+function useTabs() {
+    const { addons, loading } = (0, useFederatedAddon_1.useFederatedAddon)();
+    const allTabs = [
+        {
+            name: 'Events',
+            View: LogSearch_1.LogSearch,
+            icon: (0, jsx_runtime_1.jsx)(Restore_1.default, {}),
+        },
+        {
+            name: 'Logs',
+            View: AdminLogs_1.AdminLogs,
+            icon: (0, jsx_runtime_1.jsx)(Terminal_1.default, {}),
+        },
+        {
+            name: 'Errors',
+            View: Dashboard_1.Dashboard,
+            icon: (0, jsx_runtime_1.jsx)(BugReport_1.default, {}),
+        },
+        {
+            name: 'Advanced',
+            View: Config_1.Config,
+            icon: (0, jsx_runtime_1.jsx)(Settings_1.default, {}),
+        },
+        ...addons.map((addon) => (Object.assign(Object.assign({}, addon.tab), { icon: (0, jsx_runtime_1.jsx)(Extension_1.default, {}) }))),
+    ];
+    return {
+        tabs: allTabs,
+        loading,
+    };
+}

package/lib/commonjs/components/MainLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './MainLayout';

package/lib/commonjs/components/MainLayout/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MainLayout"), exports);

package/lib/commonjs/components/index.d.ts

@@ -10,5 +10,6 @@ export * from './GridItem';
 export * from './LastSeen';
 export * from './LoadingBox';
 export * from './LoadingSpinner';
+export * from './MainLayout';
 export * from './TabViewBox';
 export * from './TextInput';

package/lib/commonjs/components/index.js

@@ -26,5 +26,6 @@ __exportStar(require("./GridItem"), exports);
 __exportStar(require("./LastSeen"), exports);
 __exportStar(require("./LoadingBox"), exports);
 __exportStar(require("./LoadingSpinner"), exports);
+__exportStar(require("./MainLayout"), exports);
 __exportStar(require("./TabViewBox"), exports);
 __exportStar(require("./TextInput"), exports);

package/lib/esm/App/App.js

@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { Auth } from '../Auth/Auth';
-import { LogViewer } from '../LogViewer';
+import { MainLayout } from '../components';
 import { baseUrlsContext } from '../platformLogic/contexts';
 import { LoadingProvider } from '../view';
 import { WebSocketAuthProvider } from '../WebSocketAuthProvider';
@@ -19,5 +19,5 @@ export const App = ({ urlResolvers }) => {
         api: urlResolvers.getApiUrl(),
         ws: urlResolvers.getWsUrl(),
     }), [urlResolvers]);
-    return (_jsx(QpqContextProvider, { contextIdentifier: baseUrlsContext, value: baseUrls, children: _jsx(Router, { children: _jsx(BaseUrlProvider, { urlResolvers: urlResolvers, children: _jsxs(ThemeProvider, { theme: darkTheme, children: [_jsx(CssBaseline, {}), _jsx(LoadingProvider, { children: _jsx(Auth, { children: _jsx(WebsocketProvider, { wsUrl: urlResolvers.getWsUrl(), children: _jsx(WebSocketAuthProvider, { children: _jsx(LogViewer, {}) }) }) }) })] }) }) }) }));
+    return (_jsx(QpqContextProvider, { contextIdentifier: baseUrlsContext, value: baseUrls, children: _jsx(Router, { children: _jsx(BaseUrlProvider, { urlResolvers: urlResolvers, children: _jsxs(ThemeProvider, { theme: darkTheme, children: [_jsx(CssBaseline, {}), _jsx(LoadingProvider, { children: _jsx(Auth, { children: _jsx(WebsocketProvider, { wsUrl: urlResolvers.getWsUrl(), children: _jsx(WebSocketAuthProvider, { children: _jsx(MainLayout, {}) }) }) }) })] }) }) }) }));
 };

package/lib/esm/Config/Config.d.ts

@@ -0,0 +1,2 @@
+export declare function Config(): import("react/jsx-runtime").JSX.Element;
+export default Config;

package/lib/esm/Config/Config.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWebsocketSendEvent } from 'quidproquo-web-react';
+import { WebsocketAdminClientMessageEventType } from 'quidproquo-webserver';
+import { useState } from 'react';
+import { Box, CssBaseline, Drawer, List, ListItem, ListItemButton, ListItemText, Tab, Tabs, TextField, Toolbar, Typography } from '@mui/material';
+import { useOnMount } from '@mui/x-data-grid/internals';
+import { useServiceNames } from '../LogViewer/hooks';
+const drawerWidth = 240;
+const sections = ['General', 'Settings', 'Advanced'];
+export function Config() {
+    const [selectedServiceOverride, setSelectedServiceOverride] = useState('');
+    const [tabIndex, setTabIndex] = useState(0);
+    const [search, setSearch] = useState('');
+    const services = useServiceNames();
+    const sendMessage = useWebsocketSendEvent();
+    useOnMount(() => {
+        const configSyncRequestEvent = {
+            type: WebsocketAdminClientMessageEventType.ConfigSyncRequest,
+            payload: {},
+        };
+        sendMessage(configSyncRequestEvent);
+    });
+    const handleServiceClick = (service) => {
+        setSelectedServiceOverride(service);
+        setTabIndex(0);
+    };
+    const handleTabChange = (event, newIndex) => {
+        setTabIndex(newIndex);
+    };
+    const filteredServices = services.filter((s) => s.label.toLowerCase().includes(search.toLowerCase()));
+    const selectedService = selectedServiceOverride || services[0]?.label;
+    return (_jsxs(Box, { sx: { display: 'flex' }, children: [_jsx(CssBaseline, {}), _jsxs(Drawer, { variant: "permanent", sx: {
+                    width: drawerWidth,
+                    flexShrink: 0,
+                    [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+                }, children: [_jsx(Toolbar, { children: _jsx(TextField, { fullWidth: true, size: "small", variant: "outlined", placeholder: "Search services", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    setSearch(filteredServices[0]?.label);
+                                    handleServiceClick(filteredServices[0]?.label);
+                                }
+                            }, sx: { mt: 2 } }) }), _jsx(Box, { sx: { overflow: 'auto', p: 2 }, children: _jsx(List, { children: filteredServices.map((service) => (_jsx(ListItem, { disablePadding: true, children: _jsx(ListItemButton, { selected: service.label === selectedService, onClick: () => handleServiceClick(service.label), children: _jsx(ListItemText, { primary: service.label }) }) }, service.value))) }) })] }), _jsxs(Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [_jsxs(Typography, { variant: "h5", gutterBottom: true, children: [selectedService, " Service"] }), _jsx(Tabs, { value: tabIndex, onChange: handleTabChange, sx: { borderBottom: 1, borderColor: 'divider' }, children: sections.map((section, index) => (_jsx(Tab, { label: section }, index))) }), _jsxs(Box, { sx: { mt: 2 }, children: [sections[tabIndex] === 'General' && _jsxs(Typography, { children: ["General settings for ", selectedService] }), sections[tabIndex] === 'Settings' && _jsx(Typography, { children: "Custom configuration options" }), sections[tabIndex] === 'Advanced' && _jsx(Typography, { children: "Advanced tuning and overrides" })] })] })] }));
+}
+export default Config;

package/lib/esm/Config/index.d.ts

@@ -0,0 +1 @@
+export * from './Config';

package/lib/esm/Config/index.js

@@ -0,0 +1 @@
+export * from './Config';

package/lib/esm/FederatedAddon.d.ts

@@ -1,7 +1,7 @@
-import { ComponentType, MemoExoticComponent } from 'react';
 export type FederatedTab = {
     name: string;
-    View: ComponentType | MemoExoticComponent<ComponentType>;
+    View: React.ComponentType;
+    icon?: React.ReactElement;
 };
 export type FederatedAddon = {
     tab: FederatedTab;

package/lib/esm/components/MainLayout/MainLayout.d.ts

@@ -0,0 +1 @@
+export declare function MainLayout(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/MainLayout/MainLayout.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomNavigation, BottomNavigationAction, CircularProgress } from '@mui/material';
+import Box from '@mui/material/Box';
+import { useUrlFields } from '../../queryParams';
+import { useTabs } from './hooks';
+export function MainLayout() {
+    const { tabs, loading } = useTabs();
+    const { tab, handleTabOnChange } = useUrlFields();
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            width: '100%',
+        }, children: [_jsx(Box, { sx: {
+                    flexGrow: 1,
+                    overflow: 'auto',
+                    pb: '56px', // <— prevent content from being hidden behind bottom nav
+                }, children: tabs
+                    .filter((t, index) => index === tab)
+                    .map((tab) => (_jsx(tab.View, {}, tab.name))) }), _jsxs(BottomNavigation, { value: tab, onChange: (event, newValue) => handleTabOnChange(event, newValue), showLabels: true, sx: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: (theme) => theme.zIndex.drawer + 1,
+                    borderTop: 1,
+                    borderColor: 'divider',
+                    bgcolor: 'background.paper',
+                }, children: [tabs.map((t) => (_jsx(BottomNavigationAction, { label: t.name, icon: t.icon }, t.name))), loading && _jsx(BottomNavigationAction, { label: "Loading", icon: _jsx(CircularProgress, { size: 18 }), disabled: true })] })] }));
+}

package/lib/esm/components/MainLayout/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTabs';

package/lib/esm/components/MainLayout/hooks/index.js

@@ -0,0 +1 @@
+export * from './useTabs';

package/lib/esm/components/MainLayout/hooks/useTabs.d.ts

@@ -0,0 +1,5 @@
+import { FederatedTab } from '../../../FederatedAddon';
+export declare function useTabs(): {
+    tabs: FederatedTab[];
+    loading: boolean;
+};

package/lib/esm/components/MainLayout/hooks/useTabs.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BugReportIcon from '@mui/icons-material/BugReport';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import RestoreIcon from '@mui/icons-material/Restore';
+import SettingsIcon from '@mui/icons-material/Settings';
+import TerminalIcon from '@mui/icons-material/Terminal';
+import { Config } from '../../../Config';
+import { AdminLogs } from '../../../LogViewer/AdminLogs';
+import { Dashboard } from '../../../LogViewer/Dashboard';
+import { LogSearch } from '../../../LogViewer/LogSearch';
+import { useFederatedAddon } from '../../../useFederatedAddon';
+export function useTabs() {
+    const { addons, loading } = useFederatedAddon();
+    const allTabs = [
+        {
+            name: 'Events',
+            View: LogSearch,
+            icon: _jsx(RestoreIcon, {}),
+        },
+        {
+            name: 'Logs',
+            View: AdminLogs,
+            icon: _jsx(TerminalIcon, {}),
+        },
+        {
+            name: 'Errors',
+            View: Dashboard,
+            icon: _jsx(BugReportIcon, {}),
+        },
+        {
+            name: 'Advanced',
+            View: Config,
+            icon: _jsx(SettingsIcon, {}),
+        },
+        ...addons.map((addon) => ({
+            ...addon.tab,
+            icon: _jsx(ExtensionIcon, {}),
+        })),
+    ];
+    return {
+        tabs: allTabs,
+        loading,
+    };
+}

package/lib/esm/components/MainLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './MainLayout';

package/lib/esm/components/MainLayout/index.js

@@ -0,0 +1 @@
+export * from './MainLayout';

package/lib/esm/components/index.d.ts

@@ -10,5 +10,6 @@ export * from './GridItem';
 export * from './LastSeen';
 export * from './LoadingBox';
 export * from './LoadingSpinner';
+export * from './MainLayout';
 export * from './TabViewBox';
 export * from './TextInput';

package/lib/esm/components/index.js

@@ -10,5 +10,6 @@ export * from './GridItem';
 export * from './LastSeen';
 export * from './LoadingBox';
 export * from './LoadingSpinner';
+export * from './MainLayout';
 export * from './TabViewBox';
 export * from './TextInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-admin",
-  "version": "0.0.255",
+  "version": "0.0.256",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
-    "@module-federation/enhanced": "^0.8.9",
+    "@module-federation/enhanced": "^0.17.1",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.128",
     "@mui/material": "^5.12.2",
@@ -45,11 +45,11 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "javascript-time-ago": "^2.5.9",
-    "quidproquo-core": "0.0.255",
-    "quidproquo-tsconfig": "0.0.255",
-    "quidproquo-web": "0.0.255",
-    "quidproquo-web-react": "0.0.255",
-    "quidproquo-webserver": "0.0.255",
+    "quidproquo-core": "0.0.256",
+    "quidproquo-tsconfig": "0.0.256",
+    "quidproquo-web": "0.0.256",
+    "quidproquo-web-react": "0.0.256",
+    "quidproquo-webserver": "0.0.256",
     "react": ">=18.3.1",
     "react-d3-tree": "^3.6.0",
     "react-dom": "18.3.1",
@@ -78,7 +78,7 @@
     "typescript": "^5.8.2",
     "webpack": "^5.98.0",
     "webpack-cli": "^5.0.2",
-    "webpack-dev-server": "^4.13.3"
+    "webpack-dev-server": "^5.2.2"
   },
   "peerDependencies": {
     "react": ">=18.3.1"

package/lib/commonjs/LogViewer/LogViewer.d.ts

@@ -1,6 +0,0 @@
-import { FederatedTab } from '../FederatedAddon';
-export declare function useTabs(): {
-    tabs: FederatedTab[];
-    loading: boolean;
-};
-export declare function LogViewer(): import("react/jsx-runtime").JSX.Element;

package/lib/commonjs/LogViewer/LogViewer.js

@@ -1,60 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabs = useTabs;
-exports.LogViewer = LogViewer;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const queryParams_1 = require("../queryParams");
-const useFederatedAddon_1 = require("../useFederatedAddon");
-const AdminLogs_1 = require("./AdminLogs");
-const Dashboard_1 = require("./Dashboard");
-const LogSearch_1 = require("./LogSearch");
-function useTabs() {
-    const { addons, loading } = (0, useFederatedAddon_1.useFederatedAddon)();
-    const allTabs = [
-        // {
-        //   name: 'TEST',
-        //   View: RandomView,
-        // },
-        {
-            name: 'Events',
-            View: LogSearch_1.LogSearch,
-        },
-        {
-            name: 'Logs',
-            View: AdminLogs_1.AdminLogs,
-        },
-        {
-            name: 'Errors',
-            View: Dashboard_1.Dashboard,
-        },
-        ...addons.map((addon) => addon.tab),
-    ];
-    return {
-        tabs: allTabs,
-        loading,
-    };
-}
-function LogViewer() {
-    const { tabs, loading } = useTabs();
-    const { tab, handleTabOnChange } = (0, queryParams_1.useUrlFields)();
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            width: '100%',
-        }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: { flexGrow: 1, overflow: 'auto' }, children: tabs
-                    .filter((t, index) => index === tab)
-                    .map((tab) => ((0, jsx_runtime_1.jsx)(tab.View, {}, tab.name))) }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
-                    borderTop: 1,
-                    borderColor: 'divider',
-                    position: 'sticky',
-                    bottom: 0,
-                    bgcolor: 'background.paper',
-                    zIndex: 1,
-                }, children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, { value: tab, onChange: handleTabOnChange, centered: true, children: [tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: tab.name }, tab.name))), loading && (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 }) })] }) })] }));
-}

package/lib/commonjs/LogViewer/index.d.ts

@@ -1 +0,0 @@
-export * from './LogViewer';

package/lib/esm/LogViewer/LogViewer.d.ts

@@ -1,6 +0,0 @@
-import { FederatedTab } from '../FederatedAddon';
-export declare function useTabs(): {
-    tabs: FederatedTab[];
-    loading: boolean;
-};
-export declare function LogViewer(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/LogViewer/LogViewer.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircularProgress, Tab, Tabs } from '@mui/material';
-import Box from '@mui/material/Box';
-import { useUrlFields } from '../queryParams';
-import { useFederatedAddon } from '../useFederatedAddon';
-import { AdminLogs } from './AdminLogs';
-import { Dashboard } from './Dashboard';
-import { LogSearch } from './LogSearch';
-export function useTabs() {
-    const { addons, loading } = useFederatedAddon();
-    const allTabs = [
-        // {
-        //   name: 'TEST',
-        //   View: RandomView,
-        // },
-        {
-            name: 'Events',
-            View: LogSearch,
-        },
-        {
-            name: 'Logs',
-            View: AdminLogs,
-        },
-        {
-            name: 'Errors',
-            View: Dashboard,
-        },
-        ...addons.map((addon) => addon.tab),
-    ];
-    return {
-        tabs: allTabs,
-        loading,
-    };
-}
-export function LogViewer() {
-    const { tabs, loading } = useTabs();
-    const { tab, handleTabOnChange } = useUrlFields();
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            width: '100%',
-        }, children: [_jsx(Box, { sx: { flexGrow: 1, overflow: 'auto' }, children: tabs
-                    .filter((t, index) => index === tab)
-                    .map((tab) => (_jsx(tab.View, {}, tab.name))) }), _jsx(Box, { sx: {
-                    borderTop: 1,
-                    borderColor: 'divider',
-                    position: 'sticky',
-                    bottom: 0,
-                    bgcolor: 'background.paper',
-                    zIndex: 1,
-                }, children: _jsxs(Tabs, { value: tab, onChange: handleTabOnChange, centered: true, children: [tabs.map((tab, index) => (_jsx(Tab, { label: tab.name }, tab.name))), loading && _jsx(Tab, { label: _jsx(CircularProgress, { size: 16 }) })] }) })] }));
-}

package/lib/esm/LogViewer/index.d.ts

@@ -1 +0,0 @@
-export * from './LogViewer';

package/lib/esm/LogViewer/index.js

@@ -1 +0,0 @@
-export * from './LogViewer';