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

7
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'
@ -268,10 +268,15 @@ const InvoiceInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={invoiceId} type='invoice' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -203,10 +203,15 @@ const PaymentInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={paymentId} type='payment' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -186,10 +187,15 @@ const TaxRecordInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={taxRecordId} type='taxRecord' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -225,10 +226,15 @@ const FilamentStockInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentStockId} type='filamentStock' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -192,10 +192,15 @@ const OrderItemInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={orderItemId} type='orderItem' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -245,10 +245,15 @@ const PartStockInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={partStockId} type='partStock' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -275,10 +275,15 @@ const ProductStockInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productStockId} type='productStock' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -308,10 +308,15 @@ const PurchaseOrderInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -269,10 +269,15 @@ const PurchaseOrderInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -228,10 +228,15 @@ const ShipmentInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={shipmentId} type='shipment' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -201,10 +201,15 @@ const StockAuditInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={stockAuditId} type='stockAudit' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -199,10 +199,15 @@ const StockLocationInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={stockLocationId} type='stockLocation' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -226,10 +226,15 @@ const StockTransferInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={stockTransferId} type='stockTransfer' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

8
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'
@ -188,10 +189,15 @@ const CourierServiceInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={courierServiceId} type='courierService' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -205,10 +206,15 @@ const CourierInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={courierId} type='courier' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -190,10 +190,15 @@ const DocumentJobInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentJobId} type='documentJob' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -203,10 +203,15 @@ const DocumentPrinterInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentPrinterId} type='documentPrinter' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -191,10 +191,15 @@ const DocumentSizeInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentSizeId} type='documentSize' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -172,10 +173,15 @@ const DocumentTemplateDesign = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentTemplateId} type='documentTemplate' />
</Card>
</Spin>
</InfoCollapse>
</Flex>
</ScrollBox>

7
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'
@ -204,10 +204,15 @@ const DocumentTemplateInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={documentTemplateId} type='documentTemplate' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

8
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'
@ -183,10 +184,15 @@ const FilamentSkuInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentSkuId} type='filamentSku' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -253,10 +253,15 @@ const FilamentInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentId} type='filament' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

8
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'
@ -236,10 +237,15 @@ const FileInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={fileId} type='file' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -248,10 +248,15 @@ const HostInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={hostId} type='host' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

8
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'
@ -186,10 +187,15 @@ const MaterialInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={materialId} type='material' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -214,10 +214,15 @@ const NoteInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={noteId} type='note' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -178,10 +179,15 @@ const PartSkuInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={partSkuId} type='partSku' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -208,10 +209,15 @@ const PartInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={partId} type='part' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

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

@ -221,6 +221,10 @@ const PermissionSettingInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel
@ -228,6 +232,7 @@ const PermissionSettingInfo = () => {
type='permissionSetting'
/>
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -183,10 +184,15 @@ const ProductCategoryInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productCategoryId} type='productCategory' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -210,10 +211,15 @@ const ProductSkuInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productSkuId} type='productSku' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -215,10 +216,15 @@ const ProductInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={productId} type='product' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -183,10 +184,15 @@ const TaxRateInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={taxRateId} type='taxRate' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

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

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

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

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

8
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'
@ -183,10 +184,15 @@ const VendorInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={vendorId} type='vendor' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -523,10 +523,15 @@ const FilamentProfileInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={filamentProfileId} type='filamentProfile' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -224,10 +224,15 @@ const GCodeFileInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={gcodeFileId} type='gcodeFile' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

8
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'
@ -142,10 +143,15 @@ const GCodeFilePreview = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={gcodeFileId} type='gcodeFile' />
</Card>
</Spin>
</InfoCollapse>
</Flex>
</ScrollBox>

7
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'
@ -218,10 +218,15 @@ const JobInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={jobId} type='job' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -374,10 +374,15 @@ const PrinterProfileInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={printerProfileId} type='printerProfile' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

8
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'
@ -619,10 +620,15 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={printerId} type='printer' />
</Card>
</Spin>
</InfoCollapse>
</Flex>
</ScrollBox>

7
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'
@ -238,10 +238,15 @@ const PrinterInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={printerId} type='printer' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse

7
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'
@ -197,10 +197,15 @@ const SubJobInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={subJobId} type='subJob' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -183,10 +184,15 @@ const ClientInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={clientId} type='client' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -200,10 +201,15 @@ const ListingVarientInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={listingVarientId} type='listingVarient' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -218,10 +219,15 @@ const ListingInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={listingId} type='listing' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

8
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'
@ -264,10 +265,15 @@ const MarketplaceInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={marketplaceId} type='marketplace' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'

7
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'
@ -306,10 +306,15 @@ const SalesOrderInfo = () => {
active={collapseState.notes}
onToggle={(expanded) => updateCollapseState('notes', expanded)}
collapseKey='notes'
>
<Spin
spinning={objectFormState.loading}
indicator={<LoadingOutlined />}
>
<Card>
<NotesPanel _id={salesOrderId} type='salesOrder' />
</Card>
</Spin>
</InfoCollapse>
<InfoCollapse
title='Audit Logs'