96 lines
3.4 KiB
JavaScript
96 lines
3.4 KiB
JavaScript
// DashboardBreadcrumb.js
|
|
import React from 'react'
|
|
import { Breadcrumb, Button, Flex, Space } from 'antd'
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
|
import ArrowLeftIcon from '../../Icons/ArrowLeftIcon'
|
|
import ArrowRightIcon from '../../Icons/ArrowRightIcon'
|
|
|
|
const breadcrumbNameMap = {
|
|
'/dashboard/production': 'Production',
|
|
'/dashboard/inventory': 'Inventory',
|
|
'/dashboard/management': 'Management',
|
|
'/dashboard/production/overview': 'Overview',
|
|
'/dashboard/production/printers': 'Printers',
|
|
'/dashboard/production/printers/control': 'Control',
|
|
'/dashboard/production/printers/info': 'Info',
|
|
'/dashboard/production/printjobs': 'Print Jobs',
|
|
'/dashboard/production/printjobs/info': 'Info',
|
|
'/dashboard/production/gcodefiles': 'G Code Files',
|
|
'/dashboard/production/gcodefiles/info': 'Info',
|
|
'/dashboard/management/filaments': 'Filaments',
|
|
'/dashboard/management/filaments/info': 'Info',
|
|
'/dashboard/management/parts': 'Parts',
|
|
'/dashboard/management/parts/info': 'Info',
|
|
'/dashboard/management/products': 'Products',
|
|
'/dashboard/management/products/info': 'Info',
|
|
'/dashboard/management/vendors': 'Vendors',
|
|
'/dashboard/management/vendors/info': 'Info',
|
|
'/dashboard/management/materials': 'Materials',
|
|
'/dashboard/management/materials/info': 'Info',
|
|
'/dashboard/management/settings': 'Settings',
|
|
'/dashboard/inventory/filamentstocks': 'Filament Stocks',
|
|
'/dashboard/inventory/filamentstocks/info': 'Info',
|
|
'/dashboard/inventory/partstocks': 'Part Stocks',
|
|
'/dashboard/inventory/partstocks/info': 'Info',
|
|
'/dashboard/inventory/productstocks': 'Products',
|
|
'/dashboard/inventory/productstocks/info': 'Info',
|
|
'/dashboard/inventory/stockevents': 'Stock Events',
|
|
'/dashboard/inventory/stockevents/info': 'Info',
|
|
'/dashboard/inventory/stockaudits': 'Stock Audits',
|
|
'/dashboard/inventory/stockaudits/info': 'Info'
|
|
}
|
|
|
|
const DashboardBreadcrumb = () => {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
const pathSnippets = location.pathname.split('/').filter((i) => i)
|
|
|
|
const breadcrumbItems = pathSnippets.map((_, index) => {
|
|
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
|
|
if (url != '/dashboard') {
|
|
// Check if this is a main section (Production, Inventory, or Management)
|
|
const isMainSection =
|
|
url === '/dashboard/production' ||
|
|
url === '/dashboard/inventory' ||
|
|
url === '/dashboard/management'
|
|
|
|
return {
|
|
title: isMainSection ? (
|
|
<span style={{ padding: '0 12px' }}>{breadcrumbNameMap[url]}</span>
|
|
) : (
|
|
<Link to={url} style={{ padding: '0 12px' }}>
|
|
{breadcrumbNameMap[url]}
|
|
</Link>
|
|
),
|
|
key: url
|
|
}
|
|
} else {
|
|
return {}
|
|
}
|
|
})
|
|
|
|
return (
|
|
<Flex align='center' gap={'large'}>
|
|
<Flex gap={'small'}>
|
|
<Space.Compact>
|
|
<Button
|
|
type='text'
|
|
icon={<ArrowLeftIcon style={{ fontSize: '14px' }} />}
|
|
onClick={() => navigate(-1)}
|
|
style={{ padding: '0 2px', height: '22px' }}
|
|
/>
|
|
<Button
|
|
type='text'
|
|
icon={<ArrowRightIcon style={{ fontSize: '14px' }} />}
|
|
onClick={() => navigate(1)}
|
|
style={{ padding: '0 2px', height: '22px' }}
|
|
/>
|
|
</Space.Compact>
|
|
</Flex>
|
|
<Breadcrumb items={breadcrumbItems} />
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
export default DashboardBreadcrumb
|