update working on cms users page,

002_source/cms/src/app/dashboard/users/SampleCustomers.tsx

@@ -0,0 +1,157 @@
+// src/app/dashboard/customers/page.tsx
+'use client';
+import type { Customer } from '@/components/dashboard/customer/type.d';
+import { dayjs } from '@/lib/dayjs';
+
+export const SampleCustomers = [
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'USR-003',
+    name: 'Carson Darrin',
+    avatar: '/assets/avatar-3.png',
+    email: 'carson.darrin@domain.com',
+    phone: '(715) 278-5041',
+    quota: 10,
+    status: 'blocked',
+    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-002',
+    name: 'Siegbert Gottfried',
+    avatar: '/assets/avatar-2.png',
+    email: 'siegbert.gottfried@domain.com',
+    phone: '(603) 766-0431',
+    quota: 0,
+    status: 'pending',
+    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-001',
+    name: 'Miron Vitold',
+    avatar: '/assets/avatar-1.png',
+    email: 'miron.vitold@domain.com',
+    phone: '(425) 434-5535',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+  },
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'USR-003',
+    name: 'Carson Darrin',
+    avatar: '/assets/avatar-3.png',
+    email: 'carson.darrin@domain.com',
+    phone: '(715) 278-5041',
+    quota: 10,
+    status: 'blocked',
+    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-002',
+    name: 'Siegbert Gottfried',
+    avatar: '/assets/avatar-2.png',
+    email: 'siegbert.gottfried@domain.com',
+    phone: '(603) 766-0431',
+    quota: 0,
+    status: 'pending',
+    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-001',
+    name: 'Miron Vitold',
+    avatar: '/assets/avatar-1.png',
+    email: 'miron.vitold@domain.com',
+    phone: '(425) 434-5535',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+  },
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'USR-003',
+    name: 'Carson Darrin',
+    avatar: '/assets/avatar-3.png',
+    email: 'carson.darrin@domain.com',
+    phone: '(715) 278-5041',
+    quota: 10,
+    status: 'blocked',
+    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-002',
+    name: 'Siegbert Gottfried',
+    avatar: '/assets/avatar-2.png',
+    email: 'siegbert.gottfried@domain.com',
+    phone: '(603) 766-0431',
+    quota: 0,
+    status: 'pending',
+    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-001',
+    name: 'Miron Vitold',
+    avatar: '/assets/avatar-1.png',
+    email: 'miron.vitold@domain.com',
+    phone: '(425) 434-5535',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+  },
+] satisfies Customer[];

002_source/cms/src/app/dashboard/users/_GUIDELINES.md

@@ -0,0 +1,49 @@
+# GUIDELINES
+
+this folder is part of nextjs typescript project and containing page definition for `Customer` / `Customers` record:
+
+- list (./page.tsx)
+- view (./[customerId]/page.tsx)
+- create (./create/page.tsx)
+- edit (./[customerId]/page.tsx)
+- translation provided by react-i18next
+
+the `@` sign refer to `<base_dir>/002_source/002_source/cms/src`
+
+## Assumption and Requirements
+
+- let one file contains one component only.
+- type information defined in `<base_dir>/002_source/cms/src/db/Customers/type.d.tsx`
+- it mainly consume the db drivers `Customres` in `<base_dir>/002_source/cms/src/db/Customers`
+
+simple template:
+
+```typescript
+// src/app/dashboard/customers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for customers (Customers)
+// contain definition to collection only
+//
+import statements here ...
+...
+...
+...
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  // ...content
+  // use direct return of pb.collection (e.g. return pb.collection(xxx))
+
+  return (
+    <>
+      {* page content *}
+    </>
+  )
+}
+
+
+interface PageProps {
+  searchParams: { email?: string; phone?: string; sortDir?: 'asc' | 'desc'; status?: string };
+}
+```

002_source/cms/src/app/dashboard/users/create/page.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import RouterLink from 'next/link';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+
+import { config } from '@/config';
+import { paths } from '@/paths';
+import { CustomerCreateForm } from '@/components/dashboard/student/student-create-form';
+
+export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack spacing={3}>
+          <div>
+            <Link
+              color="text.primary"
+              component={RouterLink}
+              href={paths.dashboard.customers.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              Customers
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">Create customer</Typography>
+          </div>
+        </Stack>
+        <CustomerCreateForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/users/edit/[customerId]/_PROMPT.md

@@ -0,0 +1,11 @@
+# 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`
+
+with reference to `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_types/edit/[typeId]/page.tsx`
+
+please modify `/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/002_source/cms/src/app/dashboard/lesson_categories/edit/page.tsx`
+
+please draft a tsx for showing error to user thanks,

002_source/cms/src/app/dashboard/users/edit/[customerId]/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
+import { StudentEditForm } from '@/components/dashboard/student/student-edit-form';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['lp_categories']);
+
+  React.useEffect(() => {
+    // console.log('helloworld');
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack spacing={3}>
+          <div>
+            <Link
+              color="text.primary"
+              component={RouterLink}
+              href={paths.dashboard.students.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              {t('edit.title')}
+            </Link>
+          </div>
+          <div>
+            <Typography variant="h4">{t('edit.title')}</Typography>
+          </div>
+        </Stack>
+        <StudentEditForm />
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/users/list/page.tsx

@@ -0,0 +1,209 @@
+// src/app/dashboard/customers/page.tsx
+'use client';
+
+// RULES:
+// contains list page for customers (Customers)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_USERS } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+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 { ListResult, RecordModel } from 'pocketbase';
+
+import { UsersFilters } from '@/components/dashboard/user/users-filters';
+import { UsersPagination } from '@/components/dashboard/user/users-pagination';
+import { UsersSelectionProvider } from '@/components/dashboard/user/users-selection-context';
+import { UsersTable } from '@/components/dashboard/user/users-table';
+import type { User } from '@/components/dashboard/user/type.d';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import isDevelopment from '@/lib/check-is-development';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultUser } from '@/components/dashboard/user/_constants';
+import FormLoading from '@/components/loading';
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation(['customers']);
+  const router = useRouter();
+
+  const { email, phone, sortDir, status } = searchParams;
+
+  const [lessonCategoriesData, setLessonCategoriesData] = React.useState<User[]>([]);
+  //
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  //
+  const [f, setF] = React.useState<User[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  //
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+
+  //
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb.collection(COL_USERS).getList(currentPage + 1, rowsPerPage, {});
+      const { items, totalItems } = models;
+
+      const tempLessonTypes: User[] = items.map((lt) => {
+        return { ...defaultUser, ...lt };
+      });
+
+      setLessonCategoriesData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+    } catch (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(() => {
+    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(() => {
+    const tempFilter = [];
+    let tempSortDir = '';
+
+    if (status) {
+      tempFilter.push(`status = "${status}"`);
+    }
+
+    if (sortDir) {
+      tempSortDir = `-created`;
+    }
+
+    if (email) {
+      tempFilter.push(`email ~ "%${email}%"`);
+    }
+    if (phone) {
+      tempFilter.push(`phone ~ "%${phone}%"`);
+    }
+
+    let preFinalListOption = {};
+    if (tempFilter.length > 0) {
+      preFinalListOption = { filter: tempFilter.join(' && ') };
+    }
+    if (tempSortDir.length > 0) {
+      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+    }
+    setListOption(preFinalListOption);
+  }, [sortDir, email, phone, status]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code={-1}
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <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('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.users.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <UsersSelectionProvider users={f}>
+          <Card>
+            <UsersFilters
+              filters={{ email, phone, status }}
+              fullData={lessonCategoriesData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <UsersTable
+                reloadRows={reloadRows}
+                rows={f}
+              />
+            </Box>
+            <Divider />
+            <UsersPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </UsersSelectionProvider>
+      </Stack>
+      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
+        <pre>{JSON.stringify(f, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+}
+
+interface PageProps {
+  searchParams: {
+    email?: string;
+    phone?: string;
+    sortDir?: 'asc' | 'desc';
+    status?: string;
+    //
+  };
+}

002_source/cms/src/app/dashboard/users/mail/[labelId]/[threadId]/page.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadView } from '@/components/dashboard/mail/thread-view';
+
+export const metadata = { title: `Thread | Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+interface PageProps {
+  params: { threadId: string };
+}
+
+export default function Page({ params }: PageProps): React.JSX.Element {
+  const { threadId } = params;
+
+  return <ThreadView threadId={threadId} />;
+}

002_source/cms/src/app/dashboard/users/mail/[labelId]/layout.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+
+import { dayjs } from '@/lib/dayjs';
+import { MailProvider } from '@/components/dashboard/mail/mail-context';
+import { MailView } from '@/components/dashboard/mail/mail-view';
+import type { Label, Thread } from '@/components/dashboard/mail/types';
+
+function filterThreads(threads: Thread[], labelId: string): Thread[] {
+  return threads.filter((thread) => {
+    if (['inbox', 'sent', 'drafts', 'spam', 'trash'].includes(labelId)) {
+      return thread.folder === labelId;
+    }
+
+    if (labelId === 'important') {
+      return thread.isImportant;
+    }
+
+    if (labelId === 'starred') {
+      return thread.isStarred;
+    }
+
+    if (thread.labels.includes(labelId)) {
+      return true;
+    }
+
+    return false;
+  });
+}
+
+const labels = [
+  { id: 'inbox', type: 'system', name: 'Inbox', unreadCount: 1, totalCount: 0 },
+  { id: 'sent', type: 'system', name: 'Sent', unreadCount: 0, totalCount: 0 },
+  { id: 'drafts', type: 'system', name: 'Drafts', unreadCount: 0, totalCount: 0 },
+  { id: 'spam', type: 'system', name: 'Spam', unreadCount: 0, totalCount: 0 },
+  { id: 'trash', type: 'system', name: 'Trash', unreadCount: 0, totalCount: 1 },
+  { id: 'important', type: 'system', name: 'Important', unreadCount: 0, totalCount: 1 },
+  { id: 'starred', type: 'system', name: 'Starred', unreadCount: 1, totalCount: 1 },
+  { id: 'work', type: 'custom', name: 'Work', color: '#43A048', unreadCount: 0, totalCount: 1 },
+  { id: 'business', type: 'custom', name: 'Business', color: '#1E88E5', unreadCount: 1, totalCount: 2 },
+  { id: 'personal', type: 'custom', name: 'Personal', color: '#FB8A00', unreadCount: 0, totalCount: 1 },
+] satisfies Label[];
+
+const threads = [
+  {
+    id: 'TRD-004',
+    from: { avatar: '/assets/avatar-9.png', email: 'marcus.finn@domain.com', name: 'Marcus Finn' },
+    to: [{ avatar: '/assets/avatar.png', email: 'sofia@devias.io', name: 'Sofia Rivers' }],
+    subject: 'Website redesign. Interested in collaboration',
+    message: `Hey there,
+
+I hope this email finds you well. I'm glad you liked my projects, and I would be happy to provide you with a quote for a similar project.
+
+Please let me know your requirements and any specific details you have in mind, so I can give you an accurate quote.
+
+Looking forward to hearing from you soon.
+
+Best regards,
+
+Marcus Finn`,
+    attachments: [
+      {
+        id: 'ATT-001',
+        name: 'working-sketch.png',
+        size: '128.5 KB',
+        type: 'image',
+        url: '/assets/image-abstract-1.png',
+      },
+      { id: 'ATT-002', name: 'summer-customers.pdf', size: '782.3 KB', type: 'file', url: '#' },
+      {
+        id: 'ATT-003',
+        name: 'desktop-coffee.png',
+        size: '568.2 KB',
+        type: 'image',
+        url: '/assets/image-minimal-1.png',
+      },
+    ],
+    folder: 'inbox',
+    labels: ['work', 'business'],
+    isImportant: true,
+    isStarred: false,
+    isUnread: true,
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'TRD-003',
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    from: { name: 'Miron Vitold', avatar: '/assets/avatar-1.png', email: 'miron.vitold@domain.com' },
+    subject: 'Amazing work',
+    message: `Hey, nice projects! I really liked the one in react. What's your quote on kinda similar project?`,
+    folder: 'spam',
+    labels: [],
+    isImportant: false,
+    isStarred: true,
+    isUnread: false,
+    createdAt: dayjs().subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'TRD-002',
+    from: { name: 'Penjani Inyene', avatar: '/assets/avatar-4.png', email: 'penjani.inyene@domain.com' },
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    subject: 'Flight reminder',
+    message: `Dear Sofia,
+
+Your flight is coming up soon. Please don't forget to check in for your scheduled flight.`,
+    folder: 'inbox',
+    labels: ['business'],
+    isImportant: false,
+    isStarred: false,
+    isUnread: false,
+    createdAt: dayjs().subtract(2, 'day').toDate(),
+  },
+  {
+    id: 'TRD-001',
+    from: { name: 'Carson Darrin', avatar: '/assets/avatar-3.png', email: 'carson.darrin@domain.com' },
+    to: [{ name: 'Sofia Rivers', avatar: '/assets/avatar.png', email: 'sofia@devias.io' }],
+    subject: 'Possible candidates for the position',
+    message: `My market leading client has another fantastic opportunity for an experienced Software Developer to join them on a heavily remote basis`,
+    folder: 'trash',
+    labels: ['personal'],
+    isImportant: false,
+    isStarred: false,
+    isUnread: true,
+    createdAt: dayjs().subtract(2, 'day').toDate(),
+  },
+] satisfies Thread[];
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: { labelId: string };
+}
+
+export default function Layout({ children, params }: LayoutProps): React.JSX.Element {
+  const { labelId } = params;
+
+  const filteredThreads = filterThreads(threads, labelId);
+
+  return (
+    <MailProvider currentLabelId={labelId} labels={labels} threads={filteredThreads}>
+      <MailView>{children}</MailView>
+    </MailProvider>
+  );
+}

002_source/cms/src/app/dashboard/users/mail/[labelId]/page.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+
+import { config } from '@/config';
+import { ThreadsView } from '@/components/dashboard/mail/threads-view';
+
+export const metadata = { title: `Mail | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return <ThreadsView />;
+}

002_source/cms/src/app/dashboard/users/view/[id]/BasicDetailCard.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+// import { CrCategory } from '@/components/dashboard/cr/categories/type';
+import type { User } from '@/components/dashboard/user/type.d';
+
+export default function BasicDetailCard({
+  user: model,
+  handleEditClick,
+}: {
+  user: User;
+  handleEditClick: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <IconButton
+            onClick={() => {
+              handleEditClick();
+            }}
+          >
+            <PencilSimpleIcon />
+          </IconButton>
+        }
+        avatar={
+          <Avatar>
+            <UserIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.basic-details')}
+      />
+      <PropertyList
+        divider={<Divider />}
+        orientation="vertical"
+        sx={{ '--PropertyItem-padding': '12px 24px' }}
+      >
+        {(
+          [
+            {
+              key: 'Customer ID',
+              value: (
+                <Chip
+                  label={model.id}
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Email', value: model.email },
+            { key: 'Quota', value: model.quota },
+            { key: 'Status', value: model.status },
+          ] satisfies { key: string; value: React.ReactNode }[]
+        ).map(
+          (item): React.JSX.Element => (
+            <PropertyItem
+              key={item.key}
+              name={item.key}
+              value={item.value}
+            />
+          )
+        )}
+      </PropertyList>
+    </Card>
+  );
+}

002_source/cms/src/app/dashboard/users/view/[id]/TitleCard.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { useTranslation } from 'react-i18next';
+import type { Student } from '@/components/dashboard/student/type.d';
+
+// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
+
+function getImageUrlFrRecord(record: Student): string {
+  // TODO: fix this
+  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
+  return 'getImageUrlFrRecord(helloworld)';
+}
+
+export default function SampleTitleCard({ user: lpModel }: { user: Student }): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          variant="rounded"
+          src={getImageUrlFrRecord(lpModel)}
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          {t('empty')}
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{lpModel.email}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.quota}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.status}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

002_source/cms/src/app/dashboard/users/view/[id]/page.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
+
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { config } from '@/config';
+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 { Notifications } from '@/components/dashboard/user/notifications';
+import FormLoading from '@/components/loading';
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+import { defaultUser } from '@/components/dashboard/user/_constants';
+import type { User } from '@/components/dashboard/user/type.d';
+import { COL_USERS } from '@/constants';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { id: userId } = useParams<{ id: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [showUser, setShowUser] = React.useState<User>(defaultUser);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.users.edit(showUser.id));
+  }
+
+  React.useEffect(() => {
+    if (userId) {
+      pb.collection(COL_USERS)
+        .getOne(userId)
+        .then((model: RecordModel) => {
+          setShowUser({ ...defaultUser, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId]);
+
+  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack spacing={3}>
+          <div>
+            <Link
+              color="text.primary"
+              component={RouterLink}
+              href={paths.dashboard.users.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              Users
+            </Link>
+          </div>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <TitleCard user={showUser} />
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <BasicDetailCard
+                user={showUser}
+                handleEditClick={handleEditClick}
+              />
+              <SampleSecurityCard />
+            </Stack>
+          </Grid>
+          <Grid
+            lg={8}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <SamplePaymentCard />
+              <SampleAddressCard />
+              <Notifications notifications={SampleNotifications} />
+            </Stack>
+          </Grid>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

002_source/cms/src/app/dashboard/users/xxx/BasicDetailCard.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import { useTranslation } from 'react-i18next';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+// import { CrCategory } from '@/components/dashboard/cr/categories/type';
+import type { Student } from '@/components/dashboard/student/type.d';
+
+export default function BasicDetailCard({
+  lpModel: model,
+  handleEditClick,
+}: {
+  lpModel: Student;
+  handleEditClick: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <IconButton
+            onClick={() => {
+              handleEditClick();
+            }}
+          >
+            <PencilSimpleIcon />
+          </IconButton>
+        }
+        avatar={
+          <Avatar>
+            <UserIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.basic-details')}
+      />
+      <PropertyList
+        divider={<Divider />}
+        orientation="vertical"
+        sx={{ '--PropertyItem-padding': '12px 24px' }}
+      >
+        {(
+          [
+            {
+              key: 'Customer ID',
+              value: (
+                <Chip
+                  label={model.id}
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
+            { key: 'Email', value: model.email },
+            { key: 'Quota', value: model.quota },
+            { key: 'Status', value: model.status },
+          ] satisfies { key: string; value: React.ReactNode }[]
+        ).map(
+          (item): React.JSX.Element => (
+            <PropertyItem
+              key={item.key}
+              name={item.key}
+              value={item.value}
+            />
+          )
+        )}
+      </PropertyList>
+    </Card>
+  );
+}

002_source/cms/src/app/dashboard/users/xxx/TitleCard.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { useTranslation } from 'react-i18next';
+import type { Student } from '@/components/dashboard/student/type.d';
+
+// import type { CrCategory } from '@/components/dashboard/cr/categories/type';
+
+function getImageUrlFrRecord(record: Student): string {
+  // TODO: fix this
+  //  `http://127.0.0.1:8090/api/files/${'record.collectionId'}/${'record.id'}/${'record.cat_image'}`;
+  return 'getImageUrlFrRecord(helloworld)';
+}
+
+export default function SampleTitleCard({ lpModel }: { lpModel: Student }): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          variant="rounded"
+          src={getImageUrlFrRecord(lpModel)}
+          sx={{ '--Avatar-size': '64px' }}
+        >
+          {t('empty')}
+        </Avatar>
+        <div>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
+            <Typography variant="h4">{lpModel.email}</Typography>
+            <Chip
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
+              label={lpModel.quota}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
+            {lpModel.status}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}

002_source/cms/src/app/dashboard/users/xxx/page.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
+import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
+import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
+import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
+
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { config } from '@/config';
+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 { Notifications } from '@/components/dashboard/student/notifications';
+import FormLoading from '@/components/loading';
+import BasicDetailCard from './BasicDetailCard';
+import TitleCard from './TitleCard';
+import { defaultStudent } from '@/components/dashboard/student/_constants';
+import type { Student } from '@/components/dashboard/student/type.d';
+import { COL_STUDENTS } from '@/constants';
+
+export default function Page(): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+  //
+  const { customerId } = useParams<{ customerId: string }>();
+  //
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [showLessonCategory, setShowLessonCategory] = React.useState<Student>(defaultStudent);
+
+  function handleEditClick(): void {
+    router.push(paths.dashboard.students.edit(showLessonCategory.id));
+  }
+
+  React.useEffect(() => {
+    if (customerId) {
+      pb.collection(COL_STUDENTS)
+        .getOne(customerId)
+        .then((model: RecordModel) => {
+          setShowLessonCategory({ ...defaultStudent, ...model });
+        })
+        .catch((err) => {
+          logger.error(err);
+          toast(t('list.error'));
+
+          setShowError({ show: true, detail: JSON.stringify(err) });
+        })
+        .finally(() => {
+          setShowLoading(false);
+        });
+    }
+  }, [customerId]);
+
+  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;
+
+  if (showLoading) return <FormLoading />;
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack spacing={3}>
+          <div>
+            <Link
+              color="text.primary"
+              component={RouterLink}
+              href={paths.dashboard.students.list}
+              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
+              variant="subtitle2"
+            >
+              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
+              Students
+            </Link>
+          </div>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={3}
+            sx={{ alignItems: 'flex-start' }}
+          >
+            <TitleCard lpModel={showLessonCategory} />
+          </Stack>
+        </Stack>
+        <Grid
+          container
+          spacing={4}
+        >
+          <Grid
+            lg={4}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <BasicDetailCard
+                lpModel={showLessonCategory}
+                handleEditClick={handleEditClick}
+              />
+              <SampleSecurityCard />
+            </Stack>
+          </Grid>
+          <Grid
+            lg={8}
+            xs={12}
+          >
+            <Stack spacing={4}>
+              <SamplePaymentCard />
+              <SampleAddressCard />
+              <Notifications notifications={SampleNotifications} />
+            </Stack>
+          </Grid>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+}

002_source/ionic_mobile/src/RouteConfig.tsx

@@ -100,6 +100,7 @@ function RouteConfig() {
         <ConnectiveRevisionSelectCategory />
       </Route>
       {/*  */}
+      {/* http://localhost:5173/matching_frenzy/r/000000000000001 */}
       <Route exact path={`${MATCHING_FRENZY_LINK}/r/:p_route`}>
         <MatchingFrenzyMatchRun />
       </Route>

002_source/ionic_mobile/src/contexts/AppState.tsx

@@ -30,7 +30,9 @@ export const AppStateProvider: React.FC<{ children: ReactNode }> = ({ children }
   // user_config.json
   // 012_put_matching_frenzy_count_down_time_to_config_file
   const [user_config_json, setUserConfigJson] = useState<any>({});
-  const [MATCHING_FRENZY_COUNT_DOWN_S, setMATCHING_FRENZY_COUNT_DOWN_S] = useState<number>(120);
+
+  // TODO: resume to 120
+  const [MATCHING_FRENZY_COUNT_DOWN_S, setMATCHING_FRENZY_COUNT_DOWN_S] = useState<number>(300);
   useEffect(() => {
     fetch('/data/user_config.json')
       .then((res) => res.json())

002_source/ionic_mobile/src/hooks/fetchMFQuestions.tsx

@@ -0,0 +1,28 @@
+import { QuizMFQuestion } from '../types/QuizMFQuestion';
+import { usePocketBase } from './usePocketBase';
+import { QueryClient } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+    },
+  },
+});
+
+const fetchMFQuestions = async (cat_id: string, pb: any) => {
+  const response = await queryClient.fetchQuery({
+    queryKey: ['fetchData'],
+    staleTime: 60 * 1000,
+    queryFn: async () => {
+      return await pb.collection('QuizMFQuestions').getList<QuizMFQuestion>(1, 9999, {
+        filter: `cat_id = "${cat_id}"`,
+        $autoCancel: false,
+      });
+    },
+  });
+
+  return response;
+};
+
+export default fetchMFQuestions;

002_source/ionic_mobile/src/hooks/useListQuizMFQuestionsByCategoryId.tsx

@@ -0,0 +1,44 @@
+import { QuizMFQuestion } from '../types/QuizMFQuestion';
+import { usePocketBase } from './usePocketBase';
+import { QueryClient } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+    },
+  },
+});
+
+const useListQuizMFQuestionsByCategoryId = (cat_id: string) => {
+  const { user, pb } = usePocketBase();
+
+  const fetchData = async () => {
+    const response = await queryClient.fetchQuery({
+      queryKey: ['fetchData'],
+      staleTime: 60 * 1000,
+      queryFn: async () => {
+        return await pb.collection('QuizMFQuestions').getList<QuizMFQuestion>(1, 9999, {
+          filter: `cat_id = "${cat_id}"`,
+          $autoCancel: false,
+        });
+      },
+    });
+
+    return response;
+  };
+
+  return useQuery({
+    queryKey: ['useListQuizMFQuestionsByCategoryId'],
+    staleTime: 60 * 1000,
+    queryFn: async () => {
+      return await pb.collection('QuizMFQuestions').getList<QuizMFQuestion>(1, 9999, {
+        filter: `cat_id = "${cat_id}"`,
+        $autoCancel: false,
+      });
+    },
+    // enabled: !!user.id,
+  });
+};
+
+export default useListQuizMFQuestionsByCategoryId;

002_source/ionic_mobile/src/pages/MatchingFrenzy/CountDown.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-// import Helloworld from './Helloworld';
+import React, { useEffect } from 'react';
 import './style.css';
 
 function CountDown({

002_source/ionic_mobile/src/pages/MatchingFrenzy/CountDownDisplay/index.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { alarmOutline, arrowBackCircleOutline } from 'ionicons/icons';
+import { IonButton, IonContent, IonIcon, IonPage, useIonRouter } from '@ionic/react';
+import { useAppStateContext } from '../../../contexts/AppState';
+
+function CountDownDisplay() {
+  const { MATCHING_FRENZY_COUNT_DOWN_S } = useAppStateContext();
+
+  const [countdown_s, setCountDown_s] = useState<number>(MATCHING_FRENZY_COUNT_DOWN_S);
+  const [show_time_left_s, setShowTimeLeft] = useState<string>('0:00');
+
+  return (
+    <div>
+      <IonIcon icon={alarmOutline}></IonIcon>
+      {countdown_s > 0 ? show_time_left_s : 'times up'}
+    </div>
+  );
+}
+
+export default CountDownDisplay;

002_source/ionic_mobile/src/pages/MatchingFrenzy/MatchRun.tsx

@@ -3,47 +3,48 @@ import { alarmOutline, arrowBackCircleOutline } from 'ionicons/icons';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import { LoadingScreen } from '../../components/LoadingScreen';
-import { MATCHING_FRENZY_LINK, QUIZ_MAIN_MENU_LINK } from '../../constants';
+import { MATCHING_FRENZY_LINK } from '../../constants';
 import { useAppStateContext } from '../../contexts/AppState';
 import { useMyIonQuizContext } from '../../contexts/MyIonQuiz';
 import IMatchingFrenzyQuestion from '../../interfaces/IMatchingFrenzyQuestion';
-import { listMatchingFrenzyContent } from '../../public_data/listMatchingFrenzyContent';
 import { shuffleArray } from '../../utils/shuffleArray';
 import CountDown from './CountDown';
 import MatchingFrenzyCard from './MatchingFrenzyCard';
 import PressStartToBegin from './PressStartToBegin';
 import './style.css';
 import ConfirmUserQuitQuiz from '../../components/ConfirmUserQuitQuiz';
+import formatTimeDisplay from './formatTimeDisplay';
+import fetchMFQuestions from '../../hooks/fetchMFQuestions';
+import { usePocketBase } from '../../hooks/usePocketBase';
 
 function MatchingFrenzyMatchRun() {
   const [loading, setLoading] = useState<boolean>(true);
-
   const router = useIonRouter();
   const { p_route } = useParams<{ p_route: string }>();
-  const i_p_route = parseInt(p_route);
-
-  const [question_list, setQuestionList] = useState<IMatchingFrenzyQuestion[] | []>([]);
+  const { p_route: cat_id } = useParams<{ p_route: string }>();
+  let [start_match, setStartMatch] = useState(false);
+  let [test_random, setTestRandom] = useState(0);
+  const [show_confirm_user_exit, setShowConfirmUserExit] = useState<boolean>(false);
+  const { setMatchingFrenzyInProgress } = useAppStateContext();
+  const [question_list, setQuestionList] = useState<IMatchingFrenzyQuestion[]>([]);
   const [current_question_meta, setCurrentQuestionMeta] = useState<IMatchingFrenzyQuestion | undefined>(undefined);
-
   const [current_question, setCurrentQuestion] = useState(0);
-  const [num_correct, setNumCorrect] = useState(0);
-
-  const { setTabActive } = useAppStateContext();
-
-  const [answer_list, setAnswerList] = useState<string[]>([]);
-
   const { MATCHING_FRENZY_COUNT_DOWN_S } = useAppStateContext();
   const [countdown_s, setCountDown_s] = useState<number>(MATCHING_FRENZY_COUNT_DOWN_S);
   const [show_time_left_s, setShowTimeLeft] = useState<string>('0:00');
-  const { setMatchingFrenzyInProgress } = useAppStateContext();
-  const { setMatchingFrenzyCurrentTest, setMatchingFrenzyResult, saveMatchingFrenzyResultToScoreBoard } =
-    useMyIonQuizContext();
+  const [num_correct, setNumCorrect] = useState(0);
+  const [answer_list, setAnswerList] = useState<string[]>([]);
 
-  let [start_match, setStartMatch] = useState(false);
-  let [test_random, setTestRandom] = useState(0);
+  // TODO: review useless
+  const i_p_route = parseInt(p_route);
 
-  const formatTimeDisplay = (s: number) => {
-    return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+  function processStartMatch() {
+    setMatchingFrenzyInProgress(true);
+    setStartMatch(true);
+  }
+
+  const incNumCorrect = () => {
+    setNumCorrect(num_correct + 1);
   };
 
   const nextQuestion = () => {
@@ -71,15 +72,8 @@ function MatchingFrenzyMatchRun() {
       setCurrentQuestionMeta(question_list[next_question_num]);
     }
   };
-
-  const incNumCorrect = () => {
-    setNumCorrect(num_correct + 1);
-  };
-
-  function processStartMatch() {
-    setMatchingFrenzyInProgress(true);
-    setStartMatch(true);
-  }
+  const { setMatchingFrenzyCurrentTest, setMatchingFrenzyResult, saveMatchingFrenzyResultToScoreBoard } =
+    useMyIonQuizContext();
 
   useEffect(() => {
     setShowTimeLeft(formatTimeDisplay(countdown_s));
@@ -102,9 +96,9 @@ function MatchingFrenzyMatchRun() {
   }, [countdown_s]);
 
   const [init_ans, setInitAns] = useState<string[]>([]);
-
   useEffect(() => {
     if (!current_question_meta) return;
+
     let init_options = [...question_list.map((q) => q.word), ...answer_list, ...init_ans];
 
     let all_answer_list = [...new Set(init_options)];
@@ -115,83 +109,73 @@ function MatchingFrenzyMatchRun() {
     setAnswerList(shuffleArray([...sliced_shuffle_array, current_question_meta.word]));
   }, [current_question_meta]);
 
+  const { user, pb } = usePocketBase();
+
   useEffect(() => {
-    (async () => {
-      const res_json = await listMatchingFrenzyContent();
-      const cat_json = res_json[i_p_route];
-      const init_answer = cat_json.init_answer;
-      setInitAns(cat_json.init_answer);
+    fetchMFQuestions(cat_id, pb)
+      .then((result) => {
+        console.log(result);
+        const cat_json = result.items;
+        const init_answer = result.items[0].init_answer;
+        setInitAns(init_answer);
 
-      let temp = res_json[i_p_route].content;
-      let shuffled_temp = shuffleArray(temp);
+        let temp = result.items;
+        let shuffled_temp = shuffleArray(temp);
 
-      setQuestionList(shuffled_temp);
-      setCurrentQuestionMeta(cat_json.content[current_question]);
-    })();
+        setQuestionList(shuffled_temp);
+        setCurrentQuestionMeta(result.items[current_question] as unknown as IMatchingFrenzyQuestion);
 
-    setTabActive(QUIZ_MAIN_MENU_LINK);
-    setTestRandom(Math.random());
-  }, []);
-
-  const [show_confirm_user_exit, setShowConfirmUserExit] = useState<boolean>(false);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, [cat_id]);
 
   if (!current_question_meta) return <LoadingScreen />;
+  if (loading) return <LoadingScreen />;
 
   return (
     <>
       <IonPage>
         <IonContent fullscreen>
           {start_match ? (
-            <>
-              <div>
-                <div
-                  style={{
-                    marginLeft: '1rem',
-                    marginRight: '1rem',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                  }}
-                >
-                  <div style={{ width: '33vw' }}>
-                    <IonButton color="dark" fill="clear" shape="round" onClick={() => setShowConfirmUserExit(true)}>
-                      <IonIcon slot="icon-only" size="large" icon={arrowBackCircleOutline}></IonIcon>
-                    </IonButton>
-                  </div>
-                  <div>
-                    <IonIcon icon={alarmOutline}></IonIcon>
-                    {countdown_s > 0 ? show_time_left_s : 'times up'}
-                  </div>
-                  <div style={{ width: '33vw', display: 'flex', justifyContent: 'flex-end' }}>
-                    Matches:{num_correct}
-                  </div>
+            <div>
+              <div
+                style={{
+                  marginLeft: '1rem',
+                  marginRight: '1rem',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <div style={{ width: '33vw' }}>
+                  <IonButton color="dark" fill="clear" shape="round" onClick={() => setShowConfirmUserExit(true)}>
+                    <IonIcon slot="icon-only" size="large" icon={arrowBackCircleOutline}></IonIcon>
+                  </IonButton>
                 </div>
-                <div style={{ margin: '1rem' }}></div>
-                {/*  */}
-                {/*
-                <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
-                  <div style={{ display: 'flex', flexDirection: 'row', gap: '0.3rem' }}>
-                    <IonIcon icon={alarmOutline}></IonIcon>
-                    {countdown_s > 0 ? show_time_left_s : 'times up'}
-                  </div>
-                  <div>Matches:{num_correct}</div>
+                <div>
+                  <IonIcon icon={alarmOutline}></IonIcon>
+                  {countdown_s > 0 ? show_time_left_s : 'times up'}
                 </div>
-                */}
-
-                <MatchingFrenzyCard
-                  num_correct={num_correct}
-                  incNumCorrect={incNumCorrect}
-                  //
-                  nextQuestion={nextQuestion}
-                  question_meta={{
-                    //
-                    word_c: current_question_meta.word_c,
-                    modal_answer: current_question_meta.word,
-                  }}
-                  shuffle_word_list={answer_list}
-                />
+                <div style={{ width: '33vw', display: 'flex', justifyContent: 'flex-end' }}>Matches:{num_correct}</div>
               </div>
-            </>
+              <div style={{ margin: '1rem' }}></div>
+
+              <MatchingFrenzyCard
+                num_correct={num_correct}
+                incNumCorrect={incNumCorrect}
+                //
+                nextQuestion={nextQuestion}
+                question_meta={{
+                  //
+                  word_c: current_question_meta.word_c,
+                  modal_answer: current_question_meta.word,
+                }}
+                shuffle_word_list={answer_list}
+              />
+            </div>
           ) : (
             <PressStartToBegin processStartMatch={processStartMatch} />
           )}
@@ -210,6 +194,7 @@ function MatchingFrenzyMatchRun() {
 }
 
 export default MatchingFrenzyMatchRun;
+
 function isEndOfQuestionList(current_question: number, question_list: [] | IMatchingFrenzyQuestion[]) {
   return current_question >= question_list.length - 1;
 }

002_source/ionic_mobile/src/pages/MatchingFrenzy/formatTimeDisplay.tsx

@@ -0,0 +1,5 @@
+const formatTimeDisplay = (s: number) => {
+  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+};
+
+export default formatTimeDisplay;

002_source/ionic_mobile/src/types/QuizMFQuestion.ts

@@ -0,0 +1,19 @@
+export interface QuizMFQuestion {
+  id: string;
+  created: Date;
+  updated: Date;
+  word: string;
+  word_c: string;
+  cat_id: string;
+  visible?: string;
+  sound?: File;
+  cat_image?: File;
+  expand?: {
+    cat_id?: {
+      id: string;
+      cat_name: string;
+      cat_image?: File;
+    };
+  };
+  init_answer: string[];
+}

002_source/pocketbase/pb_hooks/seed/041_QuizCRQuestions.js

@@ -11,7 +11,7 @@ module.exports = ($app) => {
       "news (CR)",
       getAsset("ci_news.jpg"),
       1,
-      {},
+      ["A", "B", "C"],
       "visible",
       "news",
       getAsset("keyboard.mp3"),
@@ -20,14 +20,14 @@ module.exports = ($app) => {
       "question_sh_1",
       "modal_ans_1",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("2"),
       "sports (CR)",
       getAsset("ci_sports.jpg"),
       2,
-      {},
+      ["A", "B", "C"],
       "visible",
       "sports",
       getAsset("mouse.mp3"),
@@ -36,14 +36,14 @@ module.exports = ($app) => {
       "question_sh_2",
       "modal_ans_2",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("3"),
       "technology (CR)",
       getAsset("ci_technology.jpg"),
       3,
-      {},
+      ["A", "B", "C"],
       "visible",
       "technology",
       getAsset("keyboard.mp3"),
@@ -52,14 +52,14 @@ module.exports = ($app) => {
       "question_sh_3",
       "modal_ans_3",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("4"),
       "art (CR)",
       getAsset("ci_art.jpg"),
       4,
-      {},
+      ["A", "B", "C"],
       "visible",
       "art",
       getAsset("mouse.mp3"),
@@ -68,14 +68,14 @@ module.exports = ($app) => {
       "question_sh_4",
       "modal_ans_4",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("5"),
       "basic (CR)",
       getAsset("ci_basic.jpg"),
       5,
-      {},
+      ["A", "B", "C"],
       "visible",
       "basic",
       getAsset("keyboard.mp3"),
@@ -84,14 +84,14 @@ module.exports = ($app) => {
       "question_sh_5",
       "modal_ans_5",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("6"),
       "nature (CR)",
       getAsset("ci_nature.jpg"),
       6,
-      {},
+      ["A", "B", "C"],
       "visible",
       "nature",
       getAsset("keyboard.mp3"),
@@ -100,14 +100,14 @@ module.exports = ($app) => {
       "question_sh_6",
       "modal_ans_6",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("7"),
       "workplace (CR)",
       getAsset("ci_workplace.jpg"),
       7,
-      {},
+      ["A", "B", "C"],
       "visible",
       "workplace",
       getAsset("keyboard.mp3"),
@@ -116,14 +116,14 @@ module.exports = ($app) => {
       "question_sh_7",
       "modal_ans_7",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("8"),
       "workplace (CR)",
       getAsset("ci_workplace.jpg"),
       8,
-      {},
+      ["A", "B", "C"],
       "visible",
       "workplace",
       getAsset("keyboard.mp3"),
@@ -132,14 +132,14 @@ module.exports = ($app) => {
       "question_sh_8",
       "modal_ans_8",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
     [
       getId("99"),
       "test hidden (CR)",
       getAsset("ci_workplace.jpg"),
       9,
-      {},
+      ["A", "B", "C"],
       "hidden",
       "test",
       getAsset("keyboard.mp3"),
@@ -148,7 +148,7 @@ module.exports = ($app) => {
       "question_sh_9",
       "modal_ans_9",
       cat_id_technology,
-      {},
+      ["A", "B", "C"],
     ],
   ];
   dirtyTruncateTable("QuizCRQuestions");
@@ -171,7 +171,7 @@ module.exports = ($app) => {
     record.set("question_fh", lesson_type[9]);
     record.set("question_sh", lesson_type[10]);
     record.set("modal_ans", lesson_type[11]);
-    record.set("caf_id", lesson_type[12]);
+    record.set("cat_id", lesson_type[12]);
     record.set("options", lesson_type[13]);
 
     $app.save(record);