diff --git a/package.json b/package.json
index 5d02330..c097e23 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/buttons/basicButton/BasicButton.tsx b/src/components/buttons/basicButton/BasicButton.tsx
index fd5f3b1..a7280f8 100644
--- a/src/components/buttons/basicButton/BasicButton.tsx
+++ b/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 (
- {title}
+ onClick()}>{title}
)
}
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 0000000..6362e9b
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx
new file mode 100644
index 0000000..42972a7
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+ setOpenModal(true)}/>
+ {throw new Error('fixing...')}}/>
+
+
+
+
+
+ {setOpenModal(value)}}>
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx
new file mode 100644
index 0000000..90fbab8
--- /dev/null
+++ b/src/pages/administrative/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function index() {
+ return (
+ index
+ )
+}
diff --git a/src/styles/layouts/clients/ClientsView.ts b/src/styles/layouts/clients/ClientsView.ts
new file mode 100644
index 0000000..1faa23b
--- /dev/null
+++ b/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%;
+`
diff --git a/yarn.lock b/yarn.lock
index 047d0ed..a5e2773 100644
--- a/yarn.lock
+++ b/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"