@salesforce/webapp-template-app-react-sample-b2e-experimental 1.117.0 → 1.117.1

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/components/filters/SearchFilter.tsx

@@ -1,7 +1,9 @@
-import { Label } from "../../../../components/ui/label";
-import { cn } from "../../../../lib/utils";
+import { useEffect, useState } from "react";
+
 import { SearchBar } from "../SearchBar";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
 
 interface SearchFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
 	field: string;
@@ -17,21 +19,32 @@ export function SearchFilter({
 	...props
 }: SearchFilterProps) {
 	const { value, onChange } = useFilterField(field);
+	const [localValue, setLocalValue] = useState(value?.value ?? "");
+
+	const externalValue = value?.value ?? "";
+	useEffect(() => {
+		setLocalValue(externalValue);
+	}, [externalValue]);
+
+	const debouncedOnChange = useDebouncedCallback((v: string) => {
+		if (v) {
+			onChange({ field, label, type: "search", value: v });
+		} else {
+			onChange(undefined);
+		}
+	});
+
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper label={label} htmlFor={`filter-${field}`} className={className} {...props}>
 			<SearchBar
-				value={value?.value ?? ""}
+				value={localValue}
 				handleChange={(v) => {
-					if (v) {
-						onChange({ field, label, type: "search", value: v });
-					} else {
-						onChange(undefined);
-					}
+					setLocalValue(v);
+					debouncedOnChange(v);
 				}}
 				placeholder={placeholder}
 				inputProps={{ id: `filter-${field}` }}
 			/>
-		</div>
+		</FilterFieldWrapper>
 	);
 }

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/components/filters/SelectFilter.tsx

@@ -5,9 +5,9 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "../../../../components/ui/select";
-import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 const ALL_VALUE = "__all__";
@@ -29,8 +29,13 @@ export function SelectFilter({
 }: SelectFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
 			<SelectFilterControl
 				field={field}
 				label={label}
@@ -38,8 +43,7 @@ export function SelectFilter({
 				value={value}
 				onChange={onChange}
 			/>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/components/filters/TextFilter.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from "react";
 import { Input } from "../../../../components/ui/input";
-import { Label } from "../../../../components/ui/label";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
 import type { ActiveFilterValue } from "../../utils/filterUtils";
 
 interface TextFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
@@ -21,8 +23,13 @@ export function TextFilter({
 }: TextFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	return (
-		<div className={cn("space-y-1.5", className)} {...props}>
-			<Label htmlFor={`filter-${field}`}>{label}</Label>
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
 			<TextFilterInput
 				field={field}
 				label={label}
@@ -30,8 +37,7 @@ export function TextFilter({
 				value={value}
 				onChange={onChange}
 			/>
-			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
-		</div>
+		</FilterFieldWrapper>
 	);
 }
 
@@ -53,19 +59,30 @@ export function TextFilterInput({
 	className,
 	...props
 }: TextFilterInputProps) {
+	const [localValue, setLocalValue] = useState(value?.value ?? "");
+
+	const externalValue = value?.value ?? "";
+	useEffect(() => {
+		setLocalValue(externalValue);
+	}, [externalValue]);
+
+	const debouncedOnChange = useDebouncedCallback((v: string) => {
+		if (v) {
+			onChange({ field, label, type: "text", value: v });
+		} else {
+			onChange(undefined);
+		}
+	});
+
 	return (
 		<Input
 			id={`filter-${field}`}
 			type="text"
 			placeholder={props.placeholder ?? `Filter by ${label.toLowerCase()}...`}
-			value={value?.value ?? ""}
+			value={localValue}
 			onChange={(e) => {
-				const v = e.target.value;
-				if (v) {
-					onChange({ field, label, type: "text", value: v });
-				} else {
-					onChange(undefined);
-				}
+				setLocalValue(e.target.value);
+				debouncedOnChange(e.target.value);
 			}}
 			className={cn(className)}
 			{...props}

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/hooks/useDebouncedCallback.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef } from "react";
+import { debounce, FILTER_DEBOUNCE_MS } from "../utils/debounce";
+
+/**
+ * Returns a stable debounced wrapper around the provided callback.
+ *
+ * The wrapper always invokes the *latest* version of `fn` (via a ref),
+ * so the debounce timer is never reset when `fn` changes — only when
+ * the caller invokes the returned function again.
+ *
+ * @param fn - The callback to debounce.
+ * @param delay - Debounce delay in ms. Defaults to `FILTER_DEBOUNCE_MS`.
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => void>(
+	fn: T,
+	delay: number = FILTER_DEBOUNCE_MS,
+): (...args: Parameters<T>) => void {
+	const fnRef = useRef(fn);
+	const debouncedRef = useRef<((...args: any[]) => void) | null>(null);
+
+	useEffect(() => {
+		fnRef.current = fn;
+	});
+
+	useEffect(() => {
+		debouncedRef.current = debounce((...args: any[]) => {
+			fnRef.current(...(args as Parameters<T>));
+		}, delay);
+	}, [delay]);
+
+	return useCallback((...args: Parameters<T>) => {
+		debouncedRef.current?.(...args);
+	}, []);
+}

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/hooks/useObjectSearchParams.ts

@@ -20,11 +20,6 @@ export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
 		set: (field: string, value: ActiveFilterValue | undefined) => void;
 		remove: (field: string) => void;
 	};
-	filterState: {
-		apply: () => void;
-		hasPendingChanges: boolean;
-		hasValidationError: boolean;
-	};
 	sort: {
 		current: SortState | null;
 		set: (sort: SortState | null) => void;
@@ -41,40 +36,6 @@ export interface UseObjectSearchParamsReturn<TFilter, TOrderBy> {
 	resetAll: () => void;
 }
 
-export interface UseObjectSearchParamsOptions {
-	filterSyncMode?: "immediate" | "manual";
-}
-
-function areFiltersEqual(left: ActiveFilterValue[], right: ActiveFilterValue[]) {
-	if (left.length !== right.length) return false;
-	const normalize = (filters: ActiveFilterValue[]) =>
-		[...filters]
-			.sort((a, b) => a.field.localeCompare(b.field))
-			.map((filter) => ({
-				field: filter.field,
-				type: filter.type,
-				value: filter.value ?? "",
-				min: filter.min ?? "",
-				max: filter.max ?? "",
-			}));
-	return JSON.stringify(normalize(left)) === JSON.stringify(normalize(right));
-}
-
-function hasFilterValidationError(filters: ActiveFilterValue[]) {
-	for (const filter of filters) {
-		if (filter.type !== "numeric") continue;
-		const min = filter.min?.trim();
-		const max = filter.max?.trim();
-		if (!min || !max) continue;
-		const minValue = Number(min);
-		const maxValue = Number(max);
-		if (!Number.isNaN(minValue) && !Number.isNaN(maxValue) && minValue >= maxValue) {
-			return true;
-		}
-	}
-	return false;
-}
-
 /**
  * Manages filter, sort, and cursor-based pagination state for an object search page.
  *
@@ -98,11 +59,7 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	filterConfigs: FilterFieldConfig[],
 	_sortConfigs?: SortFieldConfig[],
 	paginationConfig?: PaginationConfig,
-	options?: UseObjectSearchParamsOptions,
 ) {
-	const filterSyncMode = options?.filterSyncMode ?? "immediate";
-	const isManualFilterSync = filterSyncMode === "manual";
-
 	const defaultPageSize = paginationConfig?.defaultPageSize ?? 10;
 	const validPageSizes = useMemo(
 		() => paginationConfig?.validPageSizes ?? [defaultPageSize],
@@ -119,7 +76,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	);
 
 	const [filters, setFilters] = useState<ActiveFilterValue[]>(initial.filters);
-	const [appliedFilters, setAppliedFilters] = useState<ActiveFilterValue[]>(initial.filters);
 	const [sort, setLocalSort] = useState<SortState | null>(initial.sort);
 
 	// Pagination — cursor-based with a stack to support "previous page" navigation.
@@ -170,15 +126,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	const setFilter = useCallback(
 		(field: string, value: ActiveFilterValue | undefined) => {
-			if (isManualFilterSync) {
-				setFilters((prev) => {
-					const next = prev.filter((f) => f.field !== field);
-					if (value) next.push(value);
-					return next;
-				});
-				return;
-			}
-
 			const { sort: s, pageSize: ps } = stateRef.current;
 			setFilters((prev) => {
 				const next = prev.filter((f) => f.field !== field);
@@ -188,16 +135,11 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			});
 			resetPagination();
 		},
-		[isManualFilterSync, resetPagination],
+		[resetPagination],
 	);
 
 	const removeFilter = useCallback(
 		(field: string) => {
-			if (isManualFilterSync) {
-				setFilters((prev) => prev.filter((f) => f.field !== field));
-				return;
-			}
-
 			const { sort: s, pageSize: ps } = stateRef.current;
 			setFilters((prev) => {
 				const next = prev.filter((f) => f.field !== field);
@@ -206,17 +148,9 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 			});
 			resetPagination();
 		},
-		[isManualFilterSync, resetPagination],
+		[resetPagination],
 	);
 
-	const applyFilters = useCallback(() => {
-		if (!isManualFilterSync) return;
-		const { filters: nextFilters, sort: s, pageSize: ps } = stateRef.current;
-		setAppliedFilters(nextFilters);
-		resetPagination();
-		syncToUrl(nextFilters, s, ps);
-	}, [isManualFilterSync, resetPagination, syncToUrl]);
-
 	// -- Sort callback ----------------------------------------------------------
 
 	const setSort = useCallback(
@@ -233,7 +167,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	const resetAll = useCallback(() => {
 		setFilters([]);
-		setAppliedFilters([]);
 		setLocalSort(null);
 		resetPagination();
 		syncToUrl([], null, defaultPageSize, 0);
@@ -283,8 +216,8 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	// Translate local filter/sort state into API-ready `where` and `orderBy`.
 
 	const where = useMemo(
-		() => buildFilter<TFilter>(isManualFilterSync ? appliedFilters : filters, filterConfigs),
-		[appliedFilters, filters, filterConfigs, isManualFilterSync],
+		() => buildFilter<TFilter>(filters, filterConfigs),
+		[filters, filterConfigs],
 	);
 
 	const orderBy = useMemo(() => buildOrderBy<TOrderBy>(sort), [sort]);
@@ -296,23 +229,10 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 	// causing unnecessary re-renders.
 
 	const filtersGroup = useMemo(
-		() => ({
-			active: filters,
-			set: setFilter,
-			remove: removeFilter,
-		}),
+		() => ({ active: filters, set: setFilter, remove: removeFilter }),
 		[filters, setFilter, removeFilter],
 	);
 
-	const filterState = useMemo(
-		() => ({
-			apply: applyFilters,
-			hasPendingChanges: isManualFilterSync ? !areFiltersEqual(filters, appliedFilters) : false,
-			hasValidationError: hasFilterValidationError(filters),
-		}),
-		[applyFilters, isManualFilterSync, filters, appliedFilters],
-	);
-
 	const sortGroup = useMemo(() => ({ current: sort, set: setSort }), [sort, setSort]);
 
 	const query = useMemo(() => ({ where, orderBy }), [where, orderBy]);
@@ -324,7 +244,6 @@ export function useObjectSearchParams<TFilter, TOrderBy>(
 
 	return {
 		filters: filtersGroup,
-		filterState,
 		sort: sortGroup,
 		query,
 		pagination,

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/utils/debounce.ts

@@ -1,3 +1,6 @@
+/** Default debounce delay for keystroke-driven filter inputs (search, text, numeric). */
+export const FILTER_DEBOUNCE_MS = 300;
+
 /**
  * Creates a debounced version of the provided function.
  *
@@ -10,7 +13,7 @@
  * @param ms - The debounce delay in milliseconds.
  * @returns A new function with the same signature that delays execution.
  */
-export function debounce<T extends (...args: never[]) => void>(
+export function debounce<T extends (...args: any[]) => void>(
 	fn: T,
 	ms: number,
 ): (...args: Parameters<T>) => void {

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/features/object-search/utils/filterUtils.ts

@@ -25,6 +25,8 @@ export type FilterFieldType =
 	| "boolean"
 	| "date"
 	| "daterange"
+	| "datetime"
+	| "datetimerange"
 	| "multipicklist"
 	| "search";
 
@@ -337,13 +339,34 @@ function buildSingleFilter<TFilter>(
 			return { [field]: { in: values } } as TFilter;
 		}
 		case "date": {
+			if (!min && !max) return null;
+			const op = value ?? (min ? "gte" : "lte");
+			const dateStr = min ?? max;
+			return { [field]: { [op]: { value: dateStr } } } as TFilter;
+		}
+		case "daterange": {
+			if (!min && !max) return null;
+			const clauses: TFilter[] = [];
+			if (min) {
+				clauses.push({
+					[field]: { gte: { value: min } },
+				} as TFilter);
+			}
+			if (max) {
+				clauses.push({
+					[field]: { lte: { value: max } },
+				} as TFilter);
+			}
+			return clauses.length === 1 ? clauses[0] : ({ and: clauses } as TFilter);
+		}
+		case "datetime": {
 			if (!min && !max) return null;
 			const op = value ?? (min ? "gte" : "lte");
 			const dateStr = min ?? max;
 			const isoStr = op === "gte" || op === "gt" ? toStartOfDay(dateStr!) : toEndOfDay(dateStr!);
 			return { [field]: { [op]: { value: isoStr } } } as TFilter;
 		}
-		case "daterange": {
+		case "datetimerange": {
 			if (!min && !max) return null;
 			const clauses: TFilter[] = [];
 			if (min) {

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/pages/ApplicationSearch.tsx

@@ -16,7 +16,6 @@ import type { ApplicationSearchNode } from "../api/applications/applicationSearc
 import { PageHeader } from "../components/layout/PageHeader";
 import { PageContainer } from "../components/layout/PageContainer";
 import {
-	FilterApplyButton,
 	FilterProvider,
 	FilterResetButton,
 } from "../features/object-search/components/FilterContext";
@@ -56,7 +55,7 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 	},
 	{ field: "Status__c", label: "Status", type: "picklist" },
 	{ field: "Start_Date__c", label: "Start Date", type: "date" },
-	{ field: "CreatedDate", label: "Created Date", type: "date" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime" },
 ];
 
 const SORT_CONFIGS: SortFieldConfig<string>[] = [
@@ -76,13 +75,14 @@ export default function ApplicationSearch() {
 		ttl: 30_000,
 	});
 
-	const { filters, filterState, query, pagination, resetAll } = useObjectSearchParams<
+	const { filters, query, pagination, resetAll } = useObjectSearchParams<
 		Application__C_Filter,
 		Application__C_OrderBy
-	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG, { filterSyncMode: "manual" });
-	const effectiveOrderBy: Application__C_OrderBy = query.orderBy ?? {
-		CreatedDate: { order: ResultOrder.Desc },
-	};
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+	const effectiveOrderBy = useMemo<Application__C_OrderBy>(
+		() => query.orderBy ?? { CreatedDate: { order: ResultOrder.Desc } },
+		[query.orderBy],
+	);
 	const searchKey = `applications:${JSON.stringify({ where: query.where, orderBy: effectiveOrderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
 		() =>
@@ -138,7 +138,6 @@ export default function ApplicationSearch() {
 				<PageHeader title="Applications" description="Manage and review rental applications" />
 				<ApplicationSearchFilters
 					filters={filters}
-					filterState={filterState}
 					statusOptions={statusOptions ?? []}
 					resetAll={resetAll}
 				/>
@@ -193,15 +192,10 @@ export default function ApplicationSearch() {
 
 function ApplicationSearchFilters({
 	filters,
-	filterState,
 	statusOptions,
 	resetAll,
 }: {
 	filters: UseObjectSearchParamsReturn<Application__C_Filter, Application__C_OrderBy>["filters"];
-	filterState: UseObjectSearchParamsReturn<
-		Application__C_Filter,
-		Application__C_OrderBy
-	>["filterState"];
 	statusOptions: Array<{ value: string; label: string }>;
 	resetAll: () => void;
 }) {
@@ -211,9 +205,6 @@ function ApplicationSearchFilters({
 			onFilterChange={filters.set}
 			onFilterRemove={filters.remove}
 			onReset={resetAll}
-			onApply={filterState.apply}
-			hasPendingChanges={filterState.hasPendingChanges}
-			hasValidationError={filterState.hasValidationError}
 		>
 			<FilterRow ariaLabel="Applications filters">
 				<SearchFilter
@@ -229,8 +220,12 @@ function ApplicationSearchFilters({
 					className="w-full sm:w-36"
 				/>
 				<DateFilter field="Start_Date__c" label="Start Date" className="w-full sm:w-56" />
-				<DateFilter field="CreatedDate" label="Created Date" className="w-full sm:w-56" />
-				<FilterApplyButton className="h-8 px-3 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed transition-colors" />
+				<DateFilter
+					field="CreatedDate"
+					label="Created Date"
+					filterType="datetime"
+					className="w-full sm:w-56"
+				/>
 				<FilterResetButton />
 			</FilterRow>
 		</FilterProvider>

package/dist/force-app/main/default/webapplications/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx

@@ -18,7 +18,6 @@ import type { SortFieldConfig } from "../features/object-search/utils/sortUtils"
 import { PageHeader } from "../components/layout/PageHeader";
 import { PageContainer } from "../components/layout/PageContainer";
 import {
-	FilterApplyButton,
 	FilterProvider,
 	FilterResetButton,
 } from "../features/object-search/components/FilterContext";
@@ -74,7 +73,7 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [
 	{ field: "Status__c", label: "Status", type: "picklist" },
 	{ field: "Type__c", label: "Type", type: "picklist" },
 	{ field: "Priority__c", label: "Priority", type: "picklist" },
-	{ field: "Scheduled__c", label: "Scheduled", type: "date" },
+	{ field: "Scheduled__c", label: "Scheduled", type: "datetime" },
 ];
 
 const SORT_CONFIGS: SortFieldConfig<string>[] = [
@@ -102,13 +101,14 @@ export default function MaintenanceRequestSearch() {
 		{ key: "distinctMaintenanceRequestPriority", ttl: 30_000 },
 	);
 
-	const { filters, filterState, query, pagination, resetAll } = useObjectSearchParams<
+	const { filters, query, pagination, resetAll } = useObjectSearchParams<
 		Maintenance_Request__C_Filter,
 		Maintenance_Request__C_OrderBy
-	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG, { filterSyncMode: "manual" });
-	const effectiveOrderBy: Maintenance_Request__C_OrderBy = query.orderBy ?? {
-		CreatedDate: { order: ResultOrder.Desc },
-	};
+	>(FILTER_CONFIGS, SORT_CONFIGS, PAGINATION_CONFIG);
+	const effectiveOrderBy = useMemo<Maintenance_Request__C_OrderBy>(
+		() => query.orderBy ?? { CreatedDate: { order: ResultOrder.Desc } },
+		[query.orderBy],
+	);
 	const searchKey = `maintenance-requests:${JSON.stringify({ where: query.where, orderBy: effectiveOrderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
 	const { data, loading, error } = useCachedAsyncData(
 		() =>
@@ -167,7 +167,6 @@ export default function MaintenanceRequestSearch() {
 				/>
 				<MaintenanceRequestSearchFilters
 					filters={filters}
-					filterState={filterState}
 					statusOptions={statusOptions ?? []}
 					typeOptions={typeOptions ?? []}
 					priorityOptions={priorityOptions ?? []}
@@ -225,7 +224,6 @@ export default function MaintenanceRequestSearch() {
 
 function MaintenanceRequestSearchFilters({
 	filters,
-	filterState,
 	statusOptions,
 	typeOptions,
 	priorityOptions,
@@ -235,10 +233,6 @@ function MaintenanceRequestSearchFilters({
 		Maintenance_Request__C_Filter,
 		Maintenance_Request__C_OrderBy
 	>["filters"];
-	filterState: UseObjectSearchParamsReturn<
-		Maintenance_Request__C_Filter,
-		Maintenance_Request__C_OrderBy
-	>["filterState"];
 	statusOptions: Array<{ value: string; label: string }>;
 	typeOptions: Array<{ value: string; label: string }>;
 	priorityOptions: Array<{ value: string; label: string }>;
@@ -250,9 +244,6 @@ function MaintenanceRequestSearchFilters({
 			onFilterChange={filters.set}
 			onFilterRemove={filters.remove}
 			onReset={resetAll}
-			onApply={filterState.apply}
-			hasPendingChanges={filterState.hasPendingChanges}
-			hasValidationError={filterState.hasValidationError}
 		>
 			<FilterRow ariaLabel="Maintenance Requests filters">
 				<SearchFilter
@@ -279,8 +270,12 @@ function MaintenanceRequestSearchFilters({
 					options={priorityOptions}
 					className="w-full sm:w-36"
 				/>
-				<DateFilter field="Scheduled__c" label="Scheduled" className="w-full sm:w-56" />
-				<FilterApplyButton className="h-8 px-3 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed transition-colors" />
+				<DateFilter
+					field="Scheduled__c"
+					label="Scheduled"
+					filterType="datetime"
+					className="w-full sm:w-56"
+				/>
 				<FilterResetButton />
 			</FilterRow>
 		</FilterProvider>