Refactor JavaScript Language Support and Enhance Autocomplete Functionality

- Consolidated JavaScript completion sources into a new module, improving organization and maintainability.
- Updated the `fcTemplateLang` to utilize the new `javascriptCompletionSources` for enhanced autocomplete capabilities.
- Removed redundant imports and streamlined the code in various components, including Invoices, Payments, TaxRecords, and Inventory sections, by replacing dropdown actions with a unified `ObjectActions` component.
- Improved the handling of object actions across multiple inventory and finance components, enhancing user experience and code consistency.

src/codemirror/fcTemplateLang/index.js

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

src/codemirror/javascriptLang/index.js

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,200 @@
+/** 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import { Flex, Space } from 'antd'
-import NewInvoice from './Invoices/NewInvoice'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='invoice'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='invoice'
               loading={false}
@@ -102,24 +79,6 @@ 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,6 +98,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import { Flex, Space } from 'antd'
-import NewPayment from './Payments/NewPayment'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='payment'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='payment'
               loading={false}
@@ -102,24 +79,6 @@ 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,6 +91,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewTaxRecord from './TaxRecords/NewTaxRecord'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='taxRecord'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='taxRecord'
               loading={false}
@@ -102,21 +79,6 @@ 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,6 +81,7 @@ 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,14 +1,12 @@
 // src/filamentStocks.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -21,7 +19,6 @@ import ExportListButton from '../common/ExportListButton'
 const FilamentStocks = () => {
   const tableRef = useRef()
 
-  const [newFilamentStockOpen, setNewFilamentStockOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('filamentStocks')
 
@@ -34,37 +31,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='filamentStock'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='filamentStock'
               loading={false}
@@ -108,24 +85,6 @@ 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,6 +79,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewOrderItem from './OrderItems/NewOrderItem'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='orderItem'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='orderItem'
               loading={false}
@@ -102,24 +79,6 @@ 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,6 +85,7 @@ 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,14 +1,12 @@
 // src/partStocks.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -21,7 +19,6 @@ import ExportListButton from '../common/ExportListButton'
 const PartStocks = () => {
   const tableRef = useRef()
 
-  const [newPartStockOpen, setNewPartStockOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('partStocks')
 
@@ -34,37 +31,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='partStock'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='partStock'
               loading={false}
@@ -108,24 +85,6 @@ 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,6 +87,7 @@ 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,15 +1,13 @@
 // src/components/Dashboard/Inventory/ProductStocks.jsx
 // ProductStocks - tracks assembled products consisting of part stocks
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -22,7 +20,6 @@ import ExportListButton from '../common/ExportListButton'
 const ProductStocks = () => {
   const tableRef = useRef()
 
-  const [newProductStockOpen, setNewProductStockOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('productStocks')
 
@@ -35,37 +32,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='productStock'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='productStock'
               loading={false}
@@ -109,24 +86,6 @@ 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,6 +104,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewPurchaseOrder from './PurchaseOrders/NewPurchaseOrder'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='purchaseOrder'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='purchaseOrder'
               loading={false}
@@ -102,24 +79,6 @@ 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,6 +109,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewShipment from './Shipments/NewShipment'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='shipment'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='shipment'
               loading={false}
@@ -102,24 +79,6 @@ 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,6 +119,7 @@ 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,6 +94,7 @@ 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,14 +1,12 @@
 // src/stockAudits.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -21,7 +19,6 @@ import ExportListButton from '../common/ExportListButton'
 const StockAudits = () => {
   const tableRef = useRef()
 
-  const [newStockAuditOpen, setNewStockAuditOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('stockAudits')
 
@@ -34,37 +31,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='stockAudit'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='stockAudit'
               loading={false}
@@ -108,24 +85,6 @@ 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,6 +83,7 @@ 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,7 +1,8 @@
 import { useRef } from 'react'
-import { Button, Flex, Space, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -10,7 +11,6 @@ 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,29 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='stockEvent'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='stockEvent'
               loading={false}

src/components/Dashboard/Inventory/StockLocations.jsx

@@ -1,12 +1,10 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -19,7 +17,6 @@ import ExportListButton from '../common/ExportListButton'
 const StockLocations = () => {
   const tableRef = useRef()
 
-  const [newOpen, setNewOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('stockLocations')
 
@@ -32,37 +29,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='stockLocation'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='stockLocation'
               loading={false}
@@ -106,24 +83,6 @@ 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,6 +84,7 @@ 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,12 +1,10 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -19,7 +17,6 @@ import ExportListButton from '../common/ExportListButton'
 const StockTransfers = () => {
   const tableRef = useRef()
 
-  const [newOpen, setNewOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('stockTransfers')
 
@@ -32,37 +29,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='stockTransfer'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='stockTransfer'
               loading={false}
@@ -106,24 +83,6 @@ 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,6 +94,7 @@ 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,11 +1,9 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewAppPassword from './AppPasswords/NewAppPassword'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+import ObjectActions from '../common/ObjectActions'
-import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -15,7 +13,6 @@ 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')
@@ -28,37 +25,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='appPassword'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='appPassword'
               loading={false}
@@ -102,22 +79,6 @@ 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,6 +80,7 @@ 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 { Button, Flex, Space, Dropdown } from 'antd'
+import { Flex, Space } 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,29 +23,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='auditLog'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='auditLog'
               loading={false}

src/components/Dashboard/Management/CourierServices.jsx

@@ -1,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewCourierService from './CourierServices/NewCourierService'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='courierService'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='courierService'
               loading={false}
@@ -102,21 +79,6 @@ 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,6 +83,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewCourier from './Couriers/NewCourier'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -28,37 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='courier'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='courier'
               loading={false}
@@ -101,21 +78,6 @@ 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,6 +79,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewDocumentJob from './DocumentJobs/NewDocumentJob'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='documentJob'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='documentJob'
               loading={false}
@@ -102,21 +79,6 @@ 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,6 +80,7 @@ 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,8 +1,7 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Dropdown, Modal } from 'antd'
+import { Flex, Space } from 'antd'
-import PlusIcon from '../../Icons/PlusIcon'
 import ObjectTable from '../common/ObjectTable'
-import ReloadIcon from '../../Icons/ReloadIcon'
+import ObjectActions from '../common/ObjectActions'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -12,11 +11,9 @@ 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] =
@@ -28,37 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='documentPrinter'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='documentPrinter'
               loading={false}
@@ -101,21 +78,6 @@ 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,6 +85,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewDocumentSize from './DocumentSizes/NewDocumentSize'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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] =
@@ -27,37 +24,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='documentSize'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='documentSize'
               loading={false}
@@ -100,21 +77,6 @@ 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,6 +80,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewDocumentTemplate from './DocumentTemplates/NewDocumentTemplate'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='documentTemplate'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='documentTemplate'
               loading={false}
@@ -102,21 +79,6 @@ 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,6 +75,7 @@ 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,6 +85,7 @@ 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,12 +1,10 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -19,7 +17,6 @@ import ExportListButton from '../common/ExportListButton'
 const FilamentSkus = () => {
   const tableRef = useRef()
 
-  const [newFilamentSkuOpen, setNewFilamentSkuOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('filamentSkus')
 
@@ -32,37 +29,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='filamentSku'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='filamentSku'
               loading={false}
@@ -106,24 +83,6 @@ 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,6 +78,7 @@ 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,15 +1,13 @@
 // src/filaments.js
 
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
 
-import NewFilament from './Filaments/NewFilament'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+import ObjectActions from '../common/ObjectActions'
-import ReloadIcon from '../../Icons/ReloadIcon'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -19,7 +17,6 @@ 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
@@ -34,37 +31,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='filament'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='filament'
               loading={false}
@@ -108,22 +85,6 @@ 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,6 +99,7 @@ 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 { Button, Flex, Space, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
 import ObjectTable from '../common/ObjectTable'
-import ReloadIcon from '../../Icons/ReloadIcon'
+import ObjectActions from '../common/ObjectActions'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -25,29 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='file'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='file'
               loading={false}

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

@@ -91,6 +91,7 @@ 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,16 +1,14 @@
 // src/hosts.js
 
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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 PlusIcon from '../../Icons/PlusIcon'
+import ObjectActions from '../common/ObjectActions'
-import ReloadIcon from '../../Icons/ReloadIcon'
 import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -19,7 +17,6 @@ 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
@@ -33,37 +30,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='host'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='host'
               loading={false}
@@ -107,23 +84,6 @@ 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,6 +94,7 @@ 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,13 +1,11 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
 
-import NewMaterial from './Materials/NewMaterial'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+import ObjectActions from '../common/ObjectActions'
-import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,7 +15,6 @@ 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')
@@ -31,37 +28,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='material'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='material'
               loading={false}
@@ -105,22 +82,6 @@ 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,6 +81,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewNoteType from './NoteTypes/NewNoteType'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='noteType'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='noteType'
               loading={false}
@@ -102,21 +79,6 @@ 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,6 +70,7 @@ 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,6 +82,7 @@ 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,12 +1,10 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -19,7 +17,6 @@ import ExportListButton from '../common/ExportListButton'
 const PartSkus = () => {
   const tableRef = useRef()
 
-  const [newPartSkuOpen, setNewPartSkuOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('partSkus')
 
@@ -31,37 +28,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='partSku'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='partSku'
               loading={false}
@@ -105,24 +82,6 @@ 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,6 +73,7 @@ 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,13 +1,11 @@
 // src/gcodefiles.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
 import ObjectTable from '../common/ObjectTable'
-import NewPart from './Parts/NewPart'
+import ObjectActions from '../common/ObjectActions'
 
-import PlusIcon from '../../Icons/PlusIcon'
-import ReloadIcon from '../../Icons/ReloadIcon'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 
@@ -22,7 +20,6 @@ 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')
@@ -33,37 +30,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='part'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='part'
               loading={false}
@@ -107,23 +84,6 @@ 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,6 +80,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewPermissionSetting from './PermissionSettings/NewPermissionSetting'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,8 +13,6 @@ 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')
@@ -30,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='permissionSetting'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='permissionSetting'
               loading={false}
@@ -103,21 +79,6 @@ 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,6 +85,7 @@ 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,13 +1,11 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
 
-import NewProductCategory from './ProductCategories/NewProductCategory'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+import ObjectActions from '../common/ObjectActions'
-import ReloadIcon from '../../Icons/ReloadIcon'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -17,7 +15,6 @@ 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')
@@ -31,37 +28,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='productCategory'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='productCategory'
               loading={false}
@@ -105,22 +82,6 @@ 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,6 +78,7 @@ 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,12 +1,10 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -19,7 +17,6 @@ import ExportListButton from '../common/ExportListButton'
 const ProductSkus = () => {
   const tableRef = useRef()
 
-  const [newProductSkuOpen, setNewProductSkuOpen] = useState(false)
 
   const [viewMode, setViewMode] = useViewMode('productSkus')
 
@@ -32,37 +29,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='productSku'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='productSku'
               loading={false}
@@ -106,24 +83,6 @@ 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,6 +79,7 @@ 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,12 +1,11 @@
 // src/gcodefiles.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   Button,
   Flex,
   Space,
-  Modal,
   Dropdown,
   Tag,
   Checkbox,
@@ -17,11 +16,9 @@ import { DownloadOutlined } from '@ant-design/icons'
 import IdDisplay from '../common/IdDisplay'
 import TimeDisplay from '../common/TimeDisplay'
 import ObjectTable from '../common/ObjectTable'
-import NewProduct from './Products/NewProduct'
+import ObjectActions from '../common/ObjectActions'
 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'
@@ -35,7 +32,6 @@ import ExportListButton from '../common/ExportListButton'
 
 const Products = () => {
   const navigate = useNavigate()
-  const [newProductOpen, setNewProductOpen] = useState(false)
   const tableRef = useRef()
 
   const [viewMode, setViewMode] = useViewMode('Products')
@@ -244,28 +240,6 @@ 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,
@@ -332,9 +306,11 @@ const Products = () => {
       <Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify={'space-between'} style={{ minHeight: 0 }}>
           <Space size='small'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='product'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ExportListButton objectType='product' />
             <Popover
               content={getViewDropdownItems()}
@@ -377,23 +353,6 @@ 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,6 +80,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewTaxRate from './TaxRates/NewTaxRate'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -28,37 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='taxRate'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='taxRate'
               loading={false}
@@ -101,21 +78,6 @@ 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,6 +78,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewUserGroup from './UserGroups/NewUserGroup'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -28,37 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='userGroup'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='userGroup'
               loading={false}
@@ -101,21 +78,6 @@ 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,6 +84,7 @@ 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 { Button, Flex, Space, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
 import ObjectTable from '../common/ObjectTable'
-import ReloadIcon from '../../Icons/ReloadIcon'
+import ObjectActions from '../common/ObjectActions'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
@@ -25,28 +25,16 @@ 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'>
-          <Dropdown menu={actionItems}>
+            <ObjectActions
-            <Button>Actions</Button>
+              type='user'
-          </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
           <ColumnViewButton
             type='user'
             disabled={false}

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

@@ -79,6 +79,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewVendor from './Vendors/NewVendor'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -28,37 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='vendor'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='vendor'
               loading={false}
@@ -101,21 +78,6 @@ 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,6 +78,7 @@ 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,21 +1,18 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Dropdown, Flex, Modal, Space } from 'antd'
+import { Flex, 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] =
@@ -26,37 +23,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='filamentProfile'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='filamentProfile'
               visibleState={columnVisibility}
@@ -99,23 +76,6 @@ 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,6 +115,7 @@ 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,12 +1,10 @@
 // src/gcodefiles.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -18,7 +16,6 @@ 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')
 
@@ -31,37 +28,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='gcodeFile'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='gcodeFile'
               disabled={false}
@@ -104,23 +81,6 @@ 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,6 +85,7 @@ 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,6 +54,7 @@ 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,12 +1,10 @@
 // src/Jobs.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } 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'
@@ -17,7 +15,6 @@ 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')
 
@@ -28,41 +25,18 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='job'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='job'
               disabled={false}
@@ -107,23 +81,6 @@ 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,6 +91,7 @@ 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,20 +1,17 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
-import { Button, Dropdown, Flex, Modal, Space } from 'antd'
+import { Flex, 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] =
@@ -25,37 +22,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='printerProfile'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='printerProfile'
               visibleState={columnVisibility}
@@ -98,23 +75,6 @@ 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,6 +93,7 @@ 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,11 +1,9 @@
 // src/Printers.js
 
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Dropdown, Space, Flex, Modal } from 'antd'
+import { Space, Flex } 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'
 
@@ -18,7 +16,6 @@ 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
@@ -34,37 +31,17 @@ 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>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='printer'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='printer'
               disabled={false}
@@ -108,23 +85,6 @@ 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,6 +256,7 @@ 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,6 +92,7 @@ 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 { Button, Flex, Space, Dropdown } from 'antd'
+import { Flex, Space } 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,29 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='subJob'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='subJob'
               disabled={false}

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

@@ -70,6 +70,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewClient from './Clients/NewClient'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -28,37 +25,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='client'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='client'
               loading={false}
@@ -101,21 +78,6 @@ 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,6 +78,7 @@ 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,6 +91,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewListing from './Listings/NewListing'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='listing'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='listing'
               loading={false}
@@ -102,24 +79,6 @@ 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,6 +89,7 @@ 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,9 +1,7 @@
-import { useState, useRef } from 'react'
+import { useRef } from 'react'
-import { Button, Flex, Space, Modal, Dropdown } from 'antd'
+import { Flex, Space } from 'antd'
-import NewMarketplace from './Marketplaces/NewMarketplace'
 import ObjectTable from '../common/ObjectTable'
-import PlusIcon from '../../Icons/PlusIcon'
+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'
@@ -15,7 +13,6 @@ 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')
@@ -29,37 +26,17 @@ 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'>
-            <Dropdown menu={actionItems}>
+            <ObjectActions
-              <Button>Actions</Button>
+              type='marketplace'
-            </Dropdown>
+              pageName='list'
+              onReload={() => tableRef.current?.reload()}
+            />
             <ColumnViewButton
               type='marketplace'
               loading={false}
@@ -102,24 +79,6 @@ 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>
     </>
   )
 }

src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx

@@ -158,6 +158,7 @@ const MarketplaceInfo = () => {
           <Space size='small'>
             <ObjectActions
               type='marketplace'
+              pageName='info'
               id={marketplaceId}
               disabled={objectFormState.loading}
               objectData={objectFormState.objectData}

src/components/Dashboard/Sales/SalesOrders.jsx

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