Refactoring

src/App.css

@@ -36,6 +36,15 @@
 .ant-typography .id-text {
   font-family: 'DM Mono';
   font-size: 11.9px;
+  vertical-align: top !important;
+}
+
+.ant-typography-ellipsis-single-line {
+  vertical-align: middle !important;
+}
+
+.ant-typography-ellipsis-single-line >code {
+  vertical-align: top !important;
 }
 
 .flag {

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

@@ -113,7 +113,7 @@ const FilamentStockInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -130,7 +130,7 @@ const FilamentStockInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('events', expanded)
                       }
-                      key='events'
+                      collapseKey='events'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />
@@ -150,10 +150,13 @@ const FilamentStockInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={filamentStockId} />
+                        <NotesPanel
+                          _id={filamentStockId}
+                          type='filamentStock'
+                        />
                       </Card>
                     </InfoCollapse>
 
@@ -164,7 +167,7 @@ const FilamentStockInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

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

@@ -133,7 +133,7 @@ const FilamentInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -151,7 +151,7 @@ const FilamentInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('stocks', expanded)
                       }
-                      key='stocks'
+                      collapseKey='stocks'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />
@@ -175,10 +175,10 @@ const FilamentInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={filamentId} />
+                        <NotesPanel _id={filamentId} type='filament' />
                       </Card>
                     </InfoCollapse>
 
@@ -189,7 +189,7 @@ const FilamentInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

src/components/Dashboard/Management/NoteTypes.jsx

@@ -1,6 +1,5 @@
-import React, { useState, useContext, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { Button, Flex, Space, Modal, Dropdown, message } from 'antd'
-import { AuthContext } from '../context/AuthContext'
 import NewNoteType from './NoteTypes/NewNoteType'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
@@ -15,7 +14,7 @@ const NoteTypes = () => {
   const [messageApi, contextHolder] = message.useMessage()
   const [newNoteTypeOpen, setNewNoteTypeOpen] = useState(false)
   const tableRef = useRef()
-  const { authenticated } = useContext(AuthContext)
+
   const [viewMode, setViewMode] = useViewMode('noteType')
 
   const [columnVisibility, setColumnVisibility] =
@@ -73,7 +72,6 @@ const NoteTypes = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='noteType'
-          authenticated={authenticated}
           cards={viewMode === 'cards'}
         />
       </Flex>

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

@@ -122,7 +122,7 @@ const NoteTypeInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -140,7 +140,7 @@ const NoteTypeInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

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

@@ -131,7 +131,7 @@ const PartInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -148,10 +148,10 @@ const PartInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={partId} />
+                        <NotesPanel _id={partId} type='part' />
                       </Card>
                     </InfoCollapse>
 
@@ -162,7 +162,7 @@ const PartInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

src/components/Dashboard/Management/Products.jsx

@@ -1,6 +1,6 @@
 // src/gcodefiles.js
 
-import React, { useState, useContext, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   Button,
@@ -15,8 +15,6 @@ import {
   Input
 } from 'antd'
 import { DownloadOutlined } from '@ant-design/icons'
-
-import { AuthContext } from '../context/AuthContext'
 import IdDisplay from '../common/IdDisplay'
 import TimeDisplay from '../common/TimeDisplay'
 import ObjectTable from '../common/ObjectTable'
@@ -37,7 +35,7 @@ const Products = () => {
   const navigate = useNavigate()
   const [newProductOpen, setNewProductOpen] = useState(false)
   const tableRef = useRef()
-  const { authenticated } = useContext(AuthContext)
+
   const [viewMode, setViewMode] = useViewMode('Products')
 
   const getProductActionItems = (id) => {
@@ -350,7 +348,6 @@ const Products = () => {
         <ObjectTable
           ref={tableRef}
           type={'product'}
-          authenticated={authenticated}
           cards={viewMode === 'cards'}
         />
       </Flex>

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

@@ -123,7 +123,7 @@ const ProductInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -140,7 +140,7 @@ const ProductInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('parts', expanded)
                       }
-                      key='parts'
+                      collapseKey='parts'
                     >
                       <ObjectTable
                         type='part'
@@ -159,10 +159,10 @@ const ProductInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={productId} />
+                        <NotesPanel _id={productId} type='product' />
                       </Card>
                     </InfoCollapse>
 
@@ -173,7 +173,7 @@ const ProductInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

src/components/Dashboard/Management/Users.jsx

@@ -1,6 +1,5 @@
-import React, { useContext, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Button, Flex, Space, Dropdown } from 'antd'
-import { AuthContext } from '../context/AuthContext'
 import ObjectTable from '../common/ObjectTable'
 import ReloadIcon from '../../Icons/ReloadIcon'
 import useColumnVisibility from '../hooks/useColumnVisibility'
@@ -11,7 +10,7 @@ import ColumnViewButton from '../common/ColumnViewButton'
 
 const Users = () => {
   const tableRef = useRef()
-  const { authenticated } = useContext(AuthContext)
+
   const [viewMode, setViewMode] = useViewMode('user')
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('user')
@@ -56,7 +55,6 @@ const Users = () => {
         ref={tableRef}
         type={'user'}
         visibleColumns={columnVisibility}
-        authenticated={authenticated}
         cards={viewMode === 'cards'}
       />
     </Flex>

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

@@ -123,7 +123,7 @@ const UserInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -141,10 +141,10 @@ const UserInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={userId} />
+                        <NotesPanel _id={userId} type='user' />
                       </Card>
                     </InfoCollapse>
 
@@ -155,7 +155,7 @@ const UserInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

src/components/Dashboard/Management/Vendors.jsx

@@ -1,6 +1,5 @@
-import React, { useState, useContext, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { Button, Flex, Space, Modal, Dropdown, message } from 'antd'
-import { AuthContext } from '../context/AuthContext'
 import NewVendor from './Vendors/NewVendor'
 import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
@@ -15,7 +14,7 @@ const Vendors = () => {
   const [messageApi, contextHolder] = message.useMessage()
   const [newVendorOpen, setNewVendorOpen] = useState(false)
   const tableRef = useRef()
-  const { authenticated } = useContext(AuthContext)
+
   const [viewMode, setViewMode] = useViewMode('vendor')
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('vendor')
@@ -72,7 +71,6 @@ const Vendors = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='vendor'
-          authenticated={authenticated}
           cards={viewMode === 'cards'}
         />
       </Flex>

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

@@ -42,17 +42,18 @@ const VendorInfo = () => {
         isEditing,
         startEditing,
         cancelEditing,
+        handleFetchObject,
         handleUpdate,
+        handleDelete,
         formValid,
         objectData,
         editLoading,
-        lock,
-        fetchObject
+        lock
       }) => {
         // Define actions for ActionHandler
         const actions = {
           reload: () => {
-            fetchObject()
+            handleFetchObject()
             return true
           },
           edit: () => {
@@ -66,6 +67,10 @@ const VendorInfo = () => {
           finishEdit: () => {
             handleUpdate()
             return true
+          },
+          delete: () => {
+            handleDelete()
+            return true
           }
         }
 
@@ -127,7 +132,7 @@ const VendorInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -144,10 +149,10 @@ const VendorInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={vendorId} />
+                        <NotesPanel _id={vendorId} type='vendor' />
                       </Card>
                     </InfoCollapse>
 
@@ -158,7 +163,7 @@ const VendorInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

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

@@ -144,7 +144,7 @@ const GCodeFileInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -162,7 +162,7 @@ const GCodeFileInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('preview', expanded)
                       }
-                      key='preview'
+                      collapseKey='preview'
                     >
                       <Card>
                         {objectData?.gcodeFileInfo?.thumbnail ? (
@@ -184,10 +184,10 @@ const GCodeFileInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={gcodeFileId} />
+                        <NotesPanel _id={gcodeFileId} type='gcodeFile' />
                       </Card>
                     </InfoCollapse>
 
@@ -198,7 +198,7 @@ const GCodeFileInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

src/components/Dashboard/Production/Jobs.jsx

@@ -1,9 +1,7 @@
 // src/Jobs.js
 
-import React, { useState, useContext, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { Button, Flex, Space, Modal, Dropdown, message } from 'antd'
-
-import { AuthContext } from '../context/AuthContext.js'
 import NewJob from './Jobs/NewJob.jsx'
 import useColumnVisibility from '../hooks/useColumnVisibility.js'
 import PlusIcon from '../../Icons/PlusIcon.jsx'
@@ -19,7 +17,6 @@ const Jobs = () => {
   const [newJobOpen, setNewJobOpen] = useState(false)
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('job')
-  const { authenticated } = useContext(AuthContext)
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('job')
 
@@ -81,7 +78,6 @@ const Jobs = () => {
           ref={tableRef}
           type={'job'}
           visibleColumns={columnVisibility}
-          authenticated={authenticated}
           cards={viewMode === 'cards'}
         />
       </Flex>

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { useLocation } from 'react-router-dom'
 import { Space, Flex, Card } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
@@ -17,14 +17,12 @@ import JobIcon from '../../../Icons/JobIcon'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
 import NoteIcon from '../../../Icons/NoteIcon'
 import ObjectActions from '../../common/ObjectActions.jsx'
-import { ApiServerContext } from '../../context/ApiServerContext'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 
 const JobInfo = () => {
   const location = useLocation()
   const jobId = new URLSearchParams(location.search).get('jobId')
-  const { fetchObjectContent } = useContext(ApiServerContext)
   const [collapseState, updateCollapseState] = useCollapseState('JobInfo', {
     info: true,
     subJobs: true,
@@ -41,9 +39,6 @@ const JobInfo = () => {
       {({
         loading,
         isEditing,
-        startEditing,
-        cancelEditing,
-        handleUpdate,
         formValid,
         objectData,
         editLoading,
@@ -55,28 +50,6 @@ const JobInfo = () => {
           reload: () => {
             fetchObject()
             return true
-          },
-          edit: () => {
-            startEditing()
-            return false
-          },
-          cancelEdit: () => {
-            cancelEditing()
-            return true
-          },
-          finishEdit: () => {
-            handleUpdate()
-            return true
-          },
-          download: () => {
-            if (jobId) {
-              fetchObjectContent(
-                jobId,
-                'job',
-                `${objectData.name || 'job'}.json`
-              )
-              return true
-            }
           }
         }
 
@@ -135,7 +108,7 @@ const JobInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -153,7 +126,7 @@ const JobInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('subJobs', expanded)
                       }
-                      key='subJobs'
+                      collapseKey='subJobs'
                     >
                       <SubJobsTree jobData={objectData} loading={loading} />
                     </InfoCollapse>
@@ -165,10 +138,10 @@ const JobInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={jobId} />
+                        <NotesPanel _id={jobId} type='job' />
                       </Card>
                     </InfoCollapse>
 
@@ -179,7 +152,7 @@ const JobInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogs', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

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

@@ -135,7 +135,7 @@ const PrinterInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('info', expanded)
                       }
-                      key='info'
+                      collapseKey='info'
                     >
                       <ObjectInfo
                         loading={loading}
@@ -153,7 +153,7 @@ const PrinterInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('jobs', expanded)
                       }
-                      key='jobs'
+                      collapseKey='jobs'
                     >
                       <PrinterJobsTree
                         subJobs={objectData?.subJobs}
@@ -168,10 +168,10 @@ const PrinterInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('notes', expanded)
                       }
-                      key='notes'
+                      collapseKey='notes'
                     >
                       <Card>
-                        <NotesPanel _id={printerId} />
+                        <NotesPanel _id={printerId} type='printer' />
                       </Card>
                     </InfoCollapse>
 
@@ -182,7 +182,7 @@ const PrinterInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogsParent', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />
@@ -201,7 +201,7 @@ const PrinterInfo = () => {
                       onToggle={(expanded) =>
                         updateCollapseState('auditLogsOwner', expanded)
                       }
-                      key='auditLogs'
+                      collapseKey='auditLogs'
                     >
                       {loading ? (
                         <InfoCollapsePlaceholder />

src/components/Dashboard/Production/SubJobs.jsx

@@ -1,9 +1,7 @@
 // src/SubJobs.js
 
-import React, { useContext, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Button, Flex, Space, Dropdown } from 'antd'
-
-import { AuthContext } from '../context/AuthContext.js'
 import useColumnVisibility from '../hooks/useColumnVisibility.js'
 import ReloadIcon from '../../Icons/ReloadIcon.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
@@ -15,7 +13,6 @@ import ColumnViewButton from '../common/ColumnViewButton.jsx'
 const SubJobs = () => {
   const tableRef = useRef()
   const [viewMode, setViewMode] = useViewMode('subJob')
-  const { authenticated } = useContext(AuthContext)
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('subJob')
 
@@ -64,7 +61,6 @@ const SubJobs = () => {
           ref={tableRef}
           type={'subJob'}
           visibleColumns={columnVisibility}
-          authenticated={authenticated}
           cards={viewMode === 'cards'}
         />
       </Flex>

src/components/Dashboard/common/EditObjectForm.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react'
 import { Form, message } from 'antd'
 import { ApiServerContext } from '../context/ApiServerContext'
+import { AuthContext } from '../context/AuthContext'
 import PropTypes from 'prop-types'
+import DeleteObjectModal from './DeleteObjectModal'
 
 /**
  * EditObjectForm is a reusable form component for editing any object type.
@@ -27,17 +29,21 @@ const EditObjectForm = ({ id, type, style, children }) => {
   const [form] = Form.useForm()
   const formUpdateValues = Form.useWatch([], form)
   const [messageApi, contextHolder] = message.useMessage()
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+  const [deleteLoading, setDeleteLoading] = useState(false)
   const {
-    fetchObjectInfo,
-    updateObjectInfo,
+    fetchObject,
+    updateObject,
+    deleteObject,
     lockObject,
     unlockObject,
-    onLockEvent,
-    onUpdateEvent,
     fetchObjectLock,
-    showError
+    showError,
+    connected,
+    subscribeToObject,
+    subscribeToLock
   } = useContext(ApiServerContext)
-
+  const { authenticated } = useContext(AuthContext)
   // Validate form on change
   useEffect(() => {
     form
@@ -46,11 +52,6 @@ const EditObjectForm = ({ id, type, style, children }) => {
       .catch(() => setFormValid(false))
   }, [form, formUpdateValues])
 
-  // Lock event handler
-  const lockEventHandler = useCallback((lockEvent) => {
-    setLock(lockEvent)
-  }, [])
-
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -60,10 +61,10 @@ const EditObjectForm = ({ id, type, style, children }) => {
     }
   }, [id, type, unlockObject])
 
-  const fetchObject = useCallback(async () => {
+  const handleFetchObject = useCallback(async () => {
     try {
       setFetchLoading(true)
-      const data = await fetchObjectInfo(id, type)
+      const data = await fetchObject(id, type)
       const lockEvent = await fetchObjectLock(id, type)
       setLock(lockEvent)
       setObjectData(data)
@@ -77,38 +78,47 @@ const EditObjectForm = ({ id, type, style, children }) => {
         fetchObject
       )
     }
-  }, [fetchObjectInfo, fetchObjectLock, id, type, form, messageApi, showError])
-
-  const updateObject = async () => {
-    const values = form.getFieldsValue()
-    await updateObjectInfo(id, type, values)
-  }
+  }, [fetchObject, fetchObjectLock, id, type, form, messageApi, showError])
 
   // Update event handler
-  const updateEventHandler = useCallback(() => {
-    fetchObject()
-  }, [fetchObject])
+  const updateObjectEventHandler = useCallback((value) => {
+    setObjectData((prev) => ({ ...prev, ...value }))
+  }, [])
+
+  // Update event handler
+  const updateLockEventHandler = useCallback((value) => {
+    setLock((prev) => ({ ...prev, ...value }))
+  }, [])
 
   useEffect(() => {
-    if (!initialized && id) {
+    if (!initialized && id && authenticated == true) {
       setInitialized(true)
-      fetchObject()
+      handleFetchObject()
     }
-  }, [id, initialized, fetchObject])
+  }, [id, initialized, handleFetchObject, authenticated])
 
   useEffect(() => {
-    if (id) {
-      const cleanup = onLockEvent(id, lockEventHandler)
-      return cleanup
+    if (id && connected) {
+      const objectUnsubscribe = subscribeToObject(
+        id,
+        type,
+        updateObjectEventHandler
+      )
+      const lockUnsubscribe = subscribeToLock(id, type, updateLockEventHandler)
+      return () => {
+        if (objectUnsubscribe) objectUnsubscribe()
+        if (lockUnsubscribe) lockUnsubscribe()
       }
-  }, [id, onLockEvent, lockEventHandler])
-
-  useEffect(() => {
-    if (id) {
-      const cleanup = onUpdateEvent(id, updateEventHandler)
-      return cleanup
     }
-  }, [id, onUpdateEvent, updateEventHandler])
+  }, [
+    id,
+    type,
+    subscribeToObject,
+    subscribeToLock,
+    updateObjectEventHandler,
+    connected,
+    updateLockEventHandler
+  ])
 
   const startEditing = () => {
     setIsEditing(true)
@@ -126,10 +136,10 @@ const EditObjectForm = ({ id, type, style, children }) => {
 
   const handleUpdate = async () => {
     try {
-      const values = await form.validateFields()
+      const value = await form.validateFields()
       setEditLoading(true)
-      await updateObject()
-      setObjectData({ ...objectData, ...values })
+      await updateObject(id, type, value)
+      setObjectData({ ...objectData, ...value })
       setIsEditing(false)
       messageApi.success('Information updated successfully')
     } catch (err) {
@@ -142,12 +152,43 @@ const EditObjectForm = ({ id, type, style, children }) => {
         () => handleUpdate()
       )
     } finally {
-      fetchObject()
+      handleFetchObject()
       setEditLoading(false)
     }
   }
 
+  const handleDelete = () => {
+    setDeleteModalOpen(true)
+  }
+
+  const confirmDelete = async () => {
+    setDeleteLoading(true)
+    try {
+      await deleteObject(id, type)
+      setDeleteModalOpen(false)
+      messageApi.success('Deleted successfully')
+      // Optionally: trigger a callback to parent to remove this object from view
+    } catch (err) {
+      messageApi.error('Failed to delete')
+      showError(
+        `Failed to delete. Message: ${err.message}. Code: ${err.code}`,
+        confirmDelete
+      )
+    } finally {
+      setDeleteLoading(false)
+    }
+  }
+
   return (
+    <>
+      <DeleteObjectModal
+        open={deleteModalOpen}
+        onOk={confirmDelete}
+        onCancel={() => setDeleteModalOpen(false)}
+        loading={deleteLoading}
+        objectType={type}
+        objectName={objectData?.name || objectData?.label || ''}
+      />
       <Form
         form={form}
         layout='vertical'
@@ -170,9 +211,11 @@ const EditObjectForm = ({ id, type, style, children }) => {
           setObjectData,
           editLoading,
           lock,
-        fetchObject
+          handleFetchObject,
+          handleDelete
         })}
       </Form>
+    </>
   )
 }
 

src/database/models/Vendor.js

@@ -2,6 +2,7 @@ import VendorIcon from '../../components/Icons/VendorIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
 import EditIcon from '../../components/Icons/EditIcon'
 import ReloadIcon from '../../components/Icons/ReloadIcon'
+import BinIcon from '../../components/Icons/BinIcon'
 
 export const Vendor = {
   name: 'vendor',
@@ -31,6 +32,15 @@ export const Vendor = {
       icon: EditIcon,
       url: (_id) =>
         `/dashboard/management/vendors/info?vendorId=${_id}&action=edit`
+    },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      label: 'Delete',
+      icon: BinIcon,
+      danger: true,
+      url: (_id) =>
+        `/dashboard/management/vendors/info?vendorId=${_id}&action=delete`
     }
   ],
   url: (id) => `/dashboard/management/vendors/info?vendorId=${id}`,