@shefing/quickfilter 1.0.11 → 1.0.13

package/dist/FilterField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../src/FilterField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAS3C,QAAA,MAAM,WAAW,uDAId;IACD,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,GAAG,CAAC;CACZ,sBAsFA,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilterField.d.ts","sourceRoot":"","sources":["../src/FilterField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAS3C,QAAA,MAAM,WAAW,uDAId;IACD,KAAK,EAAE,GAAG,CAAC;IACX,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,GAAG,CAAC;CACZ,sBAsFA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/FilterField.js

@@ -1,3 +1,4 @@
+// FilterField.tsx (הקובץ המתוקן)
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
@@ -12,7 +13,7 @@ const FilterField = ({ field, onFilterChange, value: controlledValue })=>{
     const localeLang = i18n.language;
     const isRTL = rtlLanguages.includes(localeLang);
     const direction = isRTL ? 'rtl' : 'ltr';
-    const userLocale = {
+    const locale = {
         code: localeLang,
         direction
     };
@@ -40,8 +41,10 @@ const FilterField = ({ field, onFilterChange, value: controlledValue })=>{
                 label: field.label,
                 value: controlledValue,
                 onChange: handleDateFilterChange,
-                locale: userLocale,
-                className: ` w-[${field.width || '250px'}]`
+                locale: locale,
+                style: {
+                    width: field.width || '230px'
+                }
             }, field.name);
         case 'select':
             if (field.options.length <= 3) {
@@ -53,8 +56,10 @@ const FilterField = ({ field, onFilterChange, value: controlledValue })=>{
                         })),
                     onChange: handleSelectFilterChange,
                     value: controlledValue,
-                    locale: userLocale,
-                    className: ` w-[${field.width || '250px'}]`
+                    locale: locale,
+                    style: {
+                        width: field.width || '230px'
+                    }
                 }, field.name);
             }
             return /*#__PURE__*/ _jsx(SelectFilter, {
@@ -65,8 +70,10 @@ const FilterField = ({ field, onFilterChange, value: controlledValue })=>{
                     })),
                 onChange: handleSelectFilterChange,
                 value: controlledValue,
-                locale: userLocale,
-                className: ` w-[${field.width || '250px'}]`
+                locale: locale,
+                style: {
+                    width: field.width || '230px'
+                }
             }, field.name);
         case 'checkbox':
             return /*#__PURE__*/ _jsx(CheckboxFilter, {
@@ -74,8 +81,10 @@ const FilterField = ({ field, onFilterChange, value: controlledValue })=>{
                 onChange: handleCheckboxFilterChange,
                 value: controlledValue,
                 checkboxLabel: '',
-                locale: userLocale,
-                className: ` w-[${field.width || '250px'}]`
+                locale: locale,
+                style: {
+                    width: field.width || '230px'
+                }
             }, field.name);
         default:
             return null;

package/dist/FilterField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FilterField.tsx"],"sourcesContent":["'use client';\nimport React, { useCallback } from 'react';\nimport { useTranslation } from '@payloadcms/ui';\nimport { getTranslation, rtlLanguages } from '@payloadcms/translations';\nimport { DateFilter } from './filters/components/date-filter';\nimport { Locale } from './filters/types/filters-type';\nimport { SmallSelectFilter } from './filters/components/small-select-filter';\nimport { SelectFilter } from './filters/components/select-filter';\nimport { CheckboxFilter } from './filters/components/checkbox-filter';\n\nconst FilterField = ({\n  field,\n  onFilterChange,\n  value: controlledValue,\n}: {\n  field: any;\n  onFilterChange: (fieldName: string, value: any) => void;\n  value: any;\n}) => {\n  const { i18n } = useTranslation();\n  const localeLang = i18n.language;\n  const isRTL = (rtlLanguages as readonly string[]).includes(localeLang);\n  const direction = isRTL ? 'rtl' : 'ltr';\n  const userLocale = { code: localeLang, direction };\n\n  const handleDateFilterChange = useCallback(\n    (value: any) => {\n      onFilterChange(field.name, value);\n    },\n    [onFilterChange, field.name],\n  );\n\n  const handleSelectFilterChange = useCallback(\n    (value: any) => {\n      onFilterChange(field.name, value);\n    },\n    [onFilterChange, field.name],\n  );\n\n  const handleCheckboxFilterChange = useCallback(\n    (state: any) => {\n      onFilterChange(field.name, state);\n    },\n    [onFilterChange, field.name],\n  );\n\n  switch (field.type) {\n    case 'date':\n      return (\n        <DateFilter\n          label={field.label}\n          value={controlledValue}\n          key={field.name}\n          onChange={handleDateFilterChange}\n          locale={userLocale as Locale}\n          className={` w-[${field.width || '250px'}]`}\n        />\n      );\n    case 'select':\n      if (field.options.length <= 3) {\n        return (\n          <SmallSelectFilter\n            label={field.label}\n            key={field.name}\n            options={(field.options || []).map((option: any) => ({\n              label: getTranslation(option.label, i18n),\n              value: option.value,\n            }))}\n            onChange={handleSelectFilterChange}\n            value={controlledValue}\n            locale={userLocale as Locale}\n            className={` w-[${field.width || '250px'}]`}\n          />\n        );\n      }\n      return (\n        <SelectFilter\n          label={field.label}\n          key={field.name}\n          options={(field.options || []).map((option: any) => ({\n            label: getTranslation(option.label, i18n),\n            value: option.value,\n          }))}\n          onChange={handleSelectFilterChange}\n          value={controlledValue}\n          locale={userLocale as Locale}\n          className={` w-[${field.width || '250px'}]`}\n        />\n      );\n    case 'checkbox':\n      return (\n        <CheckboxFilter\n          label={field.label}\n          key={field.name}\n          onChange={handleCheckboxFilterChange}\n          value={controlledValue}\n          checkboxLabel={''}\n          locale={userLocale as Locale}\n          className={` w-[${field.width || '250px'}]`}\n        />\n      );\n    default:\n      return null;\n  }\n};\n\nexport default FilterField;\n"],"names":["React","useCallback","useTranslation","getTranslation","rtlLanguages","DateFilter","SmallSelectFilter","SelectFilter","CheckboxFilter","FilterField","field","onFilterChange","value","controlledValue","i18n","localeLang","language","isRTL","includes","direction","userLocale","code","handleDateFilterChange","name","handleSelectFilterChange","handleCheckboxFilterChange","state","type","label","onChange","locale","className","width","options","length","map","option","checkboxLabel"],"mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,QAAQ,QAAQ;AAC3C,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,cAAc,EAAEC,YAAY,QAAQ,2BAA2B;AACxE,SAASC,UAAU,QAAQ,mCAAmC;AAE9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAC7E,SAASC,YAAY,QAAQ,qCAAqC;AAClE,SAASC,cAAc,QAAQ,uCAAuC;AAEtE,MAAMC,cAAc,CAAC,EACnBC,KAAK,EACLC,cAAc,EACdC,OAAOC,eAAe,EAKvB;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGZ;IACjB,MAAMa,aAAaD,KAAKE,QAAQ;IAChC,MAAMC,QAAQ,AAACb,aAAmCc,QAAQ,CAACH;IAC3D,MAAMI,YAAYF,QAAQ,QAAQ;IAClC,MAAMG,aAAa;QAAEC,MAAMN;QAAYI;IAAU;IAEjD,MAAMG,yBAAyBrB,YAC7B,CAACW;QACCD,eAAeD,MAAMa,IAAI,EAAEX;IAC7B,GACA;QAACD;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,MAAMC,2BAA2BvB,YAC/B,CAACW;QACCD,eAAeD,MAAMa,IAAI,EAAEX;IAC7B,GACA;QAACD;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,MAAME,6BAA6BxB,YACjC,CAACyB;QACCf,eAAeD,MAAMa,IAAI,EAAEG;IAC7B,GACA;QAACf;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,OAAQb,MAAMiB,IAAI;QAChB,KAAK;YACH,qBACE,KAACtB;gBACCuB,OAAOlB,MAAMkB,KAAK;gBAClBhB,OAAOC;gBAEPgB,UAAUP;gBACVQ,QAAQV;gBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;eAHtCtB,MAAMa,IAAI;QAMrB,KAAK;YACH,IAAIb,MAAMuB,OAAO,CAACC,MAAM,IAAI,GAAG;gBAC7B,qBACE,KAAC5B;oBACCsB,OAAOlB,MAAMkB,KAAK;oBAElBK,SAAS,AAACvB,CAAAA,MAAMuB,OAAO,IAAI,EAAE,AAAD,EAAGE,GAAG,CAAC,CAACC,SAAiB,CAAA;4BACnDR,OAAOzB,eAAeiC,OAAOR,KAAK,EAAEd;4BACpCF,OAAOwB,OAAOxB,KAAK;wBACrB,CAAA;oBACAiB,UAAUL;oBACVZ,OAAOC;oBACPiB,QAAQV;oBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;mBARtCtB,MAAMa,IAAI;YAWrB;YACA,qBACE,KAAChB;gBACCqB,OAAOlB,MAAMkB,KAAK;gBAElBK,SAAS,AAACvB,CAAAA,MAAMuB,OAAO,IAAI,EAAE,AAAD,EAAGE,GAAG,CAAC,CAACC,SAAiB,CAAA;wBACnDR,OAAOzB,eAAeiC,OAAOR,KAAK,EAAEd;wBACpCF,OAAOwB,OAAOxB,KAAK;oBACrB,CAAA;gBACAiB,UAAUL;gBACVZ,OAAOC;gBACPiB,QAAQV;gBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;eARtCtB,MAAMa,IAAI;QAWrB,KAAK;YACH,qBACE,KAACf;gBACCoB,OAAOlB,MAAMkB,KAAK;gBAElBC,UAAUJ;gBACVb,OAAOC;gBACPwB,eAAe;gBACfP,QAAQV;gBACRW,WAAW,CAAC,IAAI,EAAErB,MAAMsB,KAAK,IAAI,QAAQ,CAAC,CAAC;eALtCtB,MAAMa,IAAI;QAQrB;YACE,OAAO;IACX;AACF;AAEA,eAAed,YAAY"}
+{"version":3,"sources":["../src/FilterField.tsx"],"sourcesContent":["// FilterField.tsx (הקובץ המתוקן)\n\n'use client';\nimport React, { useCallback } from 'react';\nimport { useTranslation } from '@payloadcms/ui';\nimport { getTranslation, rtlLanguages } from '@payloadcms/translations';\nimport { Locale } from './filters/types/filters-type';\nimport { DateFilter } from './filters/components/date-filter';\nimport { SmallSelectFilter } from './filters/components/small-select-filter';\nimport { SelectFilter } from './filters/components/select-filter';\nimport { CheckboxFilter } from './filters/components/checkbox-filter';\n\nconst FilterField = ({\n  field,\n  onFilterChange,\n  value: controlledValue,\n}: {\n  field: any;\n  onFilterChange: (fieldName: string, value: any) => void;\n  value: any;\n}) => {\n  const { i18n } = useTranslation();\n  const localeLang = i18n.language;\n  const isRTL = (rtlLanguages as readonly string[]).includes(localeLang);\n  const direction = isRTL ? 'rtl' : 'ltr';\n  const locale = { code: localeLang, direction } as Locale;\n\n  const handleDateFilterChange = useCallback(\n    (value: any) => {\n      onFilterChange(field.name, value);\n    },\n    [onFilterChange, field.name],\n  );\n\n  const handleSelectFilterChange = useCallback(\n    (value: any) => {\n      onFilterChange(field.name, value);\n    },\n    [onFilterChange, field.name],\n  );\n\n  const handleCheckboxFilterChange = useCallback(\n    (state: any) => {\n      onFilterChange(field.name, state);\n    },\n    [onFilterChange, field.name],\n  );\n\n  switch (field.type) {\n    case 'date':\n      return (\n        <DateFilter\n          label={field.label}\n          value={controlledValue}\n          key={field.name}\n          onChange={handleDateFilterChange}\n          locale={locale}\n          style={{ width: field.width || '230px' }}\n        />\n      );\n    case 'select':\n      if (field.options.length <= 3) {\n        return (\n          <SmallSelectFilter\n            label={field.label}\n            key={field.name}\n            options={(field.options || []).map((option: any) => ({\n              label: getTranslation(option.label, i18n),\n              value: option.value,\n            }))}\n            onChange={handleSelectFilterChange}\n            value={controlledValue}\n            locale={locale}\n            style={{ width: field.width || '230px' }}\n          />\n        );\n      }\n      return (\n        <SelectFilter\n          label={field.label}\n          key={field.name}\n          options={(field.options || []).map((option: any) => ({\n            label: getTranslation(option.label, i18n),\n            value: option.value,\n          }))}\n          onChange={handleSelectFilterChange}\n          value={controlledValue}\n          locale={locale}\n          style={{ width: field.width || '230px' }}\n        />\n      );\n    case 'checkbox':\n      return (\n        <CheckboxFilter\n          label={field.label}\n          key={field.name}\n          onChange={handleCheckboxFilterChange}\n          value={controlledValue}\n          checkboxLabel={''}\n          locale={locale}\n          style={{ width: field.width || '230px' }}\n        />\n      );\n    default:\n      return null;\n  }\n};\n\nexport default FilterField;\n"],"names":["React","useCallback","useTranslation","getTranslation","rtlLanguages","DateFilter","SmallSelectFilter","SelectFilter","CheckboxFilter","FilterField","field","onFilterChange","value","controlledValue","i18n","localeLang","language","isRTL","includes","direction","locale","code","handleDateFilterChange","name","handleSelectFilterChange","handleCheckboxFilterChange","state","type","label","onChange","style","width","options","length","map","option","checkboxLabel"],"mappings":"AAAA,iCAAiC;AAEjC;;AACA,OAAOA,SAASC,WAAW,QAAQ,QAAQ;AAC3C,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,cAAc,EAAEC,YAAY,QAAQ,2BAA2B;AAExE,SAASC,UAAU,QAAQ,mCAAmC;AAC9D,SAASC,iBAAiB,QAAQ,2CAA2C;AAC7E,SAASC,YAAY,QAAQ,qCAAqC;AAClE,SAASC,cAAc,QAAQ,uCAAuC;AAEtE,MAAMC,cAAc,CAAC,EACnBC,KAAK,EACLC,cAAc,EACdC,OAAOC,eAAe,EAKvB;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGZ;IACjB,MAAMa,aAAaD,KAAKE,QAAQ;IAChC,MAAMC,QAAQ,AAACb,aAAmCc,QAAQ,CAACH;IAC3D,MAAMI,YAAYF,QAAQ,QAAQ;IAClC,MAAMG,SAAS;QAAEC,MAAMN;QAAYI;IAAU;IAE7C,MAAMG,yBAAyBrB,YAC7B,CAACW;QACCD,eAAeD,MAAMa,IAAI,EAAEX;IAC7B,GACA;QAACD;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,MAAMC,2BAA2BvB,YAC/B,CAACW;QACCD,eAAeD,MAAMa,IAAI,EAAEX;IAC7B,GACA;QAACD;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,MAAME,6BAA6BxB,YACjC,CAACyB;QACCf,eAAeD,MAAMa,IAAI,EAAEG;IAC7B,GACA;QAACf;QAAgBD,MAAMa,IAAI;KAAC;IAG9B,OAAQb,MAAMiB,IAAI;QAChB,KAAK;YACH,qBACE,KAACtB;gBACCuB,OAAOlB,MAAMkB,KAAK;gBAClBhB,OAAOC;gBAEPgB,UAAUP;gBACVF,QAAQA;gBACRU,OAAO;oBAAEC,OAAOrB,MAAMqB,KAAK,IAAI;gBAAQ;eAHlCrB,MAAMa,IAAI;QAMrB,KAAK;YACH,IAAIb,MAAMsB,OAAO,CAACC,MAAM,IAAI,GAAG;gBAC7B,qBACE,KAAC3B;oBACCsB,OAAOlB,MAAMkB,KAAK;oBAElBI,SAAS,AAACtB,CAAAA,MAAMsB,OAAO,IAAI,EAAE,AAAD,EAAGE,GAAG,CAAC,CAACC,SAAiB,CAAA;4BACnDP,OAAOzB,eAAegC,OAAOP,KAAK,EAAEd;4BACpCF,OAAOuB,OAAOvB,KAAK;wBACrB,CAAA;oBACAiB,UAAUL;oBACVZ,OAAOC;oBACPO,QAAQA;oBACRU,OAAO;wBAAEC,OAAOrB,MAAMqB,KAAK,IAAI;oBAAQ;mBARlCrB,MAAMa,IAAI;YAWrB;YACA,qBACE,KAAChB;gBACCqB,OAAOlB,MAAMkB,KAAK;gBAElBI,SAAS,AAACtB,CAAAA,MAAMsB,OAAO,IAAI,EAAE,AAAD,EAAGE,GAAG,CAAC,CAACC,SAAiB,CAAA;wBACnDP,OAAOzB,eAAegC,OAAOP,KAAK,EAAEd;wBACpCF,OAAOuB,OAAOvB,KAAK;oBACrB,CAAA;gBACAiB,UAAUL;gBACVZ,OAAOC;gBACPO,QAAQA;gBACRU,OAAO;oBAAEC,OAAOrB,MAAMqB,KAAK,IAAI;gBAAQ;eARlCrB,MAAMa,IAAI;QAWrB,KAAK;YACH,qBACE,KAACf;gBACCoB,OAAOlB,MAAMkB,KAAK;gBAElBC,UAAUJ;gBACVb,OAAOC;gBACPuB,eAAe;gBACfhB,QAAQA;gBACRU,OAAO;oBAAEC,OAAOrB,MAAMqB,KAAK,IAAI;gBAAQ;eALlCrB,MAAMa,IAAI;QAQrB;YACE,OAAO;IACX;AACF;AAEA,eAAed,YAAY"}

package/dist/QuickFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../src/QuickFilter.tsx"],"names":[],"mappings":"AAiIA,QAAA,MAAM,WAAW,0BAGd;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,EAAE,CAAC;CAC5D,gCA0PA,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"QuickFilter.d.ts","sourceRoot":"","sources":["../src/QuickFilter.tsx"],"names":[],"mappings":"AAmQA,QAAA,MAAM,WAAW,0BAGd;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,CAAC,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,EAAE,CAAC;CAC5D,gCA0SA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/QuickFilter.js

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useConfig, useListQuery, useTranslation } from '@payloadcms/ui';
 import { getTranslation } from '@payloadcms/translations';
 import FilterField from './FilterField';
+import { getLabel } from './labels';
 import { groupFiltersByRow, parseColumns } from './filters/utils/layout-helpers';
 import { ChevronDown, ChevronUp, Filter, X } from 'lucide-react';
-import { futureDateFilterOptions, pastDateFilterOptions } from './filters/constants/date-filter-options';
 import { getDateRangeForOption } from './filters/utils/date-helpers';
+import { isEqual } from 'lodash';
+import { futureOptionKeys, getDateFilterOptions, pastOptionKeys } from './filters/constants/date-filter-options';
 import { Button } from './ui/button';
 // Recursive function to find fields by name
 function findFieldsByName(fields, fieldNames) {
@@ -36,13 +38,14 @@ function findFieldsByName(fields, fieldNames) {
     recursiveSearch(fields);
     return results;
 }
-// Helper function to convert UI state to a where query
-const buildWhereClause = (values, fieldDefs, isHebrew)=>{
-    const where = {};
+// Builds an array of condition objects from the quick filter values
+const buildQuickFilterConditions = (values, fieldDefs, locale)=>{
+    const conditions = [];
     Object.entries(values).forEach(([fieldName, value])=>{
         if (!value) return;
         const fieldDef = fieldDefs.find((f)=>f.name === fieldName);
         if (!fieldDef) return;
+        let condition = null;
         switch(fieldDef.type){
             case 'date':
                 {
@@ -50,25 +53,21 @@ const buildWhereClause = (values, fieldDefs, isHebrew)=>{
                     let from;
                     let to;
                     if (dateValue.predefinedValue) {
-                        const locale = isHebrew ? 'he' : 'en';
                         const range = getDateRangeForOption(dateValue.predefinedValue, locale);
                         from = range.from;
                         to = range.to;
                     } else if (dateValue.customRange) {
-                        if (dateValue.customRange.from) {
-                            from = new Date(dateValue.customRange.from);
-                        }
-                        if (dateValue.customRange.to) {
-                            to = new Date(dateValue.customRange.to);
-                        }
+                        if (dateValue.customRange.from) from = new Date(dateValue.customRange.from);
+                        if (dateValue.customRange.to) to = new Date(dateValue.customRange.to);
                     }
-                    // Construct the query
                     if (from || to) {
                         const dateQuery = {};
                         if (from) dateQuery.greater_than_equal = from;
                         if (to) dateQuery.less_than_equal = to;
                         if (Object.keys(dateQuery).length > 0) {
-                            where[fieldName] = dateQuery;
+                            condition = {
+                                [fieldName]: dateQuery
+                            };
                         }
                     }
                     break;
@@ -78,12 +77,16 @@ const buildWhereClause = (values, fieldDefs, isHebrew)=>{
                     const selectValue = value;
                     if (selectValue.selectedValues && selectValue.selectedValues.length > 0) {
                         if (selectValue.selectedValues.length === 1) {
-                            where[fieldName] = {
-                                equals: selectValue.selectedValues[0]
+                            condition = {
+                                [fieldName]: {
+                                    equals: selectValue.selectedValues[0]
+                                }
                             };
                         } else {
-                            where[fieldName] = {
-                                in: selectValue.selectedValues
+                            condition = {
+                                [fieldName]: {
+                                    in: selectValue.selectedValues
+                                }
                             };
                         }
                     }
@@ -93,19 +96,141 @@ const buildWhereClause = (values, fieldDefs, isHebrew)=>{
                 {
                     const checkboxState = value;
                     if (checkboxState === 'checked') {
-                        where[fieldName] = {
-                            equals: true
+                        condition = {
+                            [fieldName]: {
+                                equals: 'true'
+                            }
                         };
                     } else if (checkboxState === 'unchecked') {
-                        where[fieldName] = {
-                            equals: false
+                        condition = {
+                            [fieldName]: {
+                                equals: 'false'
+                            }
                         };
                     }
                     break;
                 }
         }
+        if (condition) {
+            conditions.push(condition);
+        }
     });
-    return where;
+    return conditions;
+};
+// Helper function to remove quick filter conditions from a 'where' clause
+const cleanWhereClause = (clause, fieldsToClean)=>{
+    if (!clause || typeof clause !== 'object' || Array.isArray(clause)) {
+        return clause;
+    }
+    const newClause = {};
+    for(const key in clause){
+        if (key === 'and' || key === 'or') {
+            const cleanedSubClauses = clause[key].map((subClause)=>cleanWhereClause(subClause, fieldsToClean)).filter(Boolean);
+            if (cleanedSubClauses.length > 0) {
+                newClause[key] = cleanedSubClauses;
+            }
+        } else if (!fieldsToClean.has(key)) {
+            newClause[key] = clause[key];
+        }
+    }
+    if (Object.keys(newClause).length === 0) {
+        return null;
+    }
+    if (newClause.and?.length === 1 && Object.keys(newClause).length === 1) {
+        return newClause.and[0];
+    }
+    if (newClause.or?.length === 1 && Object.keys(newClause).length === 1) {
+        return newClause.or[0];
+    }
+    return newClause;
+};
+// Translates URL query conditions to the quick filter's internal state
+const parseWhereClauseToFilterValues = (where, fields, locale)=>{
+    const values = {};
+    const fieldNames = new Set(fields.map((f)=>f.name));
+    const recursiveParse = (clause)=>{
+        if (!clause || typeof clause !== 'object') return;
+        if (clause.and) {
+            clause.and.forEach(recursiveParse);
+            return;
+        }
+        if (clause.or) {
+            clause.or.forEach(recursiveParse);
+            return;
+        }
+        for(const fieldName in clause){
+            if (fieldNames.has(fieldName)) {
+                const fieldDef = fields.find((f)=>f.name === fieldName);
+                const condition = clause[fieldName];
+                if (fieldDef && condition && typeof condition === 'object') {
+                    if ('equals' in condition) {
+                        if (fieldDef.type === 'checkbox') {
+                            values[fieldName] = condition.equals == 'true' ? 'checked' : 'unchecked';
+                        } else if (fieldDef.type === 'select') {
+                            values[fieldName] = {
+                                selectedValues: [
+                                    condition.equals
+                                ]
+                            };
+                        }
+                    } else if ('in' in condition && Array.isArray(condition.in)) {
+                        if (fieldDef.type === 'select') {
+                            values[fieldName] = {
+                                selectedValues: condition.in
+                            };
+                        }
+                    } else if ('greater_than_equal' in condition || 'less_than_equal' in condition) {
+                        if (fieldDef.type === 'date') {
+                            const fromDate = condition.greater_than_equal ? new Date(condition.greater_than_equal) : null;
+                            const toDate = condition.less_than_equal ? new Date(condition.less_than_equal) : null;
+                            const allDateOptions = [
+                                ...pastOptionKeys,
+                                ...futureOptionKeys
+                            ];
+                            let matchedOption = null;
+                            for (const option of allDateOptions){
+                                const range = getDateRangeForOption(option, locale);
+                                let isFromMatch;
+                                if (fromDate) {
+                                    isFromMatch = range.from?.toDateString() === fromDate.toDateString();
+                                } else if (fromDate == null && range.to == undefined) {
+                                    // all future: fromDate == null & range.to == undefined
+                                    isFromMatch = true;
+                                }
+                                let isToMatch;
+                                if (toDate) {
+                                    isToMatch = range.to?.toDateString() === toDate.toDateString();
+                                } else if (toDate == null && range.to == undefined) {
+                                    // all future: fromDate == null & range.to == undefined
+                                    isToMatch = true;
+                                }
+                                if (isFromMatch && isToMatch) {
+                                    matchedOption = option;
+                                    break;
+                                }
+                            }
+                            if (matchedOption) {
+                                values[fieldName] = {
+                                    type: 'predefined',
+                                    predefinedValue: matchedOption
+                                };
+                            } else {
+                                values[fieldName] = {
+                                    type: 'custom',
+                                    customRange: {
+                                        from: fromDate,
+                                        to: toDate
+                                    }
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+    recursiveParse(where);
+    return values;
 };
 const QuickFilter = ({ slug, filterList })=>{
     const localStorageKey = useMemo(()=>`direct-filter-${slug}`, [
@@ -117,13 +242,13 @@ const QuickFilter = ({ slug, filterList })=>{
     const { refineListData, query } = useListQuery();
     const { getEntityConfig } = useConfig();
     const { i18n } = useTranslation();
+    const locale = i18n.language;
+    const isSyncingFromQuery = useRef(false);
     const [filterValues, setFilterValues] = useState(()=>{
         if (typeof window == 'undefined') return {};
         try {
             const item = window.localStorage.getItem(localStorageKey);
-            if (!item) {
-                return {};
-            }
+            if (!item) return {};
             const dateTimeReviver = (key, value)=>{
                 const isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?Z$/;
                 if (typeof value === 'string' && isoDateRegex.test(value)) {
@@ -137,6 +262,7 @@ const QuickFilter = ({ slug, filterList })=>{
             return {};
         }
     });
+    // Build the list of filter fields from config
     useEffect(()=>{
         const collection = getEntityConfig({
             collectionSlug: slug
@@ -174,25 +300,54 @@ const QuickFilter = ({ slug, filterList })=>{
         getEntityConfig,
         i18n
     ]);
+    // Sync from URL (query.where) into internal state
+    useEffect(()=>{
+        if (fields.length === 0) return;
+        const valuesFromQuery = parseWhereClauseToFilterValues(query.where, fields, locale);
+        if (!isEqual(valuesFromQuery, filterValues)) {
+            // Lock to prevent feedback loop when internal state changes
+            isSyncingFromQuery.current = true;
+            setFilterValues(valuesFromQuery);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        query.where,
+        fields
+    ]);
+    // Sync internal state (filterValues) back into the URL
     useEffect(()=>{
-        if (fields.length === 0) {
+        // If the change originated from the first effect, skip to avoid infinite loop
+        if (isSyncingFromQuery.current) {
+            isSyncingFromQuery.current = false;
             return;
         }
-        const where = buildWhereClause(filterValues, fields, isHebrew);
-        try {
-            if (Object.keys(filterValues).length > 0) {
-                localStorage.setItem(localStorageKey, JSON.stringify(filterValues));
-            } else {
-                localStorage.removeItem(localStorageKey);
-                return;
+        if (fields.length === 0) return;
+        const quickFilterConditions = buildQuickFilterConditions(filterValues, fields, locale);
+        const quickFilterFieldNames = new Set(fields.map((f)=>f.name));
+        const otherFilters = cleanWhereClause(query.where, quickFilterFieldNames);
+        const allConditions = [
+            ...quickFilterConditions
+        ];
+        if (otherFilters) {
+            if (otherFilters.and && Array.isArray(otherFilters.and)) {
+                allConditions.push(...otherFilters.and);
+            } else if (Object.keys(otherFilters).length > 0) {
+                allConditions.push(otherFilters);
             }
-        } catch (error) {
-            console.error('Failed to save filters to localStorage', error);
         }
-        if (JSON.stringify(where) !== JSON.stringify(query.where)) {
+        let newWhere = {};
+        if (allConditions.length > 1) {
+            newWhere = {
+                and: allConditions
+            };
+        } else if (allConditions.length === 1) {
+            newWhere = allConditions[0];
+        }
+        // Only update if the query has actually changed to avoid unnecessary updates
+        if (!isEqual(newWhere, query.where)) {
             refineListData({
                 columns: parseColumns(query.columns),
-                where,
+                where: newWhere,
                 page: '1'
             });
         }
@@ -200,8 +355,25 @@ const QuickFilter = ({ slug, filterList })=>{
     }, [
         filterValues,
         fields,
+        i18n.language,
+        refineListData
+    ]);
+    // Effect for persisting to localStorage
+    useEffect(()=>{
+        try {
+            if (Object.keys(filterValues).length > 0) {
+                localStorage.setItem(localStorageKey, JSON.stringify(filterValues));
+            } else {
+                localStorage.removeItem(localStorageKey);
+            }
+        } catch (error) {
+            console.error('Failed to save filters to localStorage', error);
+        }
+    }, [
+        filterValues,
         localStorageKey
     ]);
+    // Updates only the internal state
     const handleFilterChange = useCallback((fieldName, value)=>{
         setFilterValues((prev)=>{
             const newValues = {
@@ -218,7 +390,7 @@ const QuickFilter = ({ slug, filterList })=>{
     // This function remains largely the same.
     const getActiveFiltersDetails = ()=>{
         const activeFilters = [];
-        const isHebrew = i18n.language === 'he';
+        const locale = i18n.language;
         Object.entries(filterValues).forEach(([fieldName, value])=>{
             const field = fields.find((f)=>f.name === fieldName);
             if (!field) return;
@@ -228,14 +400,15 @@ const QuickFilter = ({ slug, filterList })=>{
                         const dateValue = value;
                         let dateDescription = '';
                         if (dateValue.type === 'predefined' && dateValue.predefinedValue) {
+                            const { pastOptions, futureOptions } = getDateFilterOptions(locale);
                             const allOptions = [
-                                ...pastDateFilterOptions,
-                                ...futureDateFilterOptions
+                                ...pastOptions,
+                                ...futureOptions
                             ];
                             const option = allOptions.find((opt)=>opt.value === dateValue.predefinedValue);
-                            dateDescription = option ? option.label : isHebrew ? 'מותאם אישית' : 'Custom';
+                            dateDescription = option ? option.label : getLabel('custom', locale);
                         } else if (dateValue.type === 'custom' || dateValue.customRange) {
-                            dateDescription = isHebrew ? 'מותאם אישית' : 'Custom';
+                            dateDescription = getLabel('custom', locale);
                         }
                         if (dateDescription) {
                             activeFilters.push(`${field.label} (${dateDescription})`);
@@ -246,19 +419,24 @@ const QuickFilter = ({ slug, filterList })=>{
                     {
                         const selectValue = value;
                         if (selectValue && selectValue.selectedValues && selectValue.selectedValues.length > 0) {
-                            const count = selectValue.selectedValues.length;
                             const totalOptions = field.options?.length || 0;
                             if (selectValue.selectedValues.length === totalOptions) {
-                                activeFilters.push(`${field.label} (${isHebrew ? 'הכל' : 'All'})`);
+                                activeFilters.push(`${field.label} (${getLabel('all', locale)})`);
+                            } else if (selectValue.selectedValues.length === 1) {
+                                // Show the actual option name when only one is selected
+                                const selectedOption = field.options?.find((opt)=>opt.value === selectValue.selectedValues[0]);
+                                const optionLabel = selectedOption ? selectedOption.label : selectValue.selectedValues[0];
+                                activeFilters.push(`${field.label} (${optionLabel})`);
                             } else {
-                                activeFilters.push(`${field.label} (${count})`);
+                                // Show count for multiple selections
+                                activeFilters.push(`${field.label} (${selectValue.selectedValues.length})`);
                             }
                         }
                         break;
                     }
                 case 'checkbox':
                     if (value !== 'indeterminate') {
-                        const checkboxValue = value === 'checked' ? isHebrew ? 'כן' : 'Yes' : isHebrew ? 'לא' : 'No';
+                        const checkboxValue = value === 'checked' ? getLabel('yes', locale) : getLabel('no', locale);
                         activeFilters.push(`${field.label} (${checkboxValue})`);
                     }
                     break;
@@ -267,11 +445,6 @@ const QuickFilter = ({ slug, filterList })=>{
         return activeFilters;
     };
     const clearAllFilters = ()=>{
-        refineListData({
-            columns: parseColumns(query.columns),
-            where: {},
-            page: '1'
-        });
         setFilterValues({});
     };
     const memoizedFilterRows = useMemo(()=>{
@@ -295,7 +468,6 @@ const QuickFilter = ({ slug, filterList })=>{
     };
     const activeFiltersDetails = getActiveFiltersDetails();
     const hasActiveFilters = activeFiltersDetails.length > 0;
-    const isHebrew = i18n.language === 'he';
     if (!fields.length) return null;
     return /*#__PURE__*/ _jsxs("div", {
         className: "filter-container useTw",
@@ -321,7 +493,7 @@ const QuickFilter = ({ slug, filterList })=>{
                                     className: "text-sm truncate",
                                     children: [
                                         /*#__PURE__*/ _jsx("strong", {
-                                            children: isHebrew ? `${activeFiltersDetails.length === 1 ? 'סינון פעיל בעמודה' : 'סינון פעיל בעמודות'}: ` : `${activeFiltersDetails.length === 1 ? 'Active filter on column' : 'Active filters on columns'}: `
+                                            children: `${activeFiltersDetails.length === 1 ? getLabel('activeFilterSingular', locale) : getLabel('activeFilterPlural', locale)}: `
                                         }),
                                         ' ',
                                         activeFiltersDetails.join(' • ')
@@ -340,7 +512,7 @@ const QuickFilter = ({ slug, filterList })=>{
                             ]
                         }) : /*#__PURE__*/ _jsx("span", {
                             className: "text-sm truncate",
-                            children: isHebrew ? 'סינון מהיר' : 'Quick Filters'
+                            children: getLabel('quickFilters', locale)
                         }),
                         showFilters ? /*#__PURE__*/ _jsx(ChevronUp, {
                             className: "h-4 w-4"