update page,

002_source/cms/src/app/_helloworld/_PROMPT.MD

@@ -0,0 +1,9 @@
+# task
+
+## instruction
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/_helloworld/page.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/components/dashboard/error/index.tsx`
+
+please draft a tsx for showing error to user thanks,

002_source/cms/src/app/_helloworld/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+
+import ErrorDisplay from '@/components/dashboard/error';
+import FormLoading from '@/components/loading';
+
+interface PageProps {
+  hello: {
+    world: string;
+  };
+}
+
+export default function Page({ hello }: PageProps): React.JSX.Element {
+  const { t } = useTranslation();
+  const [state, setState] = React.useState<string>(hello.world);
+
+  //
+  const [showError, setShowError] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    setShowLoading(false);
+    setShowError(false);
+    setState('blablabla');
+  }, []);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('"Unable to process request"')}
+        code="500"
+        details={t('Detailed error information...')}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Typography variant="h1">Hello World</Typography>
+      {state}
+    </Box>
+  );
+}

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

@@ -17,6 +17,7 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
 import { defaultLessonCategory, type LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
 import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
 import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
@@ -48,6 +49,9 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const [recordCount, setRecordCount] = React.useState<number>(0);
   const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
   const [currentPage, setCurrentPage] = React.useState<number>(1);
+  //
+  const [showError, setShowError] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
 
   //
   const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
@@ -57,6 +61,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status: spStatus });
 
   const reloadRows = () => {
+    setShowLoading(true);
+
     pb.collection(COL_LESSON_CATEGORIES)
       .getList(currentPage, rowsPerPage, {})
       .then((lessonCategories: ListResult<RecordModel>) => {
@@ -72,6 +78,10 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       .catch((err) => {
         logger.error(err);
         toast(t('dashboard.lessonTypes.list.error'));
+        setShowError(true);
+      })
+      .finally(() => {
+        setShowLoading(false);
       });
   };
 
@@ -79,7 +89,16 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     reloadRows();
   }, []);
 
-  if (lessonCategoriesData.length < 1) return <FormLoading />;
+  if (showLoading) return <FormLoading />;
+
+  if (showError)
+    return (
+      <ErrorDisplay
+        message={t('"Unable to process request"')}
+        code="500"
+        details={t('Detailed error information...')}
+      />
+    );
 
   // return <pre>{JSON.stringify(lessonCategoriesData, null, 2)}</pre>;