finishing slicing ui client benefit config

frontend/dashboard/src/components/MoreMenu.tsx

@@ -0,0 +1,58 @@
+import Iconify from '@/components/Iconify';
+import MenuPopover from './MenuPopover';
+import { IconButton, MenuItem } from '@mui/material';
+import { useEffect, useState } from 'react';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  actions: React.ReactNode;
+};
+
+export default function MoreMenu({ actions }: Props) {
+    const [open, setOpen] = useState<HTMLElement | null>(null);
+
+    // Close menu popover
+    useEffect(() => {
+        setOpen(null);
+    }, [actions])
+
+    const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+        setOpen(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setOpen(null);
+    };
+
+    return (
+        <>
+            <IconButton onClick={handleOpen}>
+                <Iconify icon={'eva:more-vertical-fill'} width={20} height={20} />
+            </IconButton>
+
+            <MenuPopover
+                open={Boolean(open)}
+                anchorEl={open}
+                onClose={handleClose}
+                anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+                arrow="right-top"
+                sx={{
+                    mt: -1,
+                    width: 'auto',
+                    minWidth: 160,
+                    '& .MuiMenuItem-root': {
+                        px: 1,
+                        typography: 'body2',
+                        borderRadius: 0.75,
+                        '& svg': { mr: 2, width: 20, height: 20 },
+                    },
+                }}
+            >
+                {actions}
+            </MenuPopover>
+
+        </>
+    );
+}

frontend/dashboard/src/components/table/TableMoreMenu.tsx

@@ -57,4 +57,4 @@ export default function TableMoreMenu({ actions, disableRipple }: Props) {
       </MenuPopover>
     </>
   );
-}
+}