Add stock locations and stock transfers to inventory sidebar, routes, and database models

This commit is contained in:
Tom Butcher 2026-03-21 23:13:59 +00:00
parent 17da8a4407
commit 4f0fe89398
19 changed files with 1307 additions and 1 deletions

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M43.002,56.36L34.763,61.13C32.69,62.329 30.313,62.329 28.262,61.13L7.686,49.23C5.644,48.067 4.441,45.98 4.441,43.613L4.441,19.857C4.441,17.49 5.644,15.403 7.686,14.218L28.262,2.357C30.313,1.136 32.69,1.136 34.763,2.357L55.317,14.218C57.359,15.403 58.563,17.49 58.563,19.857L58.563,29.046C58.328,29.131 58.089,29.228 57.849,29.338L53.423,31.365L53.423,23.065L34.072,34.087L34.072,40.228L32.231,41.071L32.221,41.076C30.543,41.84 29.474,43.061 28.932,44.416L28.932,34.121L9.576,23.093L9.576,42.668C9.576,43.743 10.14,44.685 11.082,45.245L28.484,55.304C28.7,55.436 28.732,55.463 28.932,55.556L28.932,48.876L29.226,49.54L29.779,50.37L30.487,51.108C31.389,51.893 32.586,52.451 34.072,52.537L34.072,55.556C34.36,55.41 34.43,55.359 34.74,55.186L39.287,52.558L42.996,52.566L43.002,56.36ZM19.147,13.561L11.812,17.8C11.583,17.927 11.53,17.997 11.392,18.125L31.484,29.577L38.568,25.534C34.008,22.886 22.086,15.408 19.147,13.561ZM43.622,22.649L51.582,18.106C51.464,17.992 51.421,17.927 51.213,17.8L32.992,7.283C32.05,6.719 30.953,6.719 30.011,7.283L24.048,10.729L43.622,22.649Z"/>
<g transform="matrix(0.512064,0,0,0.512064,31.502,31.239544)">
<path d="M3.845,24.535C-2.218,27.285 -0.765,35.739 5.782,35.754L28.016,35.801C28.235,35.801 28.298,35.879 28.298,36.098L28.329,58.239C28.345,64.864 36.86,66.16 39.673,59.973L62.563,10.082C65.594,3.411 60.548,-1.433 53.891,1.614L3.845,24.535ZM15.626,28.02C15.454,28.02 15.407,27.895 15.61,27.801L53.079,10.754C53.313,10.661 53.469,10.707 53.329,11.02L36.219,48.457C36.157,48.614 36.032,48.567 36.032,48.41L36.141,31.973C36.157,29.067 35.001,27.895 32.079,27.91L15.626,28.02Z" style="fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M37.609,59.482L34.763,61.13C32.69,62.329 30.313,62.329 28.262,61.13L7.686,49.23C5.644,48.067 4.441,45.98 4.441,43.613L4.441,19.857C4.441,17.49 5.644,15.403 7.686,14.218L28.262,2.357C30.313,1.136 32.69,1.136 34.763,2.357L55.317,14.218C57.359,15.403 58.563,17.49 58.563,19.857L58.563,29.069L53.423,29.069L53.423,23.065L48.562,25.834L48.238,24.714L47.694,23.67L46.948,22.757L46.033,22.016L45.35,21.663L51.582,18.106C51.464,17.992 51.421,17.927 51.213,17.8L32.992,7.283C32.05,6.719 30.953,6.719 30.011,7.283L24.048,10.729L41.312,21.242L40.408,21.525L39.397,22.064L38.468,22.819L36.769,24.469C31.434,21.272 21.754,15.2 19.147,13.561L11.812,17.8C11.583,17.927 11.53,17.997 11.392,18.125L31.484,29.577L31.548,29.541L30.36,30.694C30.348,30.712 29.57,31.624 29.57,31.624L28.978,32.699L28.621,33.855L28.613,33.939L9.576,23.093L9.576,42.668C9.576,43.743 10.14,44.685 11.082,45.245L28.484,55.304C28.672,55.419 28.72,55.454 28.861,55.522L28.943,55.802L29.486,56.835L30.221,57.739L31.121,58.481L32.155,59.031L33.284,59.369L34.463,59.482L37.609,59.482ZM34.072,42.976L34.072,47.577L33.291,47.651L32.166,47.984L31.133,48.529L30.231,49.266L29.492,50.169L28.946,51.202L28.932,51.249L28.932,37.203L28.987,37.379L29.571,38.438L30.361,39.372L34.072,42.976Z"/>
<g transform="matrix(0.504578,0,0,0.504578,32,24.523529)">
<path d="M53.106,52.746L42.032,52.551L4.882,52.551C2.095,52.551 0,54.639 0,57.433C0,60.236 2.095,62.347 4.882,62.347L42.032,62.347L53.106,62.113C56.566,62.084 58.318,59.77 58.318,57.426C58.318,55.106 56.566,52.769 53.106,52.746ZM38.717,69.984C37.78,70.874 37.339,72.072 37.339,73.386C37.339,76.204 39.34,78.237 42.19,78.237C43.434,78.237 44.82,77.654 45.709,76.765L61.858,61.062C63.936,59.039 63.944,55.842 61.858,53.836L45.709,38.133C44.82,37.244 43.434,36.661 42.19,36.661C39.34,36.661 37.339,38.694 37.339,41.512C37.339,42.826 37.78,44 38.717,44.906L47.179,53.013L52.155,57.433L47.036,62.028L38.717,69.984Z" style="fill-rule:nonzero;"/>
<path d="M10.303,16.133C6.843,16.155 5.114,18.475 5.114,20.82C5.114,23.14 6.843,25.477 10.303,25.507L21.408,25.717L58.527,25.717C61.321,25.717 63.409,23.629 63.409,20.827C63.409,18.032 61.321,15.945 58.527,15.945L21.408,15.945L10.303,16.133ZM24.691,33.354L16.373,25.422L11.261,20.827L16.23,16.383L24.691,8.3C25.652,7.387 26.101,6.22 26.101,4.906C26.101,2.063 24.069,0.055 21.242,0.055C19.982,0.055 18.62,0.63 17.724,1.527L1.582,17.205C-0.535,19.236 -0.496,22.433 1.582,24.449L17.724,40.127C18.62,41.024 19.982,41.606 21.242,41.606C24.069,41.606 26.101,39.591 26.101,36.748C26.101,35.442 25.652,34.244 24.691,33.354Z" style="fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -9,6 +9,8 @@ import PurchaseOrderIcon from '../../Icons/PurchaseOrderIcon'
import ShipmentIcon from '../../Icons/ShipmentIcon'
import OrderItemIcon from '../../Icons/OrderItemIcon'
import InventoryIcon from '../../Icons/InventoryIcon'
import StockLocationIcon from '../../Icons/StockLocationIcon'
import StockTransferIcon from '../../Icons/StockTransferIcon'
const items = [
{
@ -57,6 +59,12 @@ const items = [
path: '/dashboard/inventory/shipments'
},
{ type: 'divider' },
{
key: 'stocklocations',
label: 'Stock Locations',
icon: <StockLocationIcon />,
path: '/dashboard/inventory/stocklocations'
},
{
key: 'stockevents',
label: 'Stock Events',
@ -68,6 +76,12 @@ const items = [
label: 'Stock Audits',
icon: <StockAuditIcon />,
path: '/dashboard/inventory/stockaudits'
},
{
key: 'stocktransfers',
label: 'Stock Transfers',
icon: <StockTransferIcon />,
path: '/dashboard/inventory/stocktransfers'
}
]
@ -76,6 +90,8 @@ const routeKeyMap = {
'/dashboard/inventory/filamentstocks': 'filamentstocks',
'/dashboard/inventory/partstocks': 'partstocks',
'/dashboard/inventory/productstocks': 'productstocks',
'/dashboard/inventory/stocklocations': 'stocklocations',
'/dashboard/inventory/stocktransfers': 'stocktransfers',
'/dashboard/inventory/stockevents': 'stockevents',
'/dashboard/inventory/stockaudits': 'stockaudits',
'/dashboard/inventory/purchaseorders': 'purchaseorders',

View File

@ -0,0 +1,111 @@
import { useState, useRef } from 'react'
import { Button, Flex, Space, Modal, Dropdown } from 'antd'
import NewStockLocation from './StockLocations/NewStockLocation'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
import ObjectTable from '../common/ObjectTable'
import ObjectTableViewButton from '../common/ObjectTableViewButton'
import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ColumnViewButton from '../common/ColumnViewButton'
import ExportListButton from '../common/ExportListButton'
const StockLocations = () => {
const tableRef = useRef()
const [newOpen, setNewOpen] = useState(false)
const [viewMode, setViewMode] = useViewMode('stockLocations')
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('stockLocation')
const [showFilterSidebar, setShowFilterSidebar] =
useFilterSidebarVisibility('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'}>
<Space size='small'>
<Dropdown menu={actionItems}>
<Button>Actions</Button>
</Dropdown>
<ColumnViewButton
type='stockLocation'
loading={false}
visibleState={columnVisibility}
updateVisibleState={setColumnVisibility}
/>
<ExportListButton objectType='stockLocation' />
</Space>
<Space>
<FilterSidebarButton
active={showFilterSidebar}
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
/>
<ObjectTableViewButton
viewMode={viewMode}
setViewMode={setViewMode}
/>
</Space>
</Flex>
<ObjectTable
ref={tableRef}
visibleColumns={columnVisibility}
type='stockLocation'
cards={viewMode === 'cards'}
showFilterSidebar={showFilterSidebar}
/>
</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>
</>
)
}
export default StockLocations

View File

@ -0,0 +1,68 @@
import PropTypes from 'prop-types'
import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm'
import WizardView from '../../common/WizardView'
const NewStockLocation = ({ onOk, reset }) => {
return (
<NewObjectForm type={'stockLocation'} reset={reset} defaultValues={{}}>
{({ handleSubmit, submitLoading, objectData, formValid }) => {
const steps = [
{
title: 'Details',
key: 'details',
content: (
<ObjectInfo
type='stockLocation'
column={1}
bordered={false}
isEditing={true}
required={true}
objectData={objectData}
/>
)
},
{
title: 'Summary',
key: 'summary',
content: (
<ObjectInfo
type='stockLocation'
column={1}
bordered={false}
visibleProperties={{
_id: false,
createdAt: false,
updatedAt: false
}}
isEditing={false}
objectData={objectData}
/>
)
}
]
return (
<WizardView
steps={steps}
loading={submitLoading}
formValid={formValid}
title='New Stock Location'
onSubmit={async () => {
const result = await handleSubmit()
if (result) {
onOk()
}
}}
/>
)
}}
</NewObjectForm>
)
}
NewStockLocation.propTypes = {
onOk: PropTypes.func.isRequired,
reset: PropTypes.bool
}
export default NewStockLocation

View File

@ -0,0 +1,212 @@
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.jsx'
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'
import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const log = loglevel.getLogger('StockLocationInfo')
log.setLevel(config.logLevel)
const StockLocationInfo = () => {
const location = useLocation()
const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null)
const stockLocationId = new URLSearchParams(location.search).get(
'stockLocationId'
)
const [collapseState, updateCollapseState] = useCollapseState(
'StockLocationInfo',
{
info: true,
notes: true,
auditLogs: true
}
)
const [objectFormState, setEditFormState] = useState({
isEditing: false,
editLoading: false,
formValid: false,
locked: false,
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
}
}
return (
<>
<Flex
gap='large'
vertical='true'
style={{
maxHeight: '100%',
minHeight: 0
}}
>
<Flex justify={'space-between'}>
<Space size='middle'>
<Space size='small'>
<ObjectActions
type='stockLocation'
id={stockLocationId}
disabled={objectFormState.loading}
objectData={objectFormState.objectData}
/>
<ViewButton
disabled={objectFormState.loading}
items={[
{ key: 'info', label: 'Stock Location' },
{ key: 'notes', label: 'Notes' },
{ key: 'auditLogs', label: 'Audit Logs' }
]}
visibleState={collapseState}
updateVisibleState={updateCollapseState}
/>
<UserNotifierToggle
type='stockLocation'
objectData={objectFormState.objectData}
disabled={objectFormState.loading}
/>
<DocumentPrintButton
type='stockLocation'
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='Stock Location'
icon={<InfoCircleIcon />}
active={collapseState.info}
onToggle={(expanded) => updateCollapseState('info', expanded)}
collapseKey='info'
>
<ObjectForm
id={stockLocationId}
type='stockLocation'
style={{ height: '100%' }}
ref={objectFormRef}
onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state }))
}}
>
{({ loading, isEditing, objectData }) => {
return (
<ObjectInfo
loading={loading}
indicator={<LoadingOutlined />}
isEditing={isEditing}
type='stockLocation'
objectData={objectData}
labelWidth='175px'
/>
)
}}
</ObjectForm>
</InfoCollapse>
</ActionHandler>
<InfoCollapse
title='Notes'
icon={<NoteIcon />}
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<NotesPanel _id={stockLocationId} type='stockLocation' />
</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': stockLocationId }}
visibleColumns={{ _id: false, 'parent._id': false }}
/>
)}
</InfoCollapse>
</Flex>
</ScrollBox>
</Flex>
</>
)
}
export default StockLocationInfo

View File

@ -0,0 +1,111 @@
import { useState, useRef } from 'react'
import { Button, Flex, Space, Modal, Dropdown } from 'antd'
import NewStockTransfer from './StockTransfers/NewStockTransfer'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
import ObjectTable from '../common/ObjectTable'
import ObjectTableViewButton from '../common/ObjectTableViewButton'
import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ColumnViewButton from '../common/ColumnViewButton'
import ExportListButton from '../common/ExportListButton'
const StockTransfers = () => {
const tableRef = useRef()
const [newOpen, setNewOpen] = useState(false)
const [viewMode, setViewMode] = useViewMode('stockTransfers')
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('stockTransfer')
const [showFilterSidebar, setShowFilterSidebar] =
useFilterSidebarVisibility('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'}>
<Space size='small'>
<Dropdown menu={actionItems}>
<Button>Actions</Button>
</Dropdown>
<ColumnViewButton
type='stockTransfer'
loading={false}
visibleState={columnVisibility}
updateVisibleState={setColumnVisibility}
/>
<ExportListButton objectType='stockTransfer' />
</Space>
<Space>
<FilterSidebarButton
active={showFilterSidebar}
onClick={() => setShowFilterSidebar(!showFilterSidebar)}
/>
<ObjectTableViewButton
viewMode={viewMode}
setViewMode={setViewMode}
/>
</Space>
</Flex>
<ObjectTable
ref={tableRef}
visibleColumns={columnVisibility}
type='stockTransfer'
cards={viewMode === 'cards'}
showFilterSidebar={showFilterSidebar}
/>
</Flex>
<Modal
open={newOpen}
styles={{ content: { paddingBottom: '24px' } }}
footer={null}
width={960}
onCancel={() => {
setNewOpen(false)
}}
destroyOnHidden={true}
>
<NewStockTransfer
onOk={() => {
setNewOpen(false)
tableRef.current?.reload()
}}
reset={newOpen}
/>
</Modal>
</>
)
}
export default StockTransfers

View File

@ -0,0 +1,61 @@
import PropTypes from 'prop-types'
import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm'
import WizardView from '../../common/WizardView'
const NewStockTransfer = ({ onOk, reset }) => {
return (
<NewObjectForm
type={'stockTransfer'}
reset={reset}
defaultValues={{ state: { type: 'draft' }, lines: [] }}
>
{({ handleSubmit, submitLoading, objectData }) => {
const steps = [
{
title: 'Summary',
key: 'summary',
content: (
<ObjectInfo
type='stockTransfer'
column={1}
bordered={false}
visibleProperties={{
_id: false,
createdAt: false,
updatedAt: false,
lines: false,
_reference: false,
postedAt: false
}}
isEditing={false}
objectData={objectData}
/>
)
}
]
return (
<WizardView
steps={steps}
loading={submitLoading}
formValid={true}
title='New Stock Transfer'
onSubmit={async () => {
const result = await handleSubmit()
if (result) {
onOk()
}
}}
/>
)
}}
</NewObjectForm>
)
}
NewStockTransfer.propTypes = {
onOk: PropTypes.func.isRequired,
reset: PropTypes.bool
}
export default NewStockTransfer

View File

@ -0,0 +1,46 @@
import { useState, useContext } from 'react'
import PropTypes from 'prop-types'
import { ApiServerContext } from '../../context/ApiServerContext'
import { message } from 'antd'
import MessageDialogView from '../../common/MessageDialogView.jsx'
const PostStockTransfer = ({ onOk, objectData }) => {
const [postLoading, setPostLoading] = useState(false)
const { sendObjectFunction } = useContext(ApiServerContext)
const handlePost = async () => {
setPostLoading(true)
try {
const result = await sendObjectFunction(
objectData._id,
'StockTransfer',
'post'
)
if (result) {
message.success('Stock transfer posted')
onOk(result)
}
} catch (error) {
console.error('Error posting stock transfer:', error)
} finally {
setPostLoading(false)
}
}
return (
<MessageDialogView
title={'Post this stock transfer?'}
description={`Receiving will move stock to the target locations, create destination stock rows, record stock events owned by this transfer, and fill in the "to" stock on each line.`}
onOk={handlePost}
okText='Post'
okLoading={postLoading}
/>
)
}
PostStockTransfer.propTypes = {
onOk: PropTypes.func.isRequired,
objectData: PropTypes.object
}
export default PostStockTransfer

View File

@ -0,0 +1,269 @@
import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card, Modal } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState.jsx'
import NotesPanel from '../../common/NotesPanel.jsx'
import InfoCollapse from '../../common/InfoCollapse.jsx'
import ObjectInfo from '../../common/ObjectInfo.jsx'
import ObjectProperty from '../../common/ObjectProperty.jsx'
import ViewButton from '../../common/ViewButton.jsx'
import { getModelProperty, getModelByName } from '../../../../database/ObjectModels.js'
import PostStockTransfer from './PostStockTransfer.jsx'
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import StockTransferIcon from '../../../Icons/StockTransferIcon.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'
import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
const StockTransferInfo = () => {
const location = useLocation()
const objectFormRef = useRef(null)
const actionHandlerRef = useRef(null)
const stockTransferId = new URLSearchParams(location.search).get(
'stockTransferId'
)
const [postOpen, setPostOpen] = useState(false)
const [collapseState, updateCollapseState] = useCollapseState(
'StockTransferInfo',
{
info: true,
lines: true,
notes: true,
auditLogs: true
}
)
const [objectFormState, setEditFormState] = useState({
isEditing: false,
editLoading: false,
formValid: false,
locked: false,
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
},
post: () => {
setPostOpen(true)
return true
}
}
const editDisabled =
getModelByName('stockTransfer')
?.actions?.find((action) => action.name === 'edit')
?.disabled(objectFormState.objectData) ?? false
return (
<>
<Flex
gap='large'
vertical='true'
style={{
maxHeight: '100%',
minHeight: 0
}}
>
<Flex justify={'space-between'}>
<Space size='middle'>
<Space size='small'>
<ObjectActions
type='stockTransfer'
id={stockTransferId}
disabled={objectFormState.loading}
objectData={objectFormState.objectData}
/>
<ViewButton
disabled={objectFormState.loading}
items={[
{ key: 'info', label: 'Transfer' },
{ key: 'lines', label: 'Lines' },
{ key: 'notes', label: 'Notes' },
{ key: 'auditLogs', label: 'Audit Logs' }
]}
visibleState={collapseState}
updateVisibleState={updateCollapseState}
/>
<UserNotifierToggle
type='stockTransfer'
objectData={objectFormState.objectData}
disabled={objectFormState.loading}
/>
<DocumentPrintButton
type='stockTransfer'
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 ||
editDisabled
}
loading={objectFormState.editLoading}
/>
</Space>
</Flex>
<ScrollBox>
<Flex vertical gap={'large'}>
<ActionHandler
actions={actions}
loading={objectFormState.loading}
ref={actionHandlerRef}
>
<ObjectForm
id={stockTransferId}
type='stockTransfer'
style={{ height: '100%' }}
ref={objectFormRef}
onStateChange={(state) => {
setEditFormState((prev) => ({ ...prev, ...state }))
}}
>
{({ loading, isEditing, objectData }) => (
<Flex vertical gap={'large'}>
<InfoCollapse
title='Stock transfer'
icon={<InfoCircleIcon />}
active={collapseState.info}
onToggle={(expanded) =>
updateCollapseState('info', expanded)
}
collapseKey='info'
>
<ObjectInfo
loading={loading}
indicator={<LoadingOutlined />}
isEditing={isEditing}
type='stockTransfer'
objectData={objectData}
labelWidth='175px'
visibleProperties={{ lines: false }}
/>
</InfoCollapse>
<InfoCollapse
title='Lines'
icon={<StockTransferIcon />}
active={collapseState.lines}
onToggle={(expanded) =>
updateCollapseState('lines', expanded)
}
collapseKey='lines'
>
<ObjectProperty
{...getModelProperty('stockTransfer', 'lines')}
isEditing={isEditing}
objectData={objectData}
loading={loading}
size='medium'
/>
</InfoCollapse>
</Flex>
)}
</ObjectForm>
</ActionHandler>
<InfoCollapse
title='Notes'
icon={<NoteIcon />}
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<NotesPanel _id={stockTransferId} type='stockTransfer' />
</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': stockTransferId }}
visibleColumns={{ _id: false, 'parent._id': false }}
/>
)}
</InfoCollapse>
</Flex>
</ScrollBox>
</Flex>
<Modal
open={postOpen}
onCancel={() => {
setPostOpen(false)
}}
width={520}
footer={null}
destroyOnHidden={true}
centered={true}
>
<PostStockTransfer
onOk={() => {
setPostOpen(false)
actions.reload()
}}
objectData={objectFormState.objectData}
/>
</Modal>
</>
)
}
export default StockTransferInfo

View File

@ -0,0 +1,8 @@
import Icon from '@ant-design/icons'
import CustomIconSvg from '../../../assets/icons/stocklocationicon.svg?react'
const StockLocationIcon = (props) => (
<Icon component={CustomIconSvg} {...props} />
)
export default StockLocationIcon

View File

@ -0,0 +1,8 @@
import Icon from '@ant-design/icons'
import CustomIconSvg from '../../../assets/icons/stocktransfericon.svg?react'
const StockTransferIcon = (props) => (
<Icon component={CustomIconSvg} {...props} />
)
export default StockTransferIcon

View File

@ -21,6 +21,8 @@ import { StockEvent } from './models/StockEvent'
import { StockAudit } from './models/StockAudit'
import { PartStock } from './models/PartStock'
import { ProductStock } from './models/ProductStock'
import { StockLocation } from './models/StockLocation'
import { StockTransfer } from './models/StockTransfer'
import { PurchaseOrder } from './models/PurchaseOrder'
import { OrderItem } from './models/OrderItem'
import { Shipment } from './models/Shipment'
@ -68,6 +70,8 @@ export const objectModels = [
StockAudit,
PartStock,
ProductStock,
StockLocation,
StockTransfer,
PurchaseOrder,
OrderItem,
Shipment,
@ -116,6 +120,8 @@ export {
StockAudit,
PartStock,
ProductStock,
StockLocation,
StockTransfer,
PurchaseOrder,
OrderItem,
Shipment,

View File

@ -23,6 +23,7 @@ export const FilamentStock = {
'currentWeight',
'startingWeight',
'filamentSku',
'stockLocation',
'createdAt',
'updatedAt'
],
@ -81,6 +82,15 @@ export const FilamentStock = {
showHyperlink: true,
columnWidth: 200
},
{
name: 'stockLocation',
label: 'Stock location',
type: 'object',
objectType: 'stockLocation',
required: false,
showHyperlink: true,
columnWidth: 200
},
{
name: 'currentWeight',
label: 'Current Weight',

View File

@ -25,6 +25,7 @@ export const PartStock = {
'startingQuantity',
'currentQuantity',
'partSku',
'stockLocation',
'createdAt',
'updatedAt'
],
@ -75,7 +76,7 @@ export const PartStock = {
readOnly: false,
columnWidth: 200,
required: true,
masterFilter: ['subJob']
masterFilter: ['subJob', 'stockTransfer']
},
{
name: 'partSku',
@ -86,6 +87,15 @@ export const PartStock = {
showHyperlink: true,
columnWidth: 200
},
{
name: 'stockLocation',
label: 'Stock location',
type: 'object',
objectType: 'stockLocation',
required: false,
showHyperlink: true,
columnWidth: 200
},
{
name: 'source',

View File

@ -92,6 +92,7 @@ export const ProductStock = {
'state',
'currentQuantity',
'productSku',
'stockLocation',
'createdAt',
'updatedAt'
],
@ -151,6 +152,18 @@ export const ProductStock = {
showHyperlink: true,
columnWidth: 200
},
{
name: 'stockLocation',
label: 'Stock location',
type: 'object',
objectType: 'stockLocation',
required: false,
showHyperlink: true,
columnWidth: 200,
readOnly: (objectData) => {
return objectData?.state?.type != 'draft'
}
},
{
name: 'currentQuantity',
label: 'Current Quantity',

View File

@ -0,0 +1,80 @@
import StockLocationIcon from '../../components/Icons/StockLocationIcon'
import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
export const StockLocation = {
name: 'stockLocation',
label: 'Stock Location',
prefix: 'SLN',
icon: StockLocationIcon,
actions: [
{
name: 'info',
label: 'Info',
default: true,
row: true,
icon: InfoCircleIcon,
url: (_id) =>
`/dashboard/inventory/stocklocations/info?stockLocationId=${_id}`
}
],
url: (id) => `/dashboard/inventory/stocklocations/info?stockLocationId=${id}`,
filters: ['_id', 'name'],
sorters: ['name', 'createdAt'],
columns: ['_reference', 'name', 'createdAt', 'updatedAt'],
properties: [
{
name: '_id',
label: 'ID',
type: 'id',
objectType: 'stockLocation',
showCopy: true,
readOnly: true,
columnWidth: 140
},
{
name: 'createdAt',
label: 'Created At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: '_reference',
label: 'Reference',
type: 'reference',
columnFixed: 'left',
objectType: 'stockLocation',
showCopy: true,
readOnly: true
},
{
name: 'updatedAt',
label: 'Updated At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'name',
label: 'Name',
type: 'text',
required: true,
columnWidth: 220
},
{
name: 'notes',
label: 'Notes',
type: 'text',
required: false,
columnWidth: 280
}
],
stats: [
{
name: 'total.count',
label: 'Locations',
type: 'number',
color: 'default'
}
]
}

View File

@ -0,0 +1,224 @@
import StockTransferIcon from '../../components/Icons/StockTransferIcon'
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 BinIcon from '../../components/Icons/BinIcon'
export const StockTransfer = {
name: 'stockTransfer',
label: 'Stock Transfer',
prefix: 'STT',
icon: StockTransferIcon,
actions: [
{
name: 'info',
label: 'Info',
default: true,
row: true,
icon: InfoCircleIcon,
url: (_id) =>
`/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}`
},
{
name: 'edit',
label: 'Edit',
type: 'button',
icon: EditIcon,
url: (_id) =>
`/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=edit`,
visible: (objectData) => {
return !(objectData?._isEditing && objectData?._isEditing == true)
},
disabled: (objectData) => {
return objectData?.state?.type != 'draft'
}
},
{
name: 'cancelEdit',
label: 'Cancel Edit',
type: 'button',
icon: XMarkIcon,
url: (_id) =>
`/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=cancelEdit`,
visible: (objectData) => {
return objectData?._isEditing && objectData?._isEditing == true
}
},
{
name: 'finishEdit',
label: 'Finish Edit',
type: 'button',
icon: CheckIcon,
url: (_id) =>
`/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=finishEdit`,
visible: (objectData) => {
return objectData?._isEditing && objectData?._isEditing == true
}
},
{
name: 'delete',
label: 'Delete',
type: 'button',
icon: BinIcon,
danger: true,
url: (_id) =>
`/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=delete`,
visible: (objectData) => {
return !(objectData?._isEditing && objectData?._isEditing == true)
},
disabled: (objectData) => {
return objectData?.state?.type != 'draft'
}
},
{ type: 'divider' },
{
name: 'post',
label: 'Post',
type: 'button',
icon: CheckIcon,
url: (_id) =>
`/dashboard/inventory/stocktransfers/info?stockTransferId=${_id}&action=post`,
visible: (objectData) => {
return objectData?.state?.type == 'draft'
}
}
],
url: (id) => `/dashboard/inventory/stocktransfers/info?stockTransferId=${id}`,
filters: ['_id', 'state'],
sorters: ['createdAt', 'postedAt'],
columns: ['_reference', 'state', 'postedAt', 'createdAt', 'updatedAt'],
properties: [
{
name: '_id',
label: 'ID',
type: 'id',
objectType: 'stockTransfer',
showCopy: true,
readOnly: true,
columnWidth: 140
},
{
name: 'createdAt',
label: 'Created At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: '_reference',
label: 'Reference',
type: 'reference',
columnFixed: 'left',
objectType: 'stockTransfer',
showCopy: true,
readOnly: true
},
{
name: 'state',
label: 'State',
type: 'state',
readOnly: true,
columnWidth: 120
},
{
name: 'postedAt',
label: 'Posted At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'updatedAt',
label: 'Updated At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'lines',
label: 'Lines',
type: 'objectChildren',
required: false,
canAddRemove: true,
columns: [
'fromStockType',
'fromStock',
'quantity',
'toStockLocation',
'toStockType',
'toStock'
],
properties: [
{
name: 'fromStockType',
label: 'From type',
type: 'objectType',
required: true,
columnWidth: 180,
masterFilter: ['filamentStock', 'partStock', 'productStock']
},
{
name: 'fromStock',
label: 'From stock',
type: 'object',
objectType: (row) => row?.fromStockType,
required: true,
showHyperlink: true,
columnWidth: 230
},
{
name: 'quantity',
label: 'Quantity',
type: 'number',
required: true,
min: 0,
columnWidth: 140,
suffix: (row) =>
row?.fromStockType === 'filamentStock' ? 'g net' : null
},
{
name: 'toStockLocation',
label: 'To location',
type: 'object',
objectType: 'stockLocation',
required: true,
showHyperlink: true,
columnWidth: 230
},
{
name: 'toStockType',
label: 'To type',
type: 'objectType',
readOnly: true,
columnWidth: 180,
visible: (row) => Boolean(row?.toStockType)
},
{
name: 'toStock',
label: 'To stock',
type: 'object',
objectType: (row) => row?.toStockType,
readOnly: true,
showHyperlink: true,
columnWidth: 230,
visible: (row) => Boolean(row?.toStock)
}
]
}
],
stats: [
{
name: 'draft.count',
label: 'Draft',
type: 'number',
color: 'default'
},
{
name: 'posted.count',
label: 'Posted',
type: 'number',
color: 'success'
}
]
}

View File

@ -55,6 +55,22 @@ const ShipmentInfo = lazy(
const InventoryOverview = lazy(
() => import('../components/Dashboard/Inventory/InventoryOverview.jsx')
)
const StockLocations = lazy(
() => import('../components/Dashboard/Inventory/StockLocations.jsx')
)
const StockLocationInfo = lazy(
() =>
import('../components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx')
)
const StockTransfers = lazy(
() => import('../components/Dashboard/Inventory/StockTransfers.jsx')
)
const StockTransferInfo = lazy(
() =>
import(
'../components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx'
)
)
const InventoryRoutes = [
<Route
@ -92,6 +108,26 @@ const InventoryRoutes = [
path='inventory/productstocks/info'
element={<ProductStockInfo />}
/>,
<Route
key='stocklocations'
path='inventory/stocklocations'
element={<StockLocations />}
/>,
<Route
key='stocklocations-info'
path='inventory/stocklocations/info'
element={<StockLocationInfo />}
/>,
<Route
key='stocktransfers'
path='inventory/stocktransfers'
element={<StockTransfers />}
/>,
<Route
key='stocktransfers-info'
path='inventory/stocktransfers/info'
element={<StockTransferInfo />}
/>,
<Route
key='stockevents'
path='inventory/stockevents'