JoryHogeveen · Aug 20, 2026 · Aug 16, 2026 · Aug 16, 2026 · Aug 16, 2026 · Aug 16, 2026
diff --git a/assets/react/components/services/Repeatable/Body.jsx b/assets/react/components/services/Repeatable/Body.jsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Alert, Stack } from 'react-bootstrap';
 import Fields from '../../form/Fields';
 import { FieldsContext } from '../../../context/FieldsContext';
+import { isItemDisabled } from '../../../utils/conditions';
 
 export default function Body( props ) {
 	const { t } = useTranslation();
@@ -42,7 +43,7 @@ export default function Body( props ) {
 	} : {};
 
 	return (
-		<Stack gap={ 2 } className={ ( ( props._disabled ?? false ) ? 'opacity-50' : '' ) }>
+		<Stack gap={ 2 } className={ ( ( isItemDisabled( props ) ) ? 'opacity-50' : '' ) }>
 			{ description }
 			<Fields { ...props } fields={ { ...labelFields, ...props.fields } } fieldsContext={ useContext( FieldsContext ) } />
 		</Stack>

diff --git a/assets/react/components/services/Repeatable/Header.jsx b/assets/react/components/services/Repeatable/Header.jsx
@@ -4,10 +4,11 @@ import { Stack } from 'react-bootstrap';
 import Info from '../../views/Blocks/Info';
 import ListRow from '../../views/List/Row';
 import { mergeClassNames } from '../../../utils/props';
+import { isItemDisabled } from '../../../utils/conditions';
 
 export default function Header( props ) {
 
-	const classes = mergeClassNames( 'flex-grow-1', props.className ) + ( ( props._disabled ?? false ) ? ' opacity-50' : '' );
+	const classes = mergeClassNames( 'flex-grow-1', props.className ) + ( ( isItemDisabled( props ) ?? false ) ? ' opacity-50' : '' );
 
 	if ( props.columns ) {
 		return (

diff --git a/assets/react/components/views/Blocks/Actions.jsx b/assets/react/components/views/Blocks/Actions.jsx
@@ -1,27 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { ButtonGroup, DropdownButton, FormCheck } from 'react-bootstrap';
+import { ButtonGroup, DropdownButton, DropdownItem, FormCheck } from 'react-bootstrap';
 
 import useGlobal from '../../../hooks/useGlobal';
 
 import { HStack, VStack } from '../../partials/Stack';
 import Button from '../../partials/Button';
 import Icon from '../../partials/Icon';
+import Label from '../../form/Label';
+
+import Modal from '../../modals/Modal';
+import ConfirmModal from '../../modals/ConfirmModal';
 import EntityModal from '../../modals/EntityModal';
 import ExportModal from '../../modals/ExportModal';
 import DeleteModal from '../../modals/DeleteModal';
-
-import Modal from '../../modals/Modal';
 import RequestModal from '../../modals/RequestModal';
+import PreviewModal from '../../modals/PreviewModal';
+
 import ModalToggle from '../../services/ModalToggle';
 import Collapsible from '../../services/Collapsible';
 import ResponseTabContent from '../../services/ResponseTabs/Content';
-import PreviewModal from '../../modals/PreviewModal';
 import { deepClone, objectToMappable } from '../../../utils/data';
 import { validate } from '../../../utils/conditions';
-import DropdownItem from 'react-bootstrap/DropdownItem';
-import Label from '../../form/Label';
 
 function getVariants( button, variant, outline, subtle ) {
 	const buttonVariant = ( 'string' === typeof button ) ? button : variant;
@@ -35,7 +36,7 @@ function getVariants( button, variant, outline, subtle ) {
 	}
 }
 
-function createTrigger( action, variants, buttonProps = {}, dropdown = false ) {
+function createTrigger( action, variants, elemProps = {}, dropdown = false ) {
 	let iconClasses = '';
 
 	let trigger = action.label ?? action.action;
@@ -54,9 +55,19 @@ function createTrigger( action, variants, buttonProps = {}, dropdown = false ) {
 		}
 	}
 
-	const Elemt = dropdown ? DropdownItem : Button;
+	if ( ! variants.button ) {
+		return trigger;
+	}
+
+	if ( dropdown ) {
+		return (
+			<DropdownItem variant={ variants.button } { ...elemProps } key={ elemProps.key ?? undefined }>
+				{ trigger }
+			</DropdownItem>
+		)
+	}
 
-	return variants.button ? <Elemt variant={ variants.button } outline={ variants.outline } subtle={ variants.subtle } { ...buttonProps } key={ buttonProps.key ?? undefined }>{ trigger }</Elemt> : trigger;
+	return <Button variant={ variants.button } outline={ variants.outline } subtle={ variants.subtle } { ...elemProps } key={ elemProps.key ?? undefined }>{ trigger }</Button>;
 }
 
 export default function Actions( props ) {
@@ -165,6 +176,7 @@ export default function Actions( props ) {
 
 			case 'delete':
 			case 'remove':
+			case 'trash':
 				const deleteVariant = action.variant ?? 'danger';
 				return (
 					<DeleteModal key={ action.action } entity={ item } { ...action }>
@@ -175,14 +187,28 @@ export default function Actions( props ) {
 					</DeleteModal>
 				)
 
+			case 'restore':
+			case 'hide':
+			case 'show':
+				const trigger = createTrigger( { ...action, icon: action.icon ?? action.action }, variants, {}, action.dropdown );
+				return React.cloneElement( trigger, { key: action.action, onClick: () => { action.callback( props.entity ?? props.item ?? props.id ) } } );
+
+			case 'enable':
 			case 'disable':
 				if ( ! item ) {
 					return null;
 				}
+				if ( props.entity || item._entity ) {
+					return (
+						<ConfirmModal key={ action.action } entity={ item } { ...action } callbackProps={ item }>
+							{ createTrigger( { ...action, icon: action.icon ?? action.action }, variants, {}, action.dropdown ) }
+						</ConfirmModal>
+					)
+				}
 				return (
 					<FormCheck
-						key={ key }
-						aria-label={ t('Disable') }
+						key={ action.action }
+						aria-label={ 'disable' === action.action ? t('Disable') : t('Enable') }
 						className="mt-n1 no-label"
 						type="switch"
 						defaultChecked={ ! ( item._disabled ?? false ) }

diff --git a/assets/react/components/views/Blocks/Info.jsx b/assets/react/components/views/Blocks/Info.jsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { any, bool, object, oneOfType, string } from 'prop-types';
+import { any, array, bool, object, oneOfType, string } from 'prop-types';
 import { isObject } from '../../../utils/conditions';
 import { HStack, VStack } from '../../partials/Stack';
 import BadgeControl from './Badge';
@@ -11,6 +11,7 @@ const Info = forwardRef( function Info( props, ref ) {
 		item = {},
 		type = item.type,
 		badge,
+		badges,
 		inline = false,
 	} = props;
 
@@ -25,6 +26,7 @@ const Info = forwardRef( function Info( props, ref ) {
 			{ badge &&
 			  <BadgeControl type={ type } { ...( isObject( badge ) ? badge : { label: badge } ) } item={ item } />
 			}
+			{ badges && badges.map( ( badge, i ) => <BadgeControl key={ i } type={ type } { ...( isObject( badge ) ? badge : { label: badge } ) } item={ item } /> ) }
 		</HStack>
 	)
 
@@ -52,6 +54,7 @@ Info.propTypes = {
 	item: object,
 	type: string,
 	badge: oneOfType( [ string, object ] ),
+	badges: array,
 	label: oneOfType( [ string, object ] ),
 	sub: oneOfType( [ object, string ] ),
 	icon: oneOfType( [ object, string, bool ] ),

diff --git a/assets/react/components/views/List/Col.jsx b/assets/react/components/views/List/Col.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Block from '../Blocks';
 import LoadingPlaceholder from '../../partials/Loading/Placeholder';
+import { mergeClassNames } from '../../../utils/props';
+import { isItemDisabled } from '../../../utils/conditions';
 
 export default function ListCol( props ) {
 	const {
@@ -15,8 +17,14 @@ export default function ListCol( props ) {
 		return <LoadingPlaceholder/>
 	}
 
+	let classes = '';
+
+	if ( isItemDisabled( item ) ) {
+		classes = 'text-muted';
+	}
+
 	return (
-		<div className={ column.classes }>
+		<div className={ mergeClassNames( props.className, classes ) }>
 			<Block { ...props } block={ blockType } content={ content } args={ column } />
 		</div>
 	);
@@ -27,4 +35,5 @@ ListCol.propTypes = {
 	item: PropTypes.object,
 	content: PropTypes.any,
 	blockType: PropTypes.string,
+	className: PropTypes.string,
 };
diff --git a/assets/react/components/views/List/Row.jsx b/assets/react/components/views/List/Row.jsx
@@ -10,6 +10,7 @@ export default function ListRow( {
 	columns,
 	callbacks,
 	wrap = true,
+	className,
 } ) {
 
 	let row = columns &&
@@ -32,7 +33,7 @@ export default function ListRow( {
 	row = <Stack direction="horizontal" className="justify-content-between w-100" gap={2}>{ row }</Stack>
 
 	if ( wrap ) {
-		row = <ListGroupItem>{ row }</ListGroupItem>
+		row = <ListGroupItem className={ className }>{ row }</ListGroupItem>
 	}
 
 	return row;
@@ -44,4 +45,5 @@ ListRow.propTypes = {
 	columns: PropTypes.object,
 	callbacks: PropTypes.object,
 	wrap: PropTypes.bool,
+	className: PropTypes.string,
 };
diff --git a/assets/react/components/views/Table/Col.jsx b/assets/react/components/views/Table/Col.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Block from '../Blocks';
 import LoadingPlaceholder from '../../partials/Loading/Placeholder';
+import { isItemDisabled } from '../../../utils/conditions';
+import { mergeClassNames } from '../../../utils/props';
 
 export default function TableCol( props ) {
 	const {
@@ -27,8 +29,12 @@ export default function TableCol( props ) {
 			break;
 	}
 
+	if ( isItemDisabled( item ) ) {
+		classes += ' text-muted';
+	}
+
 	return (
-		<td className={ classes }>
+		<td className={ mergeClassNames( props.className, classes ) }>
 			<Block { ...props } block={ blockType } content={ content } args={ column } />
 		</td>
 	);
@@ -39,4 +45,5 @@ TableCol.propTypes = {
 	item: PropTypes.object,
 	content: PropTypes.any,
 	blockType: PropTypes.string,
+	className: PropTypes.string,
 };
diff --git a/assets/react/components/views/Table/Row.jsx b/assets/react/components/views/Table/Row.jsx
@@ -9,6 +9,7 @@ export default function TableRow( {
 	columns,
 	callbacks,
 	wrap = true,
+	className,
 } ) {
 
 	let row = objectToMappable( columns, 'key' ).map( ( column, index ) => {
@@ -28,7 +29,7 @@ export default function TableRow( {
 	} )
 
 	if ( wrap ) {
-		row = <tr>{ row }</tr>;
+		row = <tr className={ className }>{ row }</tr>;
 	}
 
 	return row;
@@ -40,4 +41,5 @@ TableRow.propTypes = {
 	columns: PropTypes.object,
 	callbacks: PropTypes.object,
 	wrap: PropTypes.bool,
+	className: PropTypes.string,
 };
diff --git a/assets/react/controllers/ListController.jsx b/assets/react/controllers/ListController.jsx
@@ -1,22 +1,26 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Card } from 'react-bootstrap';
+import { Card, Dropdown, DropdownButton } from 'react-bootstrap';
 
 import Button from '../components/partials/Button';
-import useGlobal from '../hooks/useGlobal';
-import useEntities from '../hooks/useEntities';
-import usePreference from '../hooks/usePreference';
+import { HStack } from '../components/partials/Stack';
+import Search from '../components/partials/Search';
+import Icon from '../components/partials/Icon';
+import Label from '../components/form/Label';
 
 import EntityModal from '../components/modals/EntityModal';
 import ListView from '../components/views/List';
 import TableView from '../components/views/Table';
 import Pager from '../components/partials/PaginationToolbar/Pager';
 import LoadMore from '../components/partials/PaginationToolbar/LoadMore';
 import PaginationInfo from '../components/partials/PaginationToolbar/Info';
-import Icon from '../components/partials/Icon';
-import { HStack } from '../components/partials/Stack';
-import Search from '../components/partials/Search';
+
+import useGlobal from '../hooks/useGlobal';
+import useEntities from '../hooks/useEntities';
+import usePreference from '../hooks/usePreference';
+import { deepClone, objectToMappable } from '../utils/data';
+import { isString } from '../utils/conditions';
 
 function getQuery( query ) {
 	let url = new URL( window.location.href );
@@ -50,6 +54,7 @@ export default function ListController( props ) {
 			actions: [ 'pagination' ]
 		},
 		columns = {},
+		filters = [],
 	} = args;
 
 	const disableQuery  = false === args.query;
@@ -81,6 +86,20 @@ export default function ListController( props ) {
 		toPage: ( pageNumber, pageIndex ) => { itemsCallbacks.fetch( ( query ) => { query.offset = pageIndex * query.limit; return query; } ) },
 		setLimit: ( limit ) => { itemsCallbacks.fetch( ( query ) => { setPreferredLimit( limit ); query.limit = limit; return query; } ) },
 		search: ( search, column ) => { itemsCallbacks.fetch( ( query ) => { query.search[ column ?? 'name' ] = search; return query; } ) },
+		setFilter: ( key, value ) => {
+			itemsCallbacks.fetch( ( query ) => {
+				if ( ! query.where ) {
+					query.where = {};
+				}
+
+				query.where[ key ] = value;
+
+				// Always reset to page 1 when filters change.
+				query.offset = 0;
+
+				return query;
+			});
+		},
 	}
 
 	/**
@@ -138,6 +157,39 @@ export default function ListController( props ) {
 						</HStack>
 					);
 
+				case 'filter':
+					return (
+						filters && <HStack key={ action + index } gap={ 2 }>
+							{ objectToMappable( deepClone( filters ), 'key' ).map( ( filter, i ) => {
+								const currentFilterValue = query.where?.[ filter.key ] ?? null;
+								const displayLabel = filter.options.find( opt => opt.value === currentFilterValue )
+									?? filter.label
+									?? 'All';
+
+								return (
+									<DropdownButton
+										key={ i }
+										id={ `filter-${filter.key}` }
+										title={ <Label icon={ isString( displayLabel ) ? filter.icon : undefined } label={ displayLabel } /> }
+										variant="outline-secondary"
+										drop="down"
+										className="ms-0"
+									>
+										{ filter.options.map( ( opt, j ) => (
+											<Dropdown.Item
+												key={ j }
+												eventKey={ opt.value }
+												onClick={ () => queryCallbacks.setFilter( filter.key, opt.value ) }
+											>
+												<Label { ...opt } />
+											</Dropdown.Item>
+										))}
+									</DropdownButton>
+								);
+							})}
+						</HStack>
+					);
+
 				case 'total':
 					if ( ! totalItems ) {
 						return;