uploading to fix marge

package.json

@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "faker": "5.5.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.6.4",
@@ -33,6 +34,7 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
+    "@types/faker": "5.5.3",
     "@types/chartjs": "^0.0.31",
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",

pages/_app.tsx

@@ -1,17 +1,33 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
+
 import '../styles/globals.ts'
 
 import { AppProps } from 'next/app'
 import Sidebar from '../src/components/sidebar/Sidebar'
 import { GlobalStyle } from '../styles/globals'
 import { AppView } from '../styles/app/AppView'
+import Home from '.'
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const [ auth, setAuth ] = useState(false)
+
+  const router = useRouter()
+  const rota = router.pathname
+
   return (
     <AppView>
+      <Home auth={rota} />
       <GlobalStyle />
+      {
+        rota != '/'?
+          <>
             <Sidebar />
             <Component {...pageProps} />
+          </>
+          :
+          null
+      }
     </AppView>
   )
 }

pages/areaTest.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import BasicButton from '../src/components/buttons/basicButton/BasicButton'
-import Graph from '../src/components/graph/Graph'
+import Graph from '../src/components/graph/Chart'
 
 export default function areaTest() {
   return (
-    // <Graph />
+    <Graph title='Indicador de custo' />
-    <BasicButton title='texto'/>
   )
 }

pages/consumption.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Chart from '../src/components/graph/Chart'
+import Header from '../src/components/header/Header'
+import { ConsumptionView } from '../styles/layouts/consumption/ConsumptionView'
+
+export default function Consumption() {
+  return (
+    <ConsumptionView>
+      <Header name='' />
+      <section>
+        <h1>Consumo</h1>
+        <span>Análise de Consumo</span>
+      </section>
+      <section>
+        <Chart title='Indicador de custo' />
+      </section>
+    </ConsumptionView>
+  )
+}

pages/dashboard.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import { DashboardView } from '../styles/layouts/Dashboard/DashboardView'
+import { DashboardView } from '../styles/layouts/dashboard/DashboardView'
 import MapCard from '../src/components/mapCard/MapCard'
-import GraphCard from '../src/components/graph/graphCard/GraphCard'
+import GraphCard from '../src/components/graph/graphCard/ChartCard'
 
 export default function Dashboard() {
   return (

pages/index.tsx

@@ -1,51 +1,23 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router'
 
 
-import Box from '@mui/material/Box';
+import { LoginView} from  '../styles/layouts/login/LoginView';
-import IconButton from '@mui/material/IconButton';
+import { truncateSync } from 'fs';
-import Input from '@mui/material/Input';
-import FilledInput from '@mui/material/FilledInput';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
 
+interface HomeInterface {
+  auth: any
+}
 
-import { LoginView} from  '../styles/layouts/Login/LoginView';
+export default function Home({ auth }: HomeInterface) {
 
-
+  const router = useRouter()
-export default function Home() {
+  const rota = router.pathname
-  // interface State {
-  //   amount: string;
-  //   password: string;
-  //   weight: string;
-  //   weightRange: string;
-  //   showPassword: boolean;
-  // }
-  // const [values, setValues] = React.useState<State>({
-  //   amount: '',
-  //   password: '',
-  //   weight: '',
-  //   weightRange: '',
-  //   showPassword: false,
-  // });
-
-  // const handleChange =
-  //   (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
-  //     setValues({ ...values, [prop]: event.target.value });
-  //   };
-
-  // const handleClickShowPassword = () => {
-  //   setValues({
-  //     ...values,
-  //     showPassword: !values.showPassword,
-  //   });
-  // };
 
   return (
-    <LoginView>
+    <LoginView auth={rota} >
       <Image src='/assets/marca1.svg' width={600} height={700}/>
       <section className="container">
         <h1>Bem-Vindo</h1>
@@ -53,7 +25,9 @@ export default function Home() {
         <input type="text" placeholder='Login'/>
         <input type="text" placeholder='Senha'/>
         <span>Esqueceu a senha ?</span>
+        <Link href='/dashboard' >
           <button>ENTRAR</button>
+        </Link>
 
         <fieldset>
           <legend>Ou</legend>

pages/resumoOperacao.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Sidebar from '../src/components/sidebar/Sidebar';
 
-import { TableView} from  '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+import { TableView} from  '../styles/layouts/resumoOperacao/ResumoOperacaoView';
 
 
 
@@ -10,7 +10,6 @@ export default function ResumoOperacao() {
 
 
     <TableView>
-      <Sidebar />
       <h1>Resumo de Operaçoes</h1>
       <h2>Operações detalhadas</h2>
       <h3>Seletor Mês</h3>

pages/telemetria.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import BasicButton from '../src/components/buttons/basicButton/BasicButton'
 
-import { TelemetriaView} from  '../styles/layouts/Telemetria/TelemetriaView';
+import { TelemetriaView} from  '../styles/layouts/telemetria/TelemetriaView';
 
 
 

public/icon.svg

@@ -0,0 +1,3 @@
+<svg width="206" height="56" viewBox="0 0 206 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.297363" width="206" height="54.7704" rx="8" fill="#254F7F"/>
+</svg>

src/components/graph/Chart.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+
+import { Bar, Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+import faker from 'faker'
+import { ChartView } from './ChartView';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+)
+
+interface ChartInterface {
+  title: string,
+}
+
+export default function Chart({ title }: ChartInterface) {
+  const [ graphData, setGraphData ] = useState({
+    labels: [],
+    datasets: [],
+  })
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'bottom' as const,
+      },
+      title: {
+        display: true,
+        text: title,
+      },
+    },
+  };
+
+  const labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'];
+
+  useEffect(() => {
+    setGraphData({
+      labels,
+      datasets: [
+        {
+          label: '2020',
+          data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
+          backgroundColor: 'rgba(53, 162, 235, 5)',
+        },
+        {
+          label: '2021',
+          data: labels.map(() => faker.datatype.number({ min: 0, max: 1200 })),
+          backgroundColor: 'rgba(0, 81, 255, 1)',
+        },
+      ],
+    })
+  }, [])
+
+
+  return (
+    <ChartView>
+      <Bar
+        options={options}
+        data={graphData}
+      />
+    </ChartView>
+  )
+}

src/components/graph/ChartView.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components"
+
+export const ChartView = styled.div`
+  width: 100%;
+`

src/components/graph/Graph.tsx

@@ -1,63 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-import { Bar, Line } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js'
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-)
-
-export default function Graph() {
-
-  const [ graphData, setGraphData ] = useState({
-    labels: [],
-    datasets: [],
-  })
-  const [ graphOptions, setGraphOptions ] = useState({})
-
-  useEffect(() => {
-    setGraphData({
-      labels: ['John', 'kevin', 'george', 'michael', 'oreo'],
-      datasets: [{
-        label: "Whom'st let the dogsout",
-        data: [12, 55, 34, 120, 720],
-        borderColor: "rgb(53, 162, 235)",
-        backgroundColor: "rgb(53, 162, 235, 0.4)"
-      }]
-    })
-    setGraphOptions({
-      responsive: true,
-      plugins: {
-        legend: {
-          position: 'top'
-        },
-        title: {
-          display: true,
-          text: "Whom'st let the dogsout"
-        }
-      }
-    })
-  }, [])
-
-
-  return (
-    <Line
-      options={graphOptions}
-      data={graphData}
-      // {}
-    />
-  )
-}

src/components/graph/graphCard/ChartCard.tsx

@@ -4,16 +4,16 @@ import Link from 'next/link';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
-import { GraphCardView } from './GraphCardView';
+import { ChartCardView } from './ChartCardView';
 
-interface GraphCardInterface {
+interface ChartCardInterface {
   title: string,
   subtitle: string,
   consumption?: number,
   className?: string
 }
 
-export default function GraphCard({ title, subtitle, consumption, className }: GraphCardInterface) {
+export default function ChartCard({ title, subtitle, consumption, className }: ChartCardInterface) {
   const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
 
   const handleAlignment = (
@@ -24,7 +24,7 @@ export default function GraphCard({ title, subtitle, consumption, className }: G
   };
 
   return (
-    <GraphCardView className={className} >
+    <ChartCardView className={className} >
       <div className='content' >
         <div className='header'>
           <div>
@@ -64,6 +64,6 @@ export default function GraphCard({ title, subtitle, consumption, className }: G
         }
       </div>
       <div className='graph' />
-    </GraphCardView>
+    </ChartCardView>
   )
 }

src/components/graph/graphCard/ChartCardView.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const GraphCardView = styled.article`
+export const ChartCardView = styled.article`
   display: flex;
   align-items: center;
   justify-content: space-between;

src/components/header/Header.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import Image from 'next/image';
+
+import TextField from '@mui/material/TextField';
+import Avatar from '@mui/material/Avatar';
+
+import { HeaderView } from './HeaderView'
+
+function stringToColor(string: string) {
+  let hash = 0;
+  let i;
+
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+
+  return color;
+}
+
+function stringAvatar(name: string) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+  };
+}
+
+interface headerInterface {
+  name: string
+}
+
+export default function Header({ name }: headerInterface) {
+
+  return (
+    <HeaderView>
+      <section>
+        <TextField
+          id="outlined-textarea"
+          label="Encontre na Página"
+          placeholder="Encontre na Página"
+          multiline
+          fullWidth
+        />
+      </section>
+      <section>
+        <Image src='/copel.svg' width={150} height={150} />
+        <div className='icon' >
+          olá, {'josé'}
+        </div>
+        <Avatar {...stringAvatar('José Corte')} />
+      </section>
+    </HeaderView>
+  )
+}

src/components/header/HeaderView.ts

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+export const HeaderView = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  flex-direction: row;
+
+  height: 5rem;
+
+  section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+
+    :first-child {
+      width: 30%;
+    }
+  }
+
+  .icon {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 150px;
+    height: 43px;
+
+    border-radius: 8px;
+
+    background-color: #254F7F;
+    color: white;
+
+    transform: translateX(20px);
+
+    ::after {
+      content: "";
+      position: relative;
+      left: 40px;
+      background-color: #FFF;
+      width: 45px;
+      height: 45px;
+      border-radius: 100%;
+    }
+  }
+`

src/components/sidebar/Sidebar.tsx

@@ -1,5 +1,7 @@
-import Image from 'next/image'
 import React, { useState } from 'react'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+
 import { SidebarView } from './SidebarView'
 
 export default function Sidebar() {
@@ -7,6 +9,10 @@ export default function Sidebar() {
 
   const [ viewModal, setViewModal ] = useState(false)
 
+  const router = useRouter()
+
+  console.log(router.pathname)
+
   return (
     <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
       <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
@@ -16,8 +22,8 @@ export default function Sidebar() {
         <Image src='/assets/logo.svg' width={100} height={100} />
       </div>
       <ul>
-        <li>{'Visão Geral'}</li>
+        <li className={router.pathname=='/dashboard'? 'actualPath' : null} >{'Visão Geral'}</li>
-        <li>{'Consumo'}</li>
+        <li className={router.pathname=='/consumption'? 'actualPath' : null} >{'Consumo'}</li>
         <li>{'Resumo de Op. >'}</li>
         <li onClick={() => setEconomiaDrawer(!economiaDrawer)} >{'Economia >'}</li>
         <div className='economiaDrawer drawer' >

src/components/sidebar/SidebarView.ts

@@ -23,6 +23,11 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
 
   background-color: #FFFFFF;
 
+  .actualPath {
+    border-left: #254F7F solid 8px;
+    background-color: #FAFBFF;
+  }
+
   ul {
     display: flex;
     justify-content: center;
@@ -34,6 +39,8 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
 
     width: 100%;
 
+    padding: 0;
+
     li {
       display: flex;
       align-items: center;
@@ -51,6 +58,10 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
       color: #969BA0;
 
       cursor: pointer;
+
+      padding-left: 40px;
+
+
     }
 
     .economiaDrawer {
@@ -78,13 +89,17 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
       font-family: 'Poppins';
       font-style: normal;
       font-weight: 600;
-      font-size: 14px;
+      font-size: 90%;
       line-height: 21px;
       text-align: center;
 
       color: #FFFFFF;
     }
 
+    h3 {
+      font-size: 90%;
+    }
+
     div {
       display: flex;
       justify-content: center;

styles/app/AppView.ts

@@ -3,7 +3,11 @@ import styled from 'styled-components'
 export const AppView = styled.main`
   display: flex;
 
+  margin: 0;
+  padding: 0;
+
   @media (max-width: 1196px) {
     flex-direction: column;
+    margin: 0;
   }
 `

styles/globals.ts

@@ -7,6 +7,10 @@ export const GlobalStyle = createGlobalStyle`
     font-family: 'Poppins';
   }
 
+  main {
+    padding: 2.5rem;
+  }
+
   a {
     color: inherit;
     text-decoration: none;
@@ -14,6 +18,7 @@ export const GlobalStyle = createGlobalStyle`
 
   * {
     box-sizing: border-box;
+    /* margin: 0; */
   }
 `;
 

styles/layouts/Dashboard/DashboardView.ts

@@ -16,8 +16,6 @@ export const DashboardView = styled.main`
 
   width: 100%;
 
-  padding: 30px;
-
   span {
     font-family: 'Poppins';
     font-style: normal;

styles/layouts/Login/LoginView.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const LoginView = styled.main`
+export const LoginView = styled.main<{auth: string}>`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -10,7 +10,7 @@ export const LoginView = styled.main`
   height: 100vh;
   background-color: #f9f9f9;
 
-
+  display: ${props => props.auth == '/'? null : 'none'};
 
   .container{
     display: flex;
@@ -25,19 +25,20 @@ export const LoginView = styled.main`
     padding-left: 50px;
     padding-right: 50px;
     margin-left: 8rem;
-
-
   }
+
   @media screen and (max-width: 1008px) {
     justify-content: center;
     .container {
       margin: 0;
     }
   }
+
   h1{
     margin-bottom:5px;
     color: #092C4C;
   }
+
   h2{
     font-weight: 5;
     font-size: 21px;
@@ -65,27 +66,21 @@ export const LoginView = styled.main`
     border: 0;
     margin-top: 2.5rem;
   }
+
   input::placeholder {
     color: #ABB3BB;
     font-size: 12px;
   }
 
-
   span {
-
     font-size: 12px;
     color: #254F7F;
-
-
   }
+
   p {
     color:#8B8B8B;
     font-size: 12px;
     margin-bottom: 22px;
-
-
-
-
   }
 
   fieldset {
@@ -96,35 +91,11 @@ export const LoginView = styled.main`
     display: block;
     text-align: center;
     width: 100%;
-
-
   }
+
   fieldset legend {
       padding: 19px 56px;
       color: #ABB3BB;
       font-size: 14px;
   }
-
-
-
-
-
-/* .app {
-  display: grid;
-  place-items: center;
-  min-height: 100vh;;
-}
-.password-field{
-     padding: 0.5rem 1rem;
-  }
-
-  .btnClick{
-    padding: 1px;
-    font-size: 1.2rem;
-    outline: none;
-    border: none;
-  } */
-
-
-
 `;

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -26,35 +26,47 @@ export const TableView = styled.div`
     word-break:normal;
 
   }
-.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
+  .tg th{
-  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
+    border-color:black;
+    border-style:solid;
+    border-width:1px;
+    font-family:Arial, sans-serif;
+    font-size:14px;
+    font-weight:normal;
+    overflow:hidden;
+    padding:10px 5px;
+    word-break:normal;
+  }
 
-.tg .tg-baqh{text-align:center;vertical-align:top}
+  .tg .tg-baqh{
-.tg .tg-0lax{text-align:left;vertical-align:top}
+    text-align:center;
-.tg .tg-womg{background-color:#dddfe1;text-align:center;vertical-align:top}
+    vertical-align:top
+  }
+  .tg .tg-0lax{
+    text-align:left;
+    vertical-align:top
+  }
+  .tg .tg-womg{
+    background-color:#dddfe1;
+    text-align:center;
+    vertical-align:top
+  }
 
   h1{
-
     color: #000;
     font-family: Poppins;
-    font-size: 15px;
+    font-size: 15px
-
-
   }
   h2{
-
     color: #969BA0;
     font-family: Poppins;
     font-size: 11px;
     font-weight: 400;
     margin-top: 1px;
-
-
   }
 
 
   h3{
-
     color: #254F7F;
     font-family: Poppins;
     font-size: 15px;

styles/layouts/consumption/ConsumptionView.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const ConsumptionView = styled.main`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  span {
+    color: #969BA0;
+
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  section {
+    margin-bottom: 160px;
+
+    canvas {
+      max-height: 30rem;
+    }
+  }
+`