update build ok,

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
 import { LoadingButton } from '@mui/lab';
@@ -12,6 +14,10 @@ import { useTranslation } from 'react-i18next';
 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 type { Filters } from '@/components/dashboard/lesson_type/lesson-types-filters';
+
 
 interface PageProps {
   searchParams: {
@@ -27,7 +33,22 @@ interface PageProps {
 }
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation();
   const { email, phone, sortDir, status, name, visible, type } = searchParams;
+  const router = useRouter();
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [lessonTypesData, setLessonTypesData] = React.useState<LessonType[]>([]);
+  const sortedLessonTypes = applySort(lessonTypesData, sortDir);
+  const filteredLessonTypes = applyFilters(sortedLessonTypes, {
+    email,
+    phone,
+    status,
+    name,
+    type,
+    visible,
+    //
+  });
 
   return (
     <Box
@@ -38,7 +59,75 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
         width: 'var(--Content-width)',
       }}
     >
-      hello lesson_type
+      <Stack spacing={4}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+          <Box sx={{ flex: '1 1 auto' }}>
+            <Typography variant="h4">{t('Lesson Types')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.lesson_types.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {/* add new lesson type */}
+              {t('dashboard.lessonTypes.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+      </Stack>
     </Box>
   );
 }
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: LessonType[], sortDir: 'asc' | 'desc' | undefined): LessonType[] {
+  return row.sort((a, b) => {
+    if (sortDir === 'asc') {
+      return a.createdAt.getTime() - b.createdAt.getTime();
+    }
+
+    return b.createdAt.getTime() - a.createdAt.getTime();
+  });
+}
+
+function applyFilters(row: LessonType[], { email, phone, status, name, visible }: Filters): LessonType[] {
+  return row.filter((item) => {
+    if (email) {
+      if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (phone) {
+      if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (status) {
+      if (item.status !== status) {
+        return false;
+      }
+    }
+
+    if (name) {
+      if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (visible) {
+      if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}