update Modal

src/components/buttons/faqButton/FaqButton1.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { FaqButtonView1 } from './FaqButtonView1'
+
+interface FaqButtonInterface {
+  title: string
+  onClick: () => void
+}
+
+export default function FaqButton1({title, onClick}: FaqButtonInterface) {
+  return (
+    <FaqButtonView1 onClick={() => onClick()}>{title}</FaqButtonView1>
+  )
+}

src/components/buttons/faqButton/FaqButton2.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { FaqButtonView2 } from './FaqButtonView2'
+
+interface FaqButtonInterface {
+  title: string
+  onClick: () => void
+}
+
+export default function FaqButton2({title, onClick}: FaqButtonInterface) {
+  return (
+    <FaqButtonView2 onClick={() => onClick()}>{title}</FaqButtonView2>
+  )
+}

src/components/buttons/faqButton/FaqButtonView1.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const FaqButtonView1 = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  margin-left: 65px;
+  width: 350px;
+  height: 45px;
+  cursor: pointer;
+  background: #DDDDDD;
+  border-radius: 8px;
+  border-style: none;
+
+  font-family: 'Poppins';
+  font-size: 90%;
+
+
+  color: #6A707E;
+`

src/components/buttons/faqButton/FaqButtonView2.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const FaqButtonView2 = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: -46px;
+  margin-left: 430px;
+  width: 350px;
+  height: 45px;
+  cursor: pointer;
+  background: #254F7F;
+  border-radius: 8px;
+  border-style: none;
+
+  font-family: 'Poppins';
+  font-size: 90%;
+
+
+
+  color: #FFFFFF;
+`

src/pages/administrative/clients.tsx

@@ -2,47 +2,39 @@ 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 Typography from '@mui/material/Typography';
 import BasicButton from '../../components/buttons/basicButton/BasicButton'
-import Modal from '../../components/modal/Modal';
+import Modal from '@mui/material/Modal';
 import PageTitle from '../../components/pageTitle/PageTitle'
 import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView'
+import Box from '@mui/material/Box';
+import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
+import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 900,
+  height: 500,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+  overflowY: 'scroll'
+};
+
+
 
 export default function clients() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   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 (
     <>
@@ -50,40 +42,40 @@ export default function clients() {
         <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
 
         <section>
-          <BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
+          <BasicButton title='Adicionar' onClick={handleOpen}/>
-          <BasicButton title='Inativar' onClick={() => {throw new Error('fixing...')}}/>
+
         </section>
 
-        <section>
+        {/* <button className='btn2' onClick={handleOpen}>Open modal</button> */}
-          <DataGrid
+        <Modal
-            rows={rows}
+        open={open}
-            columns={columns}
+        onClose={handleClose}
-            pageSize={6}
+        aria-labelledby="modal-modal-title"
-            rowsPerPageOptions={[6]}
+        aria-describedby="modal-modal-description"
-            checkboxSelection
+        >
-          />
+        <Box sx={style}>
-        </section>
+          <h1>Adicionar Cliente</h1>
+          <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
+          Adicionar Cliente Smart Energia</Typography>
+          <br />
+         <TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} variant="outlined" />
+         <TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} variant="outlined" />
+         <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
+         <TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
+         <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
+         <TextField id="outlined-basic" label="Imagem/Logotipo" sx={{width:350, ml:8, mt:2}} variant="outlined" />
+          <br /><br />
+         <FaqButton1  title='Cancelar' />
+          <FaqButton2  title='Salvar' />
+
+
+
+        </Box>
+
+        </Modal>
+
       </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/faq/faqView.ts

@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+
+
+
+export const FaqView = styled.nav`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+
+
+    .btn{
+      background: #254F7F;
+      border-radius: 8px;
+      color: white;
+      width: 164px;
+      height: 40px;
+      border: none;
+
+    }
+    .btn2{
+      background: #FFBC10;
+      border-radius: 8px;
+      color: white;
+      width: 164px;
+      height: 40px;
+      border: none;
+      margin-left: 3px;
+    }
+    .buttons{
+      display: flex;
+      margin-top:50px ;
+      justify-content: space-between;
+      align-self:flex-start ;
+      margin-left: 20px;
+    }
+    .title{
+      display: flex;
+      justify-content: flex-start;
+      align-self:flex-start ;
+      flex-direction: column;
+      margin-left: 19px;
+    }
+
+/*
+  .teste{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 100px;
+  } */
+
+
+`

src/pages/administrative/faq/index.tsx

@@ -1,39 +1,78 @@
-import Head from 'next/head'
+import React, { useState, useEffect } from 'react'
-import React from 'react'
+import { useRouter } from 'next/router'
-import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
+import Image from 'next/image'
-import Header from '../../../components/header/Header'
+import Link from 'next/link'
-import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
+import Box from '@mui/material/Box';
-import BasicButton from '../../../components/buttons/basicButton/BasicButton';
+import Button from '@mui/material/Button';
-
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
+import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
+import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
+
+
+
+import { FaqView } from './faqView'
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 900,
+  height: 500,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+
+
+export default function Sidebar() {
+
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
 
-export default function commonQuestions() {
   return (
     <FaqView>
-      <Head>
+      <div className='title'>
-        <title>Smart Energia - FAQ</title>
+       <h1>Adicionar/Editar Pergunta</h1>
-      </Head>
+          <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
-      <Header name='' />
+          Adicionar/Editar Pergunta
-      <h1>Perguntas Frequentes</h1>
+          </Typography>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
+      <div className='buttons'>
 
-      <TextField id="standard-basic" label="Pergunta" sx={{width:740}} variant="standard" />
+      <button className='btn' onClick={handleOpen}>Open modal</button>
-      <TextField id="standard-basic" label="Resposta" sx={{width:740}} variant="standard" />
+      <button className='btn2' onClick={handleOpen}>Open modal</button>
+      </div>
+        <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        >
+         <Box sx={style}>
+          <h1>Adicionar/Editar Pergunta</h1>
+          <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
+          Adicionar/Editar Pergunta
+          </Typography>
           <br />
-      <BasicButton  title='Enviar' />
+         <TextField id="outlined-basic" label="Pergunta" sx={{width:710, ml:8}} variant="outlined" /> <br /><br />
+         <TextField id="outlined-basic" label="Resposta" sx={{width:710, ml:8}} variant="outlined" />
+          <br /><br />
+         <FaqButton1  title='Cancelar' />
+         <FaqButton2  title='Salvar' />
+        </Box>
+
+      </Modal>
+
 
-      <section className='CommonQuestionsSection' >
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-      </section>
     </FaqView>
   )
 }

src/pages/administrative/notification/index.tsx

@@ -2,35 +2,56 @@ import Head from 'next/head'
 import React from 'react'
 import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
 import Header from '../../../components/header/Header'
-import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
+import { NotificationView } from './notificationView'
 import BasicButton from '../../../components/buttons/basicButton/BasicButton';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Checkbox from '@mui/material/Checkbox';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
+import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
+import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
 
 
+import Autocomplete from '@mui/material/Autocomplete';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 900,
+  height: 500,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+  overflowY: 'scroll'
+};
 
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 export default function commonQuestions() {
 
-  const [month, setMonth] = React.useState('');
+  const [open, setOpen] = React.useState(false);
-  const [unidade, setUnidade] = React.useState('');
+  const handleOpen = () => setOpen(true);
-
+  const handleClose = () => setOpen(false);
-  const handleChangeMonth = (event: SelectChangeEvent) => {
-    setMonth(event.target.value);
-  };
-  const handleChangeUnidade = (event: SelectChangeEvent) => {
-    setUnidade(event.target.value);
-  };
 
 
 
   return (
-    <FaqView>
+    <NotificationView>
       <Head>
         <title>Smart Energia - FAQ</title>
       </Head>
@@ -38,45 +59,89 @@ export default function commonQuestions() {
       <h1>Perguntas Frequentes</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-      <TextField id="standard-basic" label="Mensagem" sx={{width:700}} variant="standard" />
 
-      <br />
+      <button className='btn2' onClick={handleOpen}>Open modal</button>
-
+        <Modal
-      <FormControl size='small' fullWidth sx={{ width: 135}} >
+        open={open}
-
+        onClose={handleClose}
-        <InputLabel id="demo-simple-select-label">Clientes</InputLabel>
+        aria-labelledby="modal-modal-title"
-        <Select
+        aria-describedby="modal-modal-description"
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          value={month}
-          label="Month"
-          onChange={handleChangeMonth}
         >
-          <MenuItem value={15}>Cliente 1</MenuItem>
+         <Box sx={style}>
-          <MenuItem value={20}>Cliente 2</MenuItem>
+          <h1>Disparar Notificações</h1>
-          <MenuItem value={30}>Cliente 3</MenuItem>
+          <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
-          <MenuItem value={30}>Cliente 4</MenuItem>
+          Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis</Typography>
-          <MenuItem value={30}>Cliente 5</MenuItem>
+          <br />
-          <MenuItem value={30}>Cliente 6</MenuItem>
+         <TextField id="outlined-basic" label="Título" sx={{width:700, ml:8}} variant="outlined" /> <br /><br />
-          <MenuItem value={30}>Cliente 7</MenuItem>
+
+         <Autocomplete
+          multiple
+          id="checkboxes-tags-demo"
+          options={top100Films}
+          disableCloseOnSelect
+          getOptionLabel={(option) => option.title}
+          renderOption={(props, option, { selected }) => (
+            <li {...props}>
+          <Checkbox
+            icon={icon}
+            checkedIcon={checkedIcon}
+            style={{ marginRight: 8 }}
+            checked={selected}
+          />
+          {option.title}
+        </li>
+      )}
+      sx={{ml:8}}
+      style={{ width: 700 }}
+      renderInput={(params) => (
+        <TextField {...params} label="Corpo/Conteúdo da notificação" placeholder="Corpo/Conteúdo da notificação" />
+      )}
+    />
+      <div>
+      <Checkbox sx={{ml:7}}
+      icon={<RadioButtonUncheckedIcon />}
+      checkedIcon={<RadioButtonCheckedIcon />}
+      />
+        <Typography sx={{color:'#1976D2', fontSize:12, ml:12, mt:-3.7}} >
+        Disparar para todos os clientes</Typography>
+        <Checkbox sx={{ml:7}}
+      icon={<RadioButtonUncheckedIcon />}
+      checkedIcon={<RadioButtonCheckedIcon />}
+      />
+      <Typography sx={{color:'#1976D2', fontSize:12, ml:12, mt:-3.7}} >
+      Disparar somente para alguns clientes</Typography>
+</div>
+
+
+         <FaqButton1  title='Cancelar' />
+         <FaqButton2  title='Salvar' />
+        </Box>
+
+
+
+
+      </Modal>
+
+
+
+
+
+    </NotificationView>
 
-        </Select>
-      </FormControl>
-<br />
-      <BasicButton  title='Enviar' />
 
-      <section className='CommonQuestionsSection' >
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-      </section>
-    </FaqView>
   )
 }
+
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+];

src/pages/administrative/notification/notificationView.ts

@@ -0,0 +1,60 @@
+import styled from 'styled-components'
+
+
+
+export const NotificationView = styled.nav`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+
+
+    .btn{
+      background: #254F7F;
+      border-radius: 8px;
+      color: white;
+      width: 164px;
+      height: 40px;
+      border: none;
+
+    }
+    .btn2{
+      background: #FFBC10;
+      border-radius: 8px;
+      color: white;
+      width: 164px;
+      height: 40px;
+      border: none;
+      margin-left: 3px;
+    }
+    .buttons{
+      display: flex;
+      margin-top:50px ;
+      justify-content: space-between;
+      align-self:flex-start ;
+      margin-left: 20px;
+    }
+    .title{
+      display: flex;
+      justify-content: flex-start;
+      align-self:flex-start ;
+      flex-direction: column;
+      margin-left: 19px;
+    }
+
+/*
+  .teste{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 100px;
+  } */
+  .text1{
+    margin-left: 70px;
+  }
+  .header{
+    margin-top: 8px;
+  }
+
+
+`

src/styles/layouts/commonQuestions/FaqView.ts

@@ -33,4 +33,14 @@ export const FaqView = styled.main`
   hr {
     border: 1px solid #DDDDDD;
   }
+
+  /* .modal{
+    display: flex;
+    justify-self: flex-end;
+    align-self: center;
+    margin-left: 100px;
+
+  } */
+
+
 `