Move packages/apps back
This commit is contained in:
Darren Clarke
parent
6eaaf8e9be
commit
5535d6b575
348 changed files with 0 additions and 0 deletions
54
apps/metamigo-frontend/components/layout/AppBar.tsx
Normal file
54
apps/metamigo-frontend/components/layout/AppBar.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { forwardRef } from "react";
|
||||
import { AppBar, UserMenu, MenuItemLink, useTranslate } from "react-admin";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import SettingsIcon from "@material-ui/icons/Settings";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
title: {
|
||||
flex: 1,
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
},
|
||||
spacer: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const ConfigurationMenu = forwardRef<any, any>((props, ref) => {
|
||||
const translate = useTranslate();
|
||||
return (
|
||||
<MenuItemLink
|
||||
ref={ref}
|
||||
to="/configuration"
|
||||
primaryText={translate("pos.configuration")}
|
||||
leftIcon={<SettingsIcon />}
|
||||
onClick={props.onClick}
|
||||
sidebarIsOpen
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const CustomUserMenu = (props: any) => (
|
||||
<UserMenu {...props}>
|
||||
<ConfigurationMenu />
|
||||
</UserMenu>
|
||||
);
|
||||
|
||||
const CustomAppBar = (props: any) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<AppBar {...props} elevation={1} userMenu={<CustomUserMenu />}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="inherit"
|
||||
className={classes.title}
|
||||
id="react-admin-title"
|
||||
/>
|
||||
<span className={classes.spacer} />
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomAppBar;
|
||||
21
apps/metamigo-frontend/components/layout/Layout.tsx
Normal file
21
apps/metamigo-frontend/components/layout/Layout.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Layout as RaLayout, LayoutProps, Sidebar } from "react-admin";
|
||||
import AppBar from "./AppBar";
|
||||
import Menu from "./Menu";
|
||||
import { theme } from "./themes";
|
||||
|
||||
const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
|
||||
|
||||
const Layout = (props: LayoutProps) => {
|
||||
return (
|
||||
<RaLayout
|
||||
{...props}
|
||||
appBar={AppBar}
|
||||
menu={Menu}
|
||||
sidebar={CustomSidebar}
|
||||
// @ts-ignore
|
||||
theme={theme}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
106
apps/metamigo-frontend/components/layout/Logo.tsx
Normal file
106
apps/metamigo-frontend/components/layout/Logo.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import { SVGProps } from "react";
|
||||
|
||||
const Logo = (props: SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg width="220.001" height="43.659" {...props}>
|
||||
<path d="M59.39 24.586h4.6v8.512c-1.058.2-3.743.57-5.742.57-6.398 0-7.74-3.77-7.74-11.452 0-7.827 1.4-11.54 7.797-11.54 3.627 0 8.597.828 8.597.828l.115-2.542s-4.885-1.056-9.083-1.056c-8.312 0-10.626 5.112-10.626 14.31 0 8.968 2.228 14.167 10.711 14.167 3.028 0 8.17-.8 8.998-.971V21.816H59.39zm13.14 11.397h2.998V21.302s3.514-1.943 7.284-2.714V15.56c-3.828.743-7.312 3.142-7.312 3.142v-2.713h-2.97zm27.962-13.967c0-4.342-1.913-6.427-6.455-6.427-3.427 0-7.826.885-7.826.885l.114 2.285s4.77-.542 7.57-.542c2.4 0 3.598 1 3.598 3.799v1.742l-6.284.6c-4.113.4-6.112 2.056-6.112 5.912 0 4.028 2 6.113 5.627 6.113 3.6 0 7.198-1.6 7.198-1.6 1.2 1.2 2.656 1.6 4.77 1.6l.114-2.37c-1.285-.144-2.228-.6-2.314-1.743zm-2.999 3.998v6.599s-3.313 1.256-6.284 1.256c-2.028 0-3.027-1.37-3.027-3.684 0-2.2.942-3.37 3.4-3.6zm17.738-10.425c-2.828 0-5.855 1.4-5.855 1.4V7.277h-2.97v28.677s4.283.429 6.683.429c7.283 0 9.425-2.77 9.425-10.711 0-7.198-1.828-10.083-7.283-10.083zm-2.2 18.109c-1.056 0-3.655-.2-3.655-.2V19.416s2.8-1.142 5.54-1.142c3.514 0 4.57 2.228 4.57 7.398 0 5.598-.97 8.026-6.454 8.026zm28.535-11.682c0-4.342-1.942-6.427-6.455-6.427-3.428 0-7.826.885-7.826.885l.114 2.285s4.77-.542 7.57-.542c2.4 0 3.598 1 3.598 3.799v1.742l-6.284.6c-4.113.4-6.112 2.056-6.112 5.912 0 4.028 2 6.113 5.626 6.113 3.6 0 7.198-1.6 7.198-1.6 1.2 1.2 2.628 1.6 4.77 1.6l.115-2.37c-1.286-.144-2.257-.6-2.314-1.743zm-3 3.998v6.599s-3.34 1.256-6.283 1.256c-2.057 0-3.056-1.37-3.056-3.684 0-2.2.97-3.37 3.4-3.6zm24.25-18.737h-2.94v8.826c-.6-.114-3.2-.514-4.914-.514-6.084 0-8.369 3.513-8.369 10.568 0 8.626 3.285 10.226 7.198 10.226 3 0 6.084-1.771 6.084-1.771v1.37h2.942zm-8.654 26.42c-2.37 0-4.484-1.084-4.484-7.54 0-5.198 1.228-7.97 5.427-7.97 1.657 0 4.113.373 4.77.487v13.539s-2.885 1.485-5.713 1.485zM176.3 15.59c-6.313 0-8.54 3.285-8.54 10.168 0 7.255 1.827 10.626 8.54 10.626 6.77 0 8.57-3.37 8.57-10.626 0-6.883-2.2-10.168-8.57-10.168zm0 18.195c-4.713 0-5.484-2.371-5.484-8.027 0-5.57 1.256-7.57 5.484-7.57 4.284 0 5.484 2 5.484 7.57 0 5.656-.714 8.027-5.484 8.027zm13.453 2.199h3V21.303s3.512-1.943 7.254-2.714V15.56c-3.828.743-7.312 3.142-7.312 3.142V15.99h-2.942zm27.934-13.967c0-4.342-1.913-6.427-6.426-6.427-3.456 0-7.855.885-7.855.885l.143 2.285s4.741-.542 7.54-.542c2.4 0 3.6 1 3.6 3.799v1.742l-6.285.6c-4.113.4-6.112 2.056-6.112 5.912 0 4.028 2 6.113 5.655 6.113 3.6 0 7.198-1.6 7.198-1.6 1.2 1.2 2.628 1.6 4.742 1.6l.114-2.37c-1.257-.144-2.228-.6-2.314-1.743zm-2.999 3.998v6.599s-3.313 1.256-6.284 1.256c-2.028 0-3.027-1.37-3.027-3.684 0-2.2.97-3.37 3.4-3.6z" />
|
||||
<defs>
|
||||
<linearGradient
|
||||
gradientTransform="rotate(25)"
|
||||
id="a"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="1"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0%" stopColor="#8C48D2" />
|
||||
<stop offset="100%" stopColor="#CF705A" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
xlinkHref="#a"
|
||||
id="c"
|
||||
gradientTransform="scale(.7746 1.291)"
|
||||
x1="15.492"
|
||||
y1="4.648"
|
||||
x2="23.238"
|
||||
y2="4.648"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
/>
|
||||
<linearGradient
|
||||
xlinkHref="#a"
|
||||
id="d"
|
||||
gradientTransform="scale(1.27 .7874)"
|
||||
x1="7.874"
|
||||
y1="15.24"
|
||||
x2="15.748"
|
||||
y2="15.24"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
/>
|
||||
<linearGradient
|
||||
xlinkHref="#a"
|
||||
id="e"
|
||||
gradientTransform="scale(.91287 1.09545)"
|
||||
x1="10.954"
|
||||
y1="7.303"
|
||||
x2="21.909"
|
||||
y2="7.303"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
/>
|
||||
<linearGradient
|
||||
xlinkHref="#a"
|
||||
id="f"
|
||||
gradientTransform="scale(1.13606 .88024)"
|
||||
x1="3.521"
|
||||
y1="13.576"
|
||||
x2="22.886"
|
||||
y2="13.576"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
/>
|
||||
<linearGradient
|
||||
xlinkHref="#a"
|
||||
id="g"
|
||||
gradientTransform="scale(1.029 .97183)"
|
||||
x1="5.831"
|
||||
y1="1.029"
|
||||
x2="23.324"
|
||||
y2="1.029"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
/>
|
||||
<linearGradient
|
||||
xlinkHref="#a"
|
||||
id="b"
|
||||
gradientTransform="scale(.88647 1.12807)"
|
||||
x1="4.512"
|
||||
y1=".886"
|
||||
x2="29.33"
|
||||
y2=".886"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
/>
|
||||
</defs>
|
||||
<g transform="translate(-6.238 -1.56) scale(1.55946)" fill="url(#b)">
|
||||
<path
|
||||
d="M12 9v4a3 3 0 006 0V9a3 3 0 00-6 0zm3-2a2 2 0 012 2v4a2 2 0 11-4 0V9a2 2 0 012-2z"
|
||||
fill="url(#c)"
|
||||
/>
|
||||
<path
|
||||
d="M10 13.2a5 5 0 0010 0v-.7a.5.5 0 10-1 0v.7a4 4 0 11-8 0v-.7a.5.5 0 10-1 0z"
|
||||
fill="url(#d)"
|
||||
/>
|
||||
<path
|
||||
d="M19.5 13a.5.5 0 100-1h-9a.5.5 0 100 1zm-3 6a.5.5 0 110 1h-3a.5.5 0 110-1h1v-1h1v1zm-3-10a.5.5 0 000-1h-1v1zm0 2a.5.5 0 000-1h-1v1zm3 0a.5.5 0 110-1h1v1zm0-2a.5.5 0 110-1h1v1z"
|
||||
fill="url(#e)"
|
||||
/>
|
||||
<path
|
||||
d="M25.947 14.272a.51.51 0 01.053.23v13.994a.5.5 0 01-.5.5h-21a.5.5 0 01-.5-.5V14.502a.502.502 0 01.2-.406L7 11.95v1.26l-2 1.533v1.253l6.667 5h6.666l6.667-5v-1.253l-2-1.533v-1.26l2.8 2.146a.502.502 0 01.147.176zM10.739 21.55L5 27.29V17.245l5.739 4.304zm.968.446h6.586l6 6H5.707zm7.554-.446L25 17.246V27.29l-5.739-5.739z"
|
||||
fill="url(#f)"
|
||||
/>
|
||||
<path
|
||||
d="M24 6.2a.5.5 0 00-.146-.354l-4.7-4.7A.5.5 0 0018.8 1H6.5a.5.5 0 00-.5.5V18h1V2h11v4.5a.5.5 0 00.5.5H23v11h1zM19 6V2.41L22.59 6z"
|
||||
fill="url(#g)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
133
apps/metamigo-frontend/components/layout/Menu.tsx
Normal file
133
apps/metamigo-frontend/components/layout/Menu.tsx
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/* eslint-disable camelcase */
|
||||
import { FC, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import SecurityIcon from "@material-ui/icons/Security";
|
||||
import VoiceIcon from "@material-ui/icons/PhoneInTalk";
|
||||
import { Box } from "@material-ui/core";
|
||||
import { useTheme } from "@material-ui/core/styles";
|
||||
import useMediaQuery from "@material-ui/core/useMediaQuery";
|
||||
import { useTranslate, MenuItemLink, MenuProps } from "react-admin";
|
||||
import users from "../users";
|
||||
import accounts from "../accounts";
|
||||
import webhooks from "../webhooks";
|
||||
import voiceLines from "../voice/voicelines";
|
||||
import voiceProviders from "../voice/providers";
|
||||
import whatsappBots from "../whatsapp/bots";
|
||||
import signalBots from "../signal/bots";
|
||||
import { SubMenu } from "./SubMenu";
|
||||
|
||||
type MenuName = "menuVoice" | "menuSecurity";
|
||||
|
||||
export const Menu: FC = ({ onMenuClick, logout, dense = false }: any) => {
|
||||
const [state, setState] = useState({
|
||||
menuVoice: false,
|
||||
menuSecurity: false,
|
||||
});
|
||||
const translate = useTranslate();
|
||||
const theme = useTheme();
|
||||
const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
|
||||
const open = useSelector((state: any) => state.admin.ui.sidebarOpen);
|
||||
useSelector((state: any) => state.theme); // force rerender on theme change
|
||||
|
||||
const handleToggle = (menu: MenuName) => {
|
||||
setState((state) => ({ ...state, [menu]: !state[menu] }));
|
||||
};
|
||||
|
||||
return <div />;
|
||||
};
|
||||
/*
|
||||
<Box mt={1}>
|
||||
<MenuItemLink
|
||||
to={`/whatsappbots`}
|
||||
primaryText={translate(`pos.menu.whatsapp`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<whatsappBots.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
<MenuItemLink
|
||||
to={`/signalbots`}
|
||||
primaryText={translate(`pos.menu.signal`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<signalBots.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
<SubMenu
|
||||
handleToggle={() => handleToggle("menuVoice")}
|
||||
isOpen={state.menuVoice}
|
||||
sidebarIsOpen={open}
|
||||
name="pos.menu.voice"
|
||||
icon={<VoiceIcon />}
|
||||
dense={dense}
|
||||
>
|
||||
<MenuItemLink
|
||||
to={`/voiceproviders`}
|
||||
primaryText={translate(`resources.providers.name`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<voiceProviders.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
<MenuItemLink
|
||||
to={`/voicelines`}
|
||||
primaryText={translate(`resources.voicelines.name`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<voiceLines.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
</SubMenu>
|
||||
<MenuItemLink
|
||||
to={`/webhooks`}
|
||||
primaryText={translate(`resources.webhooks.name`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<webhooks.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
<SubMenu
|
||||
handleToggle={() => handleToggle("menuSecurity")}
|
||||
isOpen={state.menuSecurity}
|
||||
sidebarIsOpen={open}
|
||||
name="pos.menu.security"
|
||||
icon={<SecurityIcon />}
|
||||
dense={dense}
|
||||
>
|
||||
<MenuItemLink
|
||||
to={`/users`}
|
||||
primaryText={translate(`resources.users.name`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<users.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
<MenuItemLink
|
||||
to={`/accounts`}
|
||||
primaryText={translate(`resources.accounts.name`, {
|
||||
smart_count: 2,
|
||||
})}
|
||||
leftIcon={<accounts.icon />}
|
||||
onClick={onMenuClick}
|
||||
sidebarIsOpen={open}
|
||||
dense={dense}
|
||||
/>
|
||||
</SubMenu>
|
||||
{isXSmall && logout}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
*/
|
||||
export default Menu;
|
||||
83
apps/metamigo-frontend/components/layout/SubMenu.tsx
Normal file
83
apps/metamigo-frontend/components/layout/SubMenu.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { FC, PropsWithChildren, Fragment, ReactElement } from "react";
|
||||
import ExpandMore from "@material-ui/icons/ExpandMore";
|
||||
import List from "@material-ui/core/List";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import Tooltip from "@material-ui/core/Tooltip";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import { useTranslate } from "react-admin";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
icon: { minWidth: theme.spacing(5) },
|
||||
sidebarIsOpen: {
|
||||
"& a": {
|
||||
paddingLeft: theme.spacing(4),
|
||||
transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
|
||||
},
|
||||
},
|
||||
sidebarIsClosed: {
|
||||
"& a": {
|
||||
paddingLeft: theme.spacing(2),
|
||||
transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
type SubMenuProps = PropsWithChildren<{
|
||||
dense: boolean;
|
||||
handleToggle: () => void;
|
||||
icon: ReactElement;
|
||||
isOpen: boolean;
|
||||
name: string;
|
||||
sidebarIsOpen: boolean;
|
||||
}>;
|
||||
|
||||
export const SubMenu: FC<SubMenuProps> = ({
|
||||
handleToggle,
|
||||
sidebarIsOpen,
|
||||
isOpen,
|
||||
name,
|
||||
icon,
|
||||
children,
|
||||
dense,
|
||||
}) => {
|
||||
const translate = useTranslate();
|
||||
const classes = useStyles();
|
||||
|
||||
const header = (
|
||||
<MenuItem dense={dense} button onClick={handleToggle}>
|
||||
<ListItemIcon className={classes.icon}>
|
||||
{isOpen ? <ExpandMore /> : icon}
|
||||
</ListItemIcon>
|
||||
<Typography variant="inherit" color="textSecondary">
|
||||
{translate(name)}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{sidebarIsOpen || isOpen ? (
|
||||
header
|
||||
) : (
|
||||
<Tooltip title={translate(name)} placement="right">
|
||||
{header}
|
||||
</Tooltip>
|
||||
)}
|
||||
<Collapse in={isOpen} timeout="auto" unmountOnExit>
|
||||
<List
|
||||
dense={dense}
|
||||
component="div"
|
||||
disablePadding
|
||||
className={
|
||||
sidebarIsOpen ? classes.sidebarIsOpen : classes.sidebarIsClosed
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</List>
|
||||
</Collapse>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
5
apps/metamigo-frontend/components/layout/index.ts
Normal file
5
apps/metamigo-frontend/components/layout/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import AppBar from "./AppBar";
|
||||
import Layout from "./Layout";
|
||||
import Menu from "./Menu";
|
||||
|
||||
export { AppBar, Layout, Menu };
|
||||
71
apps/metamigo-frontend/components/layout/themes.ts
Normal file
71
apps/metamigo-frontend/components/layout/themes.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
export const theme = {
|
||||
palette: {
|
||||
primary: {
|
||||
main: "#337799",
|
||||
},
|
||||
secondary: {
|
||||
light: "#5f5fc4",
|
||||
main: "#283593",
|
||||
dark: "#001064",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
background: {
|
||||
default: "#fff",
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 5,
|
||||
},
|
||||
typography: {
|
||||
h6: { fontSize: 16, fontWeight: 600, color: "#1bb1bb" },
|
||||
},
|
||||
overrides: {
|
||||
RaMenuItemLink: {
|
||||
root: {
|
||||
borderLeft: "3px solid #fff",
|
||||
},
|
||||
active: {
|
||||
borderLeft: "3px solid #ef7706",
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
elevation1: {
|
||||
boxShadow: "none",
|
||||
},
|
||||
root: {
|
||||
border: "1px solid #e0e0e3",
|
||||
backgroundClip: "padding-box",
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
contained: {
|
||||
backgroundColor: "#fff",
|
||||
color: "#4f3cc9",
|
||||
boxShadow: "none",
|
||||
},
|
||||
},
|
||||
MuiAppBar: {
|
||||
colorSecondary: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#337799",
|
||||
border: 0,
|
||||
},
|
||||
},
|
||||
MuiLinearProgress: {
|
||||
colorPrimary: {
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
barColorPrimary: {
|
||||
backgroundColor: "#d7d7d7",
|
||||
},
|
||||
},
|
||||
MuiFilledInput: {
|
||||
root: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.04)",
|
||||
"&$disabled": {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.04)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue