finalizing admin pages design

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",

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';

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 (
     <HeaderView>
       <section>
@@ -53,9 +51,11 @@ export default function Header({ name }: headerInterface) {
       <section>
         <Image src='/assets/png/copel.png' width={170} height={50} />
         <div className='icon' >
+          <p>
             olá, {'josé'}
+          </p>
         </div>
-        <Avatar {...stringAvatar('José Corte')} />
+        <Avatar {...stringAvatar('José Corte')} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
       </section>
     </HeaderView>
   )

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;
+
+    transform: translateX(16px);
+
+    p{
       color: white;
-
+      margin-left: 15%;
-    transform: translateX(12%);
-
-    ::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;
     }
   }
 `

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() {
             <Image src='/assets/logo.svg' width={100} height={100} />
           </div>
           <ul>
-            <Link href='/administrative'><li className={router.pathname=='/administrative'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
+            <Link href='/administrative'><li className={router.pathname=='/administrative' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
+            <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
+            <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
+            <Link href='/administrative/notifications'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
             {/* <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
               <div className='economiaDrawer drawer' >
                 <Link href='/administrative/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
@@ -61,9 +64,6 @@ export default function Sidebar() {
                 <Link href='/administrative/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
                 <Link href='/administrative/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
               </div> */}
-            <Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
-            <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
-            <Link href='/administrative/notifications'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
             {/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
             <Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
             <Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>

src/pages/administrative/clients.tsx

@@ -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 (
-    <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
-      <ClientsView>
-        <Header name='' />
-        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
-
-        <section>
-          <BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
-          <BasicButton title='Inativar' onClick={() => setOpenModalInativar(true)}/>
-        </section>
-
-        <section>
-          {/* <DataGrid
-            rows={rows}
-            columns={columns}
-            pageSize={6}
-            rowsPerPageOptions={[6]}
-            checkboxSelection
-          /> */}
-          <ClientsTable />
-        </section>
-      </ClientsView>
-
-      <Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
-        <ClientsModalView>
-          <PageTitle title='Adicionar Cliente' subtitle='Adicionar Cliente Smart Energia'/>
-          <article>
-            <TextField id="outlined-basic" label="Nome" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <TextField id="outlined-basic" label="email" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <TextField id="outlined-basic" label="senha" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <TextField id="outlined-basic" label="código" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <BasicButton title='Criar Cliente' onClick={() => console.log()}/>
-            <Button
-              variant="contained"
-              component="label"
-              style={{width: '300px'}}
-            >
-              Logo
-              <input
-                type="file"
-                hidden
-              />
-            </Button>
-          </article>
-        </ClientsModalView>
-      </Modal>
-
-      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
-        <ConfirmModalView>
-          <BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
-          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
-        </ConfirmModalView>
-      </ConfirmModal>
-    </div>
-  )
-}

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 (
+    <GeneralView>
+      <Header name=''/>
+      <section>
+      <FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
+        <Select
+          value={text}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem value={0}>Sobre Nós</MenuItem>
+          <MenuItem value={10}>Copel</MenuItem>
+          <MenuItem value={20}>Cliente 1</MenuItem>
+          <MenuItem value={30}>Cliente 2</MenuItem>
+        </Select>
+      </FormControl>
+      </section>
+      <Editor
+        onInit={(evt, editor) => editorRef.current = editor}
+        initialValue='        <p>A <strong>SMART ENERGIA</strong> é 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.</p>
+
+        <p>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. </p>
+
+        <p>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.</p>
+
+        <p>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.</p>
+        <ul>
+          <li>Informação</li>
+          <li>Economia</li>
+          <li>Gestão de Energia</li>
+          <li>Imparcialidade</li>
+          <li>Previsão de Custos</li>
+          <li>Experiência</li>
+          <li>Relacionamento</li>
+        </ul>'
+        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 }'
+        }}
+      />
+      <button onClick={log}>Log editor content</button>
+    </GeneralView>
+  )
+}

src/pages/administrative/index.tsx

@@ -1,11 +1,74 @@
-import { Editor } from '@tinymce/tinymce-react'
+import Button from '@mui/material/Button';
-import React from 'react'
+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 (
-    <>
+    <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
-      <div>Visão Geral</div>
+      <ClientsView>
-      <Editor />
+        <Header name='' />
-    </>
+        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
+
+        <section>
+          <BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
+          <BasicButton title='Inativar' onClick={() => setOpenModalInativar(true)}/>
+        </section>
+
+        <section>
+          {/* <DataGrid
+            rows={rows}
+            columns={columns}
+            pageSize={6}
+            rowsPerPageOptions={[6]}
+            checkboxSelection
+          /> */}
+          <ClientsTable />
+        </section>
+      </ClientsView>
+
+      <Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
+        <ClientsModalView>
+          <PageTitle title='Adicionar Cliente' subtitle='Adicionar Cliente Smart Energia'/>
+          <article>
+            <TextField id="outlined-basic" label="Nome" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <TextField id="outlined-basic" label="email" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <TextField id="outlined-basic" label="senha" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <TextField id="outlined-basic" label="código" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <BasicButton title='Criar Cliente' onClick={() => console.log()}/>
+            <Button
+              variant="contained"
+              component="label"
+              style={{width: '300px'}}
+            >
+              Logo
+              <input
+                type="file"
+                hidden
+              />
+            </Button>
+          </article>
+        </ClientsModalView>
+      </Modal>
+
+      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
+        <ConfirmModalView>
+          <BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
+          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
+        </ConfirmModalView>
+      </ConfirmModal>
+    </div>
   )
 }

src/pages/administrative/notifications/index.tsx

@@ -31,7 +31,7 @@ export default function commonQuestions() {
         <Head>
           <title>Smart Energia - FAQ</title>
         </Head>
-        <Header />
+        <Header name=''/>
 
         <NotificationsTable />
       </FaqView>

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() {
         <title>Smart Energia - Custos Estimados</title>
       </Head>
       <Header name='' />
-      <PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
+      <PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
       <section>
         <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
       </section>

src/pages/pld/index.tsx

@@ -54,8 +54,8 @@ export default function region() {
       </Head>
       <Header name='' />
       <RenderIf isTrue={page==='table'? true : false}>
-        <Link href='/dashboard' >{'< voltar para visão geral'}</Link>
+        <Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
-        <PageTitle title='Tabela de consumo Pld' subtitle=''/>
+        <PageTitle title='Tabela de consumo PLD' subtitle=''/>
         <PldTableView>
           <table className="tg">
             <thead>
@@ -184,7 +184,7 @@ export default function region() {
           </table>
           <section>
             <article onClick={() => setPage('perMouth')}>
-              <p>Valores Diarios</p>
+              <p>Valores Diários</p>
             </article>
             <article onClick={() => setPage('perDate')}>
               <p>Valores Horários</p>
@@ -194,8 +194,8 @@ export default function region() {
       </RenderIf>
 
       <RenderIf isTrue={page==='perMouth'? true : false}>
-        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
+        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
-        <PageTitle title='Consumo por mês' subtitle=''/>
+        <PageTitle title='Resumo PLD - Mensal' subtitle=''/>
         <PldGraphView>
           <section className='toolsbar'>
             <div className='select'>
@@ -207,10 +207,10 @@ export default function region() {
                   width: '100%'
                 }}
               >
-                <MenuItem value={0}>Filial 3</MenuItem>
+                <MenuItem value={0}>Norte</MenuItem>
-                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={10}>Nordeste</MenuItem>
-                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={20}>Sul</MenuItem>
-                <MenuItem value={30}>Thirty</MenuItem>
+                <MenuItem value={30}>Sudeste</MenuItem>
               </Select>
             </div>
             <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
@@ -221,12 +221,12 @@ export default function region() {
       </RenderIf>
 
       <RenderIf isTrue={page==='perDate'? true : false}>
-        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
+        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
         <PldGraphView>
-          <PageTitle title='Consumo por dia' subtitle=''/>
+          <PageTitle title='Resumo PLD - Horas' subtitle=''/>
           <section className='toolsbar'>
             <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
-            <BasicButton title='Download (csv)' />
+            <BasicButton title='Download (csv)' onClick={() => console.log()}/>
           </section>
           <LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
         </PldGraphView>

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

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);
+};

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%;
+`

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"