Restruturação e Criação de Tabs

server/services/categorias/options.js

@@ -0,0 +1 @@
+_out.json(_val.map().set('result', true))

server/services/lojas/options.js

@@ -0,0 +1 @@
+_out.json(_val.map().set('result', true))

website/src/App.css

@@ -15,13 +15,13 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 7vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: calc(5px + 2vmin);
+  color: rgb(255, 255, 255); 
 }
 
 .App-link {
@@ -36,3 +36,28 @@
     transform: rotate(360deg);
   }
 }
+
+.ant-layout-header {
+  height: 64px;
+  padding: 0 50px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 64px;
+  background: #f0f0f0;
+}
+
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
+  top: 0;
+  margin-top: 0;
+  padding: 0 20px;
+  border-color: #383838;
+      border-bottom-color: rgb(56, 56, 56);
+  border-bottom: 0;
+} 
+
+.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
+  background-color: #ca0000;
+}
+
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
+  background-color: rgb(116, 0, 0);
+} 

website/src/App.js

@@ -1,40 +1,28 @@
 import React, { useState, useEffect } from "react";
-import logo from './logo.svg';
 import './App.css';
-
 import _service from '@netuno/service-client';
+import TabelaProdutos from './Components/TabelaProdutos/index.jsx';
+
+import Cards from "./Components/Cards/index.jsx";
+import { Layout, Menu, Breadcrumb } from 'antd';
+import NavBar from "./Components/NavBar";
+const { Header, Content, Footer } = Layout;
+
 
 function App() {
-  const [data, setData] = useState([]);
-  useEffect(() => {
-    _service({
-      url: "produtos",
-      success: (response) => {
-      setData(response.json)
-      },
-      fail: (e) => {
-          console.log("Service Error", e);
-      }
-  });
 
-  }, []);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-        {JSON.stringify(data)}
-      </header>
+
+      <Layout className="layout">
+        <Content style={{ padding: '0 50px' }}>
+          <div className="site-layout-content">
+            <NavBar/>
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Gestor de Mercearia ©2021</Footer>
+      </Layout>
     </div>
   );
 }

website/src/Components/Cards/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Card, Col, Row } from 'antd';
+const { Meta } = Card;
+
+const Cards = () => {
+    return (
+        <div className="site-card-wrapper" style={{marginLeft: '130px',padding : ' 70px 0', textAlign: 'center'}}>
+            <Row gutter={6}>
+                <Col span={8}>
+                    <Card
+                        hoverable
+                        style={{ width:400 }}
+                        cover={<img alt="mercearia" src="https://media.timeout.com/images/104094102/750/422/image.jpg" />}
+                    >
+                        <Meta title="Mercearias" description="Lorem Ipsum" />
+                    </Card>
+                </Col>
+                <Col span={8}>
+                <Card
+                        hoverable
+                        style={{ width: 400 }}
+                        cover={<img alt="categorias" src="https://media.timeout.com/images/104094102/750/422/image.jpg" />}
+                    >
+                        <Meta title="Categorias" description="Lorem Ipsum" />
+                    </Card>
+                </Col>
+                <Col span={8}>
+                <Card
+                        hoverable
+                        style={{ width: 400 }}
+                        cover={<img alt="mercearia" src="https://media.timeout.com/images/104094102/750/422/image.jpg" />}
+                    >
+                        <Meta title="Produtos" description="Lorem Ipsum" />
+                    </Card>
+                </Col>
+            </Row>
+        </div>);
+}
+
+export default Cards;

website/src/Components/NavBar/index.css

@@ -0,0 +1,34 @@
+.site-layout-content {
+    min-height: 280px;
+    padding: 24px;
+    background: #fff;
+  }
+  #components-layout-demo-top .logo {
+    float: left;
+    width: 120px;
+    height: 31px;
+    margin: 16px 24px 16px 0;
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .ant-row-rtl #components-layout-demo-top .logo {
+    float: right;
+    margin: 16px 0 16px 24px;
+  }
+
+  .ant-layout-header {
+    height: 64px;
+    padding: 0 50px;
+    color: rgba(255, 255, 255, 0.85);
+    line-height: 64px;
+    background: #f0f0f0;
+}
+
+.ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
+    top: 0;
+    margin-top: 0;
+    padding: 0 20px;
+    border-color: #383838;
+        border-bottom-color: rgb(56, 56, 56);
+    border-bottom: 0;
+  } 
+

website/src/Components/NavBar/index.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import './index.css';
+
+import { Tabs } from 'antd';
+import TabelaProdutos from '../TabelaProdutos/index.jsx';
+import TabelaLojas from '../TabelaLojas/index.jsx';
+import TabelaCategorias from '../TabelaCategorias/index.jsx';
+import Cards from '../Cards/index.jsx';
+
+const { TabPane } = Tabs;
+
+function callback(key) {
+  console.log(key);
+}
+const NavBar = () => {
+  return (
+    <Tabs defaultActiveKey="1" onChange={callback}>
+      <TabPane tab="Home" key="1">
+        <Cards/>
+    </TabPane>
+      <TabPane tab="Mercearias" key="2">
+       <TabelaLojas/>
+    </TabPane>
+      <TabPane tab="Categorias" key="3">
+        <TabelaCategorias/>
+    </TabPane>
+    <TabPane tab="Produtos" key="4">
+        <TabelaProdutos/>
+    </TabPane>
+    </Tabs>
+
+  );
+}
+
+export default NavBar;

website/src/Components/TabelaCategorias/index.jsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+import { Table, Tag, Space } from 'antd';
+import _service from '@netuno/service-client';
+
+
+const TabelaCategorias = () => {
+
+    const [data, setData] = useState([]);
+    
+    useEffect(() => {
+        _service({
+            url: "categorias",
+            success: (response) => {
+                setData(response.json)
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+            }
+        });
+
+    }, []);
+
+    const columns = [
+        {
+            title: 'Nome',
+            dataIndex: 'nome',
+            key: 'name',
+        }];
+
+    return (
+        <div >
+            <h1>Categorias</h1>
+            <Table columns={columns} dataSource={data} />
+        </div>
+    );
+}
+
+export default TabelaCategorias;

website/src/Components/TabelaLojas/index.jsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+import { Table, Tag, Space } from 'antd';
+import _service from '@netuno/service-client';
+
+
+const TabelaLojas = () => {
+
+    const [data, setData] = useState([]);
+    
+    useEffect(() => {
+        _service({
+            url: "lojas",
+            success: (response) => {
+                setData(response.json)
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+            }
+        });
+
+    }, []);
+
+    const columns = [
+        {
+            title: 'Mercearia',
+            dataIndex: 'mercearia',
+            key: 'mercearia',
+        }];
+
+    return (
+        <div >
+            <h1>Lojas</h1>
+            <Table columns={columns} dataSource={data} />
+        </div>
+    );
+}
+
+export default TabelaLojas;

website/src/Components/TabelaProdutos/index.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import { Table, Tag, Space } from 'antd';
+import _service from '@netuno/service-client';
+
+
+const TabelaProdutos = () => {
+
+    const [data, setData] = useState([]);
+    
+    useEffect(() => {
+        _service({
+            url: "produtos",
+            success: (response) => {
+                setData(response.json)
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+            }
+        });
+
+    }, []);
+
+    const columns = [
+        {
+            title: 'Nome',
+            dataIndex: 'nome',
+            key: 'name',
+        },
+        {
+            title: 'Categoria',
+            dataIndex: 'categoria',
+            key: 'categoria',
+        },
+        {
+            title: 'Quantidade',
+            dataIndex: 'quantidade',
+            key: 'quantidade',
+        },
+        {
+            title: 'Preço',
+            dataIndex: 'preco',
+            key: 'preco',
+        }];
+
+    return (
+        <div >
+            <h1>Produtos</h1>
+            <Table columns={columns} dataSource={data} />
+        </div>
+    );
+}
+
+export default TabelaProdutos;