farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Loading State in Dashboard Components
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good
Details

Browse Source 
- Added a loading spinner to various components including InvoiceInfo, PaymentInfo, TaxRecordInfo, and others to improve user experience during data fetching.
- Integrated Spin component from Ant Design with a LoadingOutlined icon to visually indicate loading states for notes sections across multiple dashboard components.
- Ensured consistent loading behavior across all relevant components, enhancing overall responsiveness and user feedback.
This commit is contained in:
Tom Butcher 2026-08-22 21:16:21 +01:00
parent 0c38cea5b6
commit bcb7460bf2
49 changed files with 416 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -269,9 +269,14 @@ const InvoiceInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={invoiceId} type='invoice' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -204,9 +204,14 @@ const PaymentInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={paymentId} type='payment' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -187,9 +188,14 @@ const TaxRecordInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={taxRecordId} type='taxRecord' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import ObjectForm from '../../common/ObjectForm'
import ObjectInfo from '../../common/ObjectInfo'
@ -226,9 +227,14 @@ const FilamentStockInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentStockId} type='filamentStock' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -193,9 +193,14 @@ const OrderItemInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={orderItemId} type='orderItem' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -246,9 +246,14 @@ const PartStockInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={partStockId} type='partStock' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -276,9 +276,14 @@ const ProductStockInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productStockId} type='productStock' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -309,9 +309,14 @@ const PurchaseOrderInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Modal, Space } from 'antd'
import { Card, Flex, Modal, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -270,9 +270,14 @@ const PurchaseOrderInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -229,9 +229,14 @@ const ShipmentInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={shipmentId} type='shipment' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -202,9 +202,14 @@ const StockAuditInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={stockAuditId} type='stockAudit' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -200,9 +200,14 @@ const StockLocationInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={stockLocationId} type='stockLocation' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState.jsx'
import NotesPanel from '../../common/NotesPanel.jsx'
@ -227,9 +227,14 @@ const StockTransferInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={stockTransferId} type='stockTransfer' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

12
src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -189,9 +190,14 @@ const CourierServiceInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={courierServiceId} type='courierService' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/Couriers/CourierInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -206,9 +207,14 @@ const CourierInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={courierId} type='courier' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -191,9 +191,14 @@ const DocumentJobInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentJobId} type='documentJob' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

23
src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -99,7 +99,7 @@ const DocumentPrinterInfo = () => {
<Space size='small'>
<ObjectActions
type='documentPrinter'
pageName='info'
pageName='info'
id={documentPrinterId}
disabled={objectFormState.loading}
objectData={objectFormState.objectData}
@ -204,9 +204,14 @@ const DocumentPrinterInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<NotesPanel _id={documentPrinterId} type='documentPrinter' />
</Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentPrinterId} type='documentPrinter' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
@ -224,10 +229,10 @@ const DocumentPrinterInfo = () => {
<ObjectTable
type='auditLog'
masterFilter={{
parent:
getModelByName('documentPrinter').prefix +
':' +
documentPrinterId
parent:
getModelByName('documentPrinter').prefix +
':' +
documentPrinterId
}}
visibleColumns={{ _id: false, parent: false }}
/>

11
src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -192,9 +192,14 @@ const DocumentSizeInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentSizeId} type='documentSize' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
View File

@ -1,6 +1,7 @@
import { useState, useRef, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import { Space, Flex, Card, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
import useCollapseState from '../../hooks/useCollapseState.jsx'
@ -173,9 +174,14 @@ const DocumentTemplateDesign = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentTemplateId} type='documentTemplate' />
</Card>
</Card>
</Spin>
</InfoCollapse>
</Flex>
</ScrollBox>

11
src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -205,9 +205,14 @@ const DocumentTemplateInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentTemplateId} type='documentTemplate' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

12
src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
@ -184,9 +185,14 @@ const FilamentSkuInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentSkuId} type='filamentSku' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
@ -254,9 +254,14 @@ const FilamentInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentId} type='filament' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

12
src/components/Dashboard/Management/Files/FileInfo.jsx
View File

@ -1,6 +1,7 @@
import { useContext, useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
import useCollapseState from '../../hooks/useCollapseState.jsx'
@ -237,9 +238,14 @@ const FileInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={fileId} type='file' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Management/Hosts/HostInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -249,9 +249,14 @@ const HostInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={hostId} type='host' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

12
src/components/Dashboard/Management/Materials/MaterialInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -187,9 +188,14 @@ const MaterialInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={materialId} type='material' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Management/Notes/NoteInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -215,9 +215,14 @@ const NoteInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={noteId} type='note' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
@ -179,9 +180,14 @@ const PartSkuInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={partSkuId} type='partSku' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/Parts/PartInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
@ -209,9 +210,14 @@ const PartInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={partId} type='part' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

9
src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
View File

@ -222,12 +222,17 @@ const PermissionSettingInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel
_id={permissionSettingId}
type='permissionSetting'
/>
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
@ -184,9 +185,14 @@ const ProductCategoryInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productCategoryId} type='productCategory' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
@ -211,9 +212,14 @@ const ProductSkuInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productSkuId} type='productSku' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/Products/ProductInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
@ -216,9 +217,14 @@ const ProductInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productId} type='product' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -184,9 +185,14 @@ const TaxRateInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={taxRateId} type='taxRate' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

9
src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
View File

@ -238,9 +238,14 @@ const UserGroupInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={userGroupId} type='userGroup' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

9
src/components/Dashboard/Management/Users/UserInfo.jsx
View File

@ -259,9 +259,14 @@ const UserInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={userId} type='user' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Management/Vendors/VendorInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -184,9 +185,14 @@ const VendorInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={vendorId} type='vendor' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import ActionHandler from '../../common/ActionHandler'
import AuditLogIcon from '../../../Icons/AuditLogIcon'
@ -524,9 +524,14 @@ const FilamentProfileInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentProfileId} type='filamentProfile' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -225,9 +225,14 @@ const GCodeFileInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={gcodeFileId} type='gcodeFile' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

12
src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import { Space, Flex, Card, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
import useCollapseState from '../../hooks/useCollapseState.jsx'
@ -143,9 +144,14 @@ const GCodeFilePreview = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={gcodeFileId} type='gcodeFile' />
</Card>
</Card>
</Spin>
</InfoCollapse>
</Flex>
</ScrollBox>

11
src/components/Dashboard/Production/Jobs/JobInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -219,9 +219,14 @@ const JobInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={jobId} type='job' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import ActionHandler from '../../common/ActionHandler'
import AuditLogIcon from '../../../Icons/AuditLogIcon'
@ -375,9 +375,14 @@ const PrinterProfileInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={printerProfileId} type='printerProfile' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

12
src/components/Dashboard/Production/Printers/ControlPrinter.jsx
View File

@ -1,6 +1,7 @@
import { useState, useRef, useEffect, useContext, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card, Splitter, Divider } from 'antd'
import { Space, Flex, Card, Splitter, Divider, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
import useCollapseState from '../../hooks/useCollapseState.jsx'
@ -620,9 +621,14 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={printerId} type='printer' />
</Card>
</Card>
</Spin>
</InfoCollapse>
</Flex>
</ScrollBox>

11
src/components/Dashboard/Production/Printers/PrinterInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -239,9 +239,14 @@ const PrinterInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={printerId} type='printer' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

11
src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
@ -198,9 +198,14 @@ const SubJobInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={subJobId} type='subJob' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Sales/Clients/ClientInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -184,9 +185,14 @@ const ClientInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={clientId} type='client' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -201,9 +202,14 @@ const ListingVarientInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={listingVarientId} type='listingVarient' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Sales/Listings/ListingInfo.jsx
View File

@ -1,6 +1,7 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space } from 'antd'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -219,9 +220,14 @@ const ListingInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={listingId} type='listing' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

12
src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
View File

@ -1,6 +1,7 @@
import { useContext, useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, message, Space } from 'antd'
import { Card, Flex, message, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config'
import useCollapseState from '../../hooks/useCollapseState'
@ -265,9 +266,14 @@ const MarketplaceInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={marketplaceId} type='marketplace' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

11
src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
View File

@ -1,6 +1,6 @@
import { useRef, useState, useEffect, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Space, Flex, Card } from 'antd'
import { Space, Flex, Card, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import loglevel from 'loglevel'
import config from '../../../../config.js'
@ -307,9 +307,14 @@ const SalesOrderInfo = () => {
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Card>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={salesOrderId} type='salesOrder' />
</Card>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'