From 6870320ab4c1e626dafa14ef287932357f8c6928 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 8 Mar 2026 01:28:09 +0000
Subject: [PATCH] Implemented materials.

---
 .../Dashboard/Management/Materials.jsx        | 300 ++++--------------
 .../Management/Materials/MaterialInfo.jsx     | 199 ++++++++++++
 .../Management/Materials/NewMaterial.jsx      |   8 +-
 .../Dashboard/common/ObjectProperty.jsx       |  28 --
 .../Dashboard/context/HistoryContext.jsx      |  14 +-
 src/database/ObjectModels.js                  |   3 +
 src/database/models/Filament.js               |  14 +-
 src/database/models/Material.js               | 117 +++++++
 src/routes/ManagementRoutes.jsx               |   6 +
 9 files changed, 409 insertions(+), 280 deletions(-)
 create mode 100644 src/components/Dashboard/Management/Materials/MaterialInfo.jsx
 create mode 100644 src/database/models/Material.js

diff --git a/src/components/Dashboard/Management/Materials.jsx b/src/components/Dashboard/Management/Materials.jsx
index 8bb8694..0623da2 100644
--- a/src/components/Dashboard/Management/Materials.jsx
+++ b/src/components/Dashboard/Management/Materials.jsx
@@ -1,218 +1,26 @@
-// src/materials.js
-
-import { useEffect, useState, useContext, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import axios from 'axios'
-import {
-  Table,
-  Button,
-  Flex,
-  Space,
-  Modal,
-  Dropdown,
-  Spin
-} from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined } from '@ant-design/icons'
-import { useMessageContext } from '../context/MessageContext'
-
-import { AuthContext } from '../context/AuthContext'
+import { useRef, useState } from 'react'
+import { Button, Flex, Space, Modal, Dropdown } from 'antd'
 
 import NewMaterial from './Materials/NewMaterial'
-import IdDisplay from '../common/IdDisplay'
-import MaterialIcon from '../../Icons/MaterialIcon'
-import InfoCircleIcon from '../../Icons/InfoCircleIcon'
+
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import ColumnViewButton from '../common/ColumnViewButton'
+import ObjectTable from '../common/ObjectTable'
 import PlusIcon from '../../Icons/PlusIcon'
 import ReloadIcon from '../../Icons/ReloadIcon'
-import TimeDisplay from '../common/TimeDisplay'
-
-import config from '../../../config'
-
-const useStyle = createStyles(({ css, token }) => {
-  const { antCls } = token
-  return {
-    customTable: css`
-      ${antCls}-table {
-        ${antCls}-table-container {
-          ${antCls}-table-body,
-          ${antCls}-table-content {
-            scrollbar-width: thin;
-            scrollbar-color: #eaeaea transparent;
-            scrollbar-gutter: stable;
-          }
-        }
-      }
-    `
-  }
-})
+import ListIcon from '../../Icons/ListIcon'
+import GridIcon from '../../Icons/GridIcon'
+import useViewMode from '../hooks/useViewMode'
+import ExportListButton from '../common/ExportListButton'
 
 const Materials = () => {
-  const { showError } = useMessageContext()
-  const navigate = useNavigate()
-  const { styles } = useStyle()
-
-  const [materialsData, setMaterialsData] = useState([])
-  const [page, setPage] = useState(1)
-  const [hasMore, setHasMore] = useState(true)
-  const [loading, setLoading] = useState(true)
-  const [lazyLoading, setLazyLoading] = useState(false)
   const [newMaterialOpen, setNewMaterialOpen] = useState(false)
+  const tableRef = useRef()
 
-  const { authenticated } = useContext(AuthContext)
+  const [viewMode, setViewMode] = useViewMode('material')
 
-  const fetchMaterialsData = useCallback(
-    async (pageNum = 1, append = false) => {
-      try {
-        const response = await axios.get(`${config.backendUrl}/materials`, {
-          params: {
-            page: pageNum,
-            limit: 25
-          },
-          headers: {
-            Accept: 'application/json'
-          },
-          withCredentials: true
-        })
-
-        const newData = response.data
-        setHasMore(newData.length === 25) // If we get less than 25 items, we've reached the end
-
-        if (append) {
-          setMaterialsData((prev) => [...prev, ...newData])
-        } else {
-          setMaterialsData(newData)
-        }
-
-        setLoading(false)
-        setLazyLoading(false)
-      } catch (error) {
-        if (error.response) {
-          showError(
-            `Error updating material details: ${error.response.status}`
-          )
-        } else {
-          showError(
-            'An unexpected error occurred. Please try again later.'
-          )
-        }
-        setLoading(false)
-        setLazyLoading(false)
-      }
-    },
-    [showError]
-  )
-
-  useEffect(() => {
-    if (authenticated) {
-      fetchMaterialsData()
-    }
-  }, [authenticated, fetchMaterialsData])
-
-  const handleScroll = useCallback(
-    (e) => {
-      const { target } = e
-      const scrollHeight = target.scrollHeight
-      const scrollTop = target.scrollTop
-      const clientHeight = target.clientHeight
-
-      // If we're near the bottom (within 100px) and not currently loading
-      if (
-        scrollHeight - scrollTop - clientHeight < 100 &&
-        !lazyLoading &&
-        hasMore
-      ) {
-        setLazyLoading(true)
-        const nextPage = page + 1
-        setPage(nextPage)
-        fetchMaterialsData(nextPage, true)
-      }
-    },
-    [page, lazyLoading, hasMore, fetchMaterialsData]
-  )
-
-  const getMaterialActionItems = (id) => {
-    return {
-      items: [
-        {
-          label: 'Info',
-          key: 'info',
-          icon: <InfoCircleIcon />
-        }
-      ],
-      onClick: ({ key }) => {
-        if (key === 'info') {
-          navigate(`/dashboard/management/materials/info?materialId=${id}`)
-        }
-      }
-    }
-  }
-
-  const columns = [
-    {
-      title: '',
-      dataIndex: '',
-      key: 'icon',
-      width: 40,
-      fixed: 'left',
-      render: () => <MaterialIcon></MaterialIcon>
-    },
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      width: 200,
-      fixed: 'left'
-    },
-    {
-      title: 'ID',
-      dataIndex: '_id',
-      key: 'id',
-      width: 180,
-      render: (text) => <IdDisplay id={text} type={'material'} longId={false} />
-    },
-    {
-      title: 'Category',
-      dataIndex: 'category',
-      key: 'category',
-      width: 150
-    },
-    {
-      title: 'Created At',
-      dataIndex: 'createdAt',
-      key: 'createdAt',
-      width: 180,
-      render: (createdAt) => {
-        if (createdAt) {
-          return <TimeDisplay dateTime={createdAt} />
-        } else {
-          return 'n/a'
-        }
-      }
-    },
-    {
-      title: 'Actions',
-      key: 'actions',
-      fixed: 'right',
-      width: 150,
-      render: (text, record) => {
-        return (
-          <Space gap='small'>
-            <Button
-              icon={<InfoCircleIcon />}
-              onClick={() =>
-                navigate(
-                  `/dashboard/management/materials/info?materialId=${record._id}`
-                )
-              }
-            />
-            <Dropdown menu={getMaterialActionItems(record._id)}>
-              <Button>Actions</Button>
-            </Dropdown>
-          </Space>
-        )
-      }
-    }
-  ]
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility('material')
 
   const actionItems = {
     items: [
@@ -230,7 +38,7 @@ const Materials = () => {
     ],
     onClick: ({ key }) => {
       if (key === 'reloadList') {
-        fetchMaterialsData()
+        tableRef.current?.reload()
       } else if (key === 'newMaterial') {
         setNewMaterialOpen(true)
       }
@@ -240,43 +48,53 @@ const Materials = () => {
   return (
     <>
       <Flex vertical={'true'} gap='large'>
-        <Space>
-          <Dropdown menu={actionItems}>
-            <Button>Actions</Button>
-          </Dropdown>
-        </Space>
-        <Table
-          dataSource={materialsData}
-          className={styles.customTable}
-          columns={columns}
-          pagination={false}
-          rowKey='_id'
-          loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
-          scroll={{ y: 'calc(100vh - 270px)' }}
-          onScroll={handleScroll}
+        <Flex justify={'space-between'}>
+          <Space>
+            <Dropdown menu={actionItems}>
+              <Button>Actions</Button>
+            </Dropdown>
+            <ColumnViewButton
+              type='material'
+              loading={false}
+              visibleState={columnVisibility}
+              updateVisibleState={setColumnVisibility}
+            />
+            <ExportListButton objectType='material' />
+          </Space>
+          <Space>
+            <Button
+              icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+              onClick={() =>
+                setViewMode(viewMode === 'cards' ? 'list' : 'cards')
+              }
+            />
+          </Space>
+        </Flex>
+
+        <ObjectTable
+          ref={tableRef}
+          type='material'
+          cards={viewMode === 'cards'}
+          visibleColumns={columnVisibility}
         />
-        {lazyLoading && (
-          <div style={{ textAlign: 'center', padding: '10px' }}>
-            <Spin indicator={<LoadingOutlined spin />} />
-          </div>
-        )}
-      </Flex>
-      <Modal
-        open={newMaterialOpen}
-        styles={{ content: { paddingBottom: '24px' } }}
-        footer={null}
-        width={700}
-        onCancel={() => {
-          setNewMaterialOpen(false)
-        }}
-      >
-        <NewMaterial
-          onSuccess={() => {
+
+        <Modal
+          open={newMaterialOpen}
+          footer={null}
+          width={700}
+          onCancel={() => {
             setNewMaterialOpen(false)
-            fetchMaterialsData()
           }}
-        />
-      </Modal>
+        >
+          <NewMaterial
+            onOk={() => {
+              setNewMaterialOpen(false)
+              tableRef.current?.reload()
+            }}
+            reset={newMaterialOpen}
+          />
+        </Modal>
+      </Flex>
     </>
   )
 }
diff --git a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
new file mode 100644
index 0000000..297ca07
--- /dev/null
+++ b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
@@ -0,0 +1,199 @@
+import { useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Space, Flex, Card } from 'antd'
+import loglevel from 'loglevel'
+import config from '../../../../config'
+import useCollapseState from '../../hooks/useCollapseState'
+import NotesPanel from '../../common/NotesPanel'
+import InfoCollapse from '../../common/InfoCollapse'
+import ObjectInfo from '../../common/ObjectInfo'
+import ViewButton from '../../common/ViewButton'
+import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
+import NoteIcon from '../../../Icons/NoteIcon.jsx'
+import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
+import ObjectForm from '../../common/ObjectForm'
+import EditButtons from '../../common/EditButtons'
+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'
+import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'
+
+const log = loglevel.getLogger('MaterialInfo')
+log.setLevel(config.logLevel)
+
+const MaterialInfo = () => {
+  const location = useLocation()
+  const objectFormRef = useRef(null)
+  const actionHandlerRef = useRef(null)
+  const materialId = new URLSearchParams(location.search).get('materialId')
+  const [collapseState, updateCollapseState] = useCollapseState('MaterialInfo', {
+    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?.handleFetchObject?.()
+      return true
+    },
+    edit: () => {
+      objectFormRef?.current?.startEditing?.()
+      return false
+    },
+    cancelEdit: () => {
+      objectFormRef?.current?.cancelEditing?.()
+      return true
+    },
+    finishEdit: () => {
+      objectFormRef?.current?.handleUpdate?.()
+      return true
+    },
+    delete: () => {
+      objectFormRef?.current?.handleDelete?.()
+      return true
+    }
+  }
+
+  return (
+    <>
+      <Flex
+        gap='large'
+        vertical='true'
+        style={{ maxHeight: '100%', minHeight: 0 }}
+      >
+        <Flex justify={'space-between'}>
+          <Space size='middle'>
+            <Space size='small'>
+              <ObjectActions
+                type='material'
+                id={materialId}
+                disabled={objectFormState.loading}
+                objectData={objectFormState.objectData}
+              />
+              <ViewButton
+                disabled={objectFormState.loading}
+                items={[
+                  { key: 'info', label: 'Material Information' },
+                  { key: 'notes', label: 'Notes' },
+                  { key: 'auditLogs', label: 'Audit Logs' }
+                ]}
+                visibleState={collapseState}
+                updateVisibleState={updateCollapseState}
+              />
+              <UserNotifierToggle
+                type='material'
+                objectData={objectFormState.objectData}
+                disabled={objectFormState.loading}
+              />
+              <DocumentPrintButton
+                type='material'
+                objectData={objectFormState.objectData}
+                disabled={objectFormState.loading}
+              />
+            </Space>
+            <LockIndicator lock={objectFormState.lock} />
+          </Space>
+          <Space>
+            <EditButtons
+              isEditing={objectFormState.isEditing}
+              handleUpdate={() => {
+                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}
+            />
+          </Space>
+        </Flex>
+        <ScrollBox>
+          <Flex vertical gap={'large'}>
+            <ActionHandler
+              actions={actions}
+              loading={objectFormState.loading}
+              ref={actionHandlerRef}
+            >
+              <InfoCollapse
+                title='Material Information'
+                icon={<InfoCircleIcon />}
+                active={collapseState.info}
+                onToggle={(expanded) => updateCollapseState('info', expanded)}
+                collapseKey='info'
+              >
+                <ObjectForm
+                  id={materialId}
+                  type='material'
+                  style={{ height: '100%' }}
+                  ref={objectFormRef}
+                  onStateChange={(state) => {
+                    setEditFormState((prev) => ({ ...prev, ...state }))
+                  }}
+                >
+                  {({ loading, isEditing, objectData }) => (
+                    <ObjectInfo
+                      loading={loading}
+                      isEditing={isEditing}
+                      type='material'
+                      objectData={objectData}
+                    />
+                  )}
+                </ObjectForm>
+              </InfoCollapse>
+            </ActionHandler>
+            <InfoCollapse
+              title='Notes'
+              icon={<NoteIcon />}
+              active={collapseState.notes}
+              onToggle={(expanded) => updateCollapseState('notes', expanded)}
+              collapseKey='notes'
+            >
+              <Card>
+                <NotesPanel _id={materialId} type='material' />
+              </Card>
+            </InfoCollapse>
+            <InfoCollapse
+              title='Audit Logs'
+              icon={<AuditLogIcon />}
+              active={collapseState.auditLogs}
+              onToggle={(expanded) =>
+                updateCollapseState('auditLogs', expanded)
+              }
+              collapseKey='auditLogs'
+            >
+              {objectFormState.loading ? (
+                <InfoCollapsePlaceholder />
+              ) : (
+                <ObjectTable
+                  type='auditLog'
+                  masterFilter={{ 'parent._id': materialId }}
+                  visibleColumns={{ _id: false, 'parent._id': false }}
+                />
+              )}
+            </InfoCollapse>
+          </Flex>
+        </ScrollBox>
+      </Flex>
+    </>
+  )
+}
+
+export default MaterialInfo
diff --git a/src/components/Dashboard/Management/Materials/NewMaterial.jsx b/src/components/Dashboard/Management/Materials/NewMaterial.jsx
index bf6c56e..cd04f18 100644
--- a/src/components/Dashboard/Management/Materials/NewMaterial.jsx
+++ b/src/components/Dashboard/Management/Materials/NewMaterial.jsx
@@ -61,9 +61,11 @@ const NewMaterial = ({ onOk }) => {
             loading={submitLoading}
             formValid={formValid}
             title='New Material'
-            onSubmit={() => {
-              handleSubmit()
-              onOk()
+            onSubmit={async () => {
+              const result = await handleSubmit()
+              if (result) {
+                onOk()
+              }
             }}
           />
         )
diff --git a/src/components/Dashboard/common/ObjectProperty.jsx b/src/components/Dashboard/common/ObjectProperty.jsx
index 1bca065..3ed2d2b 100644
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/src/components/Dashboard/common/ObjectProperty.jsx
@@ -51,15 +51,6 @@ import { round } from '../utils/Utils'
 
 const { Text } = Typography
 
-const MATERIAL_OPTIONS = [
-  { value: 'PLA', label: 'PLA' },
-  { value: 'PETG', label: 'PETG' },
-  { value: 'ABS', label: 'ABS' },
-  { value: 'ASA', label: 'ASA' },
-  { value: 'HIPS', label: 'HIPS' },
-  { value: 'TPU', label: 'TPU' }
-]
-
 const ObjectProperty = ({
   type = 'text',
   prefix,
@@ -432,17 +423,6 @@ const ObjectProperty = ({
             )
           }
         }
-        case 'material': {
-          if (value) {
-            return <Text {...textParams}>{value}</Text>
-          } else {
-            return (
-              <Text type='secondary' {...textParams}>
-                n/a
-              </Text>
-            )
-          }
-        }
         case 'id': {
           if (value) {
             return (
@@ -754,14 +734,6 @@ const ObjectProperty = ({
           )
         case 'markdown':
           return <MarkdownInput {...inputProps} />
-        case 'material':
-          return (
-            <Select
-              options={MATERIAL_OPTIONS}
-              placeholder={label}
-              {...inputProps}
-            />
-          )
         case 'id':
           // id is not editable, just show view mode
           if (value) {
diff --git a/src/components/Dashboard/context/HistoryContext.jsx b/src/components/Dashboard/context/HistoryContext.jsx
index de0e4fa..8bb7826 100644
--- a/src/components/Dashboard/context/HistoryContext.jsx
+++ b/src/components/Dashboard/context/HistoryContext.jsx
@@ -18,7 +18,8 @@ export const HistoryProvider = ({ children }) => {
     '/dashboard/management/filaments': 'Filaments',
     '/dashboard/management/parts': 'Parts',
     '/dashboard/management/products': 'Products',
-    '/dashboard/management/vendors': 'Vendors'
+    '/dashboard/management/vendors': 'Vendors',
+    '/dashboard/management/materials': 'Materials'
   }
 
   const getEntityDetails = (pathname, search) => {
@@ -65,6 +66,14 @@ export const HistoryProvider = ({ children }) => {
         displayName: `Vendor Info${vendorId ? ` (${vendorId})` : ''}`
       }
     }
+    if (pathname.includes('/materials/info')) {
+      const materialId = searchParams.get('materialId')
+      return {
+        type: 'material',
+        id: materialId,
+        displayName: `Material Info${materialId ? ` (${materialId})` : ''}`
+      }
+    }
 
     // For base routes, return the simple name
     const baseName = baseRouteNames[pathname]
@@ -85,7 +94,8 @@ export const HistoryProvider = ({ children }) => {
 
     if (
       newPath === '/dashboard/production/gcodefiles' ||
-      newPath === '/dashboard/management/filaments'
+      newPath === '/dashboard/management/filaments' ||
+      newPath === '/dashboard/management/materials'
     ) {
       setNavigationHistory([
         {
diff --git a/src/database/ObjectModels.js b/src/database/ObjectModels.js
index ac4976a..ddb3043 100644
--- a/src/database/ObjectModels.js
+++ b/src/database/ObjectModels.js
@@ -1,6 +1,7 @@
 import { Printer } from './models/Printer.js'
 import { Host } from './models/Host.js'
 import { Filament } from './models/Filament.js'
+import { Material } from './models/Material.js'
 import { FilamentSku } from './models/FilamentSku.js'
 import { Spool } from './models/Spool'
 import { GCodeFile } from './models/GCodeFile'
@@ -45,6 +46,7 @@ export const objectModels = [
   Host,
   Filament,
   FilamentSku,
+  Material,
   Spool,
   GCodeFile,
   Job,
@@ -89,6 +91,7 @@ export {
   Host,
   Filament,
   FilamentSku,
+  Material,
   Spool,
   GCodeFile,
   Job,
diff --git a/src/database/models/Filament.js b/src/database/models/Filament.js
index d66cab8..a92dcec 100644
--- a/src/database/models/Filament.js
+++ b/src/database/models/Filament.js
@@ -74,16 +74,16 @@ export const Filament = {
   columns: [
     '_reference',
     'name',
-    'type',
+    'material',
     'density',
     'diameter',
     'cost',
     'createdAt',
     'updatedAt'
   ],
-  filters: ['_id', 'name', 'type'],
-  sorters: ['name', 'createdAt', 'type', 'updatedAt'],
-  group: ['diameter', 'type'],
+  filters: ['_id', 'name', 'material'],
+  sorters: ['name', 'createdAt', 'material', 'updatedAt'],
+  group: ['diameter', 'material'],
   properties: [
     {
       name: '_id',
@@ -113,11 +113,13 @@ export const Filament = {
       readOnly: true
     },
     {
-      name: 'type',
+      name: 'material',
       label: 'Material',
       required: true,
       columnWidth: 150,
-      type: 'material'
+      type: 'object',
+      objectType: 'material',
+      showHyperlink: true
     },
     {
       name: 'diameter',
diff --git a/src/database/models/Material.js b/src/database/models/Material.js
new file mode 100644
index 0000000..7a9e00c
--- /dev/null
+++ b/src/database/models/Material.js
@@ -0,0 +1,117 @@
+import MaterialIcon from '../../components/Icons/MaterialIcon'
+import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
+import EditIcon from '../../components/Icons/EditIcon'
+import CheckIcon from '../../components/Icons/CheckIcon'
+import XMarkIcon from '../../components/Icons/XMarkIcon'
+import ReloadIcon from '../../components/Icons/ReloadIcon'
+import BinIcon from '../../components/Icons/BinIcon'
+
+export const Material = {
+  name: 'material',
+  label: 'Material',
+  prefix: 'MAT',
+  icon: MaterialIcon,
+  actions: [
+    {
+      name: 'info',
+      label: 'Info',
+      default: true,
+      row: true,
+      icon: InfoCircleIcon,
+      url: (_id) => `/dashboard/management/materials/info?materialId=${_id}`
+    },
+    {
+      name: 'reload',
+      label: 'Reload',
+      icon: ReloadIcon,
+      url: (_id) =>
+        `/dashboard/management/materials/info?materialId=${_id}&action=reload`
+    },
+    {
+      name: 'edit',
+      label: 'Edit',
+      row: true,
+      icon: EditIcon,
+      url: (_id) =>
+        `/dashboard/management/materials/info?materialId=${_id}&action=edit`,
+      visible: (objectData) => {
+        return !(objectData?._isEditing && objectData?._isEditing == true)
+      }
+    },
+    {
+      name: 'finishEdit',
+      label: 'Save Edits',
+      icon: CheckIcon,
+      url: (_id) =>
+        `/dashboard/management/materials/info?materialId=${_id}&action=finishEdit`,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
+    },
+    {
+      name: 'cancelEdit',
+      label: 'Cancel Edits',
+      icon: XMarkIcon,
+      url: (_id) =>
+        `/dashboard/management/materials/info?materialId=${_id}&action=cancelEdit`,
+      visible: (objectData) => {
+        return objectData?._isEditing && objectData?._isEditing == true
+      }
+    },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      label: 'Delete',
+      icon: BinIcon,
+      danger: true,
+      url: (_id) =>
+        `/dashboard/management/materials/info?materialId=${_id}&action=delete`
+    }
+  ],
+  url: (id) => `/dashboard/management/materials/info?materialId=${id}`,
+  columns: ['_reference', 'name', 'tags', 'createdAt', 'updatedAt'],
+  filters: ['_id', 'name', 'tags'],
+  sorters: ['name', 'createdAt', 'updatedAt', '_id'],
+  group: ['tags'],
+  properties: [
+    {
+      name: '_id',
+      label: 'ID',
+      columnFixed: 'left',
+      type: 'id',
+      objectType: 'material',
+      showCopy: true
+    },
+    {
+      name: 'createdAt',
+      label: 'Created At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: 'name',
+      label: 'Name',
+      columnFixed: 'left',
+      required: true,
+      type: 'text'
+    },
+    {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'dateTime',
+      readOnly: true
+    },
+    {
+      name: 'tags',
+      label: 'Tags',
+      required: false,
+      type: 'tags'
+    },
+    {
+      name: 'url',
+      label: 'Link',
+      required: false,
+      type: 'url'
+    }
+  ]
+}
diff --git a/src/routes/ManagementRoutes.jsx b/src/routes/ManagementRoutes.jsx
index 8c4aab4..895538f 100644
--- a/src/routes/ManagementRoutes.jsx
+++ b/src/routes/ManagementRoutes.jsx
@@ -16,6 +16,7 @@ const ProductSkuInfo = lazy(() => import('../components/Dashboard/Management/Pro
 const Vendors = lazy(() => import('../components/Dashboard/Management/Vendors'))
 const VendorInfo = lazy(() => import('../components/Dashboard/Management/Vendors/VendorInfo'))
 const Materials = lazy(() => import('../components/Dashboard/Management/Materials'))
+const MaterialInfo = lazy(() => import('../components/Dashboard/Management/Materials/MaterialInfo.jsx'))
 const Couriers = lazy(() => import('../components/Dashboard/Management/Couriers'))
 const CourierInfo = lazy(() => import('../components/Dashboard/Management/Couriers/CourierInfo.jsx'))
 const CourierServices = lazy(() => import('../components/Dashboard/Management/CourierServices'))
@@ -108,6 +109,11 @@ const ManagementRoutes = [
     element={<FileInfo />}
   />,
   <Route key='materials' path='management/materials' element={<Materials />} />,
+  <Route
+    key='materials-info'
+    path='management/materials/info'
+    element={<MaterialInfo />}
+  />,
   <Route key='couriers' path='management/couriers' element={<Couriers />} />,
   <Route
     key='couriers-info'