update for filter,

002_source/cms/src/app/dashboard/lp/categories/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp_categories/type';
+import { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/lp/categories/[cat_id]/TitleCard.tsx

@@ -10,7 +10,7 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
-import { LpCategory } from '@/components/dashboard/lp_categories/type';
+import { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 function getImageUrlFrRecord(record: LpCategory): string {
   return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;

002_source/cms/src/app/dashboard/lp/categories/[cat_id]/page.tsx

@@ -21,9 +21,9 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpCategory } from '@/components/dashboard/lp_categories/_constants.ts';
+import { defaultLpCategory } from '@/components/dashboard/lp/categories/_constants.ts';
-import { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import { Notifications } from '@/components/dashboard/lp/categories/notifications';
-import type { LpCategory } from '@/components/dashboard/lp_categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 import FormLoading from '@/components/loading';
 
 import BasicDetailCard from './BasicDetailCard';

002_source/cms/src/app/dashboard/lp/categories/create/page.tsx

@@ -13,7 +13,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpCategoryCreateForm } from '@/components/dashboard/lp_categories/lp-category-create-form';
+import { LpCategoryCreateForm } from '@/components/dashboard/lp/categories/lp-category-create-form';
 
 export default function Page(): React.JSX.Element {
   // RULES: follow the name of page directory

002_source/cms/src/app/dashboard/lp/categories/edit/[cat_id]/page.tsx

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpCategoryEditForm } from '@/components/dashboard/lp_categories/lp-category-edit-form';
+import { LpCategoryEditForm } from '@/components/dashboard/lp/categories/lp-category-edit-form';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation(['lp_categories']);

002_source/cms/src/app/dashboard/lp/categories/page.tsx

@@ -23,13 +23,13 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpCategory } from '@/components/dashboard/lp_categories/_constants';
+import { defaultLpCategory } from '@/components/dashboard/lp/categories/_constants';
-import { LpCategoriesFilters } from '@/components/dashboard/lp_categories/lp-categories-filters';
+import { LpCategoriesFilters } from '@/components/dashboard/lp/categories/lp-categories-filters';
-import type { Filters } from '@/components/dashboard/lp_categories/lp-categories-filters';
+import type { Filters } from '@/components/dashboard/lp/categories/lp-categories-filters';
-import { LpCategoriesPagination } from '@/components/dashboard/lp_categories/lp-categories-pagination';
+import { LpCategoriesPagination } from '@/components/dashboard/lp/categories/lp-categories-pagination';
-import { LpCategoriesSelectionProvider } from '@/components/dashboard/lp_categories/lp-categories-selection-context';
+import { LpCategoriesSelectionProvider } from '@/components/dashboard/lp/categories/lp-categories-selection-context';
-import { LpCategoriesTable } from '@/components/dashboard/lp_categories/lp-categories-table';
+import { LpCategoriesTable } from '@/components/dashboard/lp/categories/lp-categories-table';
-import type { LpCategory } from '@/components/dashboard/lp_categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
@@ -67,19 +67,74 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       setLessonCategoriesData(tempLessonTypes);
       setRecordCount(totalItems);
       setF(tempLessonTypes);
-      console.log({ currentPage, f });
+      // console.log({ currentPage, f });
     } catch (error) {
       //
-      setShowError({ show: true, detail: JSON.stringify(error) });
+      logger.error(error);
+      setShowError({
+        //
+        show: true,
+        detail: JSON.stringify(error, null, 2),
+      });
     } finally {
       setShowLoading(false);
     }
   };
 
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
   React.useEffect(() => {
-    void reloadRows();
+    if (!isFirstRun.current) {
+      isFirstRun.current = true;
+    } else {
+      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+        // reset page number as tab changes
+        setLastListOption(listOption);
+        setCurrentPage(0);
+        void reloadRows();
+      } else {
+        void reloadRows();
+      }
+    }
   }, [currentPage, rowsPerPage, listOption]);
 
+  React.useEffect(() => {
+    let tempFilter = [],
+      tempSortDir = '';
+
+    if (visible) {
+      tempFilter.push(`visible = "${visible}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (name) {
+      tempFilter.push(`name ~ "%${name}%"`);
+    }
+
+    if (type) {
+      tempFilter.push(`type ~ "%${type}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+    // setListOption({
+    //   filter: tempFilter.join(' && '),
+    //   sort: tempSortDir,
+    //   //
+    // });
+  }, [visible, sortDir, name, type]);
+
+  // return <>helloworld</>;
+
   if (showLoading) return <FormLoading />;
 
   if (showError.show)

002_source/cms/src/app/dashboard/lp/questions/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp_categories/type';
+import { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/lp/questions/[cat_id]/TitleCard.tsx

@@ -10,7 +10,7 @@ import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/Caret
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { useTranslation } from 'react-i18next';
 
-import { LpCategory } from '@/components/dashboard/lp_categories/type';
+import { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 function getImageUrlFrRecord(record: LpCategory): string {
   return `http://127.0.0.1:8090/api/files/${record.collectionId}/${record.id}/${record.cat_image}`;

002_source/cms/src/app/dashboard/lp/questions/[cat_id]/page.tsx

@@ -21,9 +21,9 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpQuestion } from '@/components/dashboard/lp_questions/_constants.ts';
+import { defaultLpQuestion } from '@/components/dashboard/lp/questions/_constants.ts';
-import { Notifications } from '@/components/dashboard/lp_questions/notifications';
+import { Notifications } from '@/components/dashboard/lp/questions/notifications';
-import type { LpQuestion } from '@/components/dashboard/lp_questions/type';
+import type { LpQuestion } from '@/components/dashboard/lp/questions/type';
 import FormLoading from '@/components/loading';
 
 import BasicDetailCard from './BasicDetailCard';

002_source/cms/src/app/dashboard/lp/questions/create/page.tsx

@@ -13,7 +13,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpQuestionCreateForm } from '@/components/dashboard/lp_questions/lp-question-create-form';
+import { LpQuestionCreateForm } from '@/components/dashboard/lp/questions/lp-question-create-form';
 
 export default function Page(): React.JSX.Element {
   // RULES: follow the name of page directory

002_source/cms/src/app/dashboard/lp/questions/edit/[cat_id]/page.tsx

@@ -10,7 +10,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { LpQuestionEditForm } from '@/components/dashboard/lp_questions/lp-question-edit-form';
+import { LpQuestionEditForm } from '@/components/dashboard/lp/questions/lp-question-edit-form';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation(['lp_questions']);

002_source/cms/src/app/dashboard/lp/questions/page.tsx

@@ -23,13 +23,13 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultLpQuestion } from '@/components/dashboard/lp_questions/_constants';
+import { defaultLpQuestion } from '@/components/dashboard/lp/questions/_constants';
-import { LpQuestionsFilters } from '@/components/dashboard/lp_questions/lp-questions-filters';
+import { LpQuestionsFilters } from '@/components/dashboard/lp/questions/lp-questions-filters';
-import type { Filters } from '@/components/dashboard/lp_questions/lp-questions-filters';
+import type { Filters } from '@/components/dashboard/lp/questions/lp-questions-filters';
-import { LpQuestionsPagination } from '@/components/dashboard/lp_questions/lp-questions-pagination';
+import { LpQuestionsPagination } from '@/components/dashboard/lp/questions/lp-questions-pagination';
-import { LpQuestionsSelectionProvider } from '@/components/dashboard/lp_questions/lp-questions-selection-context';
+import { LpQuestionsSelectionProvider } from '@/components/dashboard/lp/questions/lp-questions-selection-context';
-import { LpQuestionsTable } from '@/components/dashboard/lp_questions/lp-questions-table';
+import { LpQuestionsTable } from '@/components/dashboard/lp/questions/lp-questions-table';
-import type { LpQuestion } from '@/components/dashboard/lp_questions/type';
+import type { LpQuestion } from '@/components/dashboard/lp/questions/type';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {

002_source/cms/src/app/dashboard/mf/categories/page.tsx

@@ -68,19 +68,74 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       setLessonCategoriesData(tempLessonTypes);
       setRecordCount(totalItems);
       setF(tempLessonTypes);
-      console.log({ currentPage, f });
+      // console.log({ currentPage, f });
     } catch (error) {
       //
-      setShowError({ show: true, detail: JSON.stringify(error) });
+      logger.error(error);
+      setShowError({
+        //
+        show: true,
+        detail: JSON.stringify(error),
+      });
     } finally {
       setShowLoading(false);
     }
   };
 
+  const [lastListOption, setLastListOption] = React.useState({});
+  const isFirstRun = React.useRef(false);
   React.useEffect(() => {
-    void reloadRows();
+    if (!isFirstRun.current) {
+      isFirstRun.current = true;
+    } else {
+      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+        // reset page number as tab changes
+        setLastListOption(listOption);
+        setCurrentPage(0);
+        void reloadRows();
+      } else {
+        void reloadRows();
+      }
+    }
   }, [currentPage, rowsPerPage, listOption]);
 
+  React.useEffect(() => {
+    let tempFilter = [],
+      tempSortDir = '';
+
+    if (visible) {
+      tempFilter.push(`visible = "${visible}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (name) {
+      tempFilter.push(`name ~ "%${name}%"`);
+    }
+
+    if (type) {
+      tempFilter.push(`type ~ "%${type}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+    // setListOption({
+    //   filter: tempFilter.join(' && '),
+    //   sort: tempSortDir,
+    //   //
+    // });
+  }, [visible, sortDir, name, type]);
+
+  // return <>helloworld</>;
+
   if (showLoading) return <FormLoading />;
 
   if (showError.show)