add

.env

-REACT_APP_SECRET_API=http://localhost:3000
+REACT_APP_SECRET_API=http://localhost:4000
\ No newline at end of file

package.json

@@ -9,9 +9,11 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.18.2",
+    "axios": "^0.24.0",
     "craco-less": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-maps": "^9.4.5",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/Layouts/index.jsx

-import { React, Fragment } from "react";
+import { React } from "react";
+
+import { Layout } from "antd";
+
 
 import TabHeader from "./tabHeader";
+import MenuList from './menulist'
 
-export default function App () {
+export default function App() {
   return (
-    <Fragment>
+    <Layout>
       <TabHeader />
-    </Fragment>
+      <MenuList />
+    </Layout>
   );
 }

src/Layouts/menulist.jsx

+import React, { useState } from "react";
+
+import { Layout, Menu } from "antd";
+import {
+  DesktopOutlined,
+  PieChartOutlined,
+  TeamOutlined,
+  SearchOutlined,
+  FileSearchOutlined,
+  CommentOutlined,
+} from "@ant-design/icons";
+
+const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+export default function App() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const onCollapse = (collapsed) => {
+    setCollapsed(collapsed);
+  };
+
+  return (
+    <>
+      <Sider
+        theme="light"
+        collapsible
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      >
+        <div className="logo" />
+        <Menu
+          theme="light"
+          defaultSelectedKeys={["1"]}
+          defaultOpenKeys={["sub1"]}
+          mode="inline"
+        >
+          <Menu.Item key="1" icon={<PieChartOutlined />}>
+            เริ่มต้นใช้งาน
+          </Menu.Item>
+          <Menu.Item key="2" icon={<DesktopOutlined />}>
+            ลงทะเบียนร้านซ่อม
+          </Menu.Item>
+          <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
+            <Menu.Item key="8" icon={<SearchOutlined />}>
+              ค้นหาร้านซ่อม
+            </Menu.Item>
+            <Menu.Item key="6" icon={<FileSearchOutlined />}>
+              เช็คสถานะการซ่อม
+            </Menu.Item>
+            <Menu.Item key="7" icon={<CommentOutlined />}>
+              แจ้งปัญหาการใช้งาน
+            </Menu.Item>
+          </SubMenu>
+          <Menu.Item key="9" icon={<CommentOutlined />}>
+              แจ้งปัญหาการใช้งาน
+            </Menu.Item>
+        </Menu>
+      </Sider>
+    </>
+  );
+}

src/Layouts/tabHeader.jsx

@@ -10,19 +10,22 @@ export default function App() {
   const clicklogo = () => {
     history.push("/");
   };
+  // const onclickLogin = () => {
+  //   console.log('click login')
+  // }
   return (
     <Header className="header-home" style={{ zIndex: 1 }}>
-      <div>
       {/* <img src={logo} alt="Logo" width={30} height={30}/> */}
+      <Row gutter={[32, 32]} justify="space-between">
+        <Col span={15}>
           <Row>
-          <Col span={20}>
             <Row className="main-logo" onClick={clicklogo}>
               <div> Repair </div>&nbsp;
               <div className="logo"> Center</div>
             </Row>
+          </Row>
         </Col>
       </Row>
-      </div>
     </Header>
   );
 }

src/assets/less/Registion/index.less

+
+.title {
+    text-align: center;
+    font-size: 25px;
+    font-weight: bold;
+    padding: 10px 20px;
+}
+
+.map {
+    height: 300px;
+}
+
+.div-time{
+    padding: 10px 15px;
+}
\ No newline at end of file

src/assets/less/index.less

 @import "Layouts/header.less";
 @import "Home/index.less";
+@import "Registion/index.less";
\ No newline at end of file

src/router/Routers.jsx

 import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
-import Ecommerce from "../view/Dashboards/ecommerce";
+
+// import Ecommerce from "../view/Dashboards/ecommerce";
+
+import HeaderTap from "../Layouts/tabHeader";
+import MenuList from "../Layouts/menulist";
 
 //import
 import Login from "../view/Login";
 // import Home from "../view/Homes/index";
-import Home from "../view/Homes/index"
+import Home from "../view/Homes/index";
+import RegistionPage from "../view/Registion";
+
+import { Layout } from "antd";
+
+const { Content, Footer } = Layout;
 
 export default function Routers() {
   return (
+    <>
+      <HeaderTap
+        className="site-layout-background"
+        style={{ padding: 0, position: "fixed", zIndex: 1, width: "100%" }}
+      />
+      <Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
+        <MenuList />
+
+        <Layout className="site-layout">
+          <Content style={{ margin: "0 16px" }}>
+            <div
+              className="site-layout-background"
+              style={{ padding: 24, mixHeight: 360 }}
+            >
               <AppRouter>
                 <Switch>
                   <Route
                     exact
-          path={"/"}
+                    path={"/login"}
                     render={() => {
-            return <Home />;
+                      return <Login />;
                     }}
                   />
 
                   <Route
                     exact
-          path={"/login"}
+                    path={"/registion"}
                     render={() => {
-            return <Login />;
+                      return <RegistionPage />;
                     }}
                   />
-
                   <Route
                     exact
-          path={"/dashboard"}
+                    path={"/"}
                     render={() => {
-            return <Ecommerce />;
+                      return <Home />;
                     }}
                   />
                 </Switch>
               </AppRouter>
+            </div>
+          </Content>
+          <Footer style={{ textAlign: "center" }}>
+            Ant Design ©2018 Created by Ant UED
+          </Footer>
+        </Layout>
+      </Layout>
+  
+    </>
   );
 }

src/services/index.js

+import axios from "axios";
+
+export const sendToken = (data) => {
+  return axios
+    .post(
+      process.env.REACT_APP_SECRET_API + "/authentication/accesstoken",
+      data
+    )
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+export const sendLogin = (data) => {
+    return axios
+      .post(
+        process.env.REACT_APP_SECRET_API + "/authentication/login",
+        data
+      )
+      .then((response) => response.data)
+      .catch((err) => {
+        console.log(err);
+      });
+  };

src/view/Dashboards/ecommerce/index.jsx

-import { React, Fragment } from "react";
+import { React } from "react";
+import { Layout } from "antd";
 
-import Header from '../../../Layouts/tabHeader'
+import HeaderTap from "../../../Layouts/tabHeader";
+import MenuList from "../../../Layouts/menulist";
+
+const { Content, Footer } = Layout;
 
 export default function Ecommerce() {
   return (
-    <Fragment>
-      <Header />
-      <h3>สวัสดี, Fariw 👋</h3>
-    </Fragment>
+    <>
+      <HeaderTap className="site-layout-background" style={{ padding: 0 }} />
+      <Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
+        <MenuList />
+
+        <Layout className="site-layout">
+          <Content style={{ margin: "0 16px" }}>
+            <div
+              className="site-layout-background"
+              style={{ padding: 24, minHeight: 360 }}
+            >
+              Bill is a cat.
+            </div>
+          </Content>
+          <Footer style={{ textAlign: "center" }}>
+            Ant Design ©2018 Created by Ant UED
+          </Footer>
+        </Layout>
+      </Layout>
+    </>
   );
 }

src/view/Login/Login.js

-// import liff from "@line/liff";
-import { React, Fragment } from "react";
-
-function App() {
-
-  console.log(process.env.REACT_APP_SECRET_API)
-  
-  return (
-    <Fragment>
-      <h3>สวัสดี, Login page 👋</h3>
-    </Fragment>
-  );
-}
-
-export default App;

src/view/Login/Login.jsx

+// import liff from "@line/liff";
+import { React, Fragment } from "react";
+
+import { Form, Input, Button, Checkbox, Row, Col, Divider } from "antd";
+
+import { sendLogin } from '../../services'
+
+function App() {
+  console.log(process.env.REACT_APP_SECRET_API);
+
+  const onFinish = (values) => {
+    const data = {
+      garageID : values.garageID,
+      password : values.password
+    }
+    console.log(data)
+
+    sendLogin(data).then((response) => console.log('response', response))
+  };
+
+
+
+  return (
+    <Fragment>
+      <Row>
+        <Col
+          span={6}
+          xs={{ order: 1 }}
+          sm={{ order: 2 }}
+          md={{ order: 3 }}
+          lg={{ order: 4 }}
+        ></Col>
+        <Col
+          // style={{ textAlign: "center" }}
+          span={12}
+          xs={{ order: 1 }}
+          sm={{ order: 2 }}
+          md={{ order: 3 }}
+          lg={{ order: 4 }}
+        >
+          <div className="title"></div>
+          <Divider orientation="center">
+            <b>เข้าสู่ระบบร้านซ่อม</b>
+          </Divider>
+          <Form
+            name="basic"
+            labelCol={{
+              span: 8,
+            }}
+            wrapperCol={{
+              span: 16,
+            }}
+            initialValues={{
+              remember: true,
+            }}
+            onFinish={onFinish}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="User ID"
+              name="garageID"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณากรอก User ID ของคุณ!",
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="รหัสผ่าน"
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: "กรุณากรอกรหัสผ่านของคุณ!",
+                },
+              ]}
+            >
+              <Input.Password />
+            </Form.Item>
+
+            <Form.Item
+              name="remember"
+              valuePropName="checked"
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Checkbox>Remember me</Checkbox>
+            </Form.Item>
+
+            <Form.Item
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+        <Col
+          span={6}
+          xs={{ order: 1 }}
+          sm={{ order: 2 }}
+          md={{ order: 3 }}
+          lg={{ order: 4 }}
+        ></Col>
+      </Row>
+    </Fragment>
+  );
+}
+
+export default App;

src/view/Registion/googleMap.jsx

+import { Col } from 'antd'
+import {
+    withScriptjs,
+    withGoogleMap,
+    GoogleMap,
+    Marker,
+  } from 'react-google-maps'
+  
+  let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }]
+
+  const onMarkerDragEnd = (event) => {
+    newLatLng[0].lat = event.latLng.lat()
+    newLatLng[0].lng = event.latLng.lng()
+    console.log('newLat', newLatLng[0].lat, 'newLng', newLatLng[0].lng)
+  }
+
+  const MapWithAMarker = withScriptjs(
+    withGoogleMap(() => (
+      <GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
+        <Marker
+          draggable={true}
+          position={newLatLng[0]}
+          onDragEnd={(e) => onMarkerDragEnd(e)}
+        />
+      </GoogleMap>
+    ))
+  )
+
+  export default function App() {
+      return (
+        <Col md={24} span={24}>
+        <MapWithAMarker
+          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
+          loadingElement={<div style={{ height: '100%' }} />}
+          containerElement={<div style={{ height: '400px' }} />}
+          mapElement={<div style={{ height: '100%' }} />}
+        />
+      </Col>
+      )
+  }
\ No newline at end of file

src/view/Registion/index.jsx

+export { default } from "./Registion";