fix : update

Desc : update project

Project/Frontend/SignConnectPlus/src/pages/parameter/curriculum-management/list/types/types.tsx

+import { Column } from 'react-table';
+
+export interface dataProps {
+    _id: number | string | undefined;
+    curriculumCode: String;
+    curriculumLevel: String;
+    curriculumName: String;
+    curriculumImage: String;
+    tutorials: tutorialItemProps[];
+    status: Number;
+    createdBy: String;
+    updatedBy: String;
+    createdAt: Date;
+    updatedAt: Date; 
+}
+
+export interface ReactTableProps {
+    columns: Column[]
+    data: dataProps[]
+    handleAddEdit: () => void
+}
+
+export interface curriculumProps {
+    _id: number | string | undefined;
+    curriculumCode: String;
+    curriculumLevel: String;
+    curriculumName: String;
+    curriculumImage: String;
+    tutorials: tutorialItemProps[];
+    status: Number;
+    createdBy: String;
+    updatedBy: String;
+    createdAt: Date;
+    updatedAt: Date; 
+}
+
+export interface tutorialItemProps {
+    _id: number | string | undefined;
+    tutorialCode: String;
+    tutorialTitle: String;
+    tutorialImage: String;
+    status: Number;
+    createdBy: String;
+    updatedBy: String;
+    createdAt: Date;
+    updatedAt: Date;
+    taskItems: taskItemProps[]
+}
+
+export interface taskItemProps {
+    _id: number | string | undefined;
+    title: String;
+    description: String;
+    howToDo: String;
+    referenceImage: String;
+    referenceVideo: String;
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/pages/parameter/tutorial-management/list/list.tsx

+import { MouseEvent, useMemo, useState } from 'react';
+
 // material-ui
+import {
+    Button,
+    IconButton,
+    Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Tooltip,
+    useTheme
+} from '@mui/material';
+
+// third-party
+import { Cell, Column, HeaderGroup, Row, useFilters, useGlobalFilter, usePagination, useTable } from 'react-table';
 
 // project import
+import MainCard from 'components/MainCard';
+import ScrollX from 'components/ScrollX';
+import { CSVExport, EmptyTable, TablePagination } from 'components/third-party/ReactTable';
+
+import {
+    DefaultColumnFilter,
+    GlobalFilter,
+    renderFilterTypes
+} from 'utils/react-table';
+
+// assets
+import { DeleteTwoTone, EditTwoTone, EyeTwoTone, PlusOutlined } from '@ant-design/icons';
+
+//types
+import AlertTutorialDelete from 'sections/parameters/tutorial-management/AlertTutorialDelete';
+import { ReactTableProps, dataProps, tutorialProps } from './types/types';
+
+// ==============================|| REACT TABLE ||============================== //
+
+function ReactTable({ columns, data, handleAddEdit }: ReactTableProps) {
+    const filterTypes = useMemo(() => renderFilterTypes, []);
+    const defaultColumn = useMemo(() => ({ Filter: DefaultColumnFilter }), []);
+
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow,
+        preGlobalFilteredRows,
+        setGlobalFilter,
+        globalFilter,
+        page,
+        gotoPage,
+        setPageSize,
+        state: { pageIndex, pageSize }
+    } = useTable(
+        {
+            columns,
+            data,
+            defaultColumn,
+            filterTypes,
+
+            initialState: { pageIndex: 0, pageSize: 10 }
+        },
+        useGlobalFilter,
+        useFilters,
+        usePagination
+    );
+
+    return (
+        <>
+            <Stack direction="row" spacing={2} justifyContent="space-between" sx={{ padding: 2 }}>
+                <GlobalFilter preGlobalFilteredRows={preGlobalFilteredRows} globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
+                <Stack direction="row" alignItems="center" spacing={1}>
+                    <CSVExport data={rows.map((d: Row) => d.original)} filename={'filtering-table.csv'} />
+                    <Button variant="contained" startIcon={<PlusOutlined />} onClick={handleAddEdit}>
+                        Add New Tutorial
+                    </Button>
+                </Stack>
+            </Stack>
+
+            <Table {...getTableProps()}>
+                <TableHead sx={{ borderTopWidth: 2 }}>
+                    {headerGroups.map((headerGroup) => (
+                        <TableRow {...headerGroup.getHeaderGroupProps()}>
+                            {headerGroup.headers.map((column: HeaderGroup) => (
+                                <TableCell {...column.getHeaderProps([{ className: column.className }])}>{column.render('Header')}</TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHead>
+                <TableBody {...getTableBodyProps()}>
+                    {page.length > 0 ? (
+                        page.map((row, i) => {
+                            prepareRow(row);
+                            return (
+                                <TableRow {...row.getRowProps()}>
+                                    {row.cells.map((cell: Cell) => (
+                                        <TableCell {...cell.getCellProps([{ className: cell.column.className }])}>{cell.render('Cell')}</TableCell>
+                                    ))}
+                                </TableRow>
+                            );
+                        })
+                    ) : (
+                        <EmptyTable msg="No Data" colSpan={10} />
+                    )}
+                    <TableRow>
+                        <TableCell sx={{ p: 2 }} colSpan={10}>
+                            <TablePagination gotoPage={gotoPage} rows={rows} setPageSize={setPageSize} pageIndex={pageIndex} pageSize={pageSize} />
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </>
+    );
+}
 
 // ==============================|| List ||============================== //
+const List = () => {
+    const theme = useTheme();
+
+    // table
+    const data: dataProps[] = []
+
+    const columns = useMemo(
+        () =>
+            [
+                {
+                    Header: '#',
+                    accessor: 'id',
+                    className: 'cell-center',
+                    Cell: ({ row }: { row: Row }) => {
+                        if (row.id === undefined || row.id === null || row.id === '') {
+                            return <>-</>
+                        }
+                        if (typeof row.id === 'string') {
+                            return <>{(parseInt(row.id) + 1).toString()}</>;
+                        }
+                        if (typeof row.id === 'number') {
+                            return <>{row.id + 1}</>;
+                        }
+                        // Handle any other data types if necessary
+                        return <>-</>;
+                    }
+                },
+                {
+                    Header: 'Tutorial Code',
+                    accessor: 'tutorialCode'
+                },
+                {
+                    Header: 'Tutorial Title',
+                    accessor: 'tutorialTitle'
+                },
+                {
+                    Header: 'Status',
+                    accessor: 'status'
+                },
+                {
+                    Header: 'Created By',
+                    accessor: 'createdBy'
+                },
+                {
+                    id: "actions",
+                    Header: 'Actions',
+                    accessor: 'actions',
+                    className: 'cell-center',
+                    Cell: ({ row }: { row: Row }) => {
+                        return (
+                            <>
+                                <Stack direction="row" alignItems="center" justifyContent="center" spacing={0}>
+                                    <Tooltip title="View">
+                                        <IconButton
+                                            color="secondary"
+                                            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                                                e.stopPropagation();
+                                            }}
+                                        >
+                                            <EyeTwoTone twoToneColor={theme.palette.secondary.main} />
+                                        </IconButton>
+                                    </Tooltip>
+                                    <Tooltip title="Edit">
+                                        <IconButton
+                                            color="primary"
+                                            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                                                // handleAddEdit()
+                                                // setTutorial({
+                                                //     id: row.values.id,
+                                                //     nutritionName: row.values.nutritionName,
+                                                //     nutritionCategory: row.values.nutritionCategory.id,
+                                                //     nutritionUnitOfMeasure: row.values.nutritionUnitOfMeasure.id
+                                                // })
+                                                e.stopPropagation();
+                                            }}
+                                        >
+                                            <EditTwoTone twoToneColor={theme.palette.primary.main} />
+                                        </IconButton>
+                                    </Tooltip>
+                                    <Tooltip title="Delete">
+                                        <IconButton
+                                            color="error"
+                                            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                                                e.stopPropagation();
+                                                // setTutorialId(row.values.id)
+                                                // setOpenAlert(true)
+                                            }}
+                                        >
+                                            <DeleteTwoTone twoToneColor={theme.palette.error.main} />
+                                        </IconButton>
+                                    </Tooltip>
+                                </Stack>
+                            </>
+                        )
+                    }
+                }
+            ] as Column[],
+        []
+    );
+
+    //dialog model 
+    const [addEdit, setAddEdit] = useState<boolean>(false);
+    const [tutorial, setTutorial] = useState<tutorialProps>();
+
+    const handleAddEdit = () => {
+        setAddEdit(!addEdit);
+        if (tutorial && !addEdit) setTutorial(undefined);
+    };
+
+    //alert model
+    const [openAlert, setOpenAlert] = useState(false);
+    // const [tutorialId, setTutorialId] = useState<number | null>(null)
+    const tutorialId: number | null = null
+
+
+    const handleAlertClose = () => {
+        setOpenAlert(!openAlert);
+    };
 
-const List = () => (
-    <>
-    </>
-);
+    return (
+        <>
+            <MainCard content={false}>
+                <ScrollX>
+                    <ReactTable columns={columns} data={data} handleAddEdit={handleAddEdit} />
+                </ScrollX>
+                {/* alert model */}
+                {!tutorial && <AlertTutorialDelete title={""} open={openAlert} handleClose={handleAlertClose} deleteId={tutorialId} />}
+            </MainCard>
+        </>
+    )
+}
 
 export default List;

Project/Frontend/SignConnectPlus/src/pages/parameter/tutorial-management/list/types/types.tsx

+import { Column } from 'react-table';
+
+export interface dataProps {
+    _id: number | string | undefined;
+    tutorialCode: String;
+    tutorialTitle: String;
+    tutorialImage: String;
+    status: Number;
+    createdBy: String;
+    updatedBy: String;
+    createdAt: Date;
+    updatedAt: Date;
+    taskItems: taskItemProps[]
+}
+
+export interface ReactTableProps {
+    columns: Column[]
+    data: dataProps[]
+    handleAddEdit: () => void
+}
+
+export interface tutorialProps {
+    _id: number | string | undefined;
+    tutorialCode: String;
+    tutorialTitle: String;
+    tutorialImage: String;
+    status: Number;
+    createdBy: String;
+    updatedBy: String;
+    createdAt: Date;
+    updatedAt: Date;
+    taskItems: taskItemProps[]
+}
+
+export interface taskItemProps {
+    _id: number | string | undefined;
+    title: String;
+    description: String;
+    howToDo: String;
+    referenceImage: String;
+    referenceVideo: String;
+}
\ No newline at end of file

Project/Frontend/SignConnectPlus/src/sections/parameters/curriculum-management/AlertCurriculumDelete.tsx

+// material-ui
+import { Button, Dialog, DialogContent, Stack, Typography } from '@mui/material';
+
+// project import
+import Avatar from 'components/@extended/Avatar';
+import { PopupTransition } from 'components/@extended/Transitions';
+
+// assets
+import { DeleteFilled } from '@ant-design/icons';
+
+// types
+interface Props {
+  title: string;
+  open: boolean;
+  handleClose: (status: boolean) => void;
+  deleteId: number | null;
+}
+
+// ==============================|| Curriculum - DELETE ||============================== //
+
+export default function AlertCurriculumDelete({ title, open, handleClose, deleteId }: Props) {
+
+  // const dispatch = useDispatch();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => handleClose(false)}
+      keepMounted
+      TransitionComponent={PopupTransition}
+      maxWidth="xs"
+      aria-labelledby="column-delete-title"
+      aria-describedby="column-delete-description"
+    >
+      <DialogContent sx={{ mt: 2, my: 1 }}>
+        <Stack alignItems="center" spacing={3.5}>
+          <Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
+            <DeleteFilled />
+          </Avatar>
+          <Stack spacing={2}>
+            <Typography variant="h4" align="center">
+              Are you sure you want to delete?
+            </Typography>
+          </Stack>
+
+          <Stack direction="row" spacing={2} sx={{ width: 1 }}>
+            <Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
+              Cancel
+            </Button>
+            <Button fullWidth color="error" variant="contained" onClick={() => {
+              // dispatch(deleteNutrition(deleteId!)) 
+              handleClose(true)
+            }} autoFocus>
+              Delete
+            </Button>
+          </Stack>
+        </Stack>
+      </DialogContent>
+    </Dialog >
+  );
+}

Project/Frontend/SignConnectPlus/src/sections/parameters/tutorial-management/AlertTutorialDelete.tsx

+// material-ui
+import { Button, Dialog, DialogContent, Stack, Typography } from '@mui/material';
+
+// project import
+import Avatar from 'components/@extended/Avatar';
+import { PopupTransition } from 'components/@extended/Transitions';
+
+// assets
+import { DeleteFilled } from '@ant-design/icons';
+
+// types
+interface Props {
+  title: string;
+  open: boolean;
+  handleClose: (status: boolean) => void;
+  deleteId: number | null;
+}
+
+// ==============================|| Tutorial - DELETE ||============================== //
+
+export default function AlertTutorialDelete({ title, open, handleClose, deleteId }: Props) {
+
+  // const dispatch = useDispatch();
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => handleClose(false)}
+      keepMounted
+      TransitionComponent={PopupTransition}
+      maxWidth="xs"
+      aria-labelledby="column-delete-title"
+      aria-describedby="column-delete-description"
+    >
+      <DialogContent sx={{ mt: 2, my: 1 }}>
+        <Stack alignItems="center" spacing={3.5}>
+          <Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
+            <DeleteFilled />
+          </Avatar>
+          <Stack spacing={2}>
+            <Typography variant="h4" align="center">
+              Are you sure you want to delete?
+            </Typography>
+          </Stack>
+
+          <Stack direction="row" spacing={2} sx={{ width: 1 }}>
+            <Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
+              Cancel
+            </Button>
+            <Button fullWidth color="error" variant="contained" onClick={() => {
+              // dispatch(deleteNutrition(deleteId!)) 
+              handleClose(true)
+            }} autoFocus>
+              Delete
+            </Button>
+          </Stack>
+        </Stack>
+      </DialogContent>
+    </Dialog >
+  );
+}