adding admin pages base

package.json

@@ -22,6 +22,7 @@
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.6.4",
     "@mui/x-data-grid": "^5.11.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.3",

src/components/buttons/basicButton/BasicButton.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
+
 import { BasicButtonView } from './BasicButtonView'
 
 interface BasicButtonInterface {
   title: string
+  onClick: () => void
 }
 
-export default function BasicButton({ title }: BasicButtonInterface) {
+export default function BasicButton({title, onClick}: BasicButtonInterface) {
   return (
-    <BasicButtonView>{title}</BasicButtonView>
+    <BasicButtonView onClick={() => onClick()}>{title}</BasicButtonView>
   )
 }

src/components/modal/Modal.tsx

@@ -0,0 +1,44 @@
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { useEffect } from 'react';
+
+const style = {
+  // eslint-disable-next-line @typescript-eslint/prefer-as-const
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '80%',
+  height: '80%',
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+export default function BasicModal({open, handleIsClose, children}: {open: boolean, handleIsClose: (value: any) => void, children:  React.ReactNode}) {
+  const [openState, setOpenState] = React.useState(false);
+  const handleOpen = () => setOpenState(true);
+  const handleClose = () => {setOpenState(false); handleIsClose(false)}
+
+  useEffect(() => {
+    setOpenState(open)
+  }, [open, openState])
+
+  return (
+    <Modal
+      open={openState}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        {children}
+      </Box>
+    </Modal>
+  );
+}

src/pages/administrative/clients.tsx

@@ -0,0 +1,89 @@
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+import React, { useState } from 'react'
+
+import BasicButton from '../../components/buttons/basicButton/BasicButton'
+import Modal from '../../components/modal/Modal';
+import PageTitle from '../../components/pageTitle/PageTitle'
+import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView'
+
+export default function clients() {
+  const [openModal, setOpenModal] = useState(false)
+
+  const rows = [
+    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
+    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
+    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+  ];
+
+  const columns: GridColDef[] = [
+    { field: 'id', headerName: 'ID', width: 70 },
+    { field: 'firstName', headerName: 'First name', width: 130 },
+    { field: 'lastName', headerName: 'Last name', width: 130 },
+    {
+      field: 'age',
+      headerName: 'Age',
+      type: 'number',
+      width: 90,
+    },
+    {
+      field: 'fullName',
+      headerName: 'Full name',
+      description: 'This column has a value getter and is not sortable.',
+      sortable: false,
+      width: 160,
+      valueGetter: (params: GridValueGetterParams) =>
+        `${params.row.firstName || ''} ${params.row.lastName || ''}`,
+    },
+  ];
+
+  return (
+    <>
+      <ClientsView>
+        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
+
+        <section>
+          <BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
+          <BasicButton title='Inativar' onClick={() => {throw new Error('fixing...')}}/>
+        </section>
+
+        <section>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            pageSize={6}
+            rowsPerPageOptions={[6]}
+            checkboxSelection
+          />
+        </section>
+      </ClientsView>
+
+      <Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
+        <ClientsModalView>
+          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
+          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
+          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
+          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
+          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
+          <Button
+            variant="contained"
+            component="label"
+          >
+            Upload File
+            <input
+              type="file"
+              hidden
+            />
+          </Button>
+        </ClientsModalView>
+      </Modal>
+    </>
+  )
+}

src/pages/administrative/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function index() {
+  return (
+    <div>index</div>
+  )
+}

src/styles/layouts/clients/ClientsView.ts

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const ClientsView = styled.main`
+  display: flex;
+  flex-direction: column;
+
+  section {
+    display: flex;
+
+    width: 100%;
+
+    :nth-child(2) {
+      justify-content: space-between;
+
+      width: 18rem;
+
+      margin: 45px 0 22px 0;
+    }
+
+    :last-child {
+      width: 50rem;
+      height: 30rem;
+    }
+  }
+`
+
+export const ClientsModalView = styled.main`
+  display: grid;
+
+  grid-template-columns: 100% 100%;
+  grid-template-rows: 100% 100% 100% 100%;
+`

yarn.lock

@@ -1064,6 +1064,12 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/icons-material@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.2.tgz#211ac2a041ece952749d39c3c26071226993be14"
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
 "@mui/material@^5.6.4":
   version "5.6.4"
   resolved "https://registry.npmjs.org/@mui/material/-/material-5.6.4.tgz"
@@ -1422,7 +1428,6 @@
 "@types/react-csv@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
-  integrity sha512-hCtZyXAubxBtn3Oi3I9kNAx2liRTaMtl1eWpO2M98aYkHuoSTbYO8OcZEjyr9aJJ30Xnoxj+uES3G6L6O1qgtg==
   dependencies:
     "@types/react" "*"
 
@@ -3908,7 +3913,6 @@ react-chartjs-2@^4.1.0:
 react-csv@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.2.2.tgz#5bbf0d72a846412221a14880f294da9d6def9bfb"
-  integrity sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==
 
 react-dom@18.1.0:
   version "18.1.0"