Finalizado ex dashboard

ReactProjFinal/frontend/src/App.css

@@ -1,38 +1,16 @@
-.App {
-  text-align: center;
+.logo {
+  float: left;
+  width: 120px;
+  height: 31px;
+  margin: 16px 24px 16px 0;
+  background: rgba(0, 0, 0, 0.3);
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.ant-row-rlt .logo {
+  float: right;
+  margin: 16px 0 16px 24px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.site-layout-background {
+  background-color: white;
 }

ReactProjFinal/frontend/src/App.jsx

@@ -1,14 +1,16 @@
-import React from "react"
-import Header from "./components/Header/Header"
-import Content from "./components/Content"
-import Footer from "./components/Footer/Footer"
+import React from "react";
+import Dashboard from "./pages/Recharts/Dashboard";
+//import Header from "./components/Header/Header";
+//import Content from "./components/Content";
+//import Footer from "./components/Footer/Footer";
 
 function App() {
   return (
     <>
-      <Header />
+      <Dashboard />
+      {/* <Header />
       <Content />
-      <Footer />
+      <Footer /> */}
     </>
   );
 }

ReactProjFinal/frontend/src/index.jsx

@@ -1,8 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "bootstrap/dist/css/bootstrap.min.css"
-import "./index.css";
+//import "bootstrap/dist/css/bootstrap.min.css"
+//import "./index.css";
+
 import App from "./App";
+import "./App.css";
+
 import { BrowserRouter as Router } from "react-router-dom";
 
 ReactDOM.render(

ReactProjFinal/frontend/src/pages/Recharts/Dashboard.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+import "antd/dist/antd.css";
+import "antd/dist/antd.css";
+import { Layout, Menu, Breadcrumb } from "antd";
+import {
+  UserOutlined,
+  LaptopOutlined,
+  AreaChartOutlined,
+} from "@ant-design/icons";
+
+const { SubMenu } = Menu;
+const { Header, Content, Sider } = Layout;
+
+function Dashboard() {
+  return (
+    <>
+      <Layout style={{ height: "100vh" }}>
+        <Header className="header">
+          <div className="logo">img</div>
+          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
+            <Menu.Item key={1}>Dashboard</Menu.Item>
+            <Menu.Item key={2}>Clientes</Menu.Item>
+            <Menu.Item key={3}>Usuários</Menu.Item>
+          </Menu>
+        </Header>
+
+        <Layout>
+          <Sider width={200} className="site-layout-background">
+            <Menu
+              mode="inline"
+              defaultSelectedKeys={["1"]}
+              defaultOpenKeys={["sub1"]}
+              style={{ height: "100%", borderRight: 0 }}
+            >
+              <SubMenu key="sub1" icon={<UserOutlined />} title="Usuarios">
+                <Menu.Item key="1">Listar</Menu.Item>
+                <Menu.Item key="2">Inserir</Menu.Item>
+              </SubMenu>
+
+              <SubMenu key="sub2" icon={<LaptopOutlined />} title="Clientes">
+                <Menu.Item key="3">Listar</Menu.Item>
+                <Menu.Item key="4">Inserir</Menu.Item>
+              </SubMenu>
+
+              <SubMenu key="sub3" icon={<AreaChartOutlined />} title="Gráficos">
+                <Menu.Item key="5">Projetos em Andamento</Menu.Item>
+                <Menu.Item key="6">Projetos Finalizados</Menu.Item>
+                <Menu.Item key="7">Retorno Colaboradores</Menu.Item>
+                <Menu.Item key="8">Metas de Projetos</Menu.Item>
+              </SubMenu>
+            </Menu>
+          </Sider>
+        </Layout>
+
+        <Layout style={{ padding: "0 24px 24px" }}>
+          <Breadcrumb style={{ margin: "16px 0" }}>
+            <Breadcrumb.Item>ordemservico</Breadcrumb.Item>
+            <Breadcrumb.Item>clientes</Breadcrumb.Item>
+            <Breadcrumb.Item>inserir</Breadcrumb.Item>
+          </Breadcrumb>
+
+          <Content
+            className="site-layout-background"
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+            }}
+          >
+            Espaço do conteúdo
+          </Content>
+        </Layout>
+      </Layout>
+    </>
+  );
+}
+
+export default Dashboard;

ReactProjFinal/frontend/src/routes/RechartsRoutes.jsx

@@ -1,21 +1,23 @@
-import React from 'react'
-import {Switch, Route} from "react-router-dom"
-import Exemplo1 from '../pages/Recharts/Recharts1'
-import Exemplo2 from '../pages/Recharts/Recharts2'
-import Exemplo3 from '../pages/Recharts/Recharts3'
-import Exemplo4 from '../pages/Recharts/Recharts4'
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import Dashboard from "../pages/Recharts/Dashboard";
+import Exemplo1 from "../pages/Recharts/Recharts1";
+import Exemplo2 from "../pages/Recharts/Recharts2";
+import Exemplo3 from "../pages/Recharts/Recharts3";
+import Exemplo4 from "../pages/Recharts/Recharts4";
 
 function RechartsRoutes() {
   return (
     <>
       <Switch>
-        <Route exact path="/exemplo1"component={Exemplo1} />
-        <Route exact path="/exemplo2"component={Exemplo2} />
-        <Route exact path="/exemplo3"component={Exemplo3} />
-        <Route exact path="/exemplo4"component={Exemplo4} />
+        <Route exact path="/exemplo1" component={Exemplo1} />
+        <Route exact path="/exemplo2" component={Exemplo2} />
+        <Route exact path="/exemplo3" component={Exemplo3} />
+        <Route exact path="/exemplo4" component={Exemplo4} />
+        <Route exact path="/dashboard" component={Dashboard} />
       </Switch>
     </>
-  )
+  );
 }
 
-export default RechartsRoutes
+export default RechartsRoutes;