Tom Butcher
cabc68c932
- Introduced FinanceOverview, FinanceSidebar, and Invoices components for the finance dashboard. - Added InvoiceInfo and NewInvoice components for managing invoices. - Created SVG icons for finance and invoice. - Updated routing to include finance-related paths. - Enhanced DashboardBreadcrumb and DashboardNavigation to support finance navigation. - Defined Invoice model with actions and properties for invoice management.
62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import { useContext } from 'react'
|
|
import { Flex } from 'antd'
|
|
import useCollapseState from '../hooks/useCollapseState'
|
|
import StatsDisplay from '../common/StatsDisplay'
|
|
import InfoCollapse from '../common/InfoCollapse'
|
|
import ScrollBox from '../common/ScrollBox'
|
|
|
|
import { ApiServerContext } from '../context/ApiServerContext'
|
|
|
|
const FinanceOverview = () => {
|
|
const { connected } = useContext(ApiServerContext)
|
|
|
|
const [collapseState, updateCollapseState] = useCollapseState(
|
|
'FinanceOverview',
|
|
{
|
|
invoiceStats: true
|
|
}
|
|
)
|
|
|
|
if (!connected) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Flex
|
|
gap='large'
|
|
vertical='true'
|
|
style={{
|
|
maxHeight: '100%',
|
|
minHeight: 0
|
|
}}
|
|
>
|
|
<ScrollBox>
|
|
<Flex vertical gap={'large'}>
|
|
<InfoCollapse
|
|
title='Invoice Statistics'
|
|
icon={null}
|
|
active={collapseState.invoiceStats}
|
|
onToggle={(isActive) =>
|
|
updateCollapseState('invoiceStats', isActive)
|
|
}
|
|
className='no-t-padding-collapse'
|
|
collapseKey='invoiceStats'
|
|
>
|
|
<Flex
|
|
justify='flex-start'
|
|
gap='middle'
|
|
wrap='wrap'
|
|
align='flex-start'
|
|
>
|
|
<StatsDisplay objectType='invoice' />
|
|
</Flex>
|
|
</InfoCollapse>
|
|
</Flex>
|
|
</ScrollBox>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default FinanceOverview
|
|
|