From 4c7aeb9f4e926b77d8c87e6e0e04c6cb95c66b16 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Mon, 13 Jun 2022 09:24:26 -0300 Subject: [PATCH] finalizing admin pages design --- package.json | 1 + .../administrativeTables/ClientsTableView.ts | 12 +++ src/components/header/Header.tsx | 14 +-- src/components/header/HeaderView.ts | 42 ++------- src/components/sidebar/Sidebar.tsx | 10 +-- src/pages/administrative/clients.tsx | 74 ---------------- src/pages/administrative/general.tsx | 86 +++++++++++++++++++ src/pages/administrative/index.tsx | 77 +++++++++++++++-- .../administrative/notifications/index.tsx | 2 +- src/pages/estimatedCost.tsx | 3 +- src/pages/pld/index.tsx | 24 +++--- src/services/api.ts | 22 +++++ src/services/auth.ts | 10 +++ src/styles/layouts/general/GeneralView.tsx | 11 +++ yarn.lock | 43 ++++++++++ 15 files changed, 289 insertions(+), 142 deletions(-) delete mode 100644 src/pages/administrative/clients.tsx create mode 100644 src/pages/administrative/general.tsx create mode 100644 src/services/api.ts create mode 100644 src/services/auth.ts create mode 100644 src/styles/layouts/general/GeneralView.tsx diff --git a/package.json b/package.json index 2dea1c5..6eeb9a1 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@types/react-csv": "^1.1.2", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", + "axios": "^0.27.2", "chart.js": "^3.7.1", "chartjs-plugin-datalabels": "^2.0.0", "eslint-plugin-react": "^7.29.4", diff --git a/src/components/administrativeTables/ClientsTableView.ts b/src/components/administrativeTables/ClientsTableView.ts index aa4aed0..08d8daf 100644 --- a/src/components/administrativeTables/ClientsTableView.ts +++ b/src/components/administrativeTables/ClientsTableView.ts @@ -5,7 +5,19 @@ export const ClientTableView = styled.main` color: #6A707E; + thead { + border-radius: 16px; + background-color: #f9f9f9; + + th { + font-size: 12px; + font-family: 'inter'; + font-weight: 800; + font-style: italic; + } + } tbody { + border-radius: 16px; tr { th { font-family: 'poppins'; diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index ad1ab95..22fa066 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,8 +1,7 @@ -import React from 'react' -import Image from 'next/image'; - -import TextField from '@mui/material/TextField'; import Avatar from '@mui/material/Avatar'; +import TextField from '@mui/material/TextField'; +import Image from 'next/image'; +import React from 'react' import { HeaderView } from './HeaderView' @@ -38,7 +37,6 @@ interface headerInterface { } export default function Header({ name }: headerInterface) { - return (
@@ -53,9 +51,11 @@ export default function Header({ name }: headerInterface) {
- olá, {'josé'} +

+ olá, {'josé'} +

- +
) diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 736f6b4..d123174 100644 --- a/src/components/header/HeaderView.ts +++ b/src/components/header/HeaderView.ts @@ -11,58 +11,32 @@ export const HeaderView = styled.header` section { width: 30%; - :last-child { display: flex; justify-content: flex-end; - align-items: flex-start; + align-items: center; height: fit-content; } } .icon { - position: relative; - display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; - width: 150px; + min-width: 120px; height: 40px; - border-radius: 8px; + border-radius: 8px 0 0 8px; background-color: #254F7F; - color: white; - transform: translateX(12%); + transform: translateX(16px); - ::after { - content: ""; - position: relative; - left: 2.5rem; - background-color: #fff; - width: 45px; - height: 45px; - border-radius: 50%; - } - } - - @media (max-width: 1020px) { - .icon { - display: none; - } - section { - width: 50%; - } - } - @media (max-width: 1640px) { - .icon { - transform: translateX(6%); - } - input { - height: 2rem; + p{ + color: white; + margin-left: 15%; } } ` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 97fcc8d..f44a022 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -35,7 +35,7 @@ export default function Sidebar() { const router = useRouter() const user = { - role: 'admin' + role: 'client' } useEffect(() => { @@ -53,7 +53,10 @@ export default function Sidebar() {
    -
  • {'Visão Geral'}
    • +
  • {'Clientes >'}
    • +
  • {'Visão Geral'}
    • +
  • {'FAQ >'}
    • +
  • {'Notificações >'}

    25

    • {/*
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
  • Economia Bruta
    • @@ -61,9 +64,6 @@ export default function Sidebar() {
  • Custo Estimado
  • Custo R/MWh
    • */} -
  • {'Clientes >'}
    • -
  • {'FAQ >'}
    • -
  • {'Notificações >'}

    25

    • {/*
  • {'Telemetria >'}
  • {'Resumo de Op. '}
  • {'Notícias >'}
    • diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx deleted file mode 100644 index 17fa2cd..0000000 --- a/src/pages/administrative/clients.tsx +++ /dev/null @@ -1,74 +0,0 @@ -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 AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; -import ClientsTable from '../../components/administrativeTables/ClientsTable'; -import BasicButton from '../../components/buttons/basicButton/BasicButton' -import Header from '../../components/header/Header' -import ConfirmModal from '../../components/modal/ConfirmModal'; -import Modal from '../../components/modal/Modal'; -import PageTitle from '../../components/pageTitle/PageTitle' -import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView' - -export default function clients() { - const [openModal, setOpenModal] = useState(false) - const [openModalInativar, setOpenModalInativar] = useState(false) - - return ( -
    - -
    - - -
    - setOpenModal(true)}/> - setOpenModalInativar(true)}/> -
    - -
    - {/* */} - -
    - - - {setOpenModal(value)}}> - - -
    - - - - - console.log()}/> - -
    -     -     - - {setOpenModalInativar(value)}}> - - setOpenModalInativar(true)}/> - setOpenModalInativar(true)}/> - - -
    - ) -} diff --git a/src/pages/administrative/general.tsx b/src/pages/administrative/general.tsx new file mode 100644 index 0000000..b45eead --- /dev/null +++ b/src/pages/administrative/general.tsx @@ -0,0 +1,86 @@ +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; +import { Editor } from '@tinymce/tinymce-react' +import React, { useRef, useState } from 'react' + +import Header from '../../components/header/Header'; +import { GeneralView } from '../../styles/layouts/general/GeneralView' + +export default function index() { + const editorRef = useRef(null); + const [text, setText] = useState(''); + + const log = () => { + if (editorRef.current) { + console.log(editorRef.current.getContent()); + } + }; + + const handleChange = (event: SelectChangeEvent) => { + setText(event.target.value); + }; + + return ( + +
    +
    + + + +
    + editorRef.current = editor} + initialValue='

    A SMART ENERGIA é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil. + Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.

    + +

    Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os + Vendedores de energia.

    + +

    Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de + energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.

    + +

    Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia, + aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de + contratação de energia.

    +
      +
    • Informação
      • +
    • Economia
      • +
    • Gestão de Energia
      • +
    • Imparcialidade
      • +
    • Previsão de Custos
      • +
    • Experiência
      • +
    • Relacionamento
      • +
    ' + init={{ + height: 500, + width: '100%', + menubar: false, + plugins: [ + 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', + 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', + 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' + ], + toolbar: 'undo redo | blocks | ' + + 'bold italic forecolor | alignleft aligncenter ' + + 'alignright alignjustify | bullist numlist outdent indent | ' + + 'removeformat | help', + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' + }} + /> + + + ) +} diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx index 6e5b4f7..17fa2cd 100644 --- a/src/pages/administrative/index.tsx +++ b/src/pages/administrative/index.tsx @@ -1,11 +1,74 @@ -import { Editor } from '@tinymce/tinymce-react' -import React from 'react' +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 AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; +import ClientsTable from '../../components/administrativeTables/ClientsTable'; +import BasicButton from '../../components/buttons/basicButton/BasicButton' +import Header from '../../components/header/Header' +import ConfirmModal from '../../components/modal/ConfirmModal'; +import Modal from '../../components/modal/Modal'; +import PageTitle from '../../components/pageTitle/PageTitle' +import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView' + +export default function clients() { + const [openModal, setOpenModal] = useState(false) + const [openModalInativar, setOpenModalInativar] = useState(false) -export default function index() { return ( - <> -
    Visão Geral
    - - +
    + +
    + + +
    + setOpenModal(true)}/> + setOpenModalInativar(true)}/> +
    + +
    + {/* */} + +
    + + + {setOpenModal(value)}}> + + +
    + + + + + console.log()}/> + +
    +     +     + + {setOpenModalInativar(value)}}> + + setOpenModalInativar(true)}/> + setOpenModalInativar(true)}/> + + +
    ) } diff --git a/src/pages/administrative/notifications/index.tsx b/src/pages/administrative/notifications/index.tsx index d398c8c..cfce39c 100644 --- a/src/pages/administrative/notifications/index.tsx +++ b/src/pages/administrative/notifications/index.tsx @@ -31,7 +31,7 @@ export default function commonQuestions() { Smart Energia - FAQ -
    +
    diff --git a/src/pages/estimatedCost.tsx b/src/pages/estimatedCost.tsx index 76326cc..614aa40 100644 --- a/src/pages/estimatedCost.tsx +++ b/src/pages/estimatedCost.tsx @@ -6,7 +6,6 @@ import { LineBarChart } from '../components/graph/LineBarChart' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { ConsumoEstimado } from '../services/consumoEstimado' - import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView' export default function EstimatedCost() { @@ -16,7 +15,7 @@ export default function EstimatedCost() { Smart Energia - Custos Estimados
    - +
    diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 5db0cd5..ee633ef 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -54,8 +54,8 @@ export default function region() {
    - {'< voltar para visão geral'} - + {'< Voltar para Visão Geral'} + @@ -184,7 +184,7 @@ export default function region() {
    setPage('perMouth')}> -

    Valores Diarios

    +

    Valores Diários

    setPage('perDate')}>

    Valores Horários

    @@ -194,8 +194,8 @@ export default function region() { - setPage('table')}>{'< voltar para tabela pld'} - + setPage('table')}>{'< voltar para tabela PLD'} +
    @@ -207,10 +207,10 @@ export default function region() { width: '100%' }} > - Filial 3 - Filial 3 - Twenty - Thirty + Norte + Nordeste + Sul + Sudeste
    @@ -221,12 +221,12 @@ export default function region() { - setPage('table')}>{'< voltar para tabela pld'} + setPage('table')}>{'< voltar para tabela PLD'} - +
    - + console.log()}/>
    diff --git a/src/services/api.ts b/src/services/api.ts new file mode 100644 index 0000000..594b812 --- /dev/null +++ b/src/services/api.ts @@ -0,0 +1,22 @@ +import axios, { AxiosRequestConfig } from "axios"; +import { getToken } from "./auth"; + +const api = axios.create({ + // baseURL: "http://192.168.0.132:3000/", + baseURL: "http://localhost:3000/", + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + } +}); + +api.interceptors.request.use(config => { + const token = getToken(); + // console.log(token) + if (config.headers === undefined && token === undefined) { + config.headers = {Authorization: `Bearer ${token}`}; + } + return config; + }, +); + +export default api diff --git a/src/services/auth.ts b/src/services/auth.ts new file mode 100644 index 0000000..d9807a0 --- /dev/null +++ b/src/services/auth.ts @@ -0,0 +1,10 @@ +export const TOKEN_KEY = "@test"; +export const isAuthenticated = () => localStorage.getItem(TOKEN_KEY) !== null; +// export const isAuthenticated = true; +export const getToken = () => localStorage.getItem(TOKEN_KEY); +export const login = (token: any) => { + localStorage.setItem(TOKEN_KEY, token); +}; +export const logout = () => { + localStorage.removeItem(TOKEN_KEY); +}; \ No newline at end of file diff --git a/src/styles/layouts/general/GeneralView.tsx b/src/styles/layouts/general/GeneralView.tsx new file mode 100644 index 0000000..2c32b08 --- /dev/null +++ b/src/styles/layouts/general/GeneralView.tsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; + +export const GeneralView = styled.main` + display: flex; + align-items: center; + justify-content: center; + + flex-direction: column; + + width: 100%; +` diff --git a/yarn.lock b/yarn.lock index 40fa454..6b0cb7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1688,10 +1688,21 @@ astral-regex@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz" +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + axe-core@^4.3.5: version "4.4.1" resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz" +axios@^0.27.2: + version "0.27.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" + dependencies: + follow-redirects "^1.14.9" + form-data "^4.0.0" + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz" @@ -1962,6 +1973,12 @@ columnify@^1.6.0: strip-ansi "^6.0.1" wcwidth "^1.0.0" +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + dependencies: + delayed-stream "~1.0.0" + commander@^8.3.0: version "8.3.0" resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz" @@ -2083,6 +2100,10 @@ define-properties@^1.1.3, define-properties@^1.1.4: has-property-descriptors "^1.0.0" object-keys "^1.1.1" +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -2505,6 +2526,18 @@ flatted@^3.1.0: version "3.2.5" resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz" +follow-redirects@^1.14.9: + version "1.15.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5" + +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fs-extra@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf" @@ -3322,6 +3355,16 @@ micromatch@^4.0.4: braces "^3.0.2" picomatch "^2.3.1" +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + dependencies: + mime-db "1.52.0" + mimic-fn@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"