assets/stylesheets/App.css

@@ -37,8 +37,6 @@
 .ant-badge,
 .ant-select-dropdown,
 .ant-splitter,
-.ant-steps-item-title,
-.ant-steps-icon,
 [class*=' ant-radio'] {
   font-family: 'DM Sans';
 }
@@ -48,15 +46,6 @@
   font-family: 'DM Mono';
 }
 
-.ant-steps .ant-steps-item-icon {
-  line-height: 30px;
-  font-weight: 600;
-}
-
-.ant-steps .ant-steps-item-icon .anticon.anticon-check.ant-steps-finish-icon {
-  line-height: 32px;
-}
-
 .ant-typography .id-text {
   font-family: 'DM Mono';
   font-size: 11.9px;

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -14,7 +14,7 @@ const StockEvents = () => {
   const [viewMode, setViewMode] = useViewMode('stockEvents')
 
   const [columnVisibility, setColumnVisibility] =
-    useColumnVisibility('stockEvent')
+    useColumnVisibility('stockEvents')
 
   const actionItems = {
     items: [

src/components/Dashboard/Management/AuditLogs.jsx

@@ -11,7 +11,7 @@ const AuditLogs = () => {
   const tableRef = useRef()
 
   const [columnVisibility, updateColumnVisibility] =
-    useColumnVisibility('auditLog')
+    useColumnVisibility('auditLogs')
 
   const actionItems = {
     items: [

src/components/Dashboard/Management/CourierServices.jsx

@@ -54,8 +54,8 @@ const CourierServices = () => {
             <ColumnViewButton
               type='courierService'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='courierService' />
           </Space>

src/components/Dashboard/Management/Couriers.jsx

@@ -53,8 +53,8 @@ const Couriers = () => {
             <ColumnViewButton
               type='courier'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='courier' />
           </Space>

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -54,8 +54,8 @@ const DocumentJobs = () => {
             <ColumnViewButton
               type='documentJob'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='documentJob' />
           </Space>

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -53,8 +53,8 @@ const DocumentPrinters = () => {
             <ColumnViewButton
               type='documentPrinter'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='documentPrinter' />
           </Space>

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -54,8 +54,8 @@ const DocumentTemplates = () => {
             <ColumnViewButton
               type='documentTemplate'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='documentTemplate' />
           </Space>

src/components/Dashboard/Management/Files.jsx

@@ -42,8 +42,8 @@ const Files = () => {
             <ColumnViewButton
               type='file'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='file' />
           </Space>

src/components/Dashboard/Management/Hosts.jsx

@@ -84,7 +84,6 @@ const Hosts = () => {
           open={newHostOpen}
           footer={null}
           width={700}
-          destroyOnHidden={true}
           onCancel={() => {
             setNewHostOpen(false)
           }}

src/components/Dashboard/Management/Hosts/NewHost.jsx

@@ -1,14 +1,21 @@
 import PropTypes from 'prop-types'
+import { useState } from 'react'
+import { useMediaQuery } from 'react-responsive'
+import { Typography, Flex, Steps, Divider } from 'antd'
+
 import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
-import WizardView from '../../common/WizardView'
+import NewObjectButtons from '../../common/NewObjectButtons'
+
+const { Title } = Typography
 
 const NewHost = ({ onOk }) => {
+  const [currentStep, setCurrentStep] = useState(0)
+
+  const isMobile = useMediaQuery({ maxWidth: 768 })
+
   return (
-    <NewObjectForm
-      type={'host'}
-      defaultValues={{ active: true, state: { type: 'offline' } }}
-    >
+    <NewObjectForm type={'host'}>
       {({ handleSubmit, submitLoading, objectData, formValid }) => {
         const steps = [
           {
@@ -36,20 +43,6 @@ const NewHost = ({ onOk }) => {
                 isEditing={true}
                 required={false}
                 objectData={objectData}
-                visibleProperties={{
-                  _id: false,
-                  createdAt: false,
-                  updatedAt: false,
-                  operatingSystem: false,
-                  'deviceInfo.os': false,
-                  'deviceInfo.os.hostname': false,
-                  'deviceInfo.cpu': false,
-                  'deviceInfo.cpu.model': false,
-                  'deviceInfo.user.username': false,
-                  'deviceInfo.user.homedir': false,
-                  'deviceInfo.process.nodeVersion': false,
-                  files: false
-                }}
               />
             )
           },
@@ -64,18 +57,7 @@ const NewHost = ({ onOk }) => {
                 visibleProperties={{
                   _id: false,
                   createdAt: false,
-                  updatedAt: false,
-                  operatingSystem: false,
-                  'deviceInfo.os': false,
-                  'deviceInfo.os.hostname': false,
-                  'deviceInfo.cpu': false,
-                  'deviceInfo.cpu.model': false,
-                  'deviceInfo.user.username': false,
-                  'deviceInfo.user.homedir': false,
-                  'deviceInfo.process.nodeVersion': false,
-                  files: false,
-                  connectedAt: false,
-                  online: false
+                  updatedAt: false
                 }}
                 isEditing={false}
                 objectData={objectData}
@@ -84,18 +66,45 @@ const NewHost = ({ onOk }) => {
           }
         ]
         return (
-          <WizardView
-            steps={steps}
-            loading={submitLoading}
-            formValid={formValid}
-            title='New Host'
+          <Flex gap='middle'>
+            {!isMobile && (
+              <div style={{ minWidth: '160px' }}>
+                <Steps
+                  current={currentStep}
+                  items={steps}
+                  direction='vertical'
+                  style={{ width: 'fit-content' }}
+                />
+              </div>
+            )}
+
+            {!isMobile && (
+              <Divider type='vertical' style={{ height: 'unset' }} />
+            )}
+
+            <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
+              <Title level={2} style={{ margin: 0 }}>
+                New Host
+              </Title>
+              <div style={{ minHeight: '260px', marginBottom: 8 }}>
+                {steps[currentStep].content}
+              </div>
+              <NewObjectButtons
+                currentStep={currentStep}
+                totalSteps={steps.length}
+                onPrevious={() => setCurrentStep((prev) => prev - 1)}
+                onNext={() => setCurrentStep((prev) => prev + 1)}
                 onSubmit={async () => {
                   const result = await handleSubmit()
                   if (result) {
                     onOk()
                   }
                 }}
+                formValid={formValid}
+                submitLoading={submitLoading}
               />
+            </Flex>
+          </Flex>
         )
       }}
     </NewObjectForm>

src/components/Dashboard/Management/NoteTypes.jsx

@@ -54,8 +54,8 @@ const NoteTypes = () => {
             <ColumnViewButton
               type='noteType'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='noteType' />
           </Space>

src/components/Dashboard/Management/Parts.jsx

@@ -58,8 +58,8 @@ const Parts = (filter) => {
             <ColumnViewButton
               type='part'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='part' />
           </Space>

src/components/Dashboard/Management/Products.jsx

@@ -231,7 +231,7 @@ const Products = () => {
   ]
 
   const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
-    'product',
+    'Products',
     columns
   )
 

src/components/Dashboard/Management/TaxRates.jsx

@@ -53,8 +53,8 @@ const TaxRates = () => {
             <ColumnViewButton
               type='taxRate'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='taxRate' />
           </Space>

src/components/Dashboard/Management/Vendors.jsx

@@ -53,8 +53,8 @@ const Vendors = () => {
             <ColumnViewButton
               type='vendor'
               loading={false}
-              visibleState={columnVisibility}
-              updateVisibleState={setColumnVisibility}
+              collapseState={columnVisibility}
+              updateCollapseState={setColumnVisibility}
             />
             <ExportListButton objectType='vendor' />
           </Space>

src/components/Dashboard/common/WizardView.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useMediaQuery } from 'react-responsive'
-import CheckIcon from '../../Icons/CheckIcon'
 import {
   Typography,
   Flex,
@@ -41,17 +40,7 @@ const WizardView = ({
           <div style={{ minWidth: sideBarGrow == true ? '100%' : '160px' }}>
             <Steps
               current={currentStep}
-              items={steps.map((step, index) => ({
-                ...step,
-                icon:
-                  index < currentStep ? (
-                    <div className='ant-steps-item-icon'>
-                      <CheckIcon />
-                    </div>
-                  ) : (
-                    step.icon
-                  )
-              }))}
+              items={steps}
               direction='vertical'
               style={{ width: 'fit-content' }}
             />

src/components/Dashboard/hooks/useColumnVisibility.jsx

@@ -1,22 +1,13 @@
 import { useState, useEffect } from 'react'
 import { getModelByName } from '../../../database/ObjectModels'
 
-const useColumnVisibility = (type, customColumns) => {
+const useColumnVisibility = (type) => {
   const getInitialVisibility = () => {
-    const storageKey = `${type}_columnVisibility`
-    const stored = sessionStorage.getItem(storageKey)
+    const stored = sessionStorage.getItem(`${type}_columnVisibility`)
     if (stored) {
       return JSON.parse(stored)
     }
     // Default visibility - all columns visible
-    if (customColumns && Array.isArray(customColumns)) {
-      return customColumns.reduce((acc, col) => {
-        if (col.key) {
-          acc[col.key] = true
-        }
-        return acc
-      }, {})
-    }
     const model = getModelByName(type)
     const columns = model.columns || []
     return columns.reduce((acc, columnName) => {

src/database/models/Host.js

@@ -28,6 +28,13 @@ export const Host = {
       url: (_id) =>
         `/dashboard/management/hosts/info?hostId=${_id}&action=reload`
     },
+    {
+      name: 'connect',
+      label: 'Connect',
+      icon: OTPIcon,
+      url: (_id) =>
+        `/dashboard/management/hosts/info?hostId=${_id}&action=hostOTP`
+    },
     {
       name: 'edit',
       label: 'Edit',
@@ -58,16 +65,6 @@ export const Host = {
       visible: (objectData) => {
         return objectData?._isEditing && objectData?._isEditing == true
       }
-    },
-    {
-      type: 'divider'
-    },
-    {
-      name: 'connect',
-      label: 'Connect',
-      icon: OTPIcon,
-      url: (_id) =>
-        `/dashboard/management/hosts/info?hostId=${_id}&action=hostOTP`
     }
   ],
   columns: ['name', '_reference', 'state', 'tags', 'connectedAt'],