assets/stylesheets/App.css

@@ -361,11 +361,6 @@ code {
   padding: 8px !important;
 }
 
-.cursor-tooltip .ant-card {
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-
 /* --- Start of src/index.css --- */
 body {
   margin: 0;
@@ -1342,29 +1337,6 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   vertical-align: middle;
 }
 
-.permissions-matrix:hover .ant-table-tbody > tr > .ant-table-cell {
-  box-shadow: inset 0 0 0 100vmax
-    color-mix(
-      in srgb,
-      var(--color-text)
-        calc(
-          4% *
-            (
-              1 -
-                min(
-                  1,
-                  abs(
-                    calc(
-                      var(--permissions-col, 0) - var(--permissions-hovered-col, -1)
-                    )
-                  )
-                )
-            )
-        ),
-      transparent
-    );
-}
-
 .permissions-matrix-table .permissions-matrix-group-row > .ant-table-cell {
   font-weight: 600;
   background-color: color-mix(

src/App.jsx

@@ -30,7 +30,6 @@ import { ApiServerProvider } from './components/Dashboard/context/ApiServerConte
 import { NotificationProvider } from './components/Dashboard/context/NotificationContext.jsx'
 import { ElectronProvider } from './components/Dashboard/context/ElectronContext.jsx'
 import { MessageProvider } from './components/Dashboard/context/MessageContext.jsx'
-import { TooltipProvider } from './components/Dashboard/context/TooltipContext.jsx'
 import { AppUpdateProvider } from './components/Dashboard/context/AppUpdateContext.jsx'
 import AuthCallback from './components/App/AuthCallback.jsx'
 import EmailNotificationTemplate from './components/Email/EmailNotificationTemplate.jsx'
@@ -86,14 +85,13 @@ const AppContent = () => {
               <PrintServerProvider>
                 <ApiServerProvider>
                   <MessageProvider>
-                    <TooltipProvider>
+                    <TableStateProvider>
-                      <TableStateProvider>
+                      <AppUpdateProvider>
-                        <AppUpdateProvider>
+                        <NotificationProvider>
-                          <NotificationProvider>
+                          <SpotlightProvider>
-                            <SpotlightProvider>
+                            <ActionsModalProvider>
-                              <ActionsModalProvider>
+                              <ActionsProvider>
-                                <ActionsProvider>
+                                <Routes>
-                                  <Routes>
                                   <Route
                                     path='/applaunch'
                                     element={<AuthLaunch />}
@@ -164,13 +162,12 @@ const AppContent = () => {
                                     }
                                   />
                                 </Routes>
-                                </ActionsProvider>
+                              </ActionsProvider>
-                              </ActionsModalProvider>
+                            </ActionsModalProvider>
-                            </SpotlightProvider>
+                          </SpotlightProvider>
-                          </NotificationProvider>
+                        </NotificationProvider>
-                        </AppUpdateProvider>
+                      </AppUpdateProvider>
-                      </TableStateProvider>
+                    </TableStateProvider>
-                    </TooltipProvider>
                   </MessageProvider>
                 </ApiServerProvider>
               </PrintServerProvider>

src/codemirror/fcTemplateLang/index.js

@@ -8,8 +8,11 @@ import {
 } from '@codemirror/language'
 import { styleTags, tags as t } from '@lezer/highlight'
 import { parseMixed } from '@lezer/common'
-import { javascriptLanguage } from '@codemirror/lang-javascript'
+import {
-import { javascriptCompletionSources } from '../javascriptLang'
+  javascriptLanguage,
+  scopeCompletionSource,
+  localCompletionSource
+} from '@codemirror/lang-javascript'
 import {
   xmlLanguage,
   completeFromSchema,
@@ -106,7 +109,7 @@ export function fcTemplateLang(options = {}) {
     }),
     autoCloseTags,
     javascriptLanguage.data.of({
-      autocomplete: javascriptCompletionSources(jsScope)
+      autocomplete: [localCompletionSource, scopeCompletionSource(jsScope)]
     })
   ])
 }

src/codemirror/javascriptLang/index.js

@@ -1,60 +0,0 @@
-import { completeFromList } from '@codemirror/autocomplete'
-import {
-  javascript,
-  javascriptLanguage,
-  localCompletionSource,
-  scopeCompletionSource,
-  snippets
-} from '@codemirror/lang-javascript'
-import { nodeJsScope } from './nodeScope.js'
-
-function extraScope(autoCompleteObject) {
-  let data = autoCompleteObject
-  if (typeof data === 'string') {
-    try {
-      data = JSON.parse(data)
-    } catch {
-      data = {}
-    }
-  }
-  if (!data || typeof data !== 'object' || Array.isArray(data)) {
-    return {}
-  }
-  return data
-}
-
-export function nodeScopeCompletionSource(autoCompleteObject) {
-  return scopeCompletionSource({
-    ...nodeJsScope,
-    ...extraScope(autoCompleteObject)
-  })
-}
-
-/**
- * Completions for mixed languages that mount `javascriptLanguage`
- * without `javascript()` (snippets + locals + Node globals).
- */
-export function javascriptCompletionSources(autoCompleteObject) {
-  return [
-    completeFromList(snippets),
-    localCompletionSource,
-    nodeScopeCompletionSource(autoCompleteObject)
-  ]
-}
-
-/**
- * JavaScript language support with Node.js globals, snippets, and
- * local-variable completion.
- * @param {{ autoCompleteObject?: object|string }} [options]
- */
-export function javascriptLang(options = {}) {
-  const { autoCompleteObject } = options
-  return [
-    javascript(),
-    javascriptLanguage.data.of({
-      autocomplete: nodeScopeCompletionSource(autoCompleteObject)
-    })
-  ]
-}
-
-export { nodeJsScope }

src/codemirror/javascriptLang/nodeScope.js

@@ -1,200 +0,0 @@
-/** No-op used so Node APIs enumerate as functions in completions. */
-function fn() {}
-
-const streamLike = {
-  write: fn,
-  end: fn,
-  cork: fn,
-  uncork: fn,
-  on: fn,
-  once: fn,
-  off: fn,
-  emit: fn,
-  pipe: fn,
-  isTTY: false
-}
-
-const nodeProcess = {
-  env: {},
-  argv: ['node'],
-  argv0: 'node',
-  execArgv: [],
-  execPath: '',
-  cwd: fn,
-  chdir: fn,
-  exit: fn,
-  exitCode: 0,
-  nextTick: fn,
-  pid: 0,
-  ppid: 0,
-  platform: 'linux',
-  arch: 'x64',
-  version: 'v20.0.0',
-  versions: { node: '20.0.0' },
-  title: 'node',
-  stdout: streamLike,
-  stderr: { ...streamLike },
-  stdin: { on: fn, once: fn, read: fn, isTTY: false },
-  hrtime: Object.assign(fn, { bigint: fn }),
-  uptime: fn,
-  memoryUsage: fn,
-  cpuUsage: fn,
-  resourceUsage: fn,
-  abort: fn,
-  kill: fn,
-  getuid: fn,
-  getgid: fn,
-  setuid: fn,
-  setgid: fn,
-  umask: fn,
-  binding: fn,
-  dlopen: fn,
-  features: {},
-  config: {},
-  release: { name: 'node' }
-}
-
-const BufferStub = Object.assign(fn, {
-  from: fn,
-  alloc: fn,
-  allocUnsafe: fn,
-  allocUnsafeSlow: fn,
-  concat: fn,
-  isBuffer: fn,
-  isEncoding: fn,
-  byteLength: fn,
-  compare: fn,
-  prototype: {}
-})
-
-const requireFn = Object.assign(fn, {
-  resolve: Object.assign(fn, { paths: fn }),
-  cache: {},
-  extensions: {},
-  main: {}
-})
-
-/**
- * Scope object for CodeMirror `scopeCompletionSource`.
- * Browser-only globals (`window`, `document`, …) are omitted.
- */
-export function createNodeJsScope() {
-  const scope = {
-    process: nodeProcess,
-    Buffer: BufferStub,
-    require: requireFn,
-    module: {
-      exports: {},
-      require: requireFn,
-      id: '.',
-      filename: '',
-      dirname: '',
-      paths: [],
-      loaded: false,
-      children: [],
-      parent: null
-    },
-    exports: {},
-    __dirname: '',
-    __filename: '',
-    console,
-    setTimeout,
-    clearTimeout,
-    setInterval,
-    clearInterval,
-    setImmediate: fn,
-    clearImmediate: fn,
-    queueMicrotask,
-    fetch,
-    URL,
-    URLSearchParams,
-    TextEncoder,
-    TextDecoder,
-    AbortController,
-    AbortSignal,
-    Event,
-    EventTarget,
-    Request,
-    Response,
-    Headers,
-    FormData,
-    Blob,
-    structuredClone,
-    performance,
-    crypto,
-    atob,
-    btoa,
-    WebAssembly,
-    Promise,
-    Map,
-    Set,
-    WeakMap,
-    WeakSet,
-    Array,
-    Object,
-    String,
-    Number,
-    Boolean,
-    Symbol,
-    BigInt,
-    Date,
-    RegExp,
-    Error,
-    TypeError,
-    RangeError,
-    SyntaxError,
-    URIError,
-    EvalError,
-    ReferenceError,
-    JSON,
-    Math,
-    Intl,
-    Proxy,
-    Reflect,
-    ArrayBuffer,
-    DataView,
-    Int8Array,
-    Uint8Array,
-    Uint8ClampedArray,
-    Int16Array,
-    Uint16Array,
-    Int32Array,
-    Uint32Array,
-    Float32Array,
-    Float64Array,
-    BigInt64Array,
-    BigUint64Array,
-    Infinity,
-    NaN,
-    parseInt,
-    parseFloat,
-    isNaN,
-    isFinite,
-    encodeURI,
-    decodeURI,
-    encodeURIComponent,
-    decodeURIComponent,
-    eval,
-    Function
-  }
-
-  if (typeof File !== 'undefined') scope.File = File
-  if (typeof globalThis.WeakRef !== 'undefined') {
-    scope.WeakRef = globalThis.WeakRef
-  }
-  if (typeof globalThis.FinalizationRegistry !== 'undefined') {
-    scope.FinalizationRegistry = globalThis.FinalizationRegistry
-  }
-  if (typeof globalThis.AggregateError !== 'undefined') {
-    scope.AggregateError = globalThis.AggregateError
-  }
-  if (typeof SharedArrayBuffer !== 'undefined') {
-    scope.SharedArrayBuffer = SharedArrayBuffer
-  }
-
-  scope.global = scope
-  scope.globalThis = scope
-  return scope
-}
-
-export const nodeJsScope = createNodeJsScope()

src/components/Dashboard/Finance/Invoices.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import NewInvoice from './Invoices/NewInvoice'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Invoices = () => {
+  const [newInvoiceOpen, setNewInvoiceOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('invoices')
@@ -26,17 +29,37 @@ const Invoices = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Invoices')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Invoice',
+        key: 'newInvoice',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newInvoice') {
+        setNewInvoiceOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='invoice'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='invoice'
               loading={false}
@@ -79,6 +102,24 @@ const Invoices = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newInvoiceOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewInvoiceOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewInvoice
+          onOk={() => {
+            setNewInvoiceOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newInvoiceOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx

@@ -98,7 +98,6 @@ const InvoiceInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='invoice'
-              pageName='info'
               id={invoiceId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Finance/Payments.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import NewPayment from './Payments/NewPayment'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Payments = () => {
+  const [newPaymentOpen, setNewPaymentOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('payments')
@@ -26,17 +29,37 @@ const Payments = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Payments')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Payment',
+        key: 'newPayment',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPayment') {
+        setNewPaymentOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='payment'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='payment'
               loading={false}
@@ -79,6 +102,24 @@ const Payments = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newPaymentOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewPaymentOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewPayment
+          onOk={() => {
+            setNewPaymentOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newPaymentOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Finance/Payments/PaymentInfo.jsx

@@ -91,7 +91,6 @@ const PaymentInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='payment'
-              pageName='info'
               id={paymentId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Finance/TaxRecords.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewTaxRecord from './TaxRecords/NewTaxRecord'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const TaxRecords = () => {
+  const [newTaxRecordOpen, setNewTaxRecordOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('taxRecord')
@@ -26,17 +29,37 @@ const TaxRecords = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('TaxRecords')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Tax Record',
+        key: 'newTaxRecord',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newTaxRecord') {
+        setNewTaxRecordOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='taxRecord'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='taxRecord'
               loading={false}
@@ -79,6 +102,21 @@ const TaxRecords = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newTaxRecordOpen}
+        onCancel={() => setNewTaxRecordOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewTaxRecord
+          onOk={() => {
+            setNewTaxRecordOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newTaxRecordOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx

@@ -81,7 +81,6 @@ const TaxRecordInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='taxRecord'
-              pageName='info'
                 id={taxRecordId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/FilamentStocks.jsx

@@ -1,12 +1,14 @@
 // src/filamentStocks.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewFilamentStock from './FilamentStocks/NewFilamentStock'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -19,6 +21,7 @@ import ExportListButton from '../common/ExportListButton'
 const FilamentStocks = () => {
   const tableRef = useRef()
 
+  const [newFilamentStockOpen, setNewFilamentStockOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('filamentStocks')
 
@@ -31,17 +34,37 @@ const FilamentStocks = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('FilamentStocks')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Filament Stock',
+        key: 'newFilamentStock',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newFilamentStock') {
+        setNewFilamentStockOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='filamentStock'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='filamentStock'
               loading={false}
@@ -85,6 +108,24 @@ const FilamentStocks = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newFilamentStockOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewFilamentStockOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewFilamentStock
+          onOk={() => {
+            setNewFilamentStockOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newFilamentStockOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx

@@ -79,7 +79,6 @@ const FilamentStockInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='filamentStock'
-              pageName='info'
                 id={filamentStockId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/OrderItems.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewOrderItem from './OrderItems/NewOrderItem'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const OrderItems = () => {
+  const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('orderItems')
@@ -26,17 +29,37 @@ const OrderItems = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('OrderItems')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Order Item',
+        key: 'newOrderItem',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newOrderItem') {
+        setNewOrderItemOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='orderItem'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='orderItem'
               loading={false}
@@ -79,6 +102,24 @@ const OrderItems = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newOrderItemOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewOrderItemOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewOrderItem
+          onOk={() => {
+            setNewOrderItemOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newOrderItemOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx

@@ -85,7 +85,6 @@ const OrderItemInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='orderItem'
-              pageName='info'
                 id={orderItemId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/PartStocks.jsx

@@ -1,12 +1,14 @@
 // src/partStocks.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewPartStock from './PartStocks/NewPartStock'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -19,6 +21,7 @@ import ExportListButton from '../common/ExportListButton'
 const PartStocks = () => {
   const tableRef = useRef()
 
+  const [newPartStockOpen, setNewPartStockOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('partStocks')
 
@@ -31,17 +34,37 @@ const PartStocks = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('PartStocks')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Part Stock',
+        key: 'newPartStock',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPartStock') {
+        setNewPartStockOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='partStock'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='partStock'
               loading={false}
@@ -85,6 +108,24 @@ const PartStocks = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newPartStockOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewPartStockOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewPartStock
+          onOk={() => {
+            setNewPartStockOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newPartStockOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx

@@ -87,7 +87,6 @@ const PartStockInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='partStock'
-              pageName='info'
                 id={partStockId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/ProductStocks.jsx

@@ -1,13 +1,15 @@
 // src/components/Dashboard/Inventory/ProductStocks.jsx
 // ProductStocks - tracks assembled products consisting of part stocks
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewProductStock from './ProductStocks/NewProductStock'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -20,6 +22,7 @@ import ExportListButton from '../common/ExportListButton'
 const ProductStocks = () => {
   const tableRef = useRef()
 
+  const [newProductStockOpen, setNewProductStockOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('productStocks')
 
@@ -32,17 +35,37 @@ const ProductStocks = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('ProductStocks')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Product Stock',
+        key: 'newProductStock',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newProductStock') {
+        setNewProductStockOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='productStock'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='productStock'
               loading={false}
@@ -86,6 +109,24 @@ const ProductStocks = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newProductStockOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewProductStockOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewProductStock
+          onOk={() => {
+            setNewProductStockOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newProductStockOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx

@@ -104,7 +104,6 @@ const ProductStockInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='productStock'
-              pageName='info'
               id={productStockId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/PurchaseOrders.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewPurchaseOrder from './PurchaseOrders/NewPurchaseOrder'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const PurchaseOrders = () => {
+  const [newPurchaseOrderOpen, setNewPurchaseOrderOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('purchaseOrders')
@@ -26,17 +29,37 @@ const PurchaseOrders = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('PurchaseOrders')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Purchase Order',
+        key: 'newPurchaseOrder',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPurchaseOrder') {
+        setNewPurchaseOrderOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='purchaseOrder'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='purchaseOrder'
               loading={false}
@@ -79,6 +102,24 @@ const PurchaseOrders = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newPurchaseOrderOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewPurchaseOrderOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewPurchaseOrder
+          onOk={() => {
+            setNewPurchaseOrderOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newPurchaseOrderOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx

@@ -109,7 +109,6 @@ const PurchaseOrderInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='purchaseOrder'
-              pageName='info'
               id={purchaseOrderId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/Shipments.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewShipment from './Shipments/NewShipment'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Shipments = () => {
+  const [newShipmentOpen, setNewShipmentOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('shipments')
@@ -26,17 +29,37 @@ const Shipments = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Shipments')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Shipment',
+        key: 'newShipment',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newShipment') {
+        setNewShipmentOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='shipment'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='shipment'
               loading={false}
@@ -79,6 +102,24 @@ const Shipments = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newShipmentOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewShipmentOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewShipment
+          onOk={() => {
+            setNewShipmentOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newShipmentOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx

@@ -119,7 +119,6 @@ const PurchaseOrderInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='purchaseOrder'
-              pageName='info'
                 id={purchaseOrderId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx

@@ -94,7 +94,6 @@ const ShipmentInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='shipment'
-              pageName='info'
               id={shipmentId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/StockAudits.jsx

@@ -1,12 +1,14 @@
 // src/stockAudits.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewStockAudit from './StockAudits/NewStockAudit'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -19,6 +21,7 @@ import ExportListButton from '../common/ExportListButton'
 const StockAudits = () => {
   const tableRef = useRef()
 
+  const [newStockAuditOpen, setNewStockAuditOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('stockAudits')
 
@@ -31,17 +34,37 @@ const StockAudits = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('StockAudits')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Stock audit',
+        key: 'newStockAudit',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newStockAudit') {
+        setNewStockAuditOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='stockAudit'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='stockAudit'
               loading={false}
@@ -85,6 +108,24 @@ const StockAudits = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newStockAuditOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewStockAuditOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewStockAudit
+          onOk={() => {
+            setNewStockAuditOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newStockAuditOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx

@@ -83,7 +83,6 @@ const StockAuditInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='stockAudit'
-              pageName='info'
                 id={stockAuditId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -1,8 +1,7 @@
 import { useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown } from 'antd'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -11,6 +10,7 @@ import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
+import ReloadIcon from '../../Icons/ReloadIcon'
 
 const StockEvents = () => {
   const tableRef = useRef()
@@ -25,17 +25,29 @@ const StockEvents = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('StockEvents')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='stockEvent'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='stockEvent'
               loading={false}

src/components/Dashboard/Inventory/StockLocations.jsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewStockLocation from './StockLocations/NewStockLocation'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,6 +19,7 @@ import ExportListButton from '../common/ExportListButton'
 const StockLocations = () => {
   const tableRef = useRef()
 
+  const [newOpen, setNewOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('stockLocations')
 
@@ -29,17 +32,37 @@ const StockLocations = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('StockLocations')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Stock Location',
+        key: 'new',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'new') {
+        setNewOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='stockLocation'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='stockLocation'
               loading={false}
@@ -83,6 +106,24 @@ const StockLocations = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={640}
+        onCancel={() => {
+          setNewOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewStockLocation
+          onOk={() => {
+            setNewOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx

@@ -84,7 +84,6 @@ const StockLocationInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='stockLocation'
-              pageName='info'
                 id={stockLocationId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Inventory/StockTransfers.jsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewStockTransfer from './StockTransfers/NewStockTransfer'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,6 +19,7 @@ import ExportListButton from '../common/ExportListButton'
 const StockTransfers = () => {
   const tableRef = useRef()
 
+  const [newOpen, setNewOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('stockTransfers')
 
@@ -29,17 +32,37 @@ const StockTransfers = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('StockTransfers')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Stock Transfer',
+        key: 'new',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'new') {
+        setNewOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='stockTransfer'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='stockTransfer'
               loading={false}
@@ -83,6 +106,24 @@ const StockTransfers = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={740}
+        onCancel={() => {
+          setNewOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewStockTransfer
+          onOk={() => {
+            setNewOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx

@@ -94,7 +94,6 @@ const StockTransferInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='stockTransfer'
-              pageName='info'
               id={stockTransferId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/AppPasswords.jsx

@@ -1,9 +1,11 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewAppPassword from './AppPasswords/NewAppPassword'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -13,6 +15,7 @@ import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const AppPasswords = () => {
+  const [newAppPasswordOpen, setNewAppPasswordOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('appPassword')
@@ -25,17 +28,37 @@ const AppPasswords = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('AppPasswords')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New App Password',
+        key: 'newAppPassword',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newAppPassword') {
+        setNewAppPasswordOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='appPassword'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='appPassword'
               loading={false}
@@ -79,6 +102,22 @@ const AppPasswords = () => {
           useSortInUrl={true}
         />
 
+        <Modal
+          open={newAppPasswordOpen}
+          footer={null}
+          width={700}
+          onCancel={() => {
+            setNewAppPasswordOpen(false)
+          }}
+        >
+          <NewAppPassword
+            onOk={() => {
+              setNewAppPasswordOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newAppPasswordOpen}
+          />
+        </Modal>
       </Flex>
     </>
   )

src/components/Dashboard/Management/AppPasswords/AppPasswordInfo.jsx

@@ -80,7 +80,6 @@ const AppPasswordInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='appPassword'
-              pageName='info'
               id={appPasswordId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/AuditLogs.jsx

@@ -1,11 +1,11 @@
 import { useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown } from 'antd'
 
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -23,17 +23,29 @@ const AuditLogs = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('AuditLogs')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='auditLog'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='auditLog'
               loading={false}

src/components/Dashboard/Management/CourierServices.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewCourierService from './CourierServices/NewCourierService'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const CourierServices = () => {
+  const [newCourierServiceOpen, setNewCourierServiceOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('courierService')
@@ -26,17 +29,37 @@ const CourierServices = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('CourierServices')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Courier Service',
+        key: 'newCourierService',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newCourierService') {
+        setNewCourierServiceOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='courierService'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='courierService'
               loading={false}
@@ -79,6 +102,21 @@ const CourierServices = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newCourierServiceOpen}
+        onCancel={() => setNewCourierServiceOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewCourierService
+          onOk={() => {
+            setNewCourierServiceOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newCourierServiceOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx

@@ -83,7 +83,6 @@ const CourierServiceInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='courierService'
-              pageName='info'
                 id={courierServiceId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/Couriers.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewCourier from './Couriers/NewCourier'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Couriers = () => {
+  const [newCourierOpen, setNewCourierOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('courier')
@@ -25,17 +28,37 @@ const Couriers = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Couriers')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Courier',
+        key: 'newCourier',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newCourier') {
+        setNewCourierOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='courier'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='courier'
               loading={false}
@@ -78,6 +101,21 @@ const Couriers = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newCourierOpen}
+        onCancel={() => setNewCourierOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewCourier
+          onOk={() => {
+            setNewCourierOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newCourierOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/Couriers/CourierInfo.jsx

@@ -79,7 +79,6 @@ const CourierInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='courier'
-              pageName='info'
                 id={courierId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewDocumentJob from './DocumentJobs/NewDocumentJob'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const DocumentJobs = () => {
+  const [newDocumentJobOpen, setNewDocumentJobOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('documentJob')
@@ -26,17 +29,37 @@ const DocumentJobs = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('DocumentJobs')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Document Job',
+        key: 'newDocumentJob',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newDocumentJob') {
+        setNewDocumentJobOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='documentJob'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='documentJob'
               loading={false}
@@ -79,6 +102,21 @@ const DocumentJobs = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newDocumentJobOpen}
+        onCancel={() => setNewDocumentJobOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={900}
+      >
+        <NewDocumentJob
+          onOk={() => {
+            setNewDocumentJobOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newDocumentJobOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx

@@ -80,7 +80,6 @@ const DocumentJobInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentJob'
-              pageName='info'
                 id={documentJobId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -1,7 +1,8 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import PlusIcon from '../../Icons/PlusIcon'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -11,9 +12,11 @@ import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
+import NewDocumentPrinter from './DocumentPrinters/NewDocumentPrinter'
 
 const DocumentPrinters = () => {
   const tableRef = useRef()
+  const [newDocumentPrinterOpen, setNewDocumentPrinterOpen] = useState(false)
   const [viewMode, setViewMode] = useViewMode('documentPrinter')
 
   const [columnVisibility, setColumnVisibility] =
@@ -25,17 +28,37 @@ const DocumentPrinters = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('DocumentPrinters')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Document Printer',
+        key: 'newDocumentPrinter',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newDocumentPrinter') {
+        setNewDocumentPrinterOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='documentPrinter'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='documentPrinter'
               loading={false}
@@ -78,6 +101,21 @@ const DocumentPrinters = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newDocumentPrinterOpen}
+        onCancel={() => setNewDocumentPrinterOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewDocumentPrinter
+          onOk={() => {
+            setNewDocumentPrinterOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newDocumentPrinterOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx

@@ -85,7 +85,6 @@ const DocumentPrinterInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentPrinter'
-              pageName='info'
                 id={documentPrinterId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/DocumentSizes.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewDocumentSize from './DocumentSizes/NewDocumentSize'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const DocumentSizes = () => {
+  const [newDocumentSizeOpen, setNewDocumentSizeOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('documentSize')
   const [columnVisibility, setColumnVisibility] =
@@ -24,17 +27,37 @@ const DocumentSizes = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('DocumentSizes')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Document Size',
+        key: 'newDocumentSize',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newDocumentSize') {
+        setNewDocumentSizeOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='documentSize'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='documentSize'
               loading={false}
@@ -77,6 +100,21 @@ const DocumentSizes = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newDocumentSizeOpen}
+        onCancel={() => setNewDocumentSizeOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewDocumentSize
+          onOk={() => {
+            setNewDocumentSizeOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newDocumentSizeOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx

@@ -80,7 +80,6 @@ const DocumentSizeInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentSize'
-              pageName='info'
                 id={documentSizeId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewDocumentTemplate from './DocumentTemplates/NewDocumentTemplate'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const DocumentTemplates = () => {
+  const [newDocumentTemplateOpen, setNewDocumentTemplateOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('documentTemplate')
@@ -26,17 +29,37 @@ const DocumentTemplates = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('DocumentTemplates')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Document Template',
+        key: 'newDocumentTemplate',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newDocumentTemplate') {
+        setNewDocumentTemplateOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='documentTemplate'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='documentTemplate'
               loading={false}
@@ -79,6 +102,21 @@ const DocumentTemplates = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newDocumentTemplateOpen}
+        onCancel={() => setNewDocumentTemplateOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewDocumentTemplate
+          onOk={() => {
+            setNewDocumentTemplateOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newDocumentTemplateOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx

@@ -75,7 +75,6 @@ const DocumentTemplateDesign = () => {
           <Space size='small'>
             <ObjectActions
               type='documentTemplate'
-              pageName='info'
               id={documentTemplateId}
               disabled={objectFormState.loading}
               visibleActions={{ edit: false }}

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx

@@ -85,7 +85,6 @@ const DocumentTemplateInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentTemplate'
-              pageName='info'
                 id={documentTemplateId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/FilamentSkus.jsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewFilamentSku from './FilamentSkus/NewFilamentSku'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,6 +19,7 @@ import ExportListButton from '../common/ExportListButton'
 const FilamentSkus = () => {
   const tableRef = useRef()
 
+  const [newFilamentSkuOpen, setNewFilamentSkuOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('filamentSkus')
 
@@ -29,17 +32,37 @@ const FilamentSkus = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('FilamentSkus')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Filament SKU',
+        key: 'newFilamentSku',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newFilamentSku') {
+        setNewFilamentSkuOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='filamentSku'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='filamentSku'
               loading={false}
@@ -83,6 +106,24 @@ const FilamentSkus = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newFilamentSkuOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={700}
+        onCancel={() => {
+          setNewFilamentSkuOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewFilamentSku
+          onOk={() => {
+            setNewFilamentSkuOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newFilamentSkuOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx

@@ -78,7 +78,6 @@ const FilamentSkuInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='filamentSku'
-              pageName='info'
                 id={filamentSkuId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/Filaments.jsx

@@ -1,13 +1,15 @@
 // src/filaments.js
 
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewFilament from './Filaments/NewFilament'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -17,6 +19,7 @@ import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 const Filaments = () => {
+  const [newFilamentOpen, setNewFilamentOpen] = useState(false)
   const tableRef = useRef()
 
   // View mode state (cards/list), persisted in sessionStorage via custom hook
@@ -31,17 +34,37 @@ const Filaments = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Filaments')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Filament',
+        key: 'newFilament',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newFilament') {
+        setNewFilamentOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='filament'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='filament'
               loading={false}
@@ -85,6 +108,22 @@ const Filaments = () => {
           useSortInUrl={true}
         />
 
+        <Modal
+          open={newFilamentOpen}
+          footer={null}
+          width={700}
+          onCancel={() => {
+            setNewFilamentOpen(false)
+          }}
+        >
+          <NewFilament
+            onOk={() => {
+              setNewFilamentOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newFilamentOpen}
+          />
+        </Modal>
       </Flex>
     </>
   )

src/components/Dashboard/Management/Filaments/FilamentInfo.jsx

@@ -99,7 +99,6 @@ const FilamentInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='filament'
-              pageName='info'
               id={filamentId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/Files.jsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown } from 'antd'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -25,17 +25,29 @@ const Files = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Files')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='file'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='file'
               loading={false}

src/components/Dashboard/Management/Files/FileInfo.jsx

@@ -91,7 +91,6 @@ const FileInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='file'
-              pageName='info'
                 id={fileId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/Hosts.jsx

@@ -1,14 +1,16 @@
 // src/hosts.js
 
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewHost from './Hosts/NewHost'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -17,6 +19,7 @@ import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 const Hosts = () => {
+  const [newHostOpen, setNewHostOpen] = useState(false)
   const tableRef = useRef()
 
   // View mode state (cards/list), persisted in sessionStorage via custom hook
@@ -30,17 +33,37 @@ const Hosts = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Hosts')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Host',
+        key: 'newHost',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newHost') {
+        setNewHostOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='host'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='host'
               loading={false}
@@ -84,6 +107,23 @@ const Hosts = () => {
           useSortInUrl={true}
         />
 
+        <Modal
+          open={newHostOpen}
+          footer={null}
+          width={700}
+          destroyOnHidden={true}
+          onCancel={() => {
+            setNewHostOpen(false)
+          }}
+        >
+          <NewHost
+            onOk={() => {
+              setNewHostOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newHostOpen}
+          />
+        </Modal>
       </Flex>
     </>
   )

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

@@ -94,7 +94,6 @@ const HostInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='host'
-              pageName='info'
               id={hostId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/Materials.jsx

@@ -1,11 +1,13 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewMaterial from './Materials/NewMaterial'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -15,6 +17,7 @@ import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const Materials = () => {
+  const [newMaterialOpen, setNewMaterialOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('material')
@@ -28,17 +31,37 @@ const Materials = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Materials')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Material',
+        key: 'newMaterial',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newMaterial') {
+        setNewMaterialOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='material'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='material'
               loading={false}
@@ -82,6 +105,22 @@ const Materials = () => {
           useSortInUrl={true}
         />
 
+        <Modal
+          open={newMaterialOpen}
+          footer={null}
+          width={700}
+          onCancel={() => {
+            setNewMaterialOpen(false)
+          }}
+        >
+          <NewMaterial
+            onOk={() => {
+              setNewMaterialOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newMaterialOpen}
+          />
+        </Modal>
       </Flex>
     </>
   )

src/components/Dashboard/Management/Materials/MaterialInfo.jsx

@@ -81,7 +81,6 @@ const MaterialInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='material'
-              pageName='info'
                 id={materialId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/NoteTypes.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewNoteType from './NoteTypes/NewNoteType'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const NoteTypes = () => {
+  const [newNoteTypeOpen, setNewNoteTypeOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('noteType')
@@ -26,17 +29,37 @@ const NoteTypes = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('NoteTypes')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Note Type',
+        key: 'newNoteType',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newNoteType') {
+        setNewNoteTypeOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='noteType'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='noteType'
               loading={false}
@@ -79,6 +102,21 @@ const NoteTypes = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newNoteTypeOpen}
+        onCancel={() => setNewNoteTypeOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewNoteType
+          onOk={() => {
+            setNewNoteTypeOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newNoteTypeOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx

@@ -70,7 +70,6 @@ const NoteTypeInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='noteType'
-              pageName='info'
                 id={noteTypeId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/Notes/NoteInfo.jsx

@@ -82,7 +82,6 @@ const NoteInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='note'
-              pageName='info'
                 id={noteId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/PartSkus.jsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewPartSku from './PartSkus/NewPartSku'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,6 +19,7 @@ import ExportListButton from '../common/ExportListButton'
 const PartSkus = () => {
   const tableRef = useRef()
 
+  const [newPartSkuOpen, setNewPartSkuOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('partSkus')
 
@@ -28,17 +31,37 @@ const PartSkus = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('PartSkus')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Part SKU',
+        key: 'newPartSku',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPartSku') {
+        setNewPartSkuOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='partSku'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='partSku'
               loading={false}
@@ -82,6 +105,24 @@ const PartSkus = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newPartSkuOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={700}
+        onCancel={() => {
+          setNewPartSkuOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewPartSku
+          onOk={() => {
+            setNewPartSkuOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newPartSkuOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx

@@ -73,7 +73,6 @@ const PartSkuInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='partSku'
-              pageName='info'
                 id={partSkuId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/Parts.jsx

@@ -1,11 +1,13 @@
 // src/gcodefiles.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import NewPart from './Parts/NewPart'
 
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 
@@ -20,6 +22,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Parts = (filter) => {
+  const [newPartOpen, setNewPartOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('part')
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('part')
@@ -30,17 +33,37 @@ const Parts = (filter) => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Parts')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Part',
+        key: 'newPart',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPart') {
+        setNewPartOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='part'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='part'
               loading={false}
@@ -84,6 +107,23 @@ const Parts = (filter) => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newPartOpen}
+        footer={null}
+        width={700}
+        onCancel={() => {
+          setNewPartOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewPart
+          onOk={() => {
+            setNewPartOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newPartOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/Parts/PartInfo.jsx

@@ -80,7 +80,6 @@ const PartInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='part'
-              pageName='info'
               id={partId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/PermissionSettings.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewPermissionSetting from './PermissionSettings/NewPermissionSetting'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,8 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const PermissionSettingsList = () => {
+  const [newPermissionSettingsOpen, setNewPermissionSettingsOpen] =
+    useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('permissionSetting')
@@ -26,17 +30,37 @@ const PermissionSettingsList = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('PermissionSettings')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Permission Settings',
+        key: 'newPermissionSettings',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPermissionSettings') {
+        setNewPermissionSettingsOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='permissionSetting'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='permissionSetting'
               loading={false}
@@ -79,6 +103,21 @@ const PermissionSettingsList = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newPermissionSettingsOpen}
+        onCancel={() => setNewPermissionSettingsOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewPermissionSetting
+          onOk={() => {
+            setNewPermissionSettingsOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newPermissionSettingsOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx

@@ -85,7 +85,6 @@ const PermissionSettingInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='permissionSetting'
-              pageName='info'
                 id={permissionSettingId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/ProductCategories.jsx

@@ -1,11 +1,13 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewProductCategory from './ProductCategories/NewProductCategory'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -15,6 +17,7 @@ import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
 
 const ProductCategories = () => {
+  const [newProductCategoryOpen, setNewProductCategoryOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('productCategory')
@@ -28,17 +31,37 @@ const ProductCategories = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('ProductCategories')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Product Category',
+        key: 'newProductCategory',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newProductCategory') {
+        setNewProductCategoryOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='productCategory'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='productCategory'
               loading={false}
@@ -82,6 +105,22 @@ const ProductCategories = () => {
           useSortInUrl={true}
         />
 
+        <Modal
+          open={newProductCategoryOpen}
+          footer={null}
+          width={700}
+          onCancel={() => {
+            setNewProductCategoryOpen(false)
+          }}
+        >
+          <NewProductCategory
+            onOk={() => {
+              setNewProductCategoryOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newProductCategoryOpen}
+          />
+        </Modal>
       </Flex>
     </>
   )

src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx

@@ -78,7 +78,6 @@ const ProductCategoryInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='productCategory'
-              pageName='info'
                 id={productCategoryId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/ProductSkus.jsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
+import NewProductSku from './ProductSkus/NewProductSku'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,6 +19,7 @@ import ExportListButton from '../common/ExportListButton'
 const ProductSkus = () => {
   const tableRef = useRef()
 
+  const [newProductSkuOpen, setNewProductSkuOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('productSkus')
 
@@ -29,17 +32,37 @@ const ProductSkus = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('ProductSkus')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Product SKU',
+        key: 'newProductSku',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newProductSku') {
+        setNewProductSkuOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='productSku'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='productSku'
               loading={false}
@@ -83,6 +106,24 @@ const ProductSkus = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newProductSkuOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={700}
+        onCancel={() => {
+          setNewProductSkuOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewProductSku
+          onOk={() => {
+            setNewProductSkuOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newProductSkuOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx

@@ -79,7 +79,6 @@ const ProductSkuInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='productSku'
-              pageName='info'
                 id={productSkuId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/Products.jsx

@@ -1,11 +1,12 @@
 // src/gcodefiles.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   Button,
   Flex,
   Space,
+  Modal,
   Dropdown,
   Tag,
   Checkbox,
@@ -16,9 +17,11 @@ import { DownloadOutlined } from '@ant-design/icons'
 import IdDisplay from '../common/IdDisplay'
 import TimeDisplay from '../common/TimeDisplay'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import NewProduct from './Products/NewProduct'
 import ProductIcon from '../../Icons/ProductIcon'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import XMarkIcon from '../../Icons/XMarkIcon'
 import CheckIcon from '../../Icons/CheckIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
@@ -32,6 +35,7 @@ import ExportListButton from '../common/ExportListButton'
 
 const Products = () => {
   const navigate = useNavigate()
+  const [newProductOpen, setNewProductOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('Products')
@@ -240,6 +244,28 @@ const Products = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Products')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Product',
+        key: 'newProduct',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newProduct') {
+        setNewProductOpen(true)
+      }
+    }
+  }
 
   const getFilterDropdown = ({
     setSelectedKeys,
@@ -306,11 +332,9 @@ const Products = () => {
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='product'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ExportListButton objectType='product' />
             <Popover
               content={getViewDropdownItems()}
@@ -353,6 +377,23 @@ const Products = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newProductOpen}
+        footer={null}
+        width={700}
+        onCancel={() => {
+          setNewProductOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewProduct
+          onOk={() => {
+            setNewProductOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newProductOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/Products/ProductInfo.jsx

@@ -80,7 +80,6 @@ const ProductInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='product'
-              pageName='info'
               id={productId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/TaxRates.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewTaxRate from './TaxRates/NewTaxRate'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const TaxRates = () => {
+  const [newTaxRateOpen, setNewTaxRateOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('taxRate')
@@ -25,17 +28,37 @@ const TaxRates = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('TaxRates')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Tax Rate',
+        key: 'newTaxRate',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newTaxRate') {
+        setNewTaxRateOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='taxRate'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='taxRate'
               loading={false}
@@ -78,6 +101,21 @@ const TaxRates = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newTaxRateOpen}
+        onCancel={() => setNewTaxRateOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewTaxRate
+          onOk={() => {
+            setNewTaxRateOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newTaxRateOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx

@@ -78,7 +78,6 @@ const TaxRateInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='taxRate'
-              pageName='info'
                 id={taxRateId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Management/UserGroups.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewUserGroup from './UserGroups/NewUserGroup'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const UserGroups = () => {
+  const [newUserGroupOpen, setNewUserGroupOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('userGroup')
@@ -25,17 +28,37 @@ const UserGroups = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('UserGroups')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New User Group',
+        key: 'newUserGroup',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newUserGroup') {
+        setNewUserGroupOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='userGroup'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='userGroup'
               loading={false}
@@ -78,6 +101,21 @@ const UserGroups = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newUserGroupOpen}
+        onCancel={() => setNewUserGroupOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewUserGroup
+          onOk={() => {
+            setNewUserGroupOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newUserGroupOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx

@@ -84,7 +84,6 @@ const UserGroupInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='userGroup'
-              pageName='info'
               id={userGroupId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/Users.jsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown } from 'antd'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -25,16 +25,28 @@ const Users = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Users')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      }
+    }
+  }
 
   return (
     <Flex vertical={'true'} gap='large' className='h-100'>
       <Flex justify={'space-between'} style={{ minHeight: 0 }}>
         <Space size='small'>
-            <ObjectActions
+          <Dropdown menu={actionItems}>
-              type='user'
+            <Button>Actions</Button>
-              pageName='list'
+          </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
           <ColumnViewButton
             type='user'
             disabled={false}

src/components/Dashboard/Management/Users/UserInfo.jsx

@@ -79,7 +79,6 @@ const UserInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='user'
-              pageName='info'
               id={userId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Management/Vendors.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewVendor from './Vendors/NewVendor'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Vendors = () => {
+  const [newVendorOpen, setNewVendorOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('vendor')
@@ -25,17 +28,37 @@ const Vendors = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Vendors')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Vendor',
+        key: 'newVendor',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newVendor') {
+        setNewVendorOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='vendor'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='vendor'
               loading={false}
@@ -78,6 +101,21 @@ const Vendors = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newVendorOpen}
+        onCancel={() => setNewVendorOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewVendor
+          onOk={() => {
+            setNewVendorOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newVendorOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Management/Vendors/VendorInfo.jsx

@@ -78,7 +78,6 @@ const VendorInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='vendor'
-              pageName='info'
                 id={vendorId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Production/FilamentProfiles.jsx

@@ -1,18 +1,21 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Dropdown, Flex, Modal, Space } from 'antd'
+import NewFilamentProfile from './FilamentProfiles/NewFilamentProfile'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import useViewMode from '../hooks/useViewMode'
 
 const FilamentProfiles = () => {
+  const [newProfileOpen, setNewProfileOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('FilamentProfiles')
   const [columnVisibility, setColumnVisibility] =
@@ -23,17 +26,37 @@ const FilamentProfiles = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('FilamentProfiles')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Filament Profile',
+        key: 'newFilamentProfile',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newFilamentProfile') {
+        setNewProfileOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='filamentProfile'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='filamentProfile'
               visibleState={columnVisibility}
@@ -76,6 +99,23 @@ const FilamentProfiles = () => {
           useSortInUrl={true}
         />
       </Flex>
+
+      <Modal
+        open={newProfileOpen}
+        footer={null}
+        width={800}
+        onCancel={() => setNewProfileOpen(false)}
+        destroyOnHidden
+      >
+        {newProfileOpen && (
+          <NewFilamentProfile
+            onOk={() => {
+              setNewProfileOpen(false)
+              tableRef.current?.reload()
+            }}
+          />
+        )}
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx

@@ -115,7 +115,6 @@ const FilamentProfileInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='filamentProfile'
-              pageName='info'
               id={filamentProfileId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Production/GCodeFiles.jsx

@@ -1,10 +1,12 @@
 // src/gcodefiles.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewGCodeFile from './GCodeFiles/NewGCodeFile'
 import useColumnVisibility from '../hooks/useColumnVisibility'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -16,6 +18,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const GCodeFiles = () => {
+  const [newGCodeFileOpen, setNewGCodeFileOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('gcodeFile')
 
@@ -28,17 +31,37 @@ const GCodeFiles = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('GCodeFiles')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New GCodeFile',
+        key: 'newGCodeFile',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newGCodeFile') {
+        setNewGCodeFileOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='gcodeFile'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='gcodeFile'
               disabled={false}
@@ -81,6 +104,23 @@ const GCodeFiles = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newGCodeFileOpen}
+        footer={null}
+        width={700}
+        onCancel={() => {
+          setNewGCodeFileOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewGCodeFile
+          onOk={() => {
+            setNewGCodeFileOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newGCodeFileOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx

@@ -85,7 +85,6 @@ const GCodeFileInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='gcodeFile'
-              pageName='info'
                 id={gcodeFileId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx

@@ -54,7 +54,6 @@ const GCodeFilePreview = () => {
           <Space size='small'>
             <ObjectActions
               type='gcodeFile'
-              pageName='info'
               id={gcodeFileId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Production/Jobs.jsx

@@ -1,10 +1,12 @@
 // src/Jobs.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewJob from './Jobs/NewJob.jsx'
 import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
+import PlusIcon from '../../Icons/PlusIcon.jsx'
+import ReloadIcon from '../../Icons/ReloadIcon.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
-import ObjectActions from '../common/ObjectActions'
 import useViewMode from '../hooks/useViewMode.jsx'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -15,6 +17,7 @@ import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton.jsx'
 
 const Jobs = () => {
+  const [newJobOpen, setNewJobOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('job')
 
@@ -25,18 +28,41 @@ const Jobs = () => {
 
   const [showSortSidebar, setShowSortSidebar] = useSortSidebarVisibility('Jobs')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Print Job',
+        key: 'newJob',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'newJob') {
+        showNewJobModal()
+      } else if (key === 'reloadList') {
+        tableRef.current?.reload()
+      }
+    }
+  }
 
+  const showNewJobModal = () => {
+    setNewJobOpen(true)
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='job'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='job'
               disabled={false}
@@ -81,6 +107,23 @@ const Jobs = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newJobOpen}
+        footer={null}
+        width={700}
+        destroyOnHidden={true}
+        onCancel={() => {
+          setNewJobOpen(false)
+        }}
+      >
+        <NewJob
+          onOk={() => {
+            setNewJobOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newJobOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Production/Jobs/JobInfo.jsx

@@ -91,7 +91,6 @@ const JobInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='job'
-              pageName='info'
               id={jobId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Production/PrinterProfiles.jsx

@@ -1,17 +1,20 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Dropdown, Flex, Modal, Space } from 'antd'
+import NewPrinterProfile from './PrinterProfiles/NewPrinterProfile'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import useViewMode from '../hooks/useViewMode'
 const PrinterProfiles = () => {
+  const [newProfileOpen, setNewProfileOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('PrinterProfiles')
   const [columnVisibility, setColumnVisibility] =
@@ -22,17 +25,37 @@ const PrinterProfiles = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('PrinterProfiles')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Printer Profile',
+        key: 'newPrinterProfile',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPrinterProfile') {
+        setNewProfileOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='printerProfile'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='printerProfile'
               visibleState={columnVisibility}
@@ -75,6 +98,23 @@ const PrinterProfiles = () => {
           useSortInUrl={true}
         />
       </Flex>
+
+      <Modal
+        open={newProfileOpen}
+        footer={null}
+        width={800}
+        onCancel={() => setNewProfileOpen(false)}
+        destroyOnHidden
+      >
+        {newProfileOpen && (
+          <NewPrinterProfile
+            onOk={() => {
+              setNewProfileOpen(false)
+              tableRef.current?.reload()
+            }}
+          />
+        )}
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx

@@ -93,7 +93,6 @@ const PrinterProfileInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='printerProfile'
-              pageName='info'
               id={printerProfileId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Production/Printers.jsx

@@ -1,9 +1,11 @@
 // src/Printers.js
 
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Space, Flex } from 'antd'
+import { Button, Dropdown, Space, Flex, Modal } from 'antd'
+import NewPrinter from './Printers/NewPrinter'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
@@ -16,6 +18,7 @@ import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
 const Printers = () => {
+  const [newPrinterOpen, setNewPrinterOpen] = useState(false)
   const tableRef = useRef()
 
   // View mode state (cards/list), persisted in sessionStorage via custom hook
@@ -31,17 +34,37 @@ const Printers = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Printers')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Printer',
+        key: 'newPrinter',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newPrinter') {
+        setNewPrinterOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='printer'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='printer'
               disabled={false}
@@ -85,6 +108,23 @@ const Printers = () => {
           useSortInUrl={true}
         />
 
+        <Modal
+          open={newPrinterOpen}
+          footer={null}
+          width={700}
+          onCancel={() => {
+            setNewPrinterOpen(false)
+          }}
+          destroyOnHidden
+        >
+          <NewPrinter
+            onOk={() => {
+              setNewPrinterOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newPrinterOpen}
+          />
+        </Modal>
       </Flex>
     </>
   )

src/components/Dashboard/Production/Printers/ControlPrinter.jsx

@@ -256,7 +256,6 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
             <Space size='small'>
               <ObjectActions
                 type='printer'
-              pageName='info'
                 id={printerId}
                 disabled={objectFormState.loading}
                 visibleActions={{

src/components/Dashboard/Production/Printers/PrinterInfo.jsx

@@ -92,7 +92,6 @@ const PrinterInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='printer'
-              pageName='info'
               id={printerId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Production/SubJobs.jsx

@@ -1,10 +1,10 @@
 // src/SubJobs.js
 
 import { useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Dropdown } from 'antd'
 import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
+import ReloadIcon from '../../Icons/ReloadIcon.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
-import ObjectActions from '../common/ObjectActions'
 import useViewMode from '../hooks/useViewMode.jsx'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -26,17 +26,29 @@ const SubJobs = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('SubJobs')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='subJob'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='subJob'
               disabled={false}

src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx

@@ -70,7 +70,6 @@ const SubJobInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='subJob'
-              pageName='info'
                 id={subJobId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Sales/Clients.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewClient from './Clients/NewClient'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Clients = () => {
+  const [newClientOpen, setNewClientOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('client')
@@ -25,17 +28,37 @@ const Clients = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Clients')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Client',
+        key: 'newClient',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newClient') {
+        setNewClientOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='client'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='client'
               loading={false}
@@ -78,6 +101,21 @@ const Clients = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newClientOpen}
+        onCancel={() => setNewClientOpen(false)}
+        footer={null}
+        destroyOnHidden={true}
+        width={700}
+      >
+        <NewClient
+          onOk={() => {
+            setNewClientOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={!newClientOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Sales/Clients/ClientInfo.jsx

@@ -78,7 +78,6 @@ const ClientInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='client'
-              pageName='info'
                 id={clientId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}

src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx

@@ -91,7 +91,6 @@ const ListingVarientInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='listingVarient'
-              pageName='info'
               id={listingVarientId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Sales/Listings.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewListing from './Listings/NewListing'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Listings = () => {
+  const [newListingOpen, setNewListingOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('listings')
@@ -26,17 +29,37 @@ const Listings = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Listings')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Listing',
+        key: 'newListing',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newListing') {
+        setNewListingOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='listing'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='listing'
               loading={false}
@@ -79,6 +102,24 @@ const Listings = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newListingOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewListingOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewListing
+          onOk={() => {
+            setNewListingOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newListingOpen}
+        />
+      </Modal>
     </>
   )
 }

src/components/Dashboard/Sales/Listings/ListingInfo.jsx

@@ -89,7 +89,6 @@ const ListingInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='listing'
-              pageName='info'
               id={listingId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Sales/Marketplaces.jsx

@@ -1,7 +1,9 @@
-import { useRef } from 'react'
+import { useState, useRef } from 'react'
-import { Flex, Space } from 'antd'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import NewMarketplace from './Marketplaces/NewMarketplace'
 import ObjectTable from '../common/ObjectTable'
-import ObjectActions from '../common/ObjectActions'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -13,6 +15,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 import ExportListButton from '../common/ExportListButton'
 
 const Marketplaces = () => {
+  const [newMarketplaceOpen, setNewMarketplaceOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('marketplaces')
@@ -26,17 +29,37 @@ const Marketplaces = () => {
   const [showSortSidebar, setShowSortSidebar] =
     useSortSidebarVisibility('Marketplaces')
 
+  const actionItems = {
+    items: [
+      {
+        label: 'New Marketplace',
+        key: 'newMarketplace',
+        icon: <PlusIcon />
+      },
+      { type: 'divider' },
+      {
+        label: 'Reload List',
+        key: 'reloadList',
+        icon: <ReloadIcon />
+      }
+    ],
+    onClick: ({ key }) => {
+      if (key === 'reloadList') {
+        tableRef.current?.reload()
+      } else if (key === 'newMarketplace') {
+        setNewMarketplaceOpen(true)
+      }
+    }
+  }
 
   return (
     <>
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <ObjectActions
+            <Dropdown menu={actionItems}>
-              type='marketplace'
+              <Button>Actions</Button>
-              pageName='list'
+            </Dropdown>
-              onReload={() => tableRef.current?.reload()}
-            />
             <ColumnViewButton
               type='marketplace'
               loading={false}
@@ -79,6 +102,24 @@ const Marketplaces = () => {
           useSortInUrl={true}
         />
       </Flex>
+      <Modal
+        open={newMarketplaceOpen}
+        styles={{ content: { paddingBottom: '24px' } }}
+        footer={null}
+        width={800}
+        onCancel={() => {
+          setNewMarketplaceOpen(false)
+        }}
+        destroyOnHidden={true}
+      >
+        <NewMarketplace
+          onOk={() => {
+            setNewMarketplaceOpen(false)
+            tableRef.current?.reload()
+          }}
+          reset={newMarketplaceOpen}
+        />
+      </Modal>
     </>
   )
 }