update and bulid ok,

002_source/cms/src/components/dashboard/lp_categories/_constants.ts

@@ -17,6 +17,9 @@ export const LpCategoryCreateFormDefault: CreateForm = {
 export const defaultLpCategory: LpCategory = {
   id: '',
   name: '',
+  cat_name: '',
+  cat_image: '',
+  collectionId: '',
   description: '',
   isActive: true,
   order: 1,

002_source/cms/src/components/dashboard/lp_categories/confirm-delete-modal.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_LESSON_TYPES } from '@/constants';
+import deleteQuizListening from '@/db/QuizListenings/Delete';
+import { LoadingButton } from '@mui/lab';
+import { Button, Container, Modal, Paper } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
+import PocketBase from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+
+const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
+
+export default function ConfirmDeleteModal({
+  open,
+  setOpen,
+  idToDelete,
+  reloadRows,
+}: {
+  open: boolean;
+  setOpen: (b: boolean) => void;
+  idToDelete: string;
+  reloadRows: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  // const handleClose = () => setOpen(false);
+  function handleClose(): void {
+    setOpen(false);
+  }
+
+  const [isDeleteing, setIsDeleteing] = React.useState(false);
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  };
+
+  function performDelete(id: string): Promise<void> {
+    return deleteQuizListening(id)
+      .then(() => {
+        toast(t('dashboard.lessonTypes.delete.success'));
+        reloadRows();
+      })
+      .catch((err) => {
+        logger.error(err);
+        toast(t('dashboard.lessonTypes.delete.error'));
+      })
+      .finally(() => {});
+  }
+
+  function handleUserConfirmDelete(): void {
+    if (idToDelete) {
+      setIsDeleteing(true);
+      performDelete(idToDelete)
+        .then(() => {
+          handleClose();
+        })
+        .catch((err) => {
+          // console.error(err)
+          logger.error(err);
+          toast(t('dashboard.lessonTypes.delete.error'));
+        })
+        .finally(() => {
+          setIsDeleteing(false);
+        });
+    }
+  }
+
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Container maxWidth="sm">
+            <Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
+              <Stack direction="row" spacing={2} sx={{ display: 'flex', p: 3 }}>
+                <Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
+                  <NoteIcon fontSize="var(--Icon-fontSize)" />
+                </Avatar>
+                <Stack spacing={3}>
+                  <Stack spacing={1}>
+                    <Typography variant="h5">{t('Delete Lesson Type ?')}</Typography>
+                    <Typography color="text.secondary" variant="body2">
+                      {t('Are you sure you want to delete lesson type ?')}
+                    </Typography>
+                  </Stack>
+                  <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
+                    <Button color="secondary" onClick={handleClose}>
+                      {t('Cancel')}
+                    </Button>
+                    <LoadingButton
+                      color="error"
+                      variant="contained"
+                      onClick={(e) => {
+                        handleUserConfirmDelete();
+                      }}
+                      loading={isDeleteing}
+                    >
+                      {t('Delete')}
+                    </LoadingButton>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Paper>
+          </Container>
+        </Box>
+      </Modal>
+    </div>
+  );
+}

002_source/cms/src/components/dashboard/lp_categories/lp-categories-table.tsx

@@ -46,9 +46,9 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
                 <ImagesIcon size={32} />
               </Avatar>{' '}
               <div>
-                <Box sx={{ whiteSpace: 'nowrap' }}>{row.name}</Box>
+                <Box sx={{ whiteSpace: 'nowrap' }}>{row.cat_name}</Box>
                 <Typography color="text.secondary" variant="body2">
-                  slug: {row.name}
+                  slug: {row.cat_name}
                 </Typography>
               </div>
             </Stack>
@@ -83,6 +83,8 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
           blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
           pending: { label: 'Pending', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
           NA: { label: 'NA', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
+          visible: { label: 'visible', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
+          hidden: { label: 'hidden', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
         } as const;
         const { label, icon } = mapping[row.visible] ?? { label: 'Unknown', icon: null };
 

002_source/cms/src/db/QuizListenings/Delete.tsx

@@ -0,0 +1,8 @@
+import { COL_QUIZ_LISTENINGS } from '@/constants';
+import type { RecordModel } from 'pocketbase';
+
+import { pb } from '@/lib/pb';
+
+export default function deleteQuizListening(id: string): Promise<boolean> {
+  return pb.collection(COL_QUIZ_LISTENINGS).delete(id);
+}

002_source/cms/src/types/LpCategory.tsx

@@ -40,7 +40,10 @@ export interface RestLpCategoryUpdateForm {
 export interface LpCategory {
   isEmpty?: boolean;
   id: string;
-  name: string; // corresponds to cat_name
+  collectionId: string;
+  name: string;
+  cat_name: string; // corresponds to cat_name
+  cat_image: string; // corresponds to cat_image
   description: string; // additional business field
   isActive: boolean; // additional business field
   order: number; // corresponds to pos
@@ -48,7 +51,7 @@ export interface LpCategory {
   createdAt: Date;
   updatedAt: Date; // new field
   initAnswer?: any; // corresponds to init_answer
-  visible: 'active' | 'blocked' | 'pending' | 'NA'; // additional business field
+  visible: 'active' | 'blocked' | 'pending' | 'NA' | 'visible' | 'hidden'; // additional business field
   quota?: number;
   //
   email?: string;