diff --git a/assets/icons/documentjobicon.svg b/assets/icons/documentjobicon.svg
new file mode 100644
index 0000000..cc1ba74
--- /dev/null
+++ b/assets/icons/documentjobicon.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/assets/icons/fileicon.svg b/assets/icons/fileicon.svg
new file mode 100644
index 0000000..a5088c2
--- /dev/null
+++ b/assets/icons/fileicon.svg
@@ -0,0 +1,8 @@
+
+
+
diff --git a/design_files/documentjobicon.afdesign b/design_files/documentjobicon.afdesign
new file mode 100644
index 0000000..124d60b
Binary files /dev/null and b/design_files/documentjobicon.afdesign differ
diff --git a/design_files/fileicon.afdesign b/design_files/fileicon.afdesign
new file mode 100644
index 0000000..38d6e13
Binary files /dev/null and b/design_files/fileicon.afdesign differ
diff --git a/src/components/Dashboard/Management/DocumentJobs.jsx b/src/components/Dashboard/Management/DocumentJobs.jsx
new file mode 100644
index 0000000..9c3e131
--- /dev/null
+++ b/src/components/Dashboard/Management/DocumentJobs.jsx
@@ -0,0 +1,98 @@
+import { useState, useRef } from 'react'
+import { Button, Flex, Space, Modal, Dropdown, message } from 'antd'
+import NewDocumentJob from './DocumentJobs/NewDocumentJob'
+import ObjectTable from '../common/ObjectTable'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import GridIcon from '../../Icons/GridIcon'
+import ListIcon from '../../Icons/ListIcon'
+import useViewMode from '../hooks/useViewMode'
+import ColumnViewButton from '../common/ColumnViewButton'
+
+const DocumentJobs = () => {
+ const [messageApi, contextHolder] = message.useMessage()
+ const [newDocumentJobOpen, setNewDocumentJobOpen] = useState(false)
+ const tableRef = useRef()
+
+ const [viewMode, setViewMode] = useViewMode('documentJob')
+
+ const [columnVisibility, setColumnVisibility] =
+ useColumnVisibility('documentJob')
+
+ const actionItems = {
+ items: [
+ {
+ label: 'New Document Job',
+ key: 'newDocumentJob',
+ icon:
+ },
+ { type: 'divider' },
+ {
+ label: 'Reload List',
+ key: 'reloadList',
+ icon:
+ }
+ ],
+ onClick: ({ key }) => {
+ if (key === 'reloadList') {
+ tableRef.current?.reload()
+ } else if (key === 'newDocumentJob') {
+ setNewDocumentJobOpen(true)
+ }
+ }
+ }
+
+ return (
+ <>
+
+ {contextHolder}
+
+
+
+
+
+
+
+
+ : }
+ onClick={() =>
+ setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+ }
+ />
+
+
+
+
+ setNewDocumentJobOpen(false)}
+ footer={null}
+ destroyOnHidden={true}
+ width={900}
+ >
+ {
+ setNewDocumentJobOpen(false)
+ messageApi.success('New note type created successfully.')
+ tableRef.current?.reload()
+ }}
+ reset={!newDocumentJobOpen}
+ />
+
+
+ )
+}
+
+export default DocumentJobs
diff --git a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
new file mode 100644
index 0000000..68672a3
--- /dev/null
+++ b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
@@ -0,0 +1,195 @@
+import { useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Space, Flex, Card } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import loglevel from 'loglevel'
+import config from '../../../../config.js'
+import useCollapseState from '../../hooks/useCollapseState.js'
+import NotesPanel from '../../common/NotesPanel.jsx'
+import InfoCollapse from '../../common/InfoCollapse.jsx'
+import ObjectInfo from '../../common/ObjectInfo.jsx'
+import ViewButton from '../../common/ViewButton.jsx'
+import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
+import NoteIcon from '../../../Icons/NoteIcon.jsx'
+import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import ObjectForm from '../../common/ObjectForm.jsx'
+import EditButtons from '../../common/EditButtons.jsx'
+import LockIndicator from '../../common/LockIndicator.jsx'
+import ActionHandler from '../../common/ActionHandler.jsx'
+import ObjectActions from '../../common/ObjectActions.jsx'
+import ObjectTable from '../../common/ObjectTable.jsx'
+import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
+import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+
+const log = loglevel.getLogger('DocumentJobInfo')
+log.setLevel(config.logLevel)
+
+const DocumentJobInfo = () => {
+ const location = useLocation()
+ const objectFormRef = useRef(null)
+ const actionHandlerRef = useRef(null)
+ const documentJobId = new URLSearchParams(location.search).get(
+ 'documentJobId'
+ )
+ const [collapseState, updateCollapseState] = useCollapseState(
+ 'DocumentJobInfo',
+ {
+ info: true,
+ notes: true,
+ auditLogs: true
+ }
+ )
+ const [objectFormState, setEditFormState] = useState({
+ isEditing: false,
+ editLoading: false,
+ formValid: false,
+ lock: null,
+ loading: false,
+ objectData: {}
+ })
+
+ const actions = {
+ reload: () => {
+ objectFormRef?.current?.fetchObject?.()
+ return true
+ },
+ edit: () => {
+ objectFormRef?.current?.startEditing?.()
+ return false
+ },
+ cancelEdit: () => {
+ objectFormRef?.current?.cancelEditing?.()
+ return true
+ },
+ finishEdit: () => {
+ objectFormRef?.current?.handleUpdate?.()
+ return true
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ {
+ actionHandlerRef.current.callAction('finishEdit')
+ }}
+ cancelEditing={() => {
+ actionHandlerRef.current.callAction('cancelEdit')
+ }}
+ startEditing={() => {
+ actionHandlerRef.current.callAction('edit')
+ }}
+ editLoading={objectFormState.editLoading}
+ formValid={objectFormState.formValid}
+ disabled={objectFormState.lock?.locked || objectFormState.loading}
+ loading={objectFormState.editLoading}
+ />
+
+
+
+
+
+ }
+ active={collapseState.info}
+ onToggle={(expanded) => updateCollapseState('info', expanded)}
+ collapseKey='info'
+ >
+ {
+ setEditFormState((prev) => ({ ...prev, ...state }))
+ }}
+ >
+ {({ loading, isEditing, objectData }) => (
+ }
+ isEditing={isEditing}
+ type='documentJob'
+ objectData={objectData}
+ />
+ )}
+
+
+
+ }
+ active={collapseState.notes}
+ onToggle={(expanded) => updateCollapseState('notes', expanded)}
+ collapseKey='notes'
+ >
+
+
+
+
+ }
+ active={collapseState.auditLogs}
+ onToggle={(expanded) =>
+ updateCollapseState('auditLogs', expanded)
+ }
+ collapseKey='auditLogs'
+ >
+ {objectFormState.loading ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ }
+ active={collapseState.info}
+ onToggle={(expanded) => updateCollapseState('info', expanded)}
+ collapseKey='info'
+ >
+ {
+ setEditFormState((prev) => ({ ...prev, ...state }))
+ }}
+ >
+ {({ loading, isEditing, objectData }) => (
+
+ )}
+
+
+
+ }
+ active={collapseState.notes}
+ onToggle={(expanded) => updateCollapseState('notes', expanded)}
+ collapseKey='notes'
+ >
+
+
+
+
+ }
+ active={collapseState.auditLogs}
+ onToggle={(expanded) =>
+ updateCollapseState('auditLogs', expanded)
+ }
+ collapseKey='auditLogs'
+ >
+ {objectFormState.loading ? (
+
+ ) : (
+
+ )}
+
+
+