From a6f62a19fa984a7ffa0cd741f2a7ab17cf5fc9e0 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 7 Dec 2022 22:53:48 +0800 Subject: [PATCH 01/10] feat: initial add of user mgmt pages --- pages/create-new-user.tsx | 24 ++++++++++++++ pages/dashboard.tsx | 23 ++++++++++++++ pages/forgot-password.tsx | 36 +++++++++++++++++++++ pages/login.tsx | 44 ++++++++++++++++++++++++++ pages/reset-password.tsx | 37 ++++++++++++++++++++++ pages/settings.tsx | 66 +++++++++++++++++++++++++++++++++++++++ pages/user-management.tsx | 46 +++++++++++++++++++++++++++ 7 files changed, 276 insertions(+) create mode 100644 pages/create-new-user.tsx create mode 100644 pages/dashboard.tsx create mode 100644 pages/forgot-password.tsx create mode 100644 pages/login.tsx create mode 100644 pages/reset-password.tsx create mode 100644 pages/settings.tsx create mode 100644 pages/user-management.tsx diff --git a/pages/create-new-user.tsx b/pages/create-new-user.tsx new file mode 100644 index 0000000..54c66d3 --- /dev/null +++ b/pages/create-new-user.tsx @@ -0,0 +1,24 @@ +import type {NextPage} from "next"; +import Box from "@mui/material/Box"; +import Sidebar from "../components/Sidebar"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; + +const CreateNewUser: NextPage = () => { + return ( + /* TODO: This minHeight should be unnecessary when the layout is flex */ + + + + {'Create New User'} + + + {/* Access Level control, as soon as we decide how it works */} + + + + ); +}; + +export default CreateNewUser; diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx new file mode 100644 index 0000000..57d3b2e --- /dev/null +++ b/pages/dashboard.tsx @@ -0,0 +1,23 @@ +import type {NextPage} from "next"; +import Box from "@mui/material/Box"; +import Sidebar from "../components/Sidebar"; +import Typography from "@mui/material/Typography"; + +// TODO: make these into properties pulled from the current user +const name = "John"; +const role = "Super Admin"; + +const Dashboard: NextPage = () => { + return ( + /* TODO: This minHeight should be unnecessary when the layout is flex */ + + + + {`Welcome, ${name}!`} + {`Role: ${role}`} + + + ) +} + +export default Dashboard; diff --git a/pages/forgot-password.tsx b/pages/forgot-password.tsx new file mode 100644 index 0000000..598d79d --- /dev/null +++ b/pages/forgot-password.tsx @@ -0,0 +1,36 @@ +import type { NextPage } from 'next' +import Box from "@mui/material/Box"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +// import Image from "next/image"; + +// TODO: temp, until we get the MR logo into assets folder +const MR_LOGO = 'https://www.mercyrelief.org/site/wp-content/uploads/logo-mercyrelief@2x.png'; + +const ForgotPassword: NextPage = () => { + return ( + /* TODO This minHeight should be unnecessary when the layout is flex*/ + + + + {/* TODO: temp, until we get the MR logo into assets folder */} + {/**/} + + + Request for Password Reset + + + + + ) +} + +export default ForgotPassword diff --git a/pages/login.tsx b/pages/login.tsx new file mode 100644 index 0000000..b1f70c3 --- /dev/null +++ b/pages/login.tsx @@ -0,0 +1,44 @@ +import type { NextPage } from 'next' +import Box from "@mui/material/Box"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import Alert from "@mui/material/Alert"; +import Link from "next/link"; +// import Image from "next/image"; + +// TODO: temp, until we get the MR logo into assets folder +const MR_LOGO = 'https://www.mercyrelief.org/site/wp-content/uploads/logo-mercyrelief@2x.png'; + +const Login: NextPage = () => { + return ( + /* TODO This minHeight should be unnecessary when the layout is flex*/ + + + + {/* TODO: temp, until we get the MR logo into assets folder */} + {/**/} + + + Login + + + Forget Password? + + + Login Failed! + Email address/password not found + + + + ) +} + +export default Login diff --git a/pages/reset-password.tsx b/pages/reset-password.tsx new file mode 100644 index 0000000..611ce06 --- /dev/null +++ b/pages/reset-password.tsx @@ -0,0 +1,37 @@ +import type { NextPage } from 'next' +import Box from "@mui/material/Box"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +// import Image from "next/image"; + +// TODO: temp, until we get the MR logo into assets folder +const MR_LOGO = 'https://www.mercyrelief.org/site/wp-content/uploads/logo-mercyrelief@2x.png'; + +const ResetPassword: NextPage = () => { + return ( + /* TODO This minHeight should be unnecessary when the layout is flex*/ + + + + {/* TODO: temp, until we get the MR logo into assets folder */} + {/**/} + + + Request for Password Reset + + + + + + ) +} + +export default ResetPassword diff --git a/pages/settings.tsx b/pages/settings.tsx new file mode 100644 index 0000000..bb984a1 --- /dev/null +++ b/pages/settings.tsx @@ -0,0 +1,66 @@ +import type {NextPage} from "next"; +import Box from "@mui/material/Box"; +import Sidebar from "../components/Sidebar"; +import Typography from "@mui/material/Typography"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import {ReactNode, useState} from "react"; +import Person from "@mui/icons-material/Person"; +import TextField from "@mui/material/TextField"; +import Button from "@mui/material/Button"; +import Alert from "@mui/material/Alert"; +import Lock from "@mui/icons-material/Lock"; + +const Account = () => { + return ( + + + + + + + ); +}; + +const ChangePassword = () => { + return ( + + + A reset link has been sent to your email! + + ); +}; + +interface IconTextProps { + icon: ReactNode, + text: string +} + +const IconText = ({icon, text}: IconTextProps) => { + return ( + {icon} + {text} + ); +} + +const Settings: NextPage = () => { + const [value, setValue] = useState(0); + return ( + /* TODO: This minHeight should be unnecessary when the layout is flex */ + + + + {`Settings`} + {/* TODO add icons to account and change password */} + setValue(v)}> + } text="Account"/>} /> + } text="Change Password"/>} /> + + + + + + ); +}; + +export default Settings; \ No newline at end of file diff --git a/pages/user-management.tsx b/pages/user-management.tsx new file mode 100644 index 0000000..48f6302 --- /dev/null +++ b/pages/user-management.tsx @@ -0,0 +1,46 @@ +import type {NextPage} from "next"; +import Box from "@mui/material/Box"; +import Sidebar from "../components/Sidebar"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import { DataGrid, GridColDef } from '@mui/x-data-grid'; + +const columns: GridColDef[] = [ + { field: 'name', headerName: 'Name', minWidth: 250, flex: 1}, + { field: 'email', headerName: 'Email Address', minWidth: 300, flex: 1 }, + { field: 'role', headerName: 'Role', minWidth: 200, flex: 1}, +]; + +// TODO: get this from api +const rows = [ + { id: 1, name: 'Alice Tan', email: 'alice@gmail.com', role: 'Super Admin' }, + { id: 2, name: 'Benedict Yeo', email: 'benedict@gmail.com', role: 'Donation Campaign Editor' }, + { id: 3, name: 'Candice Ng', email: 'candice@gmail.com', role: 'Donation Campaign Editor' }, + { id: 4, name: 'Dominic Lee', email: 'dominic@gmail.com', role: 'Donation Campaign Editor' }, + { id: 5, name: 'Edwin Loh', email: 'edwin@gmail.com', role: 'Article Editor' }, + { id: 6, name: 'Fiona Lam', email: 'fiona@gmail.com', role: 'Article Editor' }, + { id: 7, name: 'Georgia Gan', email: 'georgia@gmail.com', role: 'Internal User' }, + { id: 8, name: 'Hillary Mok', email: 'hillary@gmail.com', role: 'Internal User' }, +]; + +const Settings: NextPage = () => { + return ( + /* TODO: This minHeight should be unnecessary when the layout is flex */ + + + + {`User Accounts Management`} + + + + + ); +}; + +export default Settings; \ No newline at end of file From dda07192f74ebbee7257b6ef724b3c831cdd1bcc Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 19:53:35 +0800 Subject: [PATCH 02/10] feat: add per-page layout --- components/Layout/index.tsx | 39 ++++++++++++++++++++++++------------- pages/_app.tsx | 22 +++++++++++++++------ 2 files changed, 41 insertions(+), 20 deletions(-) diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index a55af3d..ee3508f 100644 --- a/components/Layout/index.tsx +++ b/components/Layout/index.tsx @@ -1,5 +1,5 @@ import Head from 'next/head' -import { ReactNode } from 'react' +import { Fragment, ReactNode } from 'react' import theme from 'styles/theme' import { ThemeProvider } from '@mui/material/styles' import CssBaseline from '@mui/material/CssBaseline' @@ -8,9 +8,31 @@ import { Box } from '@mui/system' type Props = { children: ReactNode + enableSidebar?: boolean } -const Layout = ({ children }: Props) => { +const Layout = ({ children, enableSidebar }: Props) => { + enableSidebar = enableSidebar ?? true + + const sidebarWithChildren = !enableSidebar ? ( + children + ) : ( + + + + {children} + + + ) + return (
@@ -33,18 +55,7 @@ const Layout = ({ children }: Props) => { }} > - - - {children} - + {sidebarWithChildren} diff --git a/pages/_app.tsx b/pages/_app.tsx index a94e0a4..298ea4e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,12 +1,22 @@ +import type { ReactElement, ReactNode } from 'react' +import type { NextPage } from 'next' import type { AppProps } from 'next/app' import Layout from 'components/Layout' -function MyApp({ Component, pageProps }: AppProps) { - return ( - - - - ) +// ref: https://nextjs.org/docs/basic-features/layouts +export type NextPageWithLayout

= NextPage & { + getLayout?: (page: ReactElement) => ReactNode +} + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout +} + +function MyApp({ Component, pageProps }: AppPropsWithLayout) { + // Use the layout defined at the page level, if available + const getLayout = Component.getLayout ?? ((page) => {page}) + + return getLayout() } export default MyApp From d88db454a0f2b17a7b84a257a0ce2606be10920c Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 19:59:41 +0800 Subject: [PATCH 03/10] feat: common centered bg layout --- components/CenteredThemeBackground/index.tsx | 47 ++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 components/CenteredThemeBackground/index.tsx diff --git a/components/CenteredThemeBackground/index.tsx b/components/CenteredThemeBackground/index.tsx new file mode 100644 index 0000000..d916e8b --- /dev/null +++ b/components/CenteredThemeBackground/index.tsx @@ -0,0 +1,47 @@ +import Box from '@mui/material/Box' +import Layout from 'components/Layout' +import { ReactNode } from 'react' +import mr_logo from 'public/images/sidebar/mercy_relief_logo.png' +import { MR_GRAY_1 } from 'styles/theme' + +type CenteredThemeBackgroundProps = { + children: ReactNode +} + +// TODO get actual image +const BACKGROUND_IMAGE = 'red' + +function CenteredThemeBackground({ children }: CenteredThemeBackgroundProps) { + return ( + + + + + {children} + + + + ) +} +3 + +export default CenteredThemeBackground From 4570384e5b7bc03d17df2ba5d8bb857032c6e851 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 20:00:06 +0800 Subject: [PATCH 04/10] feat: login --- pages/login.tsx | 72 +++++++++++++++++++++++-------------------------- 1 file changed, 34 insertions(+), 38 deletions(-) diff --git a/pages/login.tsx b/pages/login.tsx index b1f70c3..1427dc6 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -1,44 +1,40 @@ -import type { NextPage } from 'next' -import Box from "@mui/material/Box"; -import TextField from "@mui/material/TextField"; -import Button from "@mui/material/Button"; -import Typography from "@mui/material/Typography"; -import Alert from "@mui/material/Alert"; -import Link from "next/link"; -// import Image from "next/image"; +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import TextField from '@mui/material/TextField' +import type { NextPageWithLayout } from './_app' +import CenteredThemeBackground from 'components/CenteredThemeBackground' +import Link from 'next/link' +import Alert from '@mui/material/Alert' -// TODO: temp, until we get the MR logo into assets folder -const MR_LOGO = 'https://www.mercyrelief.org/site/wp-content/uploads/logo-mercyrelief@2x.png'; - -const Login: NextPage = () => { +const Login: NextPageWithLayout = () => { return ( - /* TODO This minHeight should be unnecessary when the layout is flex*/ - - - - {/* TODO: temp, until we get the MR logo into assets folder */} - {/**/} - - - Login - - - Forget Password? - - - Login Failed! - Email address/password not found - - - + + + + Forget Password? + + + + Login Failed! + + + Email address/password not found + + + ) } +Login.getLayout = (page) => { + return {page} +} + export default Login From 0af298fe4fe45c45bc85a65694e795cb37c25ff0 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 20:13:25 +0800 Subject: [PATCH 05/10] feat: reset password --- pages/reset-password.tsx | 68 +++++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/pages/reset-password.tsx b/pages/reset-password.tsx index 611ce06..fbb4818 100644 --- a/pages/reset-password.tsx +++ b/pages/reset-password.tsx @@ -1,37 +1,41 @@ -import type { NextPage } from 'next' -import Box from "@mui/material/Box"; -import TextField from "@mui/material/TextField"; -import Button from "@mui/material/Button"; -import Typography from "@mui/material/Typography"; -// import Image from "next/image"; +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import TextField from '@mui/material/TextField' +import type { NextPageWithLayout } from './_app' +import CenteredThemeBackground from 'components/CenteredThemeBackground' -// TODO: temp, until we get the MR logo into assets folder -const MR_LOGO = 'https://www.mercyrelief.org/site/wp-content/uploads/logo-mercyrelief@2x.png'; +const ResetPassword: NextPageWithLayout = () => { + return ( + + + Reset Password + + + + + + ) +} -const ResetPassword: NextPage = () => { - return ( - /* TODO This minHeight should be unnecessary when the layout is flex*/ - - - - {/* TODO: temp, until we get the MR logo into assets folder */} - {/**/} - - - Request for Password Reset - - - - - - ) +ResetPassword.getLayout = (page) => { + return {page} } export default ResetPassword From 629d768a615bb29902835c1a2716e0e547d07e29 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 20:16:11 +0800 Subject: [PATCH 06/10] feat: request reset password page --- pages/request-reset-password.tsx | 35 ++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 pages/request-reset-password.tsx diff --git a/pages/request-reset-password.tsx b/pages/request-reset-password.tsx new file mode 100644 index 0000000..090745e --- /dev/null +++ b/pages/request-reset-password.tsx @@ -0,0 +1,35 @@ +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import TextField from '@mui/material/TextField' +import type { NextPageWithLayout } from './_app' +import CenteredThemeBackground from 'components/CenteredThemeBackground' + +const RequestResetPassword: NextPageWithLayout = () => { + return ( + + + Request for Password Reset + + + + + ) +} + +RequestResetPassword.getLayout = (page) => { + return {page} +} + +export default RequestResetPassword From 184a616433785292cb6dfe743481e49d66fa7dd0 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 20:32:23 +0800 Subject: [PATCH 07/10] feat: remove create new user page (not covered in PR) --- pages/create-new-user.tsx | 24 ------------------------ 1 file changed, 24 deletions(-) delete mode 100644 pages/create-new-user.tsx diff --git a/pages/create-new-user.tsx b/pages/create-new-user.tsx deleted file mode 100644 index 54c66d3..0000000 --- a/pages/create-new-user.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type {NextPage} from "next"; -import Box from "@mui/material/Box"; -import Sidebar from "../components/Sidebar"; -import Typography from "@mui/material/Typography"; -import Button from "@mui/material/Button"; -import TextField from "@mui/material/TextField"; - -const CreateNewUser: NextPage = () => { - return ( - /* TODO: This minHeight should be unnecessary when the layout is flex */ - - - - {'Create New User'} - - - {/* Access Level control, as soon as we decide how it works */} - - - - ); -}; - -export default CreateNewUser; From 4db13a85db60f82eb4403cea270991fb34e6d962 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 20:32:40 +0800 Subject: [PATCH 08/10] feat: rename forgot-password page --- pages/forgot-password.tsx | 61 ++++++++++++++++---------------- pages/request-reset-password.tsx | 35 ------------------ 2 files changed, 30 insertions(+), 66 deletions(-) delete mode 100644 pages/request-reset-password.tsx diff --git a/pages/forgot-password.tsx b/pages/forgot-password.tsx index 598d79d..a192974 100644 --- a/pages/forgot-password.tsx +++ b/pages/forgot-password.tsx @@ -1,36 +1,35 @@ -import type { NextPage } from 'next' -import Box from "@mui/material/Box"; -import TextField from "@mui/material/TextField"; -import Button from "@mui/material/Button"; -import Typography from "@mui/material/Typography"; -// import Image from "next/image"; +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import TextField from '@mui/material/TextField' +import type { NextPageWithLayout } from './_app' +import CenteredThemeBackground from 'components/CenteredThemeBackground' -// TODO: temp, until we get the MR logo into assets folder -const MR_LOGO = 'https://www.mercyrelief.org/site/wp-content/uploads/logo-mercyrelief@2x.png'; +const ForgotPassword: NextPageWithLayout = () => { + return ( + + + Request for Password Reset + + + + + ) +} -const ForgotPassword: NextPage = () => { - return ( - /* TODO This minHeight should be unnecessary when the layout is flex*/ - - - - {/* TODO: temp, until we get the MR logo into assets folder */} - {/**/} - - - Request for Password Reset - - - - - ) +ForgotPassword.getLayout = (page) => { + return {page} } export default ForgotPassword diff --git a/pages/request-reset-password.tsx b/pages/request-reset-password.tsx deleted file mode 100644 index 090745e..0000000 --- a/pages/request-reset-password.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' -import Button from '@mui/material/Button' -import TextField from '@mui/material/TextField' -import type { NextPageWithLayout } from './_app' -import CenteredThemeBackground from 'components/CenteredThemeBackground' - -const RequestResetPassword: NextPageWithLayout = () => { - return ( - - - Request for Password Reset - - - - - ) -} - -RequestResetPassword.getLayout = (page) => { - return {page} -} - -export default RequestResetPassword From f48f4f011349d98d30eaa0bf2c16ae3b0c34e740 Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 20:43:25 +0800 Subject: [PATCH 09/10] feat: settings page (account) --- pages/settings.tsx | 114 ++++++++++++++++++++++++--------------------- 1 file changed, 61 insertions(+), 53 deletions(-) diff --git a/pages/settings.tsx b/pages/settings.tsx index bb984a1..fcfb7a6 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,66 +1,74 @@ -import type {NextPage} from "next"; -import Box from "@mui/material/Box"; -import Sidebar from "../components/Sidebar"; -import Typography from "@mui/material/Typography"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; -import {ReactNode, useState} from "react"; -import Person from "@mui/icons-material/Person"; -import TextField from "@mui/material/TextField"; -import Button from "@mui/material/Button"; -import Alert from "@mui/material/Alert"; -import Lock from "@mui/icons-material/Lock"; +import type { NextPage } from 'next' +import Box from '@mui/material/Box' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import { ReactNode, useState } from 'react' +import Person from '@mui/icons-material/Person' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Alert from '@mui/material/Alert' +import Lock from '@mui/icons-material/Lock' +import Container from '@mui/material/Container' const Account = () => { - return ( - - - - - - - ); -}; + return ( + + {/* TODO Prefill based on Account information */} + + + + + + ) +} const ChangePassword = () => { - return ( - - - A reset link has been sent to your email! - - ); -}; + return ( + + + + A reset link has been sent to your email! + + + ) +} interface IconTextProps { - icon: ReactNode, - text: string + icon: ReactNode + text: string } -const IconText = ({icon, text}: IconTextProps) => { - return ( - {icon} - {text} - ); +const IconText = ({ icon, text }: IconTextProps) => { + return ( + + {icon} + {text} + + ) } const Settings: NextPage = () => { - const [value, setValue] = useState(0); - return ( - /* TODO: This minHeight should be unnecessary when the layout is flex */ - - - - {`Settings`} - {/* TODO add icons to account and change password */} - setValue(v)}> - } text="Account"/>} /> - } text="Change Password"/>} /> - - - - + const [value, setValue] = useState(0) + return ( + + + setValue(v)}> + } text="Account" />} /> + } text="Change Password" />} /> + + + - ); -}; + + + ) +} -export default Settings; \ No newline at end of file +export default Settings From 0e7fe00fbf342e1fe53cc6bfa286f3b8b97f3fcd Mon Sep 17 00:00:00 2001 From: Chandrasekaran Akash Date: Wed, 25 Jan 2023 21:08:34 +0800 Subject: [PATCH 10/10] feat: user list --- pages/user-management.tsx | 46 -------------------- pages/users.tsx | 88 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+), 46 deletions(-) delete mode 100644 pages/user-management.tsx create mode 100644 pages/users.tsx diff --git a/pages/user-management.tsx b/pages/user-management.tsx deleted file mode 100644 index 48f6302..0000000 --- a/pages/user-management.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type {NextPage} from "next"; -import Box from "@mui/material/Box"; -import Sidebar from "../components/Sidebar"; -import Typography from "@mui/material/Typography"; -import Button from "@mui/material/Button"; -import { DataGrid, GridColDef } from '@mui/x-data-grid'; - -const columns: GridColDef[] = [ - { field: 'name', headerName: 'Name', minWidth: 250, flex: 1}, - { field: 'email', headerName: 'Email Address', minWidth: 300, flex: 1 }, - { field: 'role', headerName: 'Role', minWidth: 200, flex: 1}, -]; - -// TODO: get this from api -const rows = [ - { id: 1, name: 'Alice Tan', email: 'alice@gmail.com', role: 'Super Admin' }, - { id: 2, name: 'Benedict Yeo', email: 'benedict@gmail.com', role: 'Donation Campaign Editor' }, - { id: 3, name: 'Candice Ng', email: 'candice@gmail.com', role: 'Donation Campaign Editor' }, - { id: 4, name: 'Dominic Lee', email: 'dominic@gmail.com', role: 'Donation Campaign Editor' }, - { id: 5, name: 'Edwin Loh', email: 'edwin@gmail.com', role: 'Article Editor' }, - { id: 6, name: 'Fiona Lam', email: 'fiona@gmail.com', role: 'Article Editor' }, - { id: 7, name: 'Georgia Gan', email: 'georgia@gmail.com', role: 'Internal User' }, - { id: 8, name: 'Hillary Mok', email: 'hillary@gmail.com', role: 'Internal User' }, -]; - -const Settings: NextPage = () => { - return ( - /* TODO: This minHeight should be unnecessary when the layout is flex */ - - - - {`User Accounts Management`} - - - - - ); -}; - -export default Settings; \ No newline at end of file diff --git a/pages/users.tsx b/pages/users.tsx new file mode 100644 index 0000000..f06b9f5 --- /dev/null +++ b/pages/users.tsx @@ -0,0 +1,88 @@ +import type { NextPage } from 'next' +import Box from '@mui/material/Box' +import Add from '@mui/icons-material/Add' +import { DataGrid, GridColDef } from '@mui/x-data-grid' +import IconButton from '@mui/material/IconButton' +import { MR_GRAY_1, MR_YELLOW } from 'styles/theme' + +const columns: GridColDef[] = [ + { field: 'name', headerName: 'Name', minWidth: 250, flex: 1 }, + { field: 'email', headerName: 'Email Address', minWidth: 300, flex: 1 }, + { field: 'role', headerName: 'Role', minWidth: 200, flex: 1 }, +] + +// TODO: get this from api +const rows = [ + { id: 1, name: 'Alice Tan', email: 'alice@gmail.com', role: 'Super Admin' }, + { + id: 2, + name: 'Benedict Yeo', + email: 'benedict@gmail.com', + role: 'Donation Campaign Editor', + }, + { + id: 3, + name: 'Candice Ng', + email: 'candice@gmail.com', + role: 'Donation Campaign Editor', + }, + { + id: 4, + name: 'Dominic Lee', + email: 'dominic@gmail.com', + role: 'Donation Campaign Editor', + }, + { + id: 5, + name: 'Edwin Loh', + email: 'edwin@gmail.com', + role: 'Article Editor', + }, + { + id: 6, + name: 'Fiona Lam', + email: 'fiona@gmail.com', + role: 'Article Editor', + }, + { + id: 7, + name: 'Georgia Gan', + email: 'georgia@gmail.com', + role: 'Internal User', + }, + { + id: 8, + name: 'Hillary Mok', + email: 'hillary@gmail.com', + role: 'Internal User', + }, +] + +const Settings: NextPage = () => { + return ( + + + + + + + ) +} + +export default Settings