diff --git a/assets/icons/filtercirclefilledicon.svg b/assets/icons/filtercirclefilledicon.svg
new file mode 100644
index 0000000..0ced6cc
--- /dev/null
+++ b/assets/icons/filtercirclefilledicon.svg
@@ -0,0 +1,7 @@
+
+
+
diff --git a/assets/icons/filtercircleicon.svg b/assets/icons/filtercircleicon.svg
new file mode 100644
index 0000000..6bafa21
--- /dev/null
+++ b/assets/icons/filtercircleicon.svg
@@ -0,0 +1,8 @@
+
+
+
diff --git a/assets/icons/filtericon.svg b/assets/icons/filtericon.svg
new file mode 100644
index 0000000..f25e149
--- /dev/null
+++ b/assets/icons/filtericon.svg
@@ -0,0 +1,9 @@
+
+
+
diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 7f8d807..f7ff927 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -584,3 +584,15 @@ body {
.markdown-code-editor .cm-editor .cm-gutters {
background-color: transparent;
}
+
+.h-100 {
+ height: 100%;
+}
+
+.ant-table.ant-table-middle .ant-table-filter-trigger {
+ height: 20px;
+}
+
+.ant-table-wrapper .ant-table-filter-column {
+ align-items: center;
+}
diff --git a/src/components/Dashboard/Finance/Invoices.jsx b/src/components/Dashboard/Finance/Invoices.jsx
index 43dba5a..efb0be1 100644
--- a/src/components/Dashboard/Finance/Invoices.jsx
+++ b/src/components/Dashboard/Finance/Invoices.jsx
@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ColumnViewButton from '../common/ColumnViewButton'
import ExportListButton from '../common/ExportListButton'
@@ -20,6 +21,9 @@ const Invoices = () => {
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('invoices')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Invoices')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const Invoices = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const Invoices = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const Invoices = () => {
visibleColumns={columnVisibility}
type='invoice'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('payments')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Payments')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const Payments = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const Payments = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const Payments = () => {
visibleColumns={columnVisibility}
type='payment'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('filamentStocks')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('FilamentStocks')
+
const actionItems = {
items: [
{
@@ -50,7 +54,7 @@ const FilamentStocks = () => {
return (
<>
-
+
@@ -65,11 +69,13 @@ const FilamentStocks = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -79,6 +85,7 @@ const FilamentStocks = () => {
visibleColumns={columnVisibility}
type='filamentStock'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('orderItems')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('OrderItems')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const OrderItems = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const OrderItems = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const OrderItems = () => {
visibleColumns={columnVisibility}
type='orderItem'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('partStocks')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('PartStocks')
+
const actionItems = {
items: [
{
@@ -50,7 +54,7 @@ const PartStocks = () => {
return (
<>
-
+
@@ -65,11 +69,13 @@ const PartStocks = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -79,6 +85,7 @@ const PartStocks = () => {
visibleColumns={columnVisibility}
type='partStock'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('productStock')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('ProductStocks')
+
const actionItems = {
items: [
{
@@ -51,7 +55,7 @@ const ProductStocks = () => {
return (
<>
-
+
@@ -66,11 +70,13 @@ const ProductStocks = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -80,6 +86,7 @@ const ProductStocks = () => {
visibleColumns={columnVisibility}
type='productStock'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('purchaseOrders')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('PurchaseOrders')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const PurchaseOrders = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const PurchaseOrders = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const PurchaseOrders = () => {
visibleColumns={columnVisibility}
type='purchaseOrder'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('shipments')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Shipments')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const Shipments = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const Shipments = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const Shipments = () => {
visibleColumns={columnVisibility}
type='shipment'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('stockAudits')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('StockAudits')
+
const actionItems = {
items: [
{
@@ -50,7 +54,7 @@ const StockAudits = () => {
return (
<>
-
+
@@ -65,11 +69,13 @@ const StockAudits = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -79,6 +85,7 @@ const StockAudits = () => {
visibleColumns={columnVisibility}
type='stockAudit'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('stockEvent')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('StockEvents')
+
const actionItems = {
items: [
{
@@ -33,7 +37,7 @@ const StockEvents = () => {
return (
<>
-
+
@@ -48,11 +52,13 @@ const StockEvents = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -62,6 +68,7 @@ const StockEvents = () => {
visibleColumns={columnVisibility}
type='stockEvent'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
diff --git a/src/components/Dashboard/Management/AppPasswords.jsx b/src/components/Dashboard/Management/AppPasswords.jsx
index b9d31ef..c3d05c3 100644
--- a/src/components/Dashboard/Management/AppPasswords.jsx
+++ b/src/components/Dashboard/Management/AppPasswords.jsx
@@ -6,9 +6,10 @@ import ColumnViewButton from '../common/ColumnViewButton'
import ObjectTable from '../common/ObjectTable'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
-import ListIcon from '../../Icons/ListIcon'
-import GridIcon from '../../Icons/GridIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ExportListButton from '../common/ExportListButton'
const AppPasswords = () => {
@@ -19,6 +20,9 @@ const AppPasswords = () => {
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('appPassword')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('AppPasswords')
+
const actionItems = {
items: [
{
@@ -44,7 +48,7 @@ const AppPasswords = () => {
return (
<>
-
+
@@ -59,11 +63,13 @@ const AppPasswords = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const AppPasswords = () => {
type='appPassword'
cards={viewMode === 'cards'}
visibleColumns={columnVisibility}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, updateColumnVisibility] =
useColumnVisibility('auditLog')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('AuditLogs')
+
const actionItems = {
items: [
{
@@ -30,7 +35,7 @@ const AuditLogs = () => {
return (
<>
-
+
@@ -44,12 +49,19 @@ const AuditLogs = () => {
/>
+
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
diff --git a/src/components/Dashboard/Management/CourierServices.jsx b/src/components/Dashboard/Management/CourierServices.jsx
index 28111d4..d2dd307 100644
--- a/src/components/Dashboard/Management/CourierServices.jsx
+++ b/src/components/Dashboard/Management/CourierServices.jsx
@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ColumnViewButton from '../common/ColumnViewButton'
import ExportListButton from '../common/ExportListButton'
@@ -20,6 +21,9 @@ const CourierServices = () => {
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('courierService')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('CourierServices')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const CourierServices = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const CourierServices = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const CourierServices = () => {
visibleColumns={columnVisibility}
type='courierService'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] = useColumnVisibility('courier')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Couriers')
+
const actionItems = {
items: [
{
@@ -44,7 +48,7 @@ const Couriers = () => {
return (
<>
-
+
@@ -59,11 +63,13 @@ const Couriers = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -72,6 +78,7 @@ const Couriers = () => {
visibleColumns={columnVisibility}
type='courier'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('documentJob')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('DocumentJobs')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const DocumentJobs = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const DocumentJobs = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const DocumentJobs = () => {
visibleColumns={columnVisibility}
type='documentJob'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('documentPrinter')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('DocumentPrinters')
+
const actionItems = {
items: [
{
@@ -44,7 +48,7 @@ const DocumentPrinters = () => {
return (
<>
-
+
@@ -59,11 +63,13 @@ const DocumentPrinters = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -72,6 +78,7 @@ const DocumentPrinters = () => {
visibleColumns={columnVisibility}
type='documentPrinter'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('documentSize')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('DocumentSizes')
+
const actionItems = {
items: [
{
@@ -43,7 +47,7 @@ const DocumentSizes = () => {
return (
<>
-
+
@@ -58,11 +62,13 @@ const DocumentSizes = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -71,6 +77,7 @@ const DocumentSizes = () => {
visibleColumns={columnVisibility}
type='documentSize'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('documentTemplate')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('DocumentTemplates')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const DocumentTemplates = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const DocumentTemplates = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const DocumentTemplates = () => {
visibleColumns={columnVisibility}
type='documentTemplate'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('filamentSku')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('FilamentSkus')
+
const actionItems = {
items: [
{
@@ -48,7 +52,7 @@ const FilamentSkus = () => {
return (
<>
-
+
@@ -63,11 +67,13 @@ const FilamentSkus = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -77,6 +83,7 @@ const FilamentSkus = () => {
visibleColumns={columnVisibility}
type='filamentSku'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [newFilamentOpen, setNewFilamentOpen] = useState(false)
@@ -25,6 +26,9 @@ const Filaments = () => {
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('filament')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Filaments')
+
const actionItems = {
items: [
{
@@ -50,7 +54,7 @@ const Filaments = () => {
return (
<>
-
+
@@ -65,11 +69,13 @@ const Filaments = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -79,6 +85,7 @@ const Filaments = () => {
type='filament'
cards={viewMode === 'cards'}
visibleColumns={columnVisibility}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] = useColumnVisibility('file')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Files')
+
const actionItems = {
items: [
{
@@ -33,7 +37,7 @@ const Files = () => {
return (
<>
-
+
@@ -48,11 +52,13 @@ const Files = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -61,6 +67,7 @@ const Files = () => {
visibleColumns={columnVisibility}
type='file'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
diff --git a/src/components/Dashboard/Management/Hosts.jsx b/src/components/Dashboard/Management/Hosts.jsx
index d8f25a4..60e1973 100644
--- a/src/components/Dashboard/Management/Hosts.jsx
+++ b/src/components/Dashboard/Management/Hosts.jsx
@@ -11,9 +11,10 @@ import ExportListButton from '../common/ExportListButton'
import ObjectTable from '../common/ObjectTable'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
-import ListIcon from '../../Icons/ListIcon'
-import GridIcon from '../../Icons/GridIcon'
import useViewMode from '../hooks/useViewMode'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
const Hosts = () => {
const [newHostOpen, setNewHostOpen] = useState(false)
@@ -24,6 +25,9 @@ const Hosts = () => {
const [columnVisibility, setColumnVisibility] = useColumnVisibility('host')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Hosts')
+
const actionItems = {
items: [
{
@@ -49,7 +53,7 @@ const Hosts = () => {
return (
<>
-
+
@@ -64,11 +68,13 @@ const Hosts = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -78,6 +84,7 @@ const Hosts = () => {
type='host'
cards={viewMode === 'cards'}
visibleColumns={columnVisibility}
+ showFilterSidebar={showFilterSidebar}
/>
{
@@ -22,6 +23,9 @@ const Materials = () => {
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('material')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Materials')
+
const actionItems = {
items: [
{
@@ -47,7 +51,7 @@ const Materials = () => {
return (
<>
-
+
@@ -62,11 +66,13 @@ const Materials = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -76,6 +82,7 @@ const Materials = () => {
type='material'
cards={viewMode === 'cards'}
visibleColumns={columnVisibility}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('noteType')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('NoteTypes')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const NoteTypes = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const NoteTypes = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const NoteTypes = () => {
visibleColumns={columnVisibility}
type='noteType'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] = useColumnVisibility('partSku')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('PartSkus')
+
const actionItems = {
items: [
{
@@ -47,7 +51,7 @@ const PartSkus = () => {
return (
<>
-
+
@@ -62,11 +66,13 @@ const PartSkus = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -76,6 +82,7 @@ const PartSkus = () => {
visibleColumns={columnVisibility}
type='partSku'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [viewMode, setViewMode] = useViewMode('part')
const [columnVisibility, setColumnVisibility] = useColumnVisibility('part')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Parts')
+
const actionItems = {
items: [
{
@@ -49,7 +53,7 @@ const Parts = (filter) => {
return (
<>
-
+
@@ -64,11 +68,13 @@ const Parts = (filter) => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -78,6 +84,7 @@ const Parts = (filter) => {
type='part'
cards={viewMode === 'cards'}
filter={filter}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('productSku')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('ProductSkus')
+
const actionItems = {
items: [
{
@@ -48,7 +52,7 @@ const ProductSkus = () => {
return (
<>
-
+
@@ -63,11 +67,13 @@ const ProductSkus = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -77,6 +83,7 @@ const ProductSkus = () => {
visibleColumns={columnVisibility}
type='productSku'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
@@ -235,6 +236,9 @@ const Products = () => {
columns
)
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Products')
+
const actionItems = {
items: [
{
@@ -320,7 +324,7 @@ const Products = () => {
return (
<>
-
+
@@ -336,11 +340,13 @@ const Products = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -348,6 +354,7 @@ const Products = () => {
ref={tableRef}
type={'product'}
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] = useColumnVisibility('taxRate')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('TaxRates')
+
const actionItems = {
items: [
{
@@ -44,7 +48,7 @@ const TaxRates = () => {
return (
<>
-
+
@@ -59,11 +63,13 @@ const TaxRates = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -72,6 +78,7 @@ const TaxRates = () => {
visibleColumns={columnVisibility}
type='taxRate'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('taxRecord')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('TaxRecords')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const TaxRecords = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const TaxRecords = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const TaxRecords = () => {
visibleColumns={columnVisibility}
type='taxRecord'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] = useColumnVisibility('user')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Users')
+
const actionItems = {
items: [
{
@@ -32,7 +36,7 @@ const Users = () => {
}
return (
-
+
@@ -47,9 +51,13 @@ const Users = () => {
- : }
- onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -58,6 +66,7 @@ const Users = () => {
type={'user'}
visibleColumns={columnVisibility}
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
)
diff --git a/src/components/Dashboard/Management/Vendors.jsx b/src/components/Dashboard/Management/Vendors.jsx
index aed85c4..056433b 100644
--- a/src/components/Dashboard/Management/Vendors.jsx
+++ b/src/components/Dashboard/Management/Vendors.jsx
@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ColumnViewButton from '../common/ColumnViewButton'
import ExportListButton from '../common/ExportListButton'
@@ -19,6 +20,9 @@ const Vendors = () => {
const [columnVisibility, setColumnVisibility] = useColumnVisibility('vendor')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Vendors')
+
const actionItems = {
items: [
{
@@ -44,7 +48,7 @@ const Vendors = () => {
return (
<>
-
+
@@ -59,11 +63,13 @@ const Vendors = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -72,6 +78,7 @@ const Vendors = () => {
visibleColumns={columnVisibility}
type='vendor'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('gcodeFile')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('GCodeFiles')
+
const actionItems = {
items: [
{
@@ -47,7 +51,7 @@ const GCodeFiles = () => {
return (
<>
-
+
@@ -62,11 +66,13 @@ const GCodeFiles = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -75,6 +81,7 @@ const GCodeFiles = () => {
type='gcodeFile'
cards={viewMode === 'cards'}
visibleColumns={columnVisibility}
+ showFilterSidebar={showFilterSidebar}
/>
{
@@ -20,6 +21,9 @@ const Jobs = () => {
const [columnVisibility, setColumnVisibility] = useColumnVisibility('job')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Jobs')
+
const actionItems = {
items: [
{
@@ -49,7 +53,7 @@ const Jobs = () => {
return (
<>
-
+
@@ -65,11 +69,13 @@ const Jobs = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -79,6 +85,7 @@ const Jobs = () => {
type={'job'}
visibleColumns={columnVisibility}
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [newPrinterOpen, setNewPrinterOpen] = useState(false)
@@ -24,6 +25,9 @@ const Printers = () => {
// Column visibility state, persisted in sessionStorage via custom hook
const [columnVisibility, setColumnVisibility] = useColumnVisibility('printer')
+ // Filter sidebar visibility, persisted in sessionStorage via custom hook
+ const [showFilterSidebar, setShowFilterSidebar] = useFilterSidebarVisibility('Printers')
+
const actionItems = {
items: [
{
@@ -49,7 +53,7 @@ const Printers = () => {
return (
<>
-
+
@@ -64,11 +68,13 @@ const Printers = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -76,6 +82,7 @@ const Printers = () => {
diff --git a/src/components/Dashboard/Production/SubJobs.jsx b/src/components/Dashboard/Production/SubJobs.jsx
index 417fe2e..d4d8a34 100644
--- a/src/components/Dashboard/Production/SubJobs.jsx
+++ b/src/components/Dashboard/Production/SubJobs.jsx
@@ -5,10 +5,11 @@ import { Button, Flex, Space, Dropdown } from 'antd'
import useColumnVisibility from '../hooks/useColumnVisibility.jsx'
import ReloadIcon from '../../Icons/ReloadIcon.jsx'
import ObjectTable from '../common/ObjectTable.jsx'
-import ListIcon from '../../Icons/ListIcon.jsx'
-import GridIcon from '../../Icons/GridIcon.jsx'
import useViewMode from '../hooks/useViewMode.jsx'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
import ColumnViewButton from '../common/ColumnViewButton.jsx'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility.jsx'
import ExportListButton from '../common/ExportListButton.jsx'
const SubJobs = () => {
@@ -17,6 +18,9 @@ const SubJobs = () => {
const [columnVisibility, setColumnVisibility] = useColumnVisibility('subJob')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('SubJobs')
+
const actionItems = {
items: [
{
@@ -34,7 +38,7 @@ const SubJobs = () => {
return (
<>
-
+
@@ -50,11 +54,13 @@ const SubJobs = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -64,6 +70,7 @@ const SubJobs = () => {
type={'subJob'}
visibleColumns={columnVisibility}
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
diff --git a/src/components/Dashboard/Sales/Clients.jsx b/src/components/Dashboard/Sales/Clients.jsx
index 49a421b..7c84e12 100644
--- a/src/components/Dashboard/Sales/Clients.jsx
+++ b/src/components/Dashboard/Sales/Clients.jsx
@@ -5,9 +5,10 @@ import ObjectTable from '../common/ObjectTable'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
-import GridIcon from '../../Icons/GridIcon'
-import ListIcon from '../../Icons/ListIcon'
+import ObjectTableViewButton from '../common/ObjectTableViewButton'
+import FilterSidebarButton from '../common/FilterSidebarButton'
import useViewMode from '../hooks/useViewMode'
+import useFilterSidebarVisibility from '../hooks/useFilterSidebarVisibility'
import ColumnViewButton from '../common/ColumnViewButton'
import ExportListButton from '../common/ExportListButton'
@@ -19,6 +20,9 @@ const Clients = () => {
const [columnVisibility, setColumnVisibility] = useColumnVisibility('client')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('Clients')
+
const actionItems = {
items: [
{
@@ -44,7 +48,7 @@ const Clients = () => {
return (
<>
-
+
@@ -59,11 +63,13 @@ const Clients = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -72,6 +78,7 @@ const Clients = () => {
visibleColumns={columnVisibility}
type='client'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
const [columnVisibility, setColumnVisibility] =
useColumnVisibility('salesOrders')
+ const [showFilterSidebar, setShowFilterSidebar] =
+ useFilterSidebarVisibility('SalesOrders')
+
const actionItems = {
items: [
{
@@ -45,7 +49,7 @@ const SalesOrders = () => {
return (
<>
-
+
@@ -60,11 +64,13 @@ const SalesOrders = () => {
- : }
- onClick={() =>
- setViewMode(viewMode === 'cards' ? 'list' : 'cards')
- }
+ setShowFilterSidebar(!showFilterSidebar)}
+ />
+
@@ -73,6 +79,7 @@ const SalesOrders = () => {
visibleColumns={columnVisibility}
type='salesOrder'
cards={viewMode === 'cards'}
+ showFilterSidebar={showFilterSidebar}
/>
{
+ const model = getModelByName(type)
+ const modelProps = getModelProperties(type)
+ const masterKeys = Object.keys(masterFilter)
+
+ const initialEmptyFields = useRef(
+ new Set(Object.keys(filter).filter((k) => filter[k] === ''))
+ )
+ const [localFilter, setLocalFilter] = useState(() => {
+ const visible = {}
+ for (const [k, v] of Object.entries(filter)) {
+ if (v !== '') visible[k] = v
+ }
+ return visible
+ })
+ const debounceRef = useRef(null)
+
+ useEffect(() => {
+ const visible = {}
+ for (const [k, v] of Object.entries(filter)) {
+ if (initialEmptyFields.current.has(k) && v === '') continue
+ visible[k] = v
+ }
+ setLocalFilter(visible)
+ }, [filter])
+
+ const debouncedFilterChange = useCallback(
+ (next) => {
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ debounceRef.current = setTimeout(() => onFilterChange(next), 250)
+ },
+ [onFilterChange]
+ )
+
+ useEffect(() => {
+ return () => {
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ }
+ }, [])
+
+ const filterableProperties = useMemo(() => {
+ if (!model.filters) return []
+ return model.filters
+ .filter((name) => !masterKeys.includes(name))
+ .map((name) => modelProps.find((p) => p.name === name))
+ .filter(Boolean)
+ }, [model.filters, modelProps, masterKeys])
+
+ const fieldOptions = useMemo(
+ () =>
+ filterableProperties.map((prop) => ({
+ label: prop.label,
+ value: prop.name
+ })),
+ [filterableProperties]
+ )
+
+ const activeFields = Object.keys(localFilter)
+
+ const usedFields = new Set(activeFields)
+ const availableOptions = (currentField) =>
+ fieldOptions.filter(
+ (o) => !usedFields.has(o.value) || o.value === currentField
+ )
+
+ const rows =
+ activeFields.length > 0
+ ? activeFields.map((field) => ({ field, value: localFilter[field] }))
+ : []
+
+ const addRow = () => {
+ const unused = fieldOptions.find((o) => !usedFields.has(o.value))
+ if (!unused) return
+ initialEmptyFields.current.delete(unused.value)
+ const next = { ...localFilter, [unused.value]: '' }
+ setLocalFilter(next)
+ }
+
+ const removeRow = (field) => {
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ const next = { ...localFilter }
+ const hadValue = localFilter[field] !== ''
+ delete next[field]
+ setLocalFilter(next)
+ if (hadValue) onFilterChange(next)
+ }
+
+ const changeField = (oldField, newField) => {
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ initialEmptyFields.current.delete(newField)
+ const value = localFilter[oldField] || ''
+ const next = { ...localFilter }
+ delete next[oldField]
+ next[newField] = value
+ setLocalFilter(next)
+ if (value !== '') onFilterChange(next)
+ }
+
+ const changeValue = (field, value) => {
+ const next = { ...localFilter, [field]: value }
+ setLocalFilter(next)
+ debouncedFilterChange(next)
+ }
+ const menuItems = {
+ items: [
+ {
+ key: 'clearAll',
+ label: 'Clear all filters',
+ danger: true,
+ icon: ,
+ onClick: () => clearAllFilters()
+ }
+ ]
+ }
+
+ const clearAllFilters = () => {
+ setLocalFilter({})
+ onFilterChange({})
+ }
+
+ return (
+
+
+
+
+
+
+ }
+ onClick={addRow}
+ disabled={usedFields.size >= fieldOptions.length}
+ title='Add filter'
+ />
+
+
+ {rows.map((row) => (
+
+
+ ))}
+ {rows.length === 0 && (
+
+ )}
+
+
+
+ )
+}
+
+FilterSidebar.propTypes = {
+ type: PropTypes.string.isRequired,
+ filter: PropTypes.object,
+ onFilterChange: PropTypes.func.isRequired,
+ masterFilter: PropTypes.object
+}
+
+export default FilterSidebar
diff --git a/src/components/Dashboard/common/FilterSidebarButton.jsx b/src/components/Dashboard/common/FilterSidebarButton.jsx
new file mode 100644
index 0000000..35cb468
--- /dev/null
+++ b/src/components/Dashboard/common/FilterSidebarButton.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import { Button } from 'antd'
+import FilterCircleFilledIcon from '../../Icons/FilterCircleFilledIcon'
+import FilterCircleIcon from '../../Icons/FilterCircleIcon'
+
+const FilterSidebarButton = ({ active, onClick, ...buttonProps }) => (
+
+ ) : (
+
+ )
+ }
+ onClick={onClick}
+ type={'default'}
+ title={active ? 'Hide filter sidebar' : 'Show filter sidebar'}
+ {...buttonProps}
+ />
+)
+
+FilterSidebarButton.propTypes = {
+ active: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired
+}
+
+export default FilterSidebarButton
diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx
index 29a5fe5..5733360 100644
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@@ -35,6 +35,7 @@ import {
getModelByName
} from '../../../database/ObjectModels'
import ObjectProperty from './ObjectProperty'
+import FilterSidebar from './FilterSidebar'
import XMarkIcon from '../../Icons/XMarkIcon'
import CheckIcon from '../../Icons/CheckIcon'
import { useNavigate } from 'react-router-dom'
@@ -42,6 +43,7 @@ import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
import { AuthContext } from '../context/AuthContext'
import { ElectronContext } from '../context/ElectronContext'
import ActionsIcon from '../../Icons/ActionsIcon'
+import FilterIcon from '../../Icons/FilterIcon'
const logger = loglevel.getLogger('DasboardTable')
logger.setLevel(config.logLevel)
@@ -98,7 +100,8 @@ const ObjectTable = forwardRef(
visibleColumns = {},
masterFilter = {},
size = 'middle',
- onStateChange
+ onStateChange,
+ showFilterSidebar = false
},
ref
) => {
@@ -138,8 +141,9 @@ const ObjectTable = forwardRef(
}
const tableRef = useRef(null)
const model = getModelByName(type)
- const tableFilterRef = useRef({})
+ const activeFilterRef = useRef({})
const tableSorterRef = useRef({})
+ const [sidebarFilter, setSidebarFilter] = useState({})
const [initialized, setInitialized] = useState(false)
// Table state
@@ -228,9 +232,9 @@ const ObjectTable = forwardRef(
const fetchData = useCallback(
async (pageNum = 1, filter = null, sorter = null) => {
if (filter == null) {
- filter = tableFilterRef.current
+ filter = activeFilterRef.current
} else {
- tableFilterRef.current = filter
+ activeFilterRef.current = filter
}
if (sorter == null) {
sorter = tableSorterRef.current
@@ -590,8 +594,9 @@ const ObjectTable = forwardRef(
if (hasChanged) {
setPages([])
- tableFilterRef.current = {}
+ activeFilterRef.current = {}
tableSorterRef.current = {}
+ setSidebarFilter({})
setInitialized(false)
setLoading(true)
setLazyLoading(false)
@@ -636,23 +641,44 @@ const ObjectTable = forwardRef(
)
}
+ const getActiveFilter = useCallback((filterState) => {
+ const active = {}
+ Object.entries(filterState).forEach(([k, v]) => {
+ if (v !== '' && v !== undefined) active[k] = v
+ })
+ return active
+ }, [])
+
const handleTableChange = (pagination, filters, sorter) => {
- const newFilters = {}
+ const next = { ...sidebarFilter }
Object.entries(filters).forEach(([key, value]) => {
if (value && value.length > 0) {
- newFilters[key] = value[0]
+ next[key] = value[0]
+ } else {
+ delete next[key]
}
})
+ setSidebarFilter(next)
setPages([])
setLoading(true)
- loadPage(initialPage, newFilters, {
+ loadPage(initialPage, getActiveFilter(next), {
field: sorter.field,
order: sorter.order
})
}
+ const handleSidebarFilterChange = useCallback(
+ (newSidebarFilter) => {
+ setSidebarFilter(newSidebarFilter)
+ setPages([])
+ setLoading(true)
+ loadPage(initialPage, getActiveFilter(newSidebarFilter))
+ },
+ [initialPage, loadPage, getActiveFilter]
+ )
+
const modelProperties = getModelProperties(type)
// Table columns from model properties
const columnsWithSkeleton = [
@@ -722,6 +748,9 @@ const ObjectTable = forwardRef(
width: prop.columnWidth || width,
fixed: isMobile ? undefined : fixed,
key: prop.name,
+ filterIcon: () => {
+ return
+ },
render: (text, record) => {
if (record?.isSkeleton) {
return (
@@ -739,7 +768,6 @@ const ObjectTable = forwardRef(
}
}
- // Add filter configuration if the property is filterable and not in masterFilter
if (isFilterable && !Object.keys(masterFilter).includes(prop.name)) {
columnConfig.filterDropdown = ({
setSelectedKeys,
@@ -754,8 +782,9 @@ const ObjectTable = forwardRef(
clearFilters,
propertyName: prop.label
})
- // Remove local filtering - let the server handle it
- columnConfig.filtered = false
+ const sidebarVal = sidebarFilter[prop.name]
+ columnConfig.filteredValue =
+ sidebarVal !== undefined && sidebarVal !== '' ? [sidebarVal] : null
}
columnsWithSkeleton.push(columnConfig)
@@ -925,7 +954,7 @@ const ObjectTable = forwardRef(
)
const tableContent = (
-
+
)
+ if (showFilterSidebar) {
+ return (
+
+ {tableContent}
+
+
+ )
+ }
+
return tableContent
}
)
@@ -968,7 +1015,8 @@ ObjectTable.propTypes = {
visibleColumns: PropTypes.object,
masterFilter: PropTypes.object,
size: PropTypes.string,
- onStateChange: PropTypes.func
+ onStateChange: PropTypes.func,
+ showFilterSidebar: PropTypes.bool
}
export default ObjectTable
diff --git a/src/components/Dashboard/common/ObjectTableViewButton.jsx b/src/components/Dashboard/common/ObjectTableViewButton.jsx
new file mode 100644
index 0000000..ebf72e7
--- /dev/null
+++ b/src/components/Dashboard/common/ObjectTableViewButton.jsx
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import { Button } from 'antd'
+import GridIcon from '../../Icons/GridIcon'
+import ListIcon from '../../Icons/ListIcon'
+
+const ObjectTableViewButton = ({ viewMode, setViewMode, ...buttonProps }) => (
+ : }
+ onClick={() => setViewMode(viewMode === 'cards' ? 'list' : 'cards')}
+ title={viewMode === 'cards' ? 'Switch to list view' : 'Switch to card view'}
+ {...buttonProps}
+ />
+)
+
+ObjectTableViewButton.propTypes = {
+ viewMode: PropTypes.oneOf(['list', 'cards']).isRequired,
+ setViewMode: PropTypes.func.isRequired
+}
+
+export default ObjectTableViewButton
diff --git a/src/components/Dashboard/hooks/useFilterSidebarVisibility.jsx b/src/components/Dashboard/hooks/useFilterSidebarVisibility.jsx
new file mode 100644
index 0000000..598c83e
--- /dev/null
+++ b/src/components/Dashboard/hooks/useFilterSidebarVisibility.jsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+const useFilterSidebarVisibility = (componentName, defaultValue = false) => {
+ const getInitialVisibility = () => {
+ const stored = sessionStorage.getItem(`${componentName}_filterSidebarVisibility`)
+ if (stored !== null) {
+ return stored === 'true'
+ }
+ return defaultValue
+ }
+
+ const [showFilterSidebar, setShowFilterSidebar] = useState(getInitialVisibility)
+
+ useEffect(() => {
+ sessionStorage.setItem(`${componentName}_filterSidebarVisibility`, showFilterSidebar)
+ }, [showFilterSidebar, componentName])
+
+ return [showFilterSidebar, setShowFilterSidebar]
+}
+
+export default useFilterSidebarVisibility
diff --git a/src/components/Icons/FilterCircleFilledIcon.jsx b/src/components/Icons/FilterCircleFilledIcon.jsx
new file mode 100644
index 0000000..ecf7c3d
--- /dev/null
+++ b/src/components/Icons/FilterCircleFilledIcon.jsx
@@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/filtercirclefilledicon.svg?react'
+
+const FilterCircleFilledIcon = (props) =>
+
+export default FilterCircleFilledIcon
diff --git a/src/components/Icons/FilterCircleIcon.jsx b/src/components/Icons/FilterCircleIcon.jsx
new file mode 100644
index 0000000..5ea49bf
--- /dev/null
+++ b/src/components/Icons/FilterCircleIcon.jsx
@@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/filtercircleicon.svg?react'
+
+const FilterCircleIcon = (props) =>
+
+export default FilterCircleIcon
diff --git a/src/components/Icons/FilterIcon.jsx b/src/components/Icons/FilterIcon.jsx
new file mode 100644
index 0000000..c23ac7d
--- /dev/null
+++ b/src/components/Icons/FilterIcon.jsx
@@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/filtericon.svg?react'
+
+const FilterIcon = (props) =>
+
+export default FilterIcon