Merge branch 'mhmfajar-dev' into mhmfajar

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

@@ -0,0 +1,56 @@
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ReactElement } from 'react';
+import Iconify from './Iconify';
+
+// ----------------------------------------------------------------------
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  maxWidth?: string;
+};
+
+// ----------------------------------------------------------------------
+
+const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
+  const handleClose = () => {
+    setOpenDialog(false);
+  };
+
+  let maxWidthDialog = 'md';
+
+  if (maxWidth) {
+    maxWidthDialog = maxWidth;
+  }
+
+  return (
+    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={maxWidthDialog}>
+      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between">
+          {title?.icon ? (
+            <Stack direction="row">
+              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
+              <Typography variant="h6">{title?.name}</Typography>
+            </Stack>
+          ) : (
+            <Typography variant="h6">{title?.name ? title?.name : 'Testing Title'}</Typography>
+          )}
+          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
+        {content ? content : 'Testing Content Dialog'}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MuiDialog;

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

@@ -29,7 +29,7 @@ export type NavItemProps = {
 export interface NavSectionProps extends BoxProps {
   isCollapse?: boolean;
   navConfig: {
-    subheader: string;
+    subheader?: string;
     items: NavListProps[];
   }[];
 }

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

@@ -10,12 +10,18 @@ import { isExternalLink } from '..';
 
 // ----------------------------------------------------------------------
 
-export function NavItemRoot({ item, isCollapse, open = false, active, onOpen }: NavItemProps) {
-  const { title, path, icon, info, children } = item;
+export function NavItemRoot({
+  item,
+  isCollapse,
+  open = false,
+  active = false,
+  onOpen,
+}: NavItemProps) {
+  const { title, path, info, children } = item;
 
   const renderContent = (
     <>
-      {icon && <ListItemIconStyle>{icon}</ListItemIconStyle>}
+      <DotIcon active={active} />
       <ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
       {!isCollapse && (
         <>