Add showEndingDivider prop to ObjectTableViewButton for enhanced layout control

- Updated ObjectTableViewButton component to accept a showEndingDivider prop, allowing for conditional rendering of a divider in the layout.
- Modified multiple dashboard components (Invoices, Payments, TaxRecords, etc.) to utilize the new prop, improving visual separation in the UI.
- Ensured consistent application of the new prop across various components for a cohesive user experience.

src/components/Dashboard/Finance/Invoices.jsx

@@ -80,6 +80,7 @@ const Invoices = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Finance/Payments.jsx

@@ -80,6 +80,7 @@ const Payments = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Finance/TaxRecords.jsx

@@ -80,6 +80,7 @@ const TaxRecords = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/FilamentStocks.jsx

@@ -85,6 +85,7 @@ const FilamentStocks = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/OrderItems.jsx

@@ -80,6 +80,7 @@ const OrderItems = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/PartStocks.jsx

@@ -85,6 +85,7 @@ const PartStocks = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/ProductStocks.jsx

@@ -86,6 +86,7 @@ const ProductStocks = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/PurchaseOrders.jsx

@@ -80,6 +80,7 @@ const PurchaseOrders = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/Shipments.jsx

@@ -80,6 +80,7 @@ const Shipments = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/StockAudits.jsx

@@ -85,6 +85,7 @@ const StockAudits = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -68,6 +68,7 @@ const StockEvents = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/StockLocations.jsx

@@ -83,6 +83,7 @@ const StockLocations = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Inventory/StockTransfers.jsx

@@ -83,6 +83,7 @@ const StockTransfers = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/AppPasswords.jsx

@@ -79,6 +79,7 @@ const AppPasswords = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/CourierServices.jsx

@@ -80,6 +80,7 @@ const CourierServices = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Couriers.jsx

@@ -79,6 +79,7 @@ const Couriers = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -80,6 +80,7 @@ const DocumentJobs = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -79,6 +79,7 @@ const DocumentPrinters = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/DocumentSizes.jsx

@@ -78,6 +78,7 @@ const DocumentSizes = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -80,6 +80,7 @@ const DocumentTemplates = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/FilamentSkus.jsx

@@ -83,6 +83,7 @@ const FilamentSkus = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Filaments.jsx

@@ -85,6 +85,7 @@ const Filaments = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Files.jsx

@@ -68,6 +68,7 @@ const Files = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Hosts.jsx

@@ -84,6 +84,7 @@ const Hosts = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Materials.jsx

@@ -82,6 +82,7 @@ const Materials = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/NoteTypes.jsx

@@ -80,6 +80,7 @@ const NoteTypes = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/PartSkus.jsx

@@ -82,6 +82,7 @@ const PartSkus = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Parts.jsx

@@ -84,6 +84,7 @@ const Parts = (filter) => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/ProductCategories.jsx

@@ -82,6 +82,7 @@ const ProductCategories = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/ProductSkus.jsx

@@ -83,6 +83,7 @@ const ProductSkus = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Products.jsx

@@ -356,6 +356,7 @@ const Products = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/TaxRates.jsx

@@ -79,6 +79,7 @@ const TaxRates = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Management/Vendors.jsx

@@ -79,6 +79,7 @@ const Vendors = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Production/FilamentProfiles.jsx

@@ -76,6 +76,7 @@ const FilamentProfiles = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Production/GCodeFiles.jsx

@@ -82,6 +82,7 @@ const GCodeFiles = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Production/Jobs.jsx

@@ -26,8 +26,7 @@ const Jobs = () => {
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('Jobs')
 
-  const [showSortSidebar, setShowSortSidebar] =
-    useSortSidebarVisibility('Jobs')
+  const [showSortSidebar, setShowSortSidebar] = useSortSidebarVisibility('Jobs')
 
   const actionItems = {
     items: [
@@ -85,6 +84,7 @@ const Jobs = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Production/PrinterProfiles.jsx

@@ -75,6 +75,7 @@ const PrinterProfiles = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Production/Printers.jsx

@@ -85,6 +85,7 @@ const Printers = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Production/SubJobs.jsx

@@ -70,6 +70,7 @@ const SubJobs = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Sales/Clients.jsx

@@ -79,6 +79,7 @@ const Clients = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Sales/Listings.jsx

@@ -80,6 +80,7 @@ const Listings = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Sales/Marketplaces.jsx

@@ -80,6 +80,7 @@ const Marketplaces = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/Sales/SalesOrders.jsx

@@ -80,6 +80,7 @@ const SalesOrders = () => {
             <ObjectTableViewButton
               viewMode={viewMode}
               setViewMode={setViewMode}
+              showEndingDivider={true}
             />
           </Space>
         </Flex>

src/components/Dashboard/common/ObjectTable.jsx

@@ -302,7 +302,9 @@ const ObjectTable = forwardRef(
     }, [])
 
     const mergeLoadedPage = useCallback((currentPages, loadedPage) => {
-      const withoutSkeletons = currentPages.filter((page) => !page.isSkeletonPage)
+      const withoutSkeletons = currentPages.filter(
+        (page) => !page.isSkeletonPage
+      )
       const withoutDuplicate = withoutSkeletons.filter(
         (page) => page.pageNum !== loadedPage.pageNum
       )
@@ -1434,7 +1436,7 @@ const ObjectTable = forwardRef(
             <Splitter.Panel defaultSize={'25%'}>
               <Flex
                 vertical
-                gap='middle'
+                gap='large'
                 style={{ height: '100%', minHeight: 0 }}
               >
                 {showSortSidebar && (

src/components/Dashboard/common/ObjectTableViewButton.jsx

@@ -1,20 +1,39 @@
 import PropTypes from 'prop-types'
-import { Button } from 'antd'
+import { Button, Divider, Flex } from 'antd'
 import GridIcon from '../../Icons/GridIcon'
 import ListIcon from '../../Icons/ListIcon'
 
-const ObjectTableViewButton = ({ viewMode, setViewMode, ...buttonProps }) => (
-  <Button
-    icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
-    onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
-    title={viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'}
-    {...buttonProps}
-  />
-)
+const ObjectTableViewButton = ({
+  viewMode,
+  setViewMode,
+  showEndingDivider = false,
+  ...buttonProps
+}) => {
+  const content = (
+    <Button
+      icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+      onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
+      title={
+        viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'
+      }
+      {...buttonProps}
+    />
+  )
+  if (showEndingDivider) {
+    return (
+      <Flex gap='small' align='center'>
+        <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
+        {content}
+      </Flex>
+    )
+  }
+  return content
+}
 
 ObjectTableViewButton.propTypes = {
   viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
-  setViewMode: PropTypes.func.isRequired
+  setViewMode: PropTypes.func.isRequired,
+  showEndingDivider: PropTypes.bool
 }
 
 export default ObjectTableViewButton