[WIP] Improvement

frontend/client-portal/src/components/BasePagination.tsx

@@ -0,0 +1,17 @@
+import { Pagination } from "@mui/material";
+import { Box } from "@mui/system";
+import { LaravelPaginatedData } from "../@types/paginated-data";
+
+
+export interface Props {
+  paginationData?: LaravelPaginatedData;
+  onPageChange: any;
+}
+
+export default function BasePagination({ paginationData, onPageChange }: Props) {
+  return (
+    <Box sx={{ m: 2 }} display="flex" justifyContent="flex-end">
+      <Pagination count={paginationData?.last_page} page={paginationData?.current_page} variant="outlined" shape="rounded" onChange={onPageChange}/>
+    </Box>
+  )
+}

frontend/client-portal/src/components/Breadcrumbs.tsx

@@ -0,0 +1,92 @@
+import { ReactElement } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+// @mui
+import {
+  Box,
+  Link,
+  Typography,
+  BreadcrumbsProps,
+  Breadcrumbs as MUIBreadcrumbs,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type TLink = {
+  href?: string;
+  name: string;
+  icon?: ReactElement;
+};
+
+export interface Props extends BreadcrumbsProps {
+  links: TLink[];
+  activeLast?: boolean;
+}
+
+export default function Breadcrumbs({ links, activeLast = false, ...other }: Props) {
+  const currentLink = links[links.length - 1].name;
+
+  const listDefault = links.map((link) => <LinkItem key={link.name} link={link} />);
+
+  const listActiveLast = links.map((link) => (
+    <div key={link.name}>
+      {link.name !== currentLink ? (
+        <LinkItem link={link} />
+      ) : (
+        <Typography
+          variant="body2"
+          sx={{
+            maxWidth: 260,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            color: 'text.disabled',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {currentLink}
+        </Typography>
+      )}
+    </div>
+  ));
+
+  return (
+    <MUIBreadcrumbs
+      separator={
+        <Box
+          component="span"
+          sx={{ width: 4, height: 4, borderRadius: '50%', bgcolor: 'text.disabled' }}
+        />
+      }
+      {...other}
+    >
+      {activeLast ? listDefault : listActiveLast}
+    </MUIBreadcrumbs>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+type LinkItemProps = {
+  link: TLink;
+};
+
+function LinkItem({ link }: LinkItemProps) {
+  const { href, name, icon } = link;
+  return (
+    <Link
+      key={name}
+      variant="body2"
+      component={RouterLink}
+      to={href || '#'}
+      sx={{
+        lineHeight: 2,
+        display: 'flex',
+        alignItems: 'center',
+        color: 'text.primary',
+        '& > div': { display: 'inherit' },
+      }}
+    >
+      {icon && <Box sx={{ mr: 1, '& svg': { width: 20, height: 20 } }}>{icon}</Box>}
+      {name}
+    </Link>
+  );
+}

frontend/client-portal/src/components/HeaderBreadcrumbs.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { isString } from 'lodash';
+// @mui
+import { Box, Typography, Link } from '@mui/material';
+//
+import Breadcrumbs, { Props as BreadcrumbsProps } from './Breadcrumbs';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BreadcrumbsProps {
+  action?: ReactNode;
+  heading: string;
+  moreLink?: string | string[];
+}
+
+export default function HeaderBreadcrumbs({
+  links,
+  action,
+  heading,
+  moreLink = '' || [],
+  sx,
+  ...other
+}: Props) {
+  return (
+    <Box sx={{ mb: 5, ...sx }}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ flexGrow: 1 }}>
+          <Typography variant="h4" gutterBottom>
+            {heading}
+          </Typography>
+          <Breadcrumbs links={links} {...other} />
+        </Box>
+
+        {action && <Box sx={{ flexShrink: 0 }}>{action}</Box>}
+      </Box>
+
+      <Box sx={{ mt: 2 }}>
+        {isString(moreLink) ? (
+          <Link href={moreLink} target="_blank" rel="noopener" variant="body2">
+            {moreLink}
+          </Link>
+        ) : (
+          moreLink.map((href) => (
+            <Link
+              noWrap
+              key={href}
+              href={href}
+              variant="body2"
+              target="_blank"
+              rel="noopener"
+              sx={{ display: 'table' }}
+            >
+              {href}
+            </Link>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}

frontend/client-portal/src/components/editor/EditorToolbar.tsx

@@ -150,11 +150,13 @@ export default function EditorToolbar({ id, isSimple, ...other }: EditorToolbarP
           <select className="ql-align" />
         </div>
 
-        <div className="ql-formats">
-          <button type="button" className="ql-link" />
-          <button type="button" className="ql-image" />
-          <button type="button" className="ql-video" />
-        </div>
+        {!isSimple && (
+          <div className="ql-formats">
+            <button type="button" className="ql-link" />
+            <button type="button" className="ql-image" />
+            <button type="button" className="ql-video" />
+          </div>
+        )}
 
         <div className="ql-formats">
           {!isSimple && <button type="button" className="ql-formula" />}

frontend/client-portal/src/components/editor/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import ReactQuill, { ReactQuillProps } from 'react-quill';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
 // @mui
 import { styled } from '@mui/material/styles';
 import { Box, BoxProps } from '@mui/material';
@@ -33,9 +34,11 @@ const RootStyle = styled(Box)(({ theme }) => ({
 
 // ----------------------------------------------------------------------
 
-export interface Props extends ReactQuillProps {
+export interface Props {
   id?: string;
   error?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
   simple?: boolean;
   helperText?: ReactNode;
   sx?: BoxProps;
@@ -64,7 +67,7 @@ export default function Editor({
       maxStack: 100,
       userOnly: true,
     },
-    syntax: true,
+    syntax: false, // need highlightjs
     clipboard: {
       matchVisual: false,
     },

frontend/client-portal/src/components/hook-form/RHFCheckbox.tsx

@@ -67,3 +67,49 @@ export function RHFMultiCheckbox({ name, options, ...other }: RHFMultiCheckboxPr
     />
   );
 }
+
+
+// ----------------------------------------------------------------------
+interface optionsCustomInterface {
+  value: string;
+  label: string;
+}
+interface RHFCustomMultiCheckboxProps {
+  name: string;
+  options: optionsCustomInterface[];
+}
+
+export function RHFCustomMultiCheckbox({ name, options, ...other }: RHFCustomMultiCheckboxProps) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => {
+        const onSelected = (option: optionsCustomInterface) =>
+          field.value.includes(option.value)
+            ? field.value.filter((value: string) => value !== option.value)
+            : [...field.value, option.value];
+
+        return (
+          <FormGroup>
+            {options.map((option, index) => (
+              <FormControlLabel
+                key={index}
+                control={
+                  <Checkbox
+                    checked={field.value.includes(option.value)}
+                    onChange={() => field.onChange(onSelected(option))}
+                  />
+                }
+                label={option.label}
+                {...other}
+              />
+            ))}
+          </FormGroup>
+        );
+      }}
+    />
+  );
+}

frontend/client-portal/src/components/hook-form/RHFDatepicker.tsx

@@ -0,0 +1,33 @@
+// form
+import { useFormContext, Controller } from 'react-hook-form';
+// @mui
+import { TextField, TextFieldProps } from '@mui/material';
+import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+
+// ----------------------------------------------------------------------
+
+interface IProps {
+  name: string;
+}
+
+export default function RHFDatepicker({ name, ...other }: IProps & TextFieldProps) {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <MobileDatePicker
+            inputFormat="yyyy-MM-dd"
+            value={field.value}
+            onChange={field.onChange}
+            renderInput={(field) => <TextField {...field} fullWidth error={!!error} helperText={error?.message} {...other} />}
+          />
+        </LocalizationProvider>
+      )}
+    />
+  );
+}

frontend/client-portal/src/components/hook-form/RHFEditor.tsx

@@ -24,6 +24,7 @@ export default function RHFEditor({ name, ...other }: Props) {
           value={field.value}
           onChange={field.onChange}
           error={!!error}
+          simple={true}
           helperText={
             <FormHelperText error sx={{ px: 2, textTransform: 'capitalize' }}>
               {error?.message}

frontend/client-portal/src/components/hook-form/index.ts

@@ -8,3 +8,4 @@ export { default as RHFSelect } from './RHFSelect';
 export { default as RHFEditor } from './RHFEditor';
 export { default as RHFTextField } from './RHFTextField';
 export { default as RHFRadioGroup } from './RHFRadioGroup';
+export { default as RHFDatepicker } from './RHFDatepicker';

frontend/client-portal/src/components/nav-section/horizontal/NavList.tsx

@@ -83,7 +83,7 @@ function NavListSub({ list }: NavListSubProps) {
 
   const { pathname } = useLocation();
 
-  const active = getActive(list.path, pathname);
+  const active = getActive(list.path, pathname, list.openWhen);
 
   const [open, setOpen] = useState(false);
 

frontend/client-portal/src/components/nav-section/index.ts

@@ -9,6 +9,9 @@ export function isExternalLink(path: string) {
   return path.includes('http');
 }
 
-export function getActive(path: string, pathname: string) {
-  return path ? !!matchPath({ path: path, end: false }, pathname) : false;
+export function getActive(path: string, pathname: string, openWhen?: string[]) {
+  const listPathWhenActive = [ ...openWhen ?? [], path ];
+
+  return listPathWhenActive.includes(pathname);
+  // return path ? !!matchPath({ path: path, end: false }, pathname) : false;
 }

frontend/client-portal/src/components/nav-section/type.ts

@@ -8,6 +8,7 @@ export type NavListProps = {
   path: string;
   icon?: ReactElement;
   info?: ReactElement;
+  openWhen? : string[];
   children?: {
     title: string;
     path: string;

frontend/client-portal/src/components/nav-section/vertical/NavList.tsx

@@ -18,7 +18,7 @@ type NavListRootProps = {
 export function NavListRoot({ list, isCollapse }: NavListRootProps) {
   const { pathname } = useLocation();
 
-  const active = getActive(list.path, pathname);
+  const active = getActive(list.path, pathname, list.openWhen);
 
   const [open, setOpen] = useState(active);
 

frontend/client-portal/src/components/nav-section/vertical/index.tsx

@@ -30,9 +30,10 @@ export default function NavSectionVertical({
 }: NavSectionProps) {
   return (
     <Box {...other}>
-      {navConfig.map((group) => (
-        <List key={group.subheader} disablePadding sx={{ px: 2 }}>
+      {navConfig.map((group, index) => (
+        <List key={index} disablePadding sx={{ px: 2 }}>
           <ListSubheaderStyle
+            key={index}
             sx={{
               ...(isCollapse && {
                 opacity: 0,