update build ok,

002_source/cms/src/app/dashboard/lesson_types/page.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
+import { COL_LESSON_TYPES } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -9,7 +10,7 @@ import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
-import type { RecordModel } from 'pocketbase';
+import type { ListResult, RecordModel } from 'pocketbase';
 import PocketBase from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
@@ -17,7 +18,7 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
 import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
-import { safeAssignment } from '@/components/dashboard/lesson_type/interfaces';
+import { emptyLessonType, safeAssignment } from '@/components/dashboard/lesson_type/interfaces';
 import { LessonTypesFilters } from '@/components/dashboard/lesson_type/lesson-types-filters';
 import type { Filters } from '@/components/dashboard/lesson_type/lesson-types-filters';
 import { LessonTypesPagination } from '@/components/dashboard/lesson_type/lesson-types-pagination';
@@ -25,8 +26,6 @@ import { LessonTypesSelectionProvider } from '@/components/dashboard/lesson_type
 import { LessonTypesTable } from '@/components/dashboard/lesson_type/lesson-types-table';
 import FormLoading from '@/components/loading';
 
-import { Helloworld } from './db';
-
 const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
 
 interface PageProps {
@@ -47,11 +46,16 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { email, phone, sortDir, spStatus, spName, spVisible, spType } = searchParams;
   const router = useRouter();
 
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+
+  //
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
   const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
   // const [recordModel, setRecordModel] = React.useState<RecordModel[]>([]);
   const sortedLessonTypes = applySort(lessonTypesData, sortDir);
-  const filteredLessonTypes = applyFilters(sortedLessonTypes, {
+  const filteredLessonTypesOld = applyFilters(sortedLessonTypes, {
     email,
     phone,
     spStatus,
@@ -61,19 +65,43 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     //
   });
 
+  const needToFill = 5 - filteredLessonTypesOld.length;
+
+  const filteredLessonTypes: LessonType[] = filteredLessonTypesOld;
+  for (let i = 0; i < needToFill; i++) {
+    filteredLessonTypes.push(emptyLessonType);
+  }
+
   const reloadRows = () => {
-    pb.collection('LessonsTypes')
-      .getFullList()
-      .then((lessonTypes: RecordModel[]) => {
-        const tempLessonTypes: LessonType[] = lessonTypes.map((lt) => {
+    pb.collection(COL_LESSON_TYPES)
+      .getList(currentPage, rowsPerPage, {})
+      .then((lessonTypes: ListResult<RecordModel>) => {
+        // console.log(lessonTypes);
+        const { items, page, perPage, totalItems, totalPages } = lessonTypes;
+        const tempLessonTypes: LessonType[] = items.map((lt) => {
           return safeAssignment(lt);
         });
+
         setLessonTypesData(tempLessonTypes);
+        setRecordCount(totalItems);
       })
       .catch((err) => {
         logger.error(err);
         toast(t('dashboard.lessonTypes.list.error'));
       });
+
+    // pb.collection(COL_LESSON_TYPES)
+    //   .getFullList()
+    //   .then((lessonTypes: RecordModel[]) => {
+    //     const tempLessonTypes: LessonType[] = lessonTypes.map((lt) => {
+    //       return safeAssignment(lt);
+    //     });
+    //     setLessonTypesData(tempLessonTypes);
+    //   })
+    //   .catch((err) => {
+    //     logger.error(err);
+    //     toast(t('dashboard.lessonTypes.list.error'));
+    //   });
   };
 
   React.useEffect(() => {
@@ -123,7 +151,13 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
               <LessonTypesTable reloadRows={reloadRows} rows={filteredLessonTypes} />
             </Box>
             <Divider />
-            <LessonTypesPagination count={filteredLessonTypes.length + 100} page={0} />
+            <LessonTypesPagination
+              count={recordCount}
+              page={0}
+              rowsPerPage={rowsPerPage}
+              setRowsPerPage={setRowsPerPage}
+              setCurrentPage={setCurrentPage}
+            />
           </Card>
         </LessonTypesSelectionProvider>
       </Stack>