Add Kanban and Timeline Icons, Enhance Kanban Component Styles

- Introduced new SVG icons for Kanban and Timeline to enhance visual representation in the dashboard.
- Expanded App.css with new styles for the Kanban component, improving layout and responsiveness.
- Updated various dashboard components to integrate the new ObjectListViewPageContent for better view management and consistency across the application.

assets/icons/kanbanicon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.779032,0,0,0.779032,3.073021,9.025537)">
+        <path d="M22.587,55.452L29.317,55.452L29.317,3.541L22.587,3.541L22.587,55.452ZM44.947,55.452L51.677,55.452L51.677,3.541L44.947,3.541L44.947,55.452ZM10.588,58.962L63.676,58.962C70.606,58.962 74.264,55.326 74.264,48.481L74.264,10.522C74.264,3.667 70.606,0.02 63.676,0.02L10.588,0.02C3.679,0.02 0,3.667 0,10.522L0,48.481C0,55.326 3.679,58.962 10.588,58.962ZM11.167,52.003C8.429,52.003 6.959,50.615 6.959,47.743L6.959,11.251C6.959,8.378 8.429,6.979 11.167,6.979L63.097,6.979C65.813,6.979 67.305,8.378 67.305,11.251L67.305,47.743C67.305,50.615 65.813,52.003 63.097,52.003L11.167,52.003Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/icons/timelineicon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0,-0.777065,0.777065,0,9.038886,69.94022)">
+        <path d="M75.315,48.595C75.315,55.44 71.658,59.097 64.728,59.097L21.503,59.097C14.606,59.097 10.906,55.461 10.906,48.595L10.906,36.765L17.865,36.765L17.865,48.26C17.865,50.888 19.229,52.138 21.722,52.138L64.499,52.138C66.981,52.138 68.356,50.888 68.356,48.26L68.356,36.765L75.315,36.765L75.315,48.595ZM75.315,10.657L75.315,22.436L68.356,22.436L68.356,10.982C68.356,8.354 66.981,7.114 64.499,7.114L21.722,7.114C19.229,7.114 17.865,8.354 17.865,10.982L17.865,22.436L10.906,22.436L10.906,10.657C10.906,3.781 14.606,0.155 21.503,0.155L64.728,0.155C71.658,0.155 75.315,3.802 75.315,10.657Z" style="fill-rule:nonzero;"/>
+        <path d="M88.562,55.043C88.562,57.276 86.765,59.094 84.532,59.094C82.3,59.094 80.481,57.276 80.481,55.043C80.481,52.81 82.3,51.013 84.532,51.013C86.765,51.013 88.562,52.81 88.562,55.043Z" style="fill-rule:nonzero;"/>
+        <path d="M88.562,42.32C88.562,44.553 86.765,46.34 84.532,46.34C82.3,46.34 80.481,44.553 80.481,42.32C80.481,40.066 82.3,38.269 84.532,38.269C86.765,38.269 88.562,40.066 88.562,42.32Z" style="fill-rule:nonzero;"/>
+        <path d="M88.562,16.774C88.562,19.007 86.765,20.825 84.532,20.825C82.3,20.825 80.481,19.007 80.481,16.774C80.481,14.541 82.3,12.744 84.532,12.744C86.765,12.744 88.562,14.541 88.562,16.774Z" style="fill-rule:nonzero;"/>
+        <path d="M88.562,4.02C88.562,6.284 86.765,8.071 84.532,8.071C82.3,8.071 80.481,6.284 80.481,4.02C80.481,1.787 82.3,0 84.532,0C86.765,0 88.562,1.787 88.562,4.02Z" style="fill-rule:nonzero;"/>
+        <path d="M84.582,34.107C87.085,34.107 89.11,32.082 89.11,29.579C89.11,27.076 87.085,25.041 84.582,25.041C82.961,25.041 81.507,25.903 80.707,27.224L10.916,27.224C9.558,27.224 8.54,28.242 8.54,29.6C8.54,30.958 9.558,31.998 10.916,31.998L80.75,31.998C81.55,33.276 82.961,34.107 84.582,34.107Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

assets/stylesheets/App.css

@@ -1384,6 +1384,161 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   height: 100%;
 }
 
+.objectKanbanContainerWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.objectKanbanContainerSkeletons {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.objectKanbanKanbanBody {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.objectKanbanContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.objectKanbanWrap {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.objectKanbanWrap > .ant-spin-nested-loading,
+.objectKanbanWrap > .ant-spin-nested-loading > .ant-spin-container {
+  height: 100%;
+  min-height: 0;
+}
+
+.objectKanbanScroll {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.objectKanbanScroll .simplebar-content-wrapper {
+  height: 100%;
+}
+
+.objectKanbanScroll .simplebar-content {
+  min-height: 100%;
+}
+
+.objectKanbanHeader {
+  flex-shrink: 0;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.objectKanbanHeaderTrack {
+  width: max-content;
+  min-width: 100%;
+  will-change: transform;
+}
+
+.objectKanbanHeaderRow {
+  width: max-content;
+  min-width: 100%;
+  align-items: flex-start;
+}
+
+.objectKanbanHeaderCell {
+  flex: 0 0 360px;
+  min-width: 360px;
+  flex-shrink: 0;
+  padding: 8px 8px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-bottom: 1px solid var(--color-descriptions-border);
+  border-radius: 12px 12px 0 0;
+  background-color: var(--layout-header-bg);
+}
+
+.objectKanban {
+  width: max-content;
+  min-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  align-items: stretch;
+  padding-bottom: 4px;
+}
+
+.objectKanbanSkeletonColumns {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.objectKanbanSkeletonTrack {
+  width: max-content;
+  min-width: 100%;
+  height: 100%;
+  will-change: transform;
+}
+
+.objectKanbanSkeletonRow {
+  width: max-content;
+  min-width: 100%;
+  height: 100%;
+  align-items: stretch;
+}
+
+.objectKanbanColumn,
+.objectKanbanColumnSkeleton {
+  flex: 0 0 360px;
+  min-width: 360px;
+  min-height: 0;
+  border-top: none;
+  border-radius: 0 0 12px 12px;
+}
+
+.objectKanbanColumnSkeleton {
+  border-radius: 0 0 12px 12px;
+  overflow: hidden;
+}
+
+.objectKanbanColumnCards {
+  flex: 1;
+  border-radius: 0 0 12px 12px;
+  height: 100%;
+}
+
+.objectKanbanColumnSkeleton .objectKanbanColumnCards {
+  background-color: var(--layout-header-bg);
+}
+
+.objectKanbanColumnCardsInner {
+  padding: 16px;
+}
+
 .electron-body .ant-modal-wrap,
 .electron-body .ant-modal-mask,
 .electron-body .ant-drawer {

src/components/Dashboard/Finance/Invoices.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Invoices = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('invoices')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('invoices')
 
@@ -35,7 +32,7 @@ const Invoices = () => {
       objectType='invoice'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const Invoices = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='invoice'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Invoices = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='invoice'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const Invoices = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Finance/PaymentPolicies.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 
 const PaymentPolicies = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('paymentPolicy')
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('paymentPolicy')
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -31,7 +28,7 @@ const PaymentPolicies = () => {
       objectType='paymentPolicy'
       tableRef={tableRef}
     >
-      <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
           <ObjectActions
@@ -58,8 +55,7 @@ const PaymentPolicies = () => {
             onClick={() => setShowFilterSidebar(!showFilterSidebar)}
           />
           <ObjectTableViewButton
-            viewMode={viewMode}
+              objectType='paymentPolicy'
-            setViewMode={setViewMode}
           />
           <ListViewEditButtons showStartingDivider={true} />
         </Space>
@@ -69,7 +65,6 @@ const PaymentPolicies = () => {
         ref={tableRef}
         visibleColumns={columnVisibility}
         type='paymentPolicy'
-        cards={viewMode === 'cards'}
         showFilterSidebar={showFilterSidebar}
         showSortSidebar={showSortSidebar}
         expandHeight={true}
@@ -83,7 +78,7 @@ const PaymentPolicies = () => {
         useSortInUrl={true}
       />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Finance/Payments.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Payments = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('payments')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('payments')
 
@@ -35,7 +32,7 @@ const Payments = () => {
       objectType='payment'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const Payments = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='payment'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Payments = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='payment'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const Payments = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Finance/TaxRecords.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const TaxRecords = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('taxRecord')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('taxRecord')
 
@@ -35,7 +32,7 @@ const TaxRecords = () => {
       objectType='taxRecord'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const TaxRecords = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='taxRecord'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const TaxRecords = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='taxRecord'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const TaxRecords = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/FilamentStocks.jsx

@@ -10,7 +10,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -22,8 +21,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const FilamentStocks = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('filamentStocks')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filamentStocks')
 
@@ -39,7 +36,7 @@ const FilamentStocks = () => {
       objectType='filamentStock'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -66,8 +63,7 @@ const FilamentStocks = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='filamentStock'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -76,7 +72,6 @@ const FilamentStocks = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='filamentStock'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -91,7 +86,7 @@ const FilamentStocks = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/OrderItems.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const OrderItems = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('orderItems')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('orderItems')
 
@@ -35,7 +32,7 @@ const OrderItems = () => {
       objectType='orderItem'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const OrderItems = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='orderItem'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const OrderItems = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='orderItem'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const OrderItems = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/PartStocks.jsx

@@ -10,7 +10,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -22,8 +21,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const PartStocks = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('partStocks')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('partStocks')
 
@@ -39,7 +36,7 @@ const PartStocks = () => {
       objectType='partStock'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -66,8 +63,7 @@ const PartStocks = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='partStock'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -76,7 +72,6 @@ const PartStocks = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='partStock'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -91,7 +86,7 @@ const PartStocks = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/ProductStocks.jsx

@@ -11,7 +11,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -23,8 +22,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const ProductStocks = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('productStocks')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('productStock')
 
@@ -40,7 +37,7 @@ const ProductStocks = () => {
       objectType='productStock'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -67,8 +64,7 @@ const ProductStocks = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='productStock'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -77,7 +73,6 @@ const ProductStocks = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='productStock'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -92,7 +87,7 @@ const ProductStocks = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/PurchaseOrders.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const PurchaseOrders = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('purchaseOrders')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('purchaseOrders')
 
@@ -35,7 +32,7 @@ const PurchaseOrders = () => {
       objectType='purchaseOrder'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const PurchaseOrders = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='purchaseOrder'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const PurchaseOrders = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='purchaseOrder'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const PurchaseOrders = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/Shipments.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Shipments = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('shipments')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('shipments')
 
@@ -35,7 +32,7 @@ const Shipments = () => {
       objectType='shipment'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const Shipments = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='shipment'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Shipments = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='shipment'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const Shipments = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/StockAudits.jsx

@@ -10,7 +10,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -22,8 +21,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const StockAudits = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('stockAudits')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockAudits')
 
@@ -39,7 +36,7 @@ const StockAudits = () => {
       objectType='stockAudit'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -66,8 +63,7 @@ const StockAudits = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='stockAudit'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -76,7 +72,6 @@ const StockAudits = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='stockAudit'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -91,7 +86,7 @@ const StockAudits = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/StockEvents.jsx

@@ -6,7 +6,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const StockEvents = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('stockEvents')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockEvent')
 
@@ -35,7 +32,7 @@ const StockEvents = () => {
       objectType='stockEvent'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const StockEvents = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='stockEvent'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -72,7 +68,6 @@ const StockEvents = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='stockEvent'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const StockEvents = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/StockLocations.jsx

@@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const StockLocations = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('stockLocations')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockLocation')
 
@@ -37,7 +34,7 @@ const StockLocations = () => {
       objectType='stockLocation'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -64,8 +61,7 @@ const StockLocations = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='stockLocation'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -74,7 +70,6 @@ const StockLocations = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='stockLocation'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -89,7 +84,7 @@ const StockLocations = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Inventory/StockTransfers.jsx

@@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const StockTransfers = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('stockTransfers')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockTransfer')
 
@@ -37,7 +34,7 @@ const StockTransfers = () => {
       objectType='stockTransfer'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -64,8 +61,7 @@ const StockTransfers = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='stockTransfer'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -74,7 +70,6 @@ const StockTransfers = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='stockTransfer'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -89,7 +84,7 @@ const StockTransfers = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/AppPasswords.jsx

@@ -7,7 +7,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
@@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 
 const AppPasswords = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('appPassword')
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('appPassword')
 
@@ -34,7 +31,7 @@ const AppPasswords = () => {
       objectType='appPassword'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -61,8 +58,7 @@ const AppPasswords = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='appPassword'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -70,7 +66,6 @@ const AppPasswords = () => {
         <ObjectTable
           ref={tableRef}
           type='appPassword'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -86,7 +81,7 @@ const AppPasswords = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/CourierServices.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const CourierServices = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('courierService')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('courierService')
 
@@ -35,7 +32,7 @@ const CourierServices = () => {
       objectType='courierService'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const CourierServices = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='courierService'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const CourierServices = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='courierService'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const CourierServices = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Couriers.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Couriers = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('courier')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('courier')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -34,7 +31,7 @@ const Couriers = () => {
       objectType='courier'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -61,8 +58,7 @@ const Couriers = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='courier'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -72,7 +68,6 @@ const Couriers = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='courier'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -86,7 +81,7 @@ const Couriers = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/DocumentJobs.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const DocumentJobs = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('documentJob')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentJob')
 
@@ -35,7 +32,7 @@ const DocumentJobs = () => {
       objectType='documentJob'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const DocumentJobs = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='documentJob'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const DocumentJobs = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='documentJob'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const DocumentJobs = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/DocumentPrinters.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const DocumentPrinters = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('documentPrinter')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentPrinter')
 
@@ -35,7 +32,7 @@ const DocumentPrinters = () => {
       objectType='documentPrinter'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const DocumentPrinters = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='documentPrinter'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const DocumentPrinters = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='documentPrinter'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const DocumentPrinters = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/DocumentSizes.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 
 const DocumentSizes = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('documentSize')
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentSize')
 
@@ -34,7 +31,7 @@ const DocumentSizes = () => {
       objectType='documentSize'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -61,8 +58,7 @@ const DocumentSizes = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='documentSize'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -72,7 +68,6 @@ const DocumentSizes = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='documentSize'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -86,7 +81,7 @@ const DocumentSizes = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/DocumentTemplates.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const DocumentTemplates = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('documentTemplate')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('documentTemplate')
 
@@ -35,7 +32,7 @@ const DocumentTemplates = () => {
       objectType='documentTemplate'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const DocumentTemplates = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='documentTemplate'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const DocumentTemplates = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='documentTemplate'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const DocumentTemplates = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/FilamentSkus.jsx

@@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const FilamentSkus = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('filamentSkus')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filamentSku')
 
@@ -37,7 +34,7 @@ const FilamentSkus = () => {
       objectType='filamentSku'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -64,8 +61,7 @@ const FilamentSkus = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='filamentSku'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -74,7 +70,6 @@ const FilamentSkus = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='filamentSku'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -89,7 +84,7 @@ const FilamentSkus = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Filaments.jsx

@@ -8,7 +8,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
 import ObjectTable from '../common/ObjectTable'
 import ObjectActions from '../common/ObjectActions'
-import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -23,7 +22,6 @@ const Filaments = () => {
   const tableRef = useRef()
 
   // View mode state (cards/list), persisted in sessionStorage via custom hook
-  const [viewMode, setViewMode] = useViewMode('filament')
 
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filament')
@@ -40,7 +38,7 @@ const Filaments = () => {
       objectType='filament'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -67,8 +65,7 @@ const Filaments = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='filament'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -76,7 +73,6 @@ const Filaments = () => {
         <ObjectTable
           ref={tableRef}
           type='filament'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -92,7 +88,7 @@ const Filaments = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Files.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Files = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('file')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('file')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -29,8 +26,11 @@ const Files = () => {
     useSortSidebarVisibility('Files')
 
   return (
-    <ObjectListViewProvider objectType='file' tableRef={tableRef}>
+    <ObjectListViewProvider
-      <Flex vertical={'true'} gap='large' className='h-100'>
+      objectType='file'
+      tableRef={tableRef}
+    >
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
             <ObjectActions
@@ -57,8 +57,7 @@ const Files = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='file'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -67,7 +66,6 @@ const Files = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='file'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -81,7 +79,7 @@ const Files = () => {
           useSortInUrl={true}
         />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Hosts.jsx

@@ -12,7 +12,6 @@ import ListViewEditButtons from '../common/ListViewEditButtons'
 import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 import ObjectTable from '../common/ObjectTable'
 import ObjectActions from '../common/ObjectActions'
-import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -23,7 +22,6 @@ const Hosts = () => {
   const tableRef = useRef()
 
   // View mode state (cards/list), persisted in sessionStorage via custom hook
-  const [viewMode, setViewMode] = useViewMode('host')
 
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('host')
 
@@ -39,7 +37,7 @@ const Hosts = () => {
       objectType='host'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -66,8 +64,7 @@ const Hosts = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='host'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -75,7 +72,6 @@ const Hosts = () => {
         <ObjectTable
           ref={tableRef}
           type='host'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -91,7 +87,7 @@ const Hosts = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Materials.jsx

@@ -9,7 +9,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Materials = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('material')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('material')
 
@@ -37,7 +34,7 @@ const Materials = () => {
       objectType='material'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -64,8 +61,7 @@ const Materials = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='material'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Materials = () => {
         <ObjectTable
           ref={tableRef}
           type='material'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -89,7 +84,7 @@ const Materials = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/NoteTypes.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const NoteTypes = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('noteType')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('noteType')
 
@@ -35,7 +32,7 @@ const NoteTypes = () => {
       objectType='noteType'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const NoteTypes = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='noteType'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const NoteTypes = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='noteType'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const NoteTypes = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/PartSkus.jsx

@@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const PartSkus = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('partSkus')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('partSku')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -36,7 +33,7 @@ const PartSkus = () => {
       objectType='partSku'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -63,8 +60,7 @@ const PartSkus = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='partSku'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const PartSkus = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='partSku'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -88,7 +83,7 @@ const PartSkus = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Parts.jsx

@@ -9,7 +9,6 @@ import ObjectActions from '../common/ObjectActions'
 
 import useColumnVisibility from '../hooks/useColumnVisibility'
 
-import useViewMode from '../hooks/useViewMode'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -24,8 +23,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 
 const Parts = (filter) => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('part')
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('part')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -40,7 +37,7 @@ const Parts = (filter) => {
       objectType='part'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -67,8 +64,7 @@ const Parts = (filter) => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='part'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -78,7 +74,6 @@ const Parts = (filter) => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='part'
-          cards={viewMode === 'cards'}
           filter={filter}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -93,7 +88,7 @@ const Parts = (filter) => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/PermissionSettings.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const PermissionSettingsList = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('permissionSetting')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('permissionSetting')
 
@@ -35,7 +32,7 @@ const PermissionSettingsList = () => {
       objectType='permissionSetting'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const PermissionSettingsList = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='permissionSetting'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const PermissionSettingsList = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='permissionSetting'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const PermissionSettingsList = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/ProductCategories.jsx

@@ -9,7 +9,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const ProductCategories = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('productCategory')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('productCategory')
 
@@ -37,7 +34,7 @@ const ProductCategories = () => {
       objectType='productCategory'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -64,8 +61,7 @@ const ProductCategories = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='productCategory'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const ProductCategories = () => {
         <ObjectTable
           ref={tableRef}
           type='productCategory'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -89,7 +84,7 @@ const ProductCategories = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/ProductSkus.jsx

@@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const ProductSkus = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('productSkus')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('productSku')
 
@@ -37,7 +34,7 @@ const ProductSkus = () => {
       objectType='productSku'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -64,8 +61,7 @@ const ProductSkus = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='productSku'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -74,7 +70,6 @@ const ProductSkus = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='productSku'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -89,7 +84,7 @@ const ProductSkus = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Products.jsx

@@ -25,7 +25,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ExportListButton from '../common/ExportListButton'
@@ -37,8 +36,6 @@ const Products = () => {
   const navigate = useNavigate()
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('Products')
-
   const getProductActionItems = (id) => {
     return {
       items: [
@@ -309,7 +306,7 @@ const Products = () => {
       objectType='product'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -337,8 +334,7 @@ const Products = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='product'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -347,7 +343,6 @@ const Products = () => {
         <ObjectTable
           ref={tableRef}
           type={'product'}
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -361,7 +356,7 @@ const Products = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/StockAuditLevels.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const StockAuditLevels = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('stockAuditLevel')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('stockAuditLevel')
 
@@ -34,7 +31,7 @@ const StockAuditLevels = () => {
       objectType='stockAuditLevel'
       tableRef={tableRef}
     >
-      <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
           <ObjectActions
@@ -61,8 +58,7 @@ const StockAuditLevels = () => {
             onClick={() => setShowFilterSidebar(!showFilterSidebar)}
           />
           <ObjectTableViewButton
-            viewMode={viewMode}
+              objectType='stockAuditLevel'
-            setViewMode={setViewMode}
           />
           <ListViewEditButtons showStartingDivider={true} />
         </Space>
@@ -72,7 +68,6 @@ const StockAuditLevels = () => {
         ref={tableRef}
         visibleColumns={columnVisibility}
         type='stockAuditLevel'
-        cards={viewMode === 'cards'}
         showFilterSidebar={showFilterSidebar}
         showSortSidebar={showSortSidebar}
         expandHeight={true}
@@ -86,7 +81,7 @@ const StockAuditLevels = () => {
         useSortInUrl={true}
       />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/TaxRates.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const TaxRates = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('taxRate')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('taxRate')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -34,7 +31,7 @@ const TaxRates = () => {
       objectType='taxRate'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -61,8 +58,7 @@ const TaxRates = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='taxRate'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -72,7 +68,6 @@ const TaxRates = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='taxRate'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -86,7 +81,7 @@ const TaxRates = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/UserGroups.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const UserGroups = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('userGroup')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('userGroup')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -34,7 +31,7 @@ const UserGroups = () => {
       objectType='userGroup'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -61,8 +58,7 @@ const UserGroups = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='userGroup'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -72,7 +68,6 @@ const UserGroups = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='userGroup'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -86,7 +81,7 @@ const UserGroups = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Users.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Users = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('user')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('user')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -34,7 +31,7 @@ const Users = () => {
       objectType='user'
       tableRef={tableRef}
     >
-      <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
             <ObjectActions
@@ -61,8 +58,7 @@ const Users = () => {
             onClick={() => setShowFilterSidebar(!showFilterSidebar)}
           />
           <ObjectTableViewButton
-            viewMode={viewMode}
+              objectType='user'
-            setViewMode={setViewMode}
           />
           <ListViewEditButtons showStartingDivider={true} />
         </Space>
@@ -72,7 +68,6 @@ const Users = () => {
         ref={tableRef}
         type={'user'}
         visibleColumns={columnVisibility}
-        cards={viewMode === 'cards'}
         showFilterSidebar={showFilterSidebar}
         showSortSidebar={showSortSidebar}
         expandHeight={true}
@@ -86,7 +81,7 @@ const Users = () => {
         useSortInUrl={true}
       />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Management/Vendors.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Vendors = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('vendor')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('vendor')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -29,8 +26,11 @@ const Vendors = () => {
     useSortSidebarVisibility('Vendors')
 
   return (
-    <ObjectListViewProvider objectType='vendor' tableRef={tableRef}>
+    <ObjectListViewProvider
-      <Flex vertical={'true'} gap='large' className='h-100'>
+      objectType='vendor'
+      tableRef={tableRef}
+    >
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
             <ObjectActions
@@ -57,8 +57,7 @@ const Vendors = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='vendor'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -67,7 +66,6 @@ const Vendors = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='vendor'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -81,7 +79,7 @@ const Vendors = () => {
           useSortInUrl={true}
         />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Production/FilamentProfiles.jsx

@@ -13,12 +13,9 @@ import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
-import useViewMode from '../hooks/useViewMode'
 
 const FilamentProfiles = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('FilamentProfiles')
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('filamentProfile')
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -33,7 +30,7 @@ const FilamentProfiles = () => {
       objectType='filamentProfile'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -59,8 +56,7 @@ const FilamentProfiles = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='filamentProfile'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -68,7 +64,6 @@ const FilamentProfiles = () => {
         <ObjectTable
           ref={tableRef}
           type='filamentProfile'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -84,7 +79,7 @@ const FilamentProfiles = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Production/GCodeFiles.jsx

@@ -8,7 +8,6 @@ import ObjectActions from '../common/ObjectActions'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 
@@ -21,8 +20,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const GCodeFiles = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('gcodeFile')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('gcodeFile')
 
@@ -38,7 +35,7 @@ const GCodeFiles = () => {
       objectType='gcodeFile'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -65,8 +62,7 @@ const GCodeFiles = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='gcodeFile'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -75,7 +71,6 @@ const GCodeFiles = () => {
         <ObjectTable
           ref={tableRef}
           type='gcodeFile'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -90,7 +85,7 @@ const GCodeFiles = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Production/Jobs.jsx

@@ -5,7 +5,6 @@ import { Flex, Space } from 'antd'
 import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
 import ObjectActions from '../common/ObjectActions'
-import useViewMode from '../hooks/useViewMode.jsx'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Jobs = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('job')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('job')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -36,7 +33,7 @@ const Jobs = () => {
       objectType='job'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -63,8 +60,7 @@ const Jobs = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='job'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Jobs = () => {
           ref={tableRef}
           type={'job'}
           visibleColumns={columnVisibility}
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -88,7 +83,7 @@ const Jobs = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Production/PrinterProfiles.jsx

@@ -13,11 +13,8 @@ import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
-import useViewMode from '../hooks/useViewMode'
 const PrinterProfiles = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('PrinterProfiles')
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('printerProfile')
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -32,7 +29,7 @@ const PrinterProfiles = () => {
       objectType='printerProfile'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -58,8 +55,7 @@ const PrinterProfiles = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='printerProfile'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -67,7 +63,6 @@ const PrinterProfiles = () => {
         <ObjectTable
           ref={tableRef}
           type='printerProfile'
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
@@ -83,7 +78,7 @@ const PrinterProfiles = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Production/Printers.jsx

@@ -13,7 +13,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useColumnVisibility from '../hooks/useColumnVisibility'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
@@ -22,7 +21,6 @@ const Printers = () => {
   const tableRef = useRef()
 
   // View mode state (cards/list), persisted in sessionStorage via custom hook
-  const [viewMode, setViewMode] = useViewMode('Printers')
 
   // Column visibility state, persisted in sessionStorage via custom hook
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('printer')
@@ -40,7 +38,7 @@ const Printers = () => {
       objectType='printer'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space>
             <ObjectActions
@@ -67,8 +65,7 @@ const Printers = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='printer'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -78,7 +75,6 @@ const Printers = () => {
           type='printer'
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
-          cards={viewMode === 'cards'}
           visibleColumns={columnVisibility}
           expandHeight={true}
           saveFilterInSession={true}
@@ -92,7 +88,7 @@ const Printers = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Production/SubJobs.jsx

@@ -5,7 +5,6 @@ import { Flex, Space } from 'antd'
 import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
 import ObjectTable from '../common/ObjectTable.jsx'
 import ObjectActions from '../common/ObjectActions'
-import useViewMode from '../hooks/useViewMode.jsx'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
@@ -20,8 +19,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const SubJobs = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('subJob')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('subJob')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -36,7 +33,7 @@ const SubJobs = () => {
       objectType='subJob'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -63,8 +60,7 @@ const SubJobs = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='subJob'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const SubJobs = () => {
           ref={tableRef}
           type={'subJob'}
           visibleColumns={columnVisibility}
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -88,7 +83,7 @@ const SubJobs = () => {
 
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/Clients.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Clients = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('client')
-
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('client')
 
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -34,7 +31,7 @@ const Clients = () => {
       objectType='client'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -61,8 +58,7 @@ const Clients = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='client'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -72,7 +68,6 @@ const Clients = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='client'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -86,7 +81,7 @@ const Clients = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/FulfillmentPolicies.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 
 const FulfillmentPolicies = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('fulfillmentPolicy')
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('fulfillmentPolicy')
   const [showFilterSidebar, setShowFilterSidebar] =
@@ -31,7 +28,7 @@ const FulfillmentPolicies = () => {
       objectType='fulfillmentPolicy'
       tableRef={tableRef}
     >
-      <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
           <ObjectActions
@@ -58,8 +55,7 @@ const FulfillmentPolicies = () => {
             onClick={() => setShowFilterSidebar(!showFilterSidebar)}
           />
           <ObjectTableViewButton
-            viewMode={viewMode}
+              objectType='fulfillmentPolicy'
-            setViewMode={setViewMode}
           />
           <ListViewEditButtons showStartingDivider={true} />
         </Space>
@@ -69,7 +65,6 @@ const FulfillmentPolicies = () => {
         ref={tableRef}
         visibleColumns={columnVisibility}
         type='fulfillmentPolicy'
-        cards={viewMode === 'cards'}
         showFilterSidebar={showFilterSidebar}
         showSortSidebar={showSortSidebar}
         expandHeight={true}
@@ -83,7 +78,7 @@ const FulfillmentPolicies = () => {
         useSortInUrl={true}
       />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/ListingVarients.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const ListingVarients = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('listingVarients')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('listingVarients')
 
@@ -35,7 +32,7 @@ const ListingVarients = () => {
       objectType='listingVarient'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const ListingVarients = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='listingVarient'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const ListingVarients = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='listingVarient'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const ListingVarients = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/Listings.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Listings = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('listings')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('listings')
 
@@ -35,7 +32,7 @@ const Listings = () => {
       objectType='listing'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const Listings = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='listing'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Listings = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='listing'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const Listings = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/Marketplaces.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const Marketplaces = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('marketplaces')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('marketplaces')
 
@@ -35,7 +32,7 @@ const Marketplaces = () => {
       objectType='marketplace'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const Marketplaces = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='marketplace'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const Marketplaces = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='marketplace'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const Marketplaces = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/ReturnPolicies.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -17,8 +16,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 
 const ReturnPolicies = () => {
   const tableRef = useRef()
-
-  const [viewMode, setViewMode] = useViewMode('returnPolicy')
   const [columnVisibility, setColumnVisibility] = useColumnVisibility('returnPolicy')
   const [showFilterSidebar, setShowFilterSidebar] =
     useFilterSidebarVisibility('ReturnPolicies')
@@ -30,7 +27,7 @@ const ReturnPolicies = () => {
       objectType='returnPolicy'
       tableRef={tableRef}
     >
-      <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
         <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
           <Space size='small'>
           <ObjectActions
@@ -57,8 +54,7 @@ const ReturnPolicies = () => {
             onClick={() => setShowFilterSidebar(!showFilterSidebar)}
           />
           <ObjectTableViewButton
-            viewMode={viewMode}
+              objectType='returnPolicy'
-            setViewMode={setViewMode}
           />
           <ListViewEditButtons showStartingDivider={true} />
         </Space>
@@ -68,7 +64,6 @@ const ReturnPolicies = () => {
         ref={tableRef}
         visibleColumns={columnVisibility}
         type='returnPolicy'
-        cards={viewMode === 'cards'}
         showFilterSidebar={showFilterSidebar}
         showSortSidebar={showSortSidebar}
         expandHeight={true}
@@ -82,7 +77,7 @@ const ReturnPolicies = () => {
         useSortInUrl={true}
       />
       </Flex>
-    </ObjectListViewProvider>
+      </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/Sales/SalesOrders.jsx

@@ -6,7 +6,6 @@ import useColumnVisibility from '../hooks/useColumnVisibility'
 import ObjectTableViewButton from '../common/ObjectTableViewButton'
 import FilterSidebarButton from '../common/FilterSidebarButton'
 import SortSidebarButton from '../common/SortSidebarButton'
-import useViewMode from '../hooks/useViewMode'
 import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
 import useSortSidebarVisibility from '../hooks/useSortSidebarVisibility'
 import ColumnViewButton from '../common/ColumnViewButton'
@@ -18,8 +17,6 @@ import { ObjectListViewProvider } from '../context/ObjectListViewContext'
 const SalesOrders = () => {
   const tableRef = useRef()
 
-  const [viewMode, setViewMode] = useViewMode('salesOrders')
-
   const [columnVisibility, setColumnVisibility] =
     useColumnVisibility('salesOrders')
 
@@ -35,7 +32,7 @@ const SalesOrders = () => {
       objectType='salesOrder'
       tableRef={tableRef}
     >
-        <Flex vertical={'true'} gap='large' className='h-100'>
+<Flex vertical={'true'} gap='large' className='h-100'>
           <Flex justify='space-between' style={{ minHeight: 0 }} gap='small'>
             <Space size='small'>
             <ObjectActions
@@ -62,8 +59,7 @@ const SalesOrders = () => {
               onClick={() => setShowFilterSidebar(!showFilterSidebar)}
             />
             <ObjectTableViewButton
-              viewMode={viewMode}
+              objectType='salesOrder'
-              setViewMode={setViewMode}
             />
             <ListViewEditButtons showStartingDivider={true} />
           </Space>
@@ -73,7 +69,6 @@ const SalesOrders = () => {
           ref={tableRef}
           visibleColumns={columnVisibility}
           type='salesOrder'
-          cards={viewMode === 'cards'}
           showFilterSidebar={showFilterSidebar}
           showSortSidebar={showSortSidebar}
           expandHeight={true}
@@ -87,7 +82,7 @@ const SalesOrders = () => {
           useSortInUrl={true}
         />
         </Flex>
-      </ObjectListViewProvider>
+        </ObjectListViewProvider>
   )
 }
 

src/components/Dashboard/common/ObjectKanban.jsx

@@ -0,0 +1,283 @@
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+import { Empty, Flex } from 'antd'
+import PropTypes from 'prop-types'
+import { ApiServerContext } from '../context/ApiServerContext'
+import ObjectKanbanColumn from './ObjectKanbanColumn'
+import ObjectKanbanHeader from './ObjectKanbanHeader'
+import ScrollBox from './ScrollBox'
+import { getCategoryValueKey } from './viewModeUtils'
+
+const ObjectKanban = forwardRef(
+  (
+    {
+      type,
+      categoryProperty,
+      baseFilter = {},
+      masterFilter = {},
+      sorter = {},
+      pageSize = 25,
+      model,
+      modelProperties,
+      visibleColumns = {},
+      isEditing = false,
+      rowActions = [],
+      renderActions
+    },
+    ref
+  ) => {
+    const { getModelPropertyValues } = useContext(ApiServerContext)
+    const columnRefs = useRef({})
+    const headerTrackRef = useRef(null)
+    const skeletonTrackRef = useRef(null)
+    const [scrollElement, setScrollElement] = useState(null)
+    const [categoryValues, setCategoryValues] = useState([])
+    const [hasLoaded, setHasLoaded] = useState(false)
+
+    const baseFilterRef = useRef(baseFilter)
+    const masterFilterRef = useRef(masterFilter)
+    const sorterRef = useRef(sorter)
+    const getModelPropertyValuesRef = useRef(getModelPropertyValues)
+    const lastCategoryQueryKeyRef = useRef(null)
+
+    baseFilterRef.current = baseFilter
+    masterFilterRef.current = masterFilter
+    sorterRef.current = sorter
+    getModelPropertyValuesRef.current = getModelPropertyValues
+
+    const setScrollContainerRef = useCallback((node) => {
+      setScrollElement(node)
+    }, [])
+
+    useLayoutEffect(() => {
+      const mainScroll = scrollElement
+      const headerTrack = headerTrackRef.current
+      const skeletonTrack = skeletonTrackRef.current
+      if (!mainScroll || !headerTrack) return undefined
+
+      const handleMainScroll = () => {
+        const offset = `translate3d(-${mainScroll.scrollLeft}px, 0, 0)`
+        headerTrack.style.transform = offset
+        if (skeletonTrack) {
+          skeletonTrack.style.transform = offset
+        }
+      }
+
+      handleMainScroll()
+      mainScroll.addEventListener('scroll', handleMainScroll, { passive: true })
+
+      return () => {
+        mainScroll.removeEventListener('scroll', handleMainScroll)
+      }
+    }, [scrollElement, categoryValues])
+
+    const categoryPropertyDef = useMemo(
+      () =>
+        model?.properties?.find(
+          (property) => property.name === categoryProperty
+        ),
+      [categoryProperty, model]
+    )
+
+    const buildCategoryQueryKey = useCallback(
+      (filter, activeSorter) =>
+        JSON.stringify({
+          type,
+          categoryProperty,
+          filter,
+          masterFilter: masterFilterRef.current,
+          sorter: activeSorter
+        }),
+      [categoryProperty, type]
+    )
+
+    const reloadColumns = useCallback(async () => {
+      await Promise.all(
+        Object.values(columnRefs.current)
+          .filter(Boolean)
+          .map((columnRef) => columnRef.reload?.())
+      )
+    }, [])
+
+    const load = useCallback(
+      async (filter = null, sorterArg = null) => {
+        if (!categoryProperty) {
+          lastCategoryQueryKeyRef.current = null
+          setCategoryValues([])
+          setHasLoaded(true)
+          return
+        }
+
+        const activeFilter = filter ?? baseFilterRef.current
+        const activeSorter = sorterArg ?? sorterRef.current
+        const queryKey = buildCategoryQueryKey(activeFilter, activeSorter)
+
+        if (lastCategoryQueryKeyRef.current === queryKey) {
+          await reloadColumns()
+          setHasLoaded(true)
+          return
+        }
+
+        setHasLoaded(false)
+
+        try {
+          const values = await getModelPropertyValuesRef.current(
+            type,
+            categoryProperty,
+            {
+              filter: activeFilter,
+              masterFilter: masterFilterRef.current
+            }
+          )
+          const nextValues = Array.isArray(values) ? values : []
+          setCategoryValues(nextValues)
+          lastCategoryQueryKeyRef.current = queryKey
+        } catch (error) {
+          console.error('Error fetching kanban category values:', error)
+          setCategoryValues([])
+          lastCategoryQueryKeyRef.current = null
+          throw error
+        } finally {
+          setHasLoaded(true)
+        }
+      },
+      [buildCategoryQueryKey, categoryProperty, reloadColumns, type]
+    )
+
+    const reload = useCallback(async () => {
+      lastCategoryQueryKeyRef.current = null
+      await load(baseFilterRef.current, sorterRef.current)
+    }, [load])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        load,
+        reload
+      }),
+      [load, reload]
+    )
+
+    if (!categoryProperty) {
+      return (
+        <Flex align='center' justify='center' style={{ height: '100%' }}>
+          <Empty description='Select a category property for kanban view' />
+        </Flex>
+      )
+    }
+
+    if (hasLoaded && categoryValues.length === 0) {
+      return (
+        <Flex align='center' justify='center' style={{ height: '100%' }}>
+          <Empty description='No category values found' />
+        </Flex>
+      )
+    }
+
+    if (!hasLoaded || categoryValues.length === 0) {
+      return (
+        <div className='objectKanbanContainer' style={{ height: '100%' }} />
+      )
+    }
+
+    return (
+      <div className='objectKanbanContainerWrapper'>
+        <div className='objectKanbanContainerSkeletons'>
+          <ObjectKanbanHeader
+            categoryValues={categoryValues}
+            categoryProperty={categoryProperty}
+            categoryPropertyDef={categoryPropertyDef}
+            trackRef={headerTrackRef}
+          />
+          <div className='objectKanbanKanbanBody'>
+            <div className='objectKanbanContainer'>
+              <ScrollBox
+                className='objectKanbanScroll'
+                scrollableNodeProps={{ ref: setScrollContainerRef }}
+              >
+                <Flex gap='middle' className='objectKanban'>
+                  {categoryValues.map((categoryValue) => {
+                    const columnKey = getCategoryValueKey(categoryValue)
+                    return (
+                      <ObjectKanbanColumn
+                        key={columnKey}
+                        ref={(node) => {
+                          if (node) {
+                            columnRefs.current[columnKey] = node
+                          } else {
+                            delete columnRefs.current[columnKey]
+                          }
+                        }}
+                        scrollElement={scrollElement}
+                        type={type}
+                        categoryProperty={categoryProperty}
+                        categoryValue={categoryValue}
+                        baseFilter={baseFilter}
+                        masterFilter={masterFilter}
+                        sorter={sorter}
+                        pageSize={pageSize}
+                        model={model}
+                        modelProperties={modelProperties}
+                        visibleColumns={visibleColumns}
+                        isEditing={isEditing}
+                        rowActions={rowActions}
+                        renderActions={renderActions}
+                      />
+                    )
+                  })}
+                </Flex>
+              </ScrollBox>
+            </div>
+            <div className='objectKanbanSkeletonColumns'>
+              <div
+                className='objectKanbanSkeletonTrack'
+                ref={skeletonTrackRef}
+              >
+                <Flex gap='middle' className='objectKanbanSkeletonRow'>
+                  {categoryValues.map((categoryValue) => {
+                    const columnKey = getCategoryValueKey(categoryValue)
+                    return (
+                      <div
+                        key={columnKey}
+                        className='objectKanbanColumnSkeleton'
+                      >
+                        <div className='objectKanbanColumnCards' />
+                      </div>
+                    )
+                  })}
+                </Flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+ObjectKanban.displayName = 'ObjectKanban'
+
+ObjectKanban.propTypes = {
+  type: PropTypes.string.isRequired,
+  categoryProperty: PropTypes.string,
+  baseFilter: PropTypes.object,
+  masterFilter: PropTypes.object,
+  sorter: PropTypes.object,
+  pageSize: PropTypes.number,
+  model: PropTypes.object.isRequired,
+  modelProperties: PropTypes.array.isRequired,
+  visibleColumns: PropTypes.object,
+  isEditing: PropTypes.bool,
+  rowActions: PropTypes.array,
+  renderActions: PropTypes.func
+}
+
+export default ObjectKanban

src/components/Dashboard/common/ObjectKanbanColumn.jsx

@@ -0,0 +1,552 @@
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+import { Flex, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+import PropTypes from 'prop-types'
+import { ApiServerContext } from '../context/ApiServerContext'
+import ObjectCard from './ObjectCard'
+import { toCategoryFilterValue } from './viewModeUtils'
+
+const SCROLL_THRESHOLD = 50
+
+const ObjectKanbanColumn = forwardRef(
+  (
+    {
+      type,
+      categoryProperty,
+      categoryValue,
+      baseFilter = {},
+      masterFilter = {},
+      sorter = {},
+      pageSize = 25,
+      model,
+      modelProperties,
+      visibleColumns = {},
+      isEditing = false,
+      rowActions = [],
+      renderActions,
+      scrollElement = null
+    },
+    ref
+  ) => {
+    const { fetchObjects } = useContext(ApiServerContext)
+    const containerRef = useRef(null)
+    const pagesRef = useRef([])
+    const loadingPagesRef = useRef(new Set())
+    const dataLoadGenerationRef = useRef(0)
+    const pendingScrollAnchorRef = useRef(null)
+    const lastColumnQueryKeyRef = useRef(null)
+
+    const baseFilterRef = useRef(baseFilter)
+    const masterFilterRef = useRef(masterFilter)
+    const sorterRef = useRef(sorter)
+    const fetchObjectsRef = useRef(fetchObjects)
+
+    baseFilterRef.current = baseFilter
+    masterFilterRef.current = masterFilter
+    sorterRef.current = sorter
+    fetchObjectsRef.current = fetchObjects
+
+    const [pages, setPages] = useState([])
+    const [loading, setLoading] = useState(true)
+
+    const columnFilter = useMemo(
+      () => ({
+        ...baseFilter,
+        [categoryProperty]: toCategoryFilterValue(categoryValue)
+      }),
+      [baseFilter, categoryProperty, categoryValue]
+    )
+
+    const columnQueryKey = useMemo(
+      () =>
+        JSON.stringify({
+          type,
+          categoryProperty,
+          categoryValue: toCategoryFilterValue(categoryValue),
+          filter: columnFilter,
+          sorter
+        }),
+      [columnFilter, categoryProperty, categoryValue, sorter, type]
+    )
+
+    const tableData = useMemo(() => {
+      const items = pages.flatMap((page) => page.items)
+      const seen = new Set()
+      return items.filter((item) => {
+        const id = item?._id
+        if (id == null) return true
+        if (seen.has(id)) return false
+        seen.add(id)
+        return true
+      })
+    }, [pages])
+
+    const createSkeletonData = useCallback(
+      (pageNum) =>
+        Array(pageSize)
+          .fill(null)
+          .map((_, index) => ({
+            _id: `skeleton-${categoryProperty}-${pageNum}-${index}`,
+            isSkeleton: true
+          })),
+      [categoryProperty, pageSize]
+    )
+
+    const createSkeletonPage = useCallback(
+      (pageNum) => ({
+        pageNum,
+        items: createSkeletonData(pageNum),
+        isSkeletonPage: true
+      }),
+      [createSkeletonData]
+    )
+
+    const createPageWindow = useCallback(
+      (loadedPages, direction) => {
+        const dedupedByPageNum = new Map()
+        loadedPages.forEach((page) => {
+          dedupedByPageNum.set(page.pageNum, page)
+        })
+        const sortedPages = [...dedupedByPageNum.values()].sort(
+          (a, b) => a.pageNum - b.pageNum
+        )
+        const visiblePages =
+          direction === 'previous'
+            ? sortedPages.slice(0, 2)
+            : sortedPages.slice(-2)
+        const firstPage = visiblePages[0]
+        const lastPage = visiblePages[visiblePages.length - 1]
+        const nextPages = []
+
+        if (firstPage?.pageNum > 1) {
+          nextPages.push(createSkeletonPage(firstPage.pageNum - 1))
+        }
+        nextPages.push(...visiblePages)
+        if (lastPage?.hasMore) {
+          nextPages.push(createSkeletonPage(lastPage.pageNum + 1))
+        }
+
+        return nextPages
+      },
+      [createSkeletonPage]
+    )
+
+    const mergeLoadedPage = useCallback((currentPages, loadedPage) => {
+      const withoutSkeletons = currentPages.filter(
+        (page) => !page.isSkeletonPage
+      )
+      const withoutDuplicate = withoutSkeletons.filter(
+        (page) => page.pageNum !== loadedPage.pageNum
+      )
+      return [...withoutDuplicate, loadedPage].sort(
+        (a, b) => a.pageNum - b.pageNum
+      )
+    }, [])
+
+    const setTablePages = useCallback((nextPages) => {
+      pagesRef.current = nextPages
+      setPages(nextPages)
+    }, [])
+
+    const isStaleDataLoad = useCallback(
+      (generation) => generation !== dataLoadGenerationRef.current,
+      []
+    )
+
+    const fetchPage = useCallback(
+      async (pageNum) => {
+        const filter = {
+          ...masterFilterRef.current,
+          ...baseFilterRef.current,
+          [categoryProperty]: toCategoryFilterValue(categoryValue)
+        }
+        return fetchObjectsRef.current(type, {
+          page: pageNum,
+          limit: pageSize,
+          filter,
+          sorter: sorterRef.current
+        })
+      },
+      [categoryProperty, categoryValue, pageSize, type]
+    )
+
+    const fetchData = useCallback(
+      async (pageNum) => {
+        const generation = dataLoadGenerationRef.current
+        try {
+          const result = await fetchPage(pageNum)
+          if (isStaleDataLoad(generation)) return []
+          const loadedPage = {
+            pageNum,
+            items: result.data || [],
+            hasMore: result.hasMore
+          }
+          setPages((prev) =>
+            prev.map((page) => (page.pageNum === pageNum ? loadedPage : page))
+          )
+          return result.data || []
+        } catch (error) {
+          console.error(`Error loading kanban page ${pageNum}:`, error)
+          return []
+        }
+      },
+      [fetchPage, isStaleDataLoad]
+    )
+
+    const findRenderedCard = useCallback((scrollTarget, id) => {
+      if (!scrollTarget || id == null) return null
+      return scrollTarget.querySelector(`[data-kanban-card-id="${String(id)}"]`)
+    }, [])
+
+    const captureScrollAnchor = useCallback(
+      (scrollTarget, placeholderPage, direction, currentPages) => {
+        if (!scrollTarget) return null
+
+        const targetTop = scrollTarget.getBoundingClientRect().top
+        const closestCard = (items) =>
+          items
+            .map((item, index) => {
+              const element = findRenderedCard(scrollTarget, item._id)
+              return element
+                ? {
+                    index,
+                    id: item._id,
+                    top: element.getBoundingClientRect().top
+                  }
+                : null
+            })
+            .filter(Boolean)
+            .sort(
+              (a, b) =>
+                Math.abs(a.top - targetTop) - Math.abs(b.top - targetTop)
+            )[0]
+
+        const placeholderAnchor = closestCard(placeholderPage.items)
+        const loadedPages = currentPages.filter((page) => !page.isSkeletonPage)
+        const retainedPage =
+          direction === 'previous'
+            ? loadedPages[0]
+            : loadedPages[loadedPages.length - 1]
+        const fallbackAnchor = retainedPage
+          ? closestCard(retainedPage.items)
+          : null
+
+        return { placeholderAnchor, fallbackAnchor }
+      },
+      [findRenderedCard]
+    )
+
+    const restoreScrollAnchor = useCallback(
+      (scrollTarget, anchor, loadedPage) => {
+        if (!scrollTarget || !anchor) return
+
+        const loadedItem = loadedPage.items[anchor.placeholderAnchor?.index]
+        const anchorId = loadedItem?._id ?? anchor.fallbackAnchor?.id
+        const previousTop = loadedItem
+          ? anchor.placeholderAnchor?.top
+          : anchor.fallbackAnchor?.top
+        if (anchorId == null || previousTop == null) return
+
+        const element = findRenderedCard(scrollTarget, anchorId)
+        if (!element) return
+        const renderedTop = element.getBoundingClientRect().top
+        scrollTarget.scrollTop += renderedTop - previousTop
+      },
+      [findRenderedCard]
+    )
+
+    useLayoutEffect(() => {
+      const pendingAnchor = pendingScrollAnchorRef.current
+      if (!pendingAnchor) return
+      pendingScrollAnchorRef.current = null
+      restoreScrollAnchor(
+        pendingAnchor.scrollTarget,
+        pendingAnchor.anchor,
+        pendingAnchor.loadedPage
+      )
+    }, [pages, restoreScrollAnchor])
+
+    const loadBoundaryPage = useCallback(
+      async (pageNum, direction, scrollTarget) => {
+        if (loadingPagesRef.current.size > 0) return
+
+        const currentPages = pagesRef.current
+        const placeholderPage = currentPages.find(
+          (page) => page.pageNum === pageNum && page.isSkeletonPage
+        )
+        if (!placeholderPage) return
+
+        const scrollAnchor = captureScrollAnchor(
+          scrollTarget,
+          placeholderPage,
+          direction,
+          currentPages
+        )
+
+        const generation = dataLoadGenerationRef.current
+        loadingPagesRef.current.add(pageNum)
+
+        try {
+          const result = await fetchPage(pageNum)
+          if (isStaleDataLoad(generation)) return
+          const loadedPage = {
+            pageNum,
+            items: result.data || [],
+            hasMore: result.hasMore
+          }
+
+          pendingScrollAnchorRef.current = {
+            scrollTarget,
+            anchor: scrollAnchor,
+            loadedPage
+          }
+          setPages((prev) => {
+            if (
+              !prev.some(
+                (page) => page.pageNum === pageNum && page.isSkeletonPage
+              )
+            ) {
+              return prev
+            }
+
+            const loadedPages = mergeLoadedPage(prev, loadedPage)
+            return createPageWindow(loadedPages, direction)
+          })
+        } catch (error) {
+          console.error(`Error loading kanban page ${pageNum}:`, error)
+        } finally {
+          loadingPagesRef.current.delete(pageNum)
+        }
+      },
+      [
+        captureScrollAnchor,
+        createPageWindow,
+        fetchPage,
+        isStaleDataLoad,
+        mergeLoadedPage
+      ]
+    )
+
+    const loadNextPage = useCallback(
+      (scrollTarget) => {
+        const nextPage = pagesRef.current[pagesRef.current.length - 1]
+        if (nextPage?.isSkeletonPage) {
+          loadBoundaryPage(nextPage.pageNum, 'next', scrollTarget)
+        }
+      },
+      [loadBoundaryPage]
+    )
+
+    const loadPreviousPage = useCallback(
+      (scrollTarget) => {
+        const previousPage = pagesRef.current[0]
+        if (previousPage?.isSkeletonPage) {
+          loadBoundaryPage(previousPage.pageNum, 'previous', scrollTarget)
+        }
+      },
+      [loadBoundaryPage]
+    )
+
+    const loadInitialPage = useCallback(async () => {
+      dataLoadGenerationRef.current += 1
+      loadingPagesRef.current.clear()
+      pendingScrollAnchorRef.current = null
+      const generation = dataLoadGenerationRef.current
+
+      pagesRef.current = []
+      setPages([])
+      setLoading(true)
+
+      const skeletonPage = createSkeletonPage(1)
+      setTablePages([skeletonPage])
+
+      try {
+        const firstResult = await fetchPage(1)
+        if (isStaleDataLoad(generation)) return
+        const loadedPages = [
+          {
+            pageNum: 1,
+            items: firstResult.data || [],
+            hasMore: firstResult.hasMore
+          }
+        ]
+        if (!isStaleDataLoad(generation)) {
+          setTablePages(createPageWindow(loadedPages, 'next'))
+        }
+      } catch {
+        if (!isStaleDataLoad(generation)) {
+          setTablePages([])
+        }
+      } finally {
+        if (!isStaleDataLoad(generation)) {
+          setLoading(false)
+        }
+      }
+    }, [
+      createPageWindow,
+      createSkeletonPage,
+      fetchPage,
+      isStaleDataLoad,
+      setTablePages
+    ])
+
+    const reloadLoadedPages = useCallback(async () => {
+      const loadedPages = pagesRef.current.filter(
+        (page) => !page.isSkeletonPage
+      )
+      for (let i = 0; i < loadedPages.length; i++) {
+        await fetchData(loadedPages[i].pageNum)
+      }
+    }, [fetchData])
+
+    useImperativeHandle(ref, () => ({
+      reload: reloadLoadedPages
+    }))
+
+    useEffect(() => {
+      if (lastColumnQueryKeyRef.current === columnQueryKey) return
+
+      let cancelled = false
+
+      const runLoad = async () => {
+        await loadInitialPage()
+        if (!cancelled) {
+          lastColumnQueryKeyRef.current = columnQueryKey
+        }
+      }
+
+      runLoad()
+
+      return () => {
+        cancelled = true
+      }
+    }, [columnQueryKey, loadInitialPage])
+
+    const skeletonBoundaryIds = useMemo(() => {
+      const firstPage = pages[0]
+      const lastPage = pages[pages.length - 1]
+      return {
+        previous:
+          firstPage?.isSkeletonPage && firstPage.items.length > 0
+            ? firstPage.items[firstPage.items.length - 1]._id
+            : null,
+        next:
+          lastPage?.isSkeletonPage && lastPage.items[0]
+            ? lastPage.items[0]._id
+            : null
+      }
+    }, [pages])
+
+    useLayoutEffect(() => {
+      const container = containerRef.current
+      if (!container || !scrollElement) return
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (!entry.isIntersecting) continue
+            const boundary = entry.target.dataset.skeletonBoundary
+            if (boundary === 'next') {
+              loadNextPage(scrollElement)
+            } else if (boundary === 'previous') {
+              loadPreviousPage(scrollElement)
+            }
+          }
+        },
+        {
+          root: scrollElement,
+          rootMargin: `${SCROLL_THRESHOLD}px`,
+          threshold: 0
+        }
+      )
+
+      container
+        .querySelectorAll('[data-skeleton-boundary]')
+        .forEach((el) => observer.observe(el))
+
+      return () => observer.disconnect()
+    }, [
+      scrollElement,
+      skeletonBoundaryIds,
+      loadNextPage,
+      loadPreviousPage,
+      tableData
+    ])
+
+    return (
+      <Flex vertical className='objectKanbanColumn'>
+        <div className='objectKanbanColumnCards' ref={containerRef}>
+          <Spin indicator={<LoadingOutlined />} spinning={loading}>
+            <Flex
+              vertical
+              gap='middle'
+              className='objectKanbanColumnCardsInner'
+            >
+              {tableData.map((record) => {
+                if (record?._id == undefined) return null
+
+                const skeletonBoundary =
+                  record._id === skeletonBoundaryIds.next
+                    ? 'next'
+                    : record._id === skeletonBoundaryIds.previous
+                      ? 'previous'
+                      : undefined
+
+                return (
+                  <div
+                    key={record._id}
+                    data-kanban-card-id={record._id}
+                    data-skeleton-boundary={skeletonBoundary}
+                  >
+                    <ObjectCard
+                      isSkeleton={record?.isSkeleton || false}
+                      model={model}
+                      modelProperties={modelProperties}
+                      visibleColumns={visibleColumns}
+                      record={record}
+                      isEditing={isEditing}
+                      rowActions={rowActions}
+                      renderActions={renderActions}
+                      cardStyle='bordered'
+                    />
+                  </div>
+                )
+              })}
+            </Flex>
+          </Spin>
+        </div>
+      </Flex>
+    )
+  }
+)
+
+ObjectKanbanColumn.displayName = 'ObjectKanbanColumn'
+
+ObjectKanbanColumn.propTypes = {
+  type: PropTypes.string.isRequired,
+  categoryProperty: PropTypes.string.isRequired,
+  categoryValue: PropTypes.any,
+  baseFilter: PropTypes.object,
+  masterFilter: PropTypes.object,
+  sorter: PropTypes.object,
+  pageSize: PropTypes.number,
+  model: PropTypes.object.isRequired,
+  modelProperties: PropTypes.array.isRequired,
+  visibleColumns: PropTypes.object,
+  isEditing: PropTypes.bool,
+  rowActions: PropTypes.array,
+  renderActions: PropTypes.func,
+  scrollElement: PropTypes.object
+}
+
+export default ObjectKanbanColumn

src/components/Dashboard/common/ObjectKanbanHeader.jsx

@@ -0,0 +1,46 @@
+import { Flex } from 'antd'
+import PropTypes from 'prop-types'
+import ObjectProperty from './ObjectProperty'
+import { getCategoryValueKey } from './viewModeUtils'
+
+const ObjectKanbanHeader = ({
+  categoryValues,
+  categoryProperty,
+  categoryPropertyDef,
+  trackRef
+}) => {
+  return (
+    <div className='objectKanbanHeader'>
+      <div className='objectKanbanHeaderTrack' ref={trackRef}>
+        <Flex gap='middle' className='objectKanbanHeaderRow'>
+          {categoryValues.map((categoryValue) => {
+            const columnKey = getCategoryValueKey(categoryValue)
+            return (
+              <div key={columnKey} className='objectKanbanHeaderCell'>
+                {categoryPropertyDef ? (
+                  <ObjectProperty
+                    {...categoryPropertyDef}
+                    value={categoryValue}
+                    objectData={{ [categoryProperty]: categoryValue }}
+                    name={categoryProperty}
+                  />
+                ) : null}
+              </div>
+            )
+          })}
+        </Flex>
+      </div>
+    </div>
+  )
+}
+
+ObjectKanbanHeader.displayName = 'ObjectKanbanHeader'
+
+ObjectKanbanHeader.propTypes = {
+  categoryValues: PropTypes.array.isRequired,
+  categoryProperty: PropTypes.string.isRequired,
+  categoryPropertyDef: PropTypes.object,
+  trackRef: PropTypes.object
+}
+
+export default ObjectKanbanHeader

src/components/Dashboard/common/ObjectTable.jsx

@@ -9,7 +9,6 @@ import {
   useMemo,
   createElement
 } from 'react'
-import { flushSync } from 'react-dom'
 import {
   Table,
   Skeleton,
@@ -36,6 +35,7 @@ import {
 } from '../../../database/ObjectModels'
 import ObjectProperty from './ObjectProperty'
 import ObjectCard from './ObjectCard'
+import ObjectKanban from './ObjectKanban'
 import FilterSidebar from './FilterSidebar'
 import SortSidebar from './SortSidebar'
 import CheckIcon from '../../Icons/CheckIcon'
@@ -59,6 +59,7 @@ import { hasActionPermission } from '../../../database/permissions'
 import Tooltip from './Tooltip'
 import { ObjectTableFilterContext } from './ObjectTableFilterContext'
 import ObjectListViewContext from '../context/ObjectListViewContext'
+import { isCardsView, isKanbanView, normalizeViewMode } from './viewModeUtils'
 
 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
@@ -271,6 +272,7 @@ const ObjectTable = forwardRef(
       scrollHeight = 'calc(var(--unit-100vh) - 258px)',
       onDataChange,
       initialPage = 1,
+      viewMode: viewModeProp,
       cards = false,
       visibleColumns = {},
       masterFilter = {},
@@ -292,10 +294,19 @@ const ObjectTable = forwardRef(
     },
     ref
   ) => {
+    const objectListView = useContext(ObjectListViewContext)
+    const viewMode = normalizeViewMode(
+      viewModeProp ??
+        objectListView?.viewMode ??
+        (cards ? { type: 'cards' } : { type: 'list' })
+    )
+    const isCards = isCardsView(viewMode)
+    const isKanban = isKanbanView(viewMode)
+    const kanbanRef = useRef(null)
+    const wasKanbanRef = useRef(false)
     const { token, userProfile } = useContext(AuthContext)
     const { isElectron } = useContext(ElectronContext)
     const { callAction } = useActions()
-    const objectListView = useContext(ObjectListViewContext)
     const listViewId = objectListView?.listViewId ?? null
     const listViewFilter = objectListView?.listViewFilter ?? null
     const listViewSort = objectListView?.listViewSort ?? null
@@ -349,7 +360,7 @@ const ObjectTable = forwardRef(
     if (isMobile) {
       adjustedScrollHeight = 'calc(var(--unit-100vh) - 298px)'
     }
-    if (cards) {
+    if (isCards || isKanban) {
       adjustedScrollHeight = 'calc(var(--unit-100vh) - 210px)'
     }
     if (isElectron) {
@@ -358,7 +369,7 @@ const ObjectTable = forwardRef(
     if (isMobile && isElectron) {
       adjustedScrollHeight = 'calc(var(--unit-100vh) - 282px)'
     }
-    if (cards && isElectron) {
+    if ((isCards || isKanban) && isElectron) {
       adjustedScrollHeight = 'calc(var(--unit-100vh) - 258px)'
     }
     const tableRef = useRef(null)
@@ -384,15 +395,18 @@ const ObjectTable = forwardRef(
 
     const lastAppliedViewKeyRef = useRef(null)
 
-    const buildEffectiveFilter = useCallback((userFilter, viewFilter = listViewFilterRef.current) => {
+    const buildEffectiveFilter = useCallback(
-      const active = getActiveFilterValues(userFilter)
+      (userFilter, viewFilter = listViewFilterRef.current) => {
-      const viewId = listViewIdRef.current
+        const active = getActiveFilterValues(userFilter)
-      if (!viewId) return active
+        const viewId = listViewIdRef.current
-      return {
+        if (!viewId) return active
-        ...getActiveFilterValues(viewFilter || {}),
+        return {
-        ...active
+          ...getActiveFilterValues(viewFilter || {}),
-      }
+          ...active
-    }, [])
+        }
+      },
+      []
+    )
 
     // Table state
     const [pages, setPages] = useState([])
@@ -443,7 +457,10 @@ const ObjectTable = forwardRef(
     )
     const prevValuesRef = useRef({ type, masterFilter })
 
-    const getMasterFilter = useCallback(() => masterFilter || {}, [masterFilter])
+    const getMasterFilter = useCallback(
+      () => masterFilter || {},
+      [masterFilter]
+    )
 
     const resolveSorter = useCallback((userSorter) => {
       if (userSorter?.field && userSorter?.order) {
@@ -517,9 +534,7 @@ const ObjectTable = forwardRef(
 
     const clearTablePages = useCallback(() => {
       pagesRef.current = []
-      flushSync(() => {
+      setPages([])
-        setPages([])
-      })
     }, [])
 
     const setTablePages = useCallback((nextPages) => {
@@ -889,6 +904,10 @@ const ObjectTable = forwardRef(
 
     const reloadLoadedPages = useCallback(
       async ({ silent = false } = {}) => {
+        if (isKanban) {
+          await kanbanRef.current?.reload?.()
+          return
+        }
         if (!silent) {
           setLazyLoading(true)
         }
@@ -905,7 +924,7 @@ const ObjectTable = forwardRef(
           }
         }
       },
-      [fetchData]
+      [fetchData, isKanban]
     )
 
     const reload = useCallback(() => reloadLoadedPages(), [reloadLoadedPages])
@@ -1076,9 +1095,12 @@ const ObjectTable = forwardRef(
     useEffect(() => {
       if (connected !== true || !type) return
 
-      const unsubscribe = subscribeToAllObjectUpdates(type, (id, updateData) => {
+      const unsubscribe = subscribeToAllObjectUpdates(
-        updateEventHandlerRef.current(id, updateData)
+        type,
-      })
+        (id, updateData) => {
+          updateEventHandlerRef.current(id, updateData)
+        }
+      )
       subscribeToAllObjectUpdatesRef.current = unsubscribe
       return () => {
         if (unsubscribe) unsubscribe()
@@ -1119,15 +1141,38 @@ const ObjectTable = forwardRef(
 
     const loadPage = useCallback(
       async (pageNum, filter = null, sorter = null) => {
+        if (isKanban) {
+          setLoading(true)
+          try {
+            const activeFilter =
+              filter != null ? filter : activeFilterRef.current
+            const resolvedSorter =
+              sorter != null
+                ? resolveSorter(sorter)
+                : resolveSorter(tableSorterRef.current)
+
+            if (!kanbanRef.current?.load) {
+              await new Promise((resolve) => requestAnimationFrame(resolve))
+            }
+
+            await kanbanRef.current?.load?.(
+              activeFilter,
+              resolvedSorter?.field ? resolvedSorter : {}
+            )
+          } catch (error) {
+            logger.error('Error loading kanban view:', error)
+          } finally {
+            setLoading(false)
+          }
+          return
+        }
         const generation = beginDataReload()
         clearTablePages()
         if (isStaleDataLoad(generation)) return
 
         const skeletonPage = createSkeletonPage(pageNum)
-        flushSync(() => {
+        setTablePages([skeletonPage])
-          setTablePages([skeletonPage])
+        setLoading(true)
-          setLoading(true)
-        })
         if (isStaleDataLoad(generation)) return
 
         try {
@@ -1165,7 +1210,9 @@ const ObjectTable = forwardRef(
         fetchPage,
         isStaleDataLoad,
         setTablePages,
-        suppressTableChange
+        suppressTableChange,
+        isKanban,
+        resolveSorter
       ]
     )
 
@@ -1232,11 +1279,7 @@ const ObjectTable = forwardRef(
       setTableSorter(viewSort)
       tableSorterRef.current = viewSort
       activeFilterRef.current = viewFilter
-      loadPage(
+      loadPage(initialPage, viewFilter, viewSort.field ? viewSort : null)
-        initialPage,
-        viewFilter,
-        viewSort.field ? viewSort : null
-      )
     }, [
       activeObjectView,
       initialPage,
@@ -1261,11 +1304,11 @@ const ObjectTable = forwardRef(
             return
           }
 
-        listViewIdRef.current = null
+          listViewIdRef.current = null
-        listViewFilterRef.current = {}
+          listViewFilterRef.current = {}
-        lastAppliedViewKeyRef.current = null
+          lastAppliedViewKeyRef.current = null
-        filter = getAllTabPersistedFilter()
+          filter = getAllTabPersistedFilter()
-        sorter = getAllTabPersistedSorter()
+          sorter = getAllTabPersistedSorter()
 
           const resolvedSorter = resolveSorter(sorter)
           const nextSorter = sorter?.field ? sorter : {}
@@ -1287,9 +1330,7 @@ const ObjectTable = forwardRef(
         // View tab: apply the view definition. Sidebar starts as the view
         // filter so the UI matches; All-tab user settings must not leak in.
         const viewId =
-          options.viewId !== undefined
+          options.viewId !== undefined ? options.viewId : listViewIdRef.current
-            ? options.viewId
-            : listViewIdRef.current
         const viewFilter =
           options.viewFilter !== undefined
             ? options.viewFilter || {}
@@ -1299,12 +1340,11 @@ const ObjectTable = forwardRef(
         listViewFilterRef.current = viewFilter
 
         filter = viewFilter
-        sorter =
+        sorter = options.viewSort?.field
-          options.viewSort?.field
+          ? options.viewSort
-            ? options.viewSort
+          : sorterState?.field
-            : sorterState?.field
+            ? sorterState
-              ? sorterState
+            : {}
-              : {}
 
         const resolvedSorter = resolveSorter(sorter)
         const nextSorter = sorter?.field ? sorter : {}
@@ -1349,16 +1389,55 @@ const ObjectTable = forwardRef(
     }))
 
     useEffect(() => {
-      if (
+      if (connected !== true || token == null || initialized) {
-        connected == true &&
+        return
-        token != null &&
-        !pages.includes(initialPage) &&
-        !initialized
-      ) {
-        loadInitialPage()
-        setInitialized(true)
       }
-    }, [token, loadInitialPage, initialPage, pages, initialized, connected])
+
+      let cancelled = false
+
+      const run = async () => {
+        await loadInitialPage()
+        if (!cancelled) {
+          setInitialized(true)
+        }
+      }
+
+      run()
+
+      return () => {
+        cancelled = true
+      }
+    }, [token, loadInitialPage, initialized, connected])
+
+    useEffect(() => {
+      if (!isKanban || connected !== true || token == null) {
+        wasKanbanRef.current = isKanban
+        return
+      }
+
+      const categoryProperty = viewMode?.settings?.categoryProperty
+      if (!categoryProperty) {
+        wasKanbanRef.current = isKanban
+        return
+      }
+
+      if (!wasKanbanRef.current) {
+        loadPage(
+          initialPage,
+          activeFilterRef.current,
+          tableSorterRef.current?.field ? tableSorterRef.current : null
+        )
+      }
+
+      wasKanbanRef.current = isKanban
+    }, [
+      isKanban,
+      connected,
+      token,
+      loadPage,
+      initialPage,
+      viewMode?.settings?.categoryProperty
+    ])
 
     // Watch for changes in type and masterFilter, reset component state when they change
     useEffect(() => {
@@ -1457,15 +1536,14 @@ const ObjectTable = forwardRef(
         const effective = buildEffectiveFilter(newSidebarFilter)
         activeFilterRef.current = effective
         if (activeObjectViewRef.current) {
-          onObjectViewFilterSortChangeRef.current?.(newSidebarFilter, tableSorter)
+          onObjectViewFilterSortChangeRef.current?.(
+            newSidebarFilter,
+            tableSorter
+          )
         } else if (!listViewIdRef.current) {
           persistFilter(newSidebarFilter)
         }
-        loadPage(
+        loadPage(initialPage, effective, resolveSorter(tableSorter))
-          initialPage,
-          effective,
-          resolveSorter(tableSorter)
-        )
       },
       [
         buildEffectiveFilter,
@@ -1511,7 +1589,7 @@ const ObjectTable = forwardRef(
     // Table columns from model properties
     const columnsWithSkeleton = [
       {
-        title: lazyLoading ? <LoadingOutlined /> : cards ? model.icon : null,
+        title: lazyLoading ? <LoadingOutlined /> : isCards ? model.icon : null,
         key: 'icon',
         width: 45,
         fixed: 'left',
@@ -1526,7 +1604,7 @@ const ObjectTable = forwardRef(
     }, [pages])
 
     useEffect(() => {
-      if (!expandHeight || cards) return
+      if (!expandHeight || isCards || isKanban) return
 
       const findAntTableBody = (element) => {
         if (!element) return null
@@ -1547,7 +1625,14 @@ const ObjectTable = forwardRef(
       return () => {
         tableBody.style.minHeight = ''
       }
-    }, [expandHeight, adjustedScrollHeight, cards, loading, tableData])
+    }, [
+      expandHeight,
+      adjustedScrollHeight,
+      isCards,
+      isKanban,
+      loading,
+      tableData
+    ])
 
     // Add columns in the order specified by model.columns
     model.columns.forEach((colName) => {
@@ -1720,9 +1805,9 @@ const ObjectTable = forwardRef(
     )
 
     useLayoutEffect(() => {
-      if (!cards) return
+      if (!isCards) return
       measureCardColSpan()
-    }, [cards, showFilterSidebar, showSortSidebar, measureCardColSpan])
+    }, [isCards, showFilterSidebar, showSortSidebar, measureCardColSpan])
 
     useEffect(() => {
       return () => cardsResizeObserverRef.current?.disconnect()
@@ -1730,7 +1815,7 @@ const ObjectTable = forwardRef(
 
     // Card view: load when the leading skeleton card in a boundary page enters view
     useLayoutEffect(() => {
-      if (!cards) return
+      if (!isCards) return
       const container = cardsContainerNodeRef.current
       if (!container) return
       const scrollEl = container.querySelector('.simplebar-content-wrapper')
@@ -1760,7 +1845,7 @@ const ObjectTable = forwardRef(
         .forEach((el) => observer.observe(el))
 
       return () => observer.disconnect()
-    }, [cards, skeletonBoundaryIds, loadNextPage, loadPreviousPage])
+    }, [isCards, skeletonBoundaryIds, loadNextPage, loadPreviousPage])
 
     const renderCards = () => {
       return (
@@ -1847,7 +1932,31 @@ const ObjectTable = forwardRef(
           onResizeEnd={measureCardColSpan}
         >
           <Splitter.Panel>
-            {cards ? (
+            {isKanban ? (
+              <div className='objectKanbanWrap'>
+                <Spin
+                  indicator={<LoadingOutlined />}
+                  spinning={loading}
+                  style={{ height: '100%' }}
+                >
+                  <ObjectKanban
+                    ref={kanbanRef}
+                    type={type}
+                    categoryProperty={viewMode.settings?.categoryProperty}
+                    baseFilter={effectiveFilter}
+                    masterFilter={masterFilter}
+                    sorter={effectiveSorter}
+                    pageSize={pageSize}
+                    model={model}
+                    modelProperties={modelProperties}
+                    visibleColumns={visibleColumns}
+                    isEditing={isEditing}
+                    rowActions={rowActions}
+                    renderActions={renderActions}
+                  />
+                </Spin>
+              </div>
+            ) : isCards ? (
               <div
                 className='objectTableCardsContainer'
                 ref={objectTableCardsContainerRef}
@@ -1932,6 +2041,7 @@ ObjectTable.propTypes = {
   scrollHeight: PropTypes.string,
   onDataChange: PropTypes.func,
   initialPage: PropTypes.number,
+  viewMode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   cards: PropTypes.bool,
   cardRenderer: PropTypes.func,
   visibleColumns: PropTypes.object,

src/components/Dashboard/common/ObjectTableViewButton.jsx

@@ -1,24 +1,143 @@
 import PropTypes from 'prop-types'
-import { Button, Divider, Flex } from 'antd'
+import { useContext, useMemo, useState } from 'react'
+import ObjectListViewContext from '../context/ObjectListViewContext'
+import { Button, Divider, Flex, Modal, Popover, Radio, Select } from 'antd'
 import GridIcon from '../../Icons/GridIcon'
 import ListIcon from '../../Icons/ListIcon'
+import KanbanIcon from '../../Icons/KanbanIcon'
+import SettingsIcon from '../../Icons/SettingsIcon'
+import { getModelByName } from '../../../database/ObjectModels'
+import { getViewModeType, normalizeViewMode } from './viewModeUtils'
+
+const VIEW_MODE_OPTIONS = [
+  { type: 'list', label: 'List', icon: <ListIcon /> },
+  { type: 'cards', label: 'Cards', icon: <GridIcon /> },
+  { type: 'kanban', label: 'Kanban', icon: <KanbanIcon /> }
+]
 
 const ObjectTableViewButton = ({
-  viewMode,
+  objectType,
-  setViewMode,
+  viewMode: viewModeProp,
+  setViewMode: setViewModeProp,
   showEndingDivider = false,
   ...buttonProps
 }) => {
-  const content = (
+  const objectListView = useContext(ObjectListViewContext)
-    <Button
+  const viewMode = viewModeProp ?? objectListView?.viewMode
-      icon={viewMode === 'cards' ? <ListIcon /> : <GridIcon />}
+  const setViewMode = setViewModeProp ?? objectListView?.setViewMode
-      onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
+  const [settingsOpen, setSettingsOpen] = useState(false)
-      title={
+  const normalizedViewMode = normalizeViewMode(viewMode)
-        viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'
+  const model = getModelByName(objectType)
-      }
+
-      {...buttonProps}
+  const stateProperties = useMemo(
-    />
+    () =>
+      model?.properties?.filter((property) => property.type === 'state') || [],
+    [model]
   )
+
+  const hasKanbanOption = stateProperties.length > 0
+  const defaultCategoryProperty = stateProperties[0]?.name
+
+  const handleTypeChange = (nextType) => {
+    if (nextType === 'kanban') {
+      setViewMode({
+        type: 'kanban',
+        settings: {
+          categoryProperty:
+            normalizedViewMode.type === 'kanban'
+              ? normalizedViewMode.settings?.categoryProperty ||
+                defaultCategoryProperty
+              : defaultCategoryProperty
+        }
+      })
+      return
+    }
+
+    setViewMode({ type: nextType })
+  }
+
+  const handleCategoryPropertyChange = (categoryProperty) => {
+    setViewMode({
+      type: 'kanban',
+      settings: { categoryProperty }
+    })
+  }
+
+  const activeIcon =
+    normalizedViewMode.type === 'cards' ? (
+      <GridIcon />
+    ) : normalizedViewMode.type === 'kanban' ? (
+      <KanbanIcon />
+    ) : (
+      <ListIcon />
+    )
+
+  const content = (
+    <>
+      <Popover
+        content={
+          <Flex vertical>
+            <Radio.Group
+              value={getViewModeType(normalizedViewMode)}
+              onChange={(e) => handleTypeChange(e.target.value)}
+            >
+              <Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
+                {VIEW_MODE_OPTIONS.filter(
+                  (option) => option.type !== 'kanban' || hasKanbanOption
+                ).map((option) => (
+                  <Radio key={option.type} value={option.type}>
+                    <Flex gap='small' align='center'>
+                      {option.icon}
+                      {option.label}
+                      {option.type === 'kanban' && (
+                        <Button
+                          type='text'
+                          size='small'
+                          icon={<SettingsIcon />}
+                          disabled={normalizedViewMode.type !== 'kanban'}
+                          onClick={(event) => {
+                            event.preventDefault()
+                            event.stopPropagation()
+                            setSettingsOpen(true)
+                          }}
+                        />
+                      )}
+                    </Flex>
+                  </Radio>
+                ))}
+              </Flex>
+            </Radio.Group>
+          </Flex>
+        }
+        placement='bottomLeft'
+        arrow={false}
+      >
+        <Button icon={activeIcon} title='View mode' {...buttonProps} />
+      </Popover>
+      <Modal
+        title='Kanban settings'
+        open={settingsOpen}
+        onCancel={() => setSettingsOpen(false)}
+        onOk={() => setSettingsOpen(false)}
+        destroyOnClose
+      >
+        <Select
+          style={{ width: '100%' }}
+          placeholder='Select category property'
+          value={
+            normalizedViewMode.settings?.categoryProperty ||
+            defaultCategoryProperty
+          }
+          onChange={handleCategoryPropertyChange}
+          options={stateProperties.map((property) => ({
+            value: property.name,
+            label: property.label || property.name
+          }))}
+        />
+      </Modal>
+    </>
+  )
+
   if (showEndingDivider) {
     return (
       <Flex gap='small' align='center'>
@@ -31,8 +150,9 @@ const ObjectTableViewButton = ({
 }
 
 ObjectTableViewButton.propTypes = {
-  viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
+  objectType: PropTypes.string.isRequired,
-  setViewMode: PropTypes.func.isRequired,
+  viewMode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  setViewMode: PropTypes.func,
   showEndingDivider: PropTypes.bool
 }
 

src/components/Dashboard/common/viewModeUtils.js

@@ -0,0 +1,31 @@
+export const DEFAULT_VIEW_MODE = { type: 'list' }
+
+export const normalizeViewMode = (value) => {
+  if (!value) return DEFAULT_VIEW_MODE
+  if (typeof value === 'string') {
+    return {
+      type: value === 'cards' ? 'cards' : value === 'kanban' ? 'kanban' : 'list'
+    }
+  }
+  if (value?.type) return value
+  return DEFAULT_VIEW_MODE
+}
+
+export const isCardsView = (vm) => normalizeViewMode(vm).type === 'cards'
+export const isKanbanView = (vm) => normalizeViewMode(vm).type === 'kanban'
+export const getViewModeType = (vm) => normalizeViewMode(vm).type
+
+export const toCategoryFilterValue = (value) => {
+  if (value && typeof value === 'object') {
+    return value.type ?? value._id ?? JSON.stringify(value)
+  }
+  return String(value)
+}
+
+export const getCategoryValueKey = (value) => {
+  if (value && typeof value === 'object' && value.type != null) {
+    return String(value.type)
+  }
+  if (value != null) return String(value)
+  return 'null'
+}

src/components/Dashboard/context/ObjectListViewContext.jsx

@@ -12,6 +12,11 @@ import PropTypes from 'prop-types'
 import { ApiServerContext } from './ApiServerContext'
 import { AuthContext } from './AuthContext'
 import { useTableState } from './TableStateContext'
+import useViewMode from '../hooks/useViewMode'
+import {
+  DEFAULT_VIEW_MODE,
+  normalizeViewMode
+} from '../common/viewModeUtils'
 
 const ObjectListViewContext = createContext()
 
@@ -103,7 +108,8 @@ const cloneViews = (views) =>
   views.map((view) => ({
     ...view,
     filter: view.filter ? { ...view.filter } : {},
-    sort: view.sort ? { ...view.sort } : {}
+    sort: view.sort ? { ...view.sort } : {},
+    viewMode: view.viewMode ? { ...view.viewMode } : view.viewMode
   }))
 
 const getViewTabSignature = (view) =>
@@ -112,6 +118,9 @@ const getViewTabSignature = (view) =>
 const viewStateEqual = (left, right) =>
   JSON.stringify(left || {}) === JSON.stringify(right || {})
 
+const viewModeEqual = (left, right) =>
+  JSON.stringify(left ?? null) === JSON.stringify(right ?? null)
+
 export const ObjectListViewProvider = ({
   children,
   objectType,
@@ -142,6 +151,8 @@ export const ObjectListViewProvider = ({
   const [viewsFetched, setViewsFetched] = useState(false)
   const [saving, setSaving] = useState(false)
   const [activeTabKey, setActiveTabKey] = useState(ALL_TAB_KEY)
+  const activeTabKeyRef = useRef(activeTabKey)
+  activeTabKeyRef.current = activeTabKey
   const [isEditing, setIsEditing] = useState(false)
   const [viewSyncReady, setViewSyncReady] = useState(false)
 
@@ -172,6 +183,7 @@ export const ObjectListViewProvider = ({
 
   const authReady = Boolean(token && authInitialized)
   const displayedViews = isEditing ? draftViews : views
+  const [userViewMode, setUserViewMode] = useViewMode(objectType)
 
   const activeView = useMemo(() => {
     if (activeTabKey === ALL_TAB_KEY) return null
@@ -459,7 +471,8 @@ export const ObjectListViewProvider = ({
             color: draft.color,
             private: draft.private !== false,
             filter: draft.filter || {},
-            sort: draft.sort || {}
+            sort: draft.sort || {},
+            viewMode: draft.viewMode ?? null
           })
           if (String(activeTabKey) === String(draft._id) && created?._id) {
             newActiveId = created._id
@@ -480,6 +493,9 @@ export const ObjectListViewProvider = ({
         if (!viewStateEqual(draft.sort, original.sort)) {
           updates.sort = draft.sort || {}
         }
+        if (!viewModeEqual(draft.viewMode, original.viewMode)) {
+          updates.viewMode = draft.viewMode ?? null
+        }
 
         if (Object.keys(updates).length > 0) {
           await apiRef.current.updateObjectView(draft._id, updates)
@@ -847,10 +863,73 @@ export const ObjectListViewProvider = ({
   const listViewSort = activeView?.sort?.field
     ? activeView.sort
     : EMPTY_SORT
+  const listViewViewMode = activeView?.viewMode ?? null
   // Only expose the editable view while editing — ObjectTable uses this to
   // route filter/sort changes into the draft instead of URL/session persistence.
   const activeObjectView = isEditing ? activeView : null
 
+  const handleViewModeChange = useCallback(
+    async (viewMode) => {
+      const view = activeViewRef.current
+      if (!view || activeTabKeyRef.current === ALL_TAB_KEY) return
+
+      if (isEditingRef.current) {
+        const updateInList = (list) =>
+          list.map((item) =>
+            String(item._id) === String(view._id)
+              ? { ...item, viewMode }
+              : item
+          )
+
+        activeViewRef.current = { ...view, viewMode }
+
+        setDraftViews((prev) => updateInList(prev))
+        viewsStateRef.current = {
+          ...viewsStateRef.current,
+          draftViews: updateInList(viewsStateRef.current.draftViews)
+        }
+        return
+      }
+
+      try {
+        await apiRef.current.updateObjectView(view._id, { viewMode })
+        mergeViewUpdate(view._id, { viewMode })
+      } catch (error) {
+        console.error('Error updating view mode:', error)
+        message.error('Failed to save view mode')
+      }
+    },
+    [mergeViewUpdate]
+  )
+
+  const isCustomView = activeTabKey !== ALL_TAB_KEY
+
+  const viewMode = useMemo(() => {
+    if (isCustomView && listViewViewMode) {
+      return normalizeViewMode(listViewViewMode)
+    }
+    if (isCustomView) {
+      return DEFAULT_VIEW_MODE
+    }
+    return normalizeViewMode(userViewMode)
+  }, [isCustomView, listViewViewMode, userViewMode])
+
+  const setViewMode = useCallback(
+    (nextMode) => {
+      const resolved = normalizeViewMode(
+        typeof nextMode === 'function' ? nextMode(viewMode) : nextMode
+      )
+
+      if (isCustomView) {
+        handleViewModeChange(resolved)
+        return
+      }
+
+      setUserViewMode(resolved)
+    },
+    [handleViewModeChange, isCustomView, setUserViewMode, viewMode]
+  )
+
   const viewTabSignatures = useMemo(
     () => displayedViews.map(getViewTabSignature).join('|'),
     [displayedViews]
@@ -867,6 +946,9 @@ export const ObjectListViewProvider = ({
       listViewId,
       listViewFilter,
       listViewSort,
+      listViewViewMode,
+      viewMode,
+      setViewMode,
       initialLoading,
       saving,
       isEditing,
@@ -880,6 +962,7 @@ export const ObjectListViewProvider = ({
       mergeViewUpdate,
       removeView,
       handleFilterSortChange,
+      handleViewModeChange,
       reloadViews: () => loadViewsRef.current(true),
       viewTabSignatures
     }),
@@ -892,6 +975,9 @@ export const ObjectListViewProvider = ({
       listViewId,
       listViewFilter,
       listViewSort,
+      listViewViewMode,
+      viewMode,
+      setViewMode,
       initialLoading,
       saving,
       isEditing,
@@ -905,6 +991,7 @@ export const ObjectListViewProvider = ({
       mergeViewUpdate,
       removeView,
       handleFilterSortChange,
+      handleViewModeChange,
       viewTabSignatures
     ]
   )

src/components/Dashboard/hooks/useViewMode.jsx

@@ -1,14 +1,21 @@
 import { useCallback, useContext } from 'react'
 import { ApiServerContext } from '../context/ApiServerContext'
+import {
+  DEFAULT_VIEW_MODE,
+  normalizeViewMode
+} from '../common/viewModeUtils'
 
-const useViewMode = (componentName, defaultMode = 'list') => {
+const useViewMode = (componentName, defaultMode = DEFAULT_VIEW_MODE) => {
   const { userSettings, updateUserSettings } = useContext(ApiServerContext)
-  const viewMode = userSettings.viewMode[componentName] ?? defaultMode
+  const viewMode = normalizeViewMode(
+    userSettings.viewMode[componentName] ?? defaultMode
+  )
 
   const setViewMode = useCallback(
     (nextMode) => {
-      const mode =
+      const mode = normalizeViewMode(
         typeof nextMode === 'function' ? nextMode(viewMode) : nextMode
+      )
       updateUserSettings('viewMode', componentName, mode)
     },
     [componentName, updateUserSettings, viewMode]

src/components/Icons/KanbanIcon.jsx

@@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/kanbanicon.svg?react'
+
+const KanbanIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default KanbanIcon