diff --git a/first-app/src/App.tsx b/first-app/src/App.tsx
index 560eef6..9f92bee 100644
--- a/first-app/src/App.tsx
+++ b/first-app/src/App.tsx
@@ -2,15 +2,24 @@ import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
-
import './App.css'
-import Home from "./pages/home/home";
+
+//pages
+import PageBase from "./pages/PageBase/PageBase";
+import NewCliente from "./pages/Cliente/NewCliente";
const router = createBrowserRouter([
{
path: "/",
- element: ,
+ element: ,
+ children:[
+ {
+ path:"/cliente/new",
+ element:
+ }
+ ]
},
+
]);
function App() {
diff --git a/first-app/src/components/ClienteForm.tsx b/first-app/src/components/ClienteForm.tsx
new file mode 100644
index 0000000..d392fc2
--- /dev/null
+++ b/first-app/src/components/ClienteForm.tsx
@@ -0,0 +1,87 @@
+import { Button, Form, Input, Select } from 'antd';
+import styles from '../pages/Cliente/Cliente.module.css';
+import { useEffect } from 'react';
+
+export interface FormClienteProps {
+ values?: any,
+ btnTitle: string,
+ eventEmiter: any
+}
+
+function ClienteForm(props: FormClienteProps) {
+
+ const onFinish = (values: any) => {
+ props.eventEmiter(values);
+ };
+
+ const onFinishFailed = (errorInfo: any) => {
+ console.log('Failed:', errorInfo);
+ };
+
+ useEffect(() => {
+ //TO DO
+ //GET ALL COUNTRIES FOR SHOW IN SELECT ELEMENT
+ }, [])
+
+
+ return (
+
+ )
+}
+
+export default ClienteForm;
\ No newline at end of file
diff --git a/first-app/src/components/sideBar.tsx b/first-app/src/components/sideBar.tsx
new file mode 100644
index 0000000..cfb5bc8
--- /dev/null
+++ b/first-app/src/components/sideBar.tsx
@@ -0,0 +1,61 @@
+import { Menu, MenuProps } from "antd";
+import Sider from "antd/es/layout/Sider"
+import { useState } from "react";
+import {
+ UserOutlined,
+ ShoppingCartOutlined,
+ InboxOutlined
+ } from '@ant-design/icons';
+import { Link } from "react-router-dom";
+
+function SideBar () {
+
+ const [collapsed, setCollapsed] = useState(false);
+
+ type MenuItem = Required['items'][number];
+
+ function getItem(
+ label: React.ReactNode,
+ key: React.Key,
+ icon?: React.ReactNode,
+ children?: MenuItem[
+
+ ],
+ ): MenuItem {
+ return {
+ key,
+ icon,
+ children,
+ label,
+ } as MenuItem;
+ }
+
+ const items: MenuItem[] = [
+ getItem('Clientes', 'sub1', , [
+ getItem((Novo Cliente), '1'),
+ getItem('Listar todos', '3'),
+ getItem('Alex', '4'),
+ ]),
+ getItem('Produtos', 'sub2', , [
+ getItem('Tom', '5'),
+ getItem('Bill', '6'),
+ getItem('Alex', '7'),
+ ]),
+ getItem('Encomendas', 'sub3', , [
+ getItem('jdj', '8'),
+ getItem('Bill', '9'),
+ getItem('Alex', '10'),
+ ]),
+
+ ];
+
+
+ return (
+ setCollapsed(value)}>
+
+
+
+ )
+}
+
+export default SideBar
\ No newline at end of file
diff --git a/first-app/src/index.css b/first-app/src/index.css
index 01fff62..a72c173 100644
--- a/first-app/src/index.css
+++ b/first-app/src/index.css
@@ -1,4 +1,14 @@
html, body {
width: 100%;
height: 100%;
+}
+
+.container{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #FFF;
+ padding: 24;
}
\ No newline at end of file
diff --git a/first-app/src/pages/Cliente/Cliente.module.css b/first-app/src/pages/Cliente/Cliente.module.css
new file mode 100644
index 0000000..0dcac9a
--- /dev/null
+++ b/first-app/src/pages/Cliente/Cliente.module.css
@@ -0,0 +1,3 @@
+.form_cliente{
+ width: 600px;
+}
\ No newline at end of file
diff --git a/first-app/src/pages/Cliente/NewCliente.tsx b/first-app/src/pages/Cliente/NewCliente.tsx
new file mode 100644
index 0000000..9f93b14
--- /dev/null
+++ b/first-app/src/pages/Cliente/NewCliente.tsx
@@ -0,0 +1,25 @@
+
+
+//components
+import ClienteForm from '../../components/ClienteForm'
+
+function Cliente() {
+
+ const handleSubmit = (values:any) => {
+ console.log('Componente Cliente:',values)
+
+ //TO DO
+ //CREATED SERVICE REGISTER CUSTOMER
+ }
+
+ return (
+ <>
+
+
+ )
+}
+
+export default Cliente
\ No newline at end of file
diff --git a/first-app/src/pages/PageBase/PageBase.tsx b/first-app/src/pages/PageBase/PageBase.tsx
new file mode 100644
index 0000000..8e74483
--- /dev/null
+++ b/first-app/src/pages/PageBase/PageBase.tsx
@@ -0,0 +1,25 @@
+import { Layout} from 'antd';
+import SideBar from '../../components/sideBar';
+import { Outlet } from 'react-router-dom';
+
+function PageBase() {
+
+ const { Header, Content, Footer } = Layout;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default PageBase
\ No newline at end of file
diff --git a/first-app/src/pages/home/home.tsx b/first-app/src/pages/home/home.tsx
deleted file mode 100644
index 53e2e8c..0000000
--- a/first-app/src/pages/home/home.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import {
- DesktopOutlined,
- FileOutlined,
- PieChartOutlined,
- TeamOutlined,
- UserOutlined,
-} from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu, theme } from 'antd';
-
-
-function Home () {
-
- const { Header, Content, Footer, Sider } = Layout;
-
- const [collapsed, setCollapsed] = useState(false);
-
- const {
- token: { colorBgContainer },
- } = theme.useToken();
-
-type MenuItem = Required['items'][number];
-
-function getItem(
- label: React.ReactNode,
- key: React.Key,
- icon?: React.ReactNode,
- children?: MenuItem[],
-): MenuItem {
- return {
- key,
- icon,
- children,
- label,
- } as MenuItem;
-}
-
-const items: MenuItem[] = [
- getItem('Option 1', '1', ),
- getItem('Option 2', '2', ),
- getItem('User', 'sub1', , [
- getItem('Tom', '3'),
- getItem('Bill', '4'),
- getItem('Alex', '5'),
- ]),
- getItem('Team', 'sub2', , [getItem('Team 1', '6'), getItem('Team 2', '8')]),
- getItem('Files', '9', ),
-];
-
-
- return (
-
- setCollapsed(value)}>
-
-
-
-
-
-
-
- User
- Bill
-
-
- Bill is a cat.
-
-
-
-
-
- )
-}
-
-export default Home
\ No newline at end of file