add dashborada

48558b81 · chaiwat · a1c19a74 · 48558b81 · 48558b81 · 48558b81
Commit 48558b81 authored Feb 10, 2022 by chaiwat
30 changed files
--- a/.env
+++ b/.env
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,8 @@
        "react-google-maps": "^9.4.5",
        "react-router-dom": "5.2.0",
        "react-scripts": "4.0.3",
+        "react-validation": "^3.0.7",
+        "validator": "^13.7.0",
        "vanta": "^0.5.21",
        "web-vitals": "^1.0.1"
      }
@@ -6851,6 +6853,8 @@
    },
    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/core": {
      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+      "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -7367,6 +7371,8 @@
    },
    "node_modules/babel-preset-react-app/node_modules/@babel/preset-modules/node_modules/@babel/plugin-proposal-unicode-property-regex/node_modules/@babel/core": {
      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+      "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -7447,6 +7453,8 @@
    },
    "node_modules/babel-preset-react-app/node_modules/@babel/preset-modules/node_modules/@babel/plugin-transform-dotall-regex/node_modules/@babel/core": {
      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+      "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -17008,6 +17016,11 @@
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
      "license": "MIT"
    },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+    },
    "node_modules/lodash.template": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -22153,6 +22166,31 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-validation": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/react-validation/-/react-validation-3.0.7.tgz",
+      "integrity": "sha1-tQcL+KbnN7hw2Hu/tyzMpys/N1A=",
+      "dependencies": {
+        "lodash.omit": "^4.5.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.0.0",
+        "shallow-equal": "^1.0.0",
+        "uuid": "^3.1.0"
+      }
+    },
+    "node_modules/react-validation/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -23582,6 +23620,11 @@
        "sha.js": "bin.js"
      }
    },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
    "node_modules/shallowequal": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -25890,6 +25933,14 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "node_modules/validator": {
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
+      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
    "node_modules/value-equal": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
@@ -32152,6 +32203,8 @@
          "dependencies": {
            "@babel/core": {
              "version": "7.16.0",
+              "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+              "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
              "peer": true,
              "requires": {
                "@babel/code-frame": "^7.16.0",
@@ -32587,6 +32640,8 @@
              "dependencies": {
                "@babel/core": {
                  "version": "7.16.0",
+                  "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+                  "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
                  "peer": true,
                  "requires": {
                    "@babel/code-frame": "^7.16.0",
@@ -32645,6 +32700,8 @@
              "dependencies": {
                "@babel/core": {
                  "version": "7.16.0",
+                  "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
+                  "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
                  "peer": true,
                  "requires": {
                    "@babel/code-frame": "^7.16.0",
@@ -39576,6 +39633,11 @@
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
    },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+    },
    "lodash.template": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -43266,6 +43328,30 @@
        }
      }
    },
+    "react-validation": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/react-validation/-/react-validation-3.0.7.tgz",
+      "integrity": "sha1-tQcL+KbnN7hw2Hu/tyzMpys/N1A=",
+      "requires": {
+        "lodash.omit": "^4.5.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.0.0",
+        "shallow-equal": "^1.0.0",
+        "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
    "read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -44315,6 +44401,11 @@
        "safe-buffer": "^5.0.1"
      }
    },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
    "shallowequal": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -45933,6 +46024,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "validator": {
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
+      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
+    },
    "value-equal": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
    "react-google-maps": "^9.4.5",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
+    "react-validation": "^3.0.7",
+    "validator": "^13.7.0",
    "vanta": "^0.5.21",
    "web-vitals": "^1.0.1"
  },

--- a/public/car.svg
+++ b/public/car.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2335 5105 c-217 -31 -394 -87 -584 -185 -555 -288 -914 -850 -938
+-1470 -8 -221 23 -383 128 -663 182 -488 490 -1034 1209 -2147 179 -278 343
+-533 364 -568 22 -34 42 -62 46 -62 4 0 35 46 70 102 35 57 156 245 269 418
+572 880 819 1290 1041 1725 259 509 370 850 370 1135 -1 471 -209 939 -562
+1264 -241 222 -567 384 -888 441 -131 23 -399 28 -525 10z m446 -421 c525 -90
+950 -512 1044 -1039 22 -121 22 -334 0 -450 -36 -194 -112 -374 -223 -528 -76
+-107 -249 -269 -355 -336 -434 -270 -970 -263 -1401 19 -99 64 -256 216 -329
+318 -110 152 -186 332 -223 527 -21 115 -21 328 1 450 94 524 517 947 1040
+1039 111 20 330 20 446 0z"/>
+<path d="M1938 4090 c-71 -38 -87 -72 -140 -301 -46 -201 -49 -212 -83 -243
+l-35 -33 0 -222 0 -222 25 -24 24 -25 831 0 831 0 24 25 25 24 0 222 0 222
+-35 33 c-34 31 -38 42 -79 226 -25 106 -48 202 -52 213 -14 39 -56 85 -94 105
+-38 19 -59 20 -622 20 -558 -1 -585 -2 -620 -20z m1175 -119 c13 -5 27 -17 30
+-26 6 -14 87 -362 87 -371 0 -2 -301 -4 -670 -4 -368 0 -670 2 -670 4 0 9 81
+357 87 371 3 9 15 21 27 25 29 12 1078 12 1109 1z m-1077 -605 c58 -58 42
+-141 -33 -173 -27 -11 -42 -12 -69 -3 -117 39 -89 209 35 210 24 0 42 -9 67
+-34z m1125 18 c36 -18 62 -73 53 -112 -9 -37 -50 -79 -85 -86 -71 -14 -137 50
+-125 122 12 77 87 113 157 76z m-393 -6 c7 -7 12 -21 12 -33 0 -42 -14 -45
+-220 -45 -206 0 -220 3 -220 45 0 42 14 45 220 45 139 0 199 -3 208 -12z m0
+-150 c18 -18 14 -56 -7 -68 -12 -6 -95 -10 -201 -10 -106 0 -189 4 -201 10
+-21 12 -25 50 -7 68 17 17 399 17 416 0z"/>
+<path d="M1807 2923 c-4 -3 -7 -43 -7 -88 0 -68 4 -87 21 -109 20 -25 24 -26
+120 -26 134 0 139 5 139 135 l0 95 -133 0 c-74 0 -137 -3 -140 -7z"/>
+<path d="M3040 2835 c0 -130 5 -135 139 -135 96 0 100 1 121 27 18 23 20 38
+18 112 l-3 86 -137 3 -138 3 0 -96z"/>
+</g>
+</svg>
--- a/src/Layouts/VerticalLayout.jsx
+++ b/src/Layouts/VerticalLayout.jsx
-import React from 'react'
+import React, { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";

-import { Layout } from 'antd'
+import { Layout } from "antd";

+// import Component
 import HeaderTap from "./tabHeader";
 import MenuList from "./menulist";
+import MenuDashboard from './munuDashboard'

 //import
 // import Login from "../view/Login";
 // import RegistionPage from "../view/Registion";

+const { Content, Footer } = Layout;

+export default function VerticalLayout(props) {
+  const { children } = props;
+  // let test = "";
+  const history = useHistory();

-const { Content, Footer } = Layout
+  const [checkLocal, setChechLocal] = useState(null);

-export default function VerticalLayout(props) {
-  const { children } = props
+  useEffect(() => {
+    // console.log("local", localStorage.getItem("user"));
+    setChechLocal(JSON.parse(localStorage.getItem("user")))
+  }, []);
+
+  if (checkLocal === null) {
+    history.push("/")
+  }else {
+    history.push("/dashboard")
+  }

  
+  // console.log(checkLocal);
+
  return (
    <>
      <HeaderTap
@@ -29,6 +47,7 @@ export default function VerticalLayout(props) {
        }}
      />

+      {checkLocal === null ? (
        <Layout
          style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
        >
@@ -48,6 +67,19 @@ export default function VerticalLayout(props) {
            </Footer>
          </Layout>
        </Layout>
+      ) : (
+        <>
+          <Layout
+            style={{
+              minHeight: "93vh",
+              maxHeight: "90vh",
+              paddingTop: "0.5vh",
+            }}
+          >
+            <MenuDashboard />
+          </Layout>
+        </>
+      )}
    </>
  );
 }
--- a/src/Layouts/menulist.jsx
+++ b/src/Layouts/menulist.jsx
@@ -40,7 +40,7 @@ export default function App() {
            <Link to={"/"}>เริ่มต้นใช้งาน</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<DesktopOutlined />}>
-            <Link to={"/registion"}>ลงทะเบียนร้านซ่อม</Link>
+            <Link to={"/register"}>ลงทะเบียนร้านซ่อม</Link>
          </Menu.Item>
          <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
            <Menu.Item key="8" icon={<SearchOutlined />}>

--- a/src/Layouts/munuDashboard.jsx
+++ b/src/Layouts/munuDashboard.jsx
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Layout, Menu } from "antd";
+import {
+  HomeOutlined,
+  AppstoreAddOutlined,
+  ToolOutlined,
+  UnorderedListOutlined,
+  OrderedListOutlined,
+  UserAddOutlined,
+  TeamOutlined,
+  FileSearchOutlined,
+  CommentOutlined,
+  SettingOutlined,
+  LogoutOutlined,
+} from "@ant-design/icons";
+
+// import services
+import { sendLogout } from "../services";
+
+const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+export default function App() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const onCollapse = (collapsed) => {
+    setCollapsed(collapsed);
+  };
+
+  const handleLogout = () => {
+    console.log("test Logout");
+    sendLogout();
+    setTimeout(() => {
+      window.location.reload(false);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <div style={{ mixHeight: 360, overflowY: "scroll" }}>
+        <Sider
+          theme="dark"
+          collapsible
+          collapsed={collapsed}
+          onCollapse={onCollapse}
+        >
+          <Menu
+            theme="dark"
+            defaultSelectedKeys={["1"]}
+            defaultOpenKeys={["sub1", "sub2"]}
+            mode="inline"
+          >
+            <Menu.Item key="1" icon={<HomeOutlined />}>
+              <Link to={"/dashboard"}>หน้าแรก</Link>
+            </Menu.Item>
+
+            <SubMenu
+              key="sub1"
+              icon={<UnorderedListOutlined />}
+              title="จัดการงานซ่อม"
+            >
+              <Menu.Item key="2" icon={<OrderedListOutlined />}>
+                <Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
+              </Menu.Item>
+              <Menu.Item key="3" icon={<AppstoreAddOutlined />}>
+                <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
+              </Menu.Item>
+              <Menu.Item key="4" icon={<ToolOutlined />}>
+                <Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
+              </Menu.Item>
+            </SubMenu>
+
+            <SubMenu
+              key="sub1"
+              icon={<UnorderedListOutlined />}
+              title="จัดการงานซ่อม"
+            >
+              <Menu.Item key="2" icon={<OrderedListOutlined />}>
+                <Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
+              </Menu.Item>
+              <Menu.Item key="3" icon={<AppstoreAddOutlined />}>
+                <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
+              </Menu.Item>
+              <Menu.Item key="4" icon={<ToolOutlined />}>
+                <Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
+              </Menu.Item>
+            </SubMenu>
+
+            <SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
+              <Menu.Item key="5" icon={<UserAddOutlined />}>
+                <Link to={"/dashboard/add-member"}>ลงทะเบียนลูกค้า</Link>
+              </Menu.Item>
+              <Menu.Item key="6" icon={<FileSearchOutlined />}>
+                <Link to={"/dashboard/search-repair"}>ค้นหาการซ่อม</Link>
+              </Menu.Item>
+              <Menu.Item key="7" icon={<TeamOutlined />}>
+                <Link to={"/dashboard/search-member"}>ลูกค้าของฉัน</Link>
+              </Menu.Item>
+            </SubMenu>
+
+            <Menu.Item key="8" icon={<SettingOutlined />}>
+              <Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
+            </Menu.Item>
+
+            <Menu.Item key="9" icon={<CommentOutlined />}>
+              <Link to={"/dashboard/reported"}>แจ้งปัญหาการใช้งาน</Link>
+            </Menu.Item>
+
+            <Menu.Item
+              onClick={handleLogout}
+              key="10"
+              icon={<LogoutOutlined />}
+            >
+              ออกจากระบบ
+            </Menu.Item>
+          </Menu>
+        </Sider>
+      </div>
+    </>
+  );
+}
--- a/src/Layouts/tabHeader.jsx
+++ b/src/Layouts/tabHeader.jsx
-import { React } from "react";
+import React, { useEffect, useState } from "react";
 import { Col, Layout, Row } from "antd";
 import { useHistory } from "react-router-dom";

@@ -7,8 +7,19 @@ const { Header } = Layout;
 export default function App() {
  const history = useHistory();

+  const [checkLocal, setChechLocal] = useState(null);
+
+  useEffect(() => {
+    // console.log("local", localStorage.getItem("user"));
+    setChechLocal(JSON.parse(localStorage.getItem("user")));
+  }, []);
+
  const clicklogo = () => {
+    if (checkLocal === null) {
      history.push("/");
+    } else {
+      history.push("/dashboard");
+    }
  };
  // const onclickLogin = () => {
  //   console.log('click login')

--- a/src/assets/icons/car.png
+++ b/src/assets/icons/car.png
--- a/src/assets/icons/car.svg
+++ b/src/assets/icons/car.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2335 5105 c-217 -31 -394 -87 -584 -185 -555 -288 -914 -850 -938
+-1470 -8 -221 23 -383 128 -663 182 -488 490 -1034 1209 -2147 179 -278 343
+-533 364 -568 22 -34 42 -62 46 -62 4 0 35 46 70 102 35 57 156 245 269 418
+572 880 819 1290 1041 1725 259 509 370 850 370 1135 -1 471 -209 939 -562
+1264 -241 222 -567 384 -888 441 -131 23 -399 28 -525 10z m446 -421 c525 -90
+950 -512 1044 -1039 22 -121 22 -334 0 -450 -36 -194 -112 -374 -223 -528 -76
+-107 -249 -269 -355 -336 -434 -270 -970 -263 -1401 19 -99 64 -256 216 -329
+318 -110 152 -186 332 -223 527 -21 115 -21 328 1 450 94 524 517 947 1040
+1039 111 20 330 20 446 0z"/>
+<path d="M1938 4090 c-71 -38 -87 -72 -140 -301 -46 -201 -49 -212 -83 -243
+l-35 -33 0 -222 0 -222 25 -24 24 -25 831 0 831 0 24 25 25 24 0 222 0 222
+-35 33 c-34 31 -38 42 -79 226 -25 106 -48 202 -52 213 -14 39 -56 85 -94 105
+-38 19 -59 20 -622 20 -558 -1 -585 -2 -620 -20z m1175 -119 c13 -5 27 -17 30
+-26 6 -14 87 -362 87 -371 0 -2 -301 -4 -670 -4 -368 0 -670 2 -670 4 0 9 81
+357 87 371 3 9 15 21 27 25 29 12 1078 12 1109 1z m-1077 -605 c58 -58 42
+-141 -33 -173 -27 -11 -42 -12 -69 -3 -117 39 -89 209 35 210 24 0 42 -9 67
+-34z m1125 18 c36 -18 62 -73 53 -112 -9 -37 -50 -79 -85 -86 -71 -14 -137 50
+-125 122 12 77 87 113 157 76z m-393 -6 c7 -7 12 -21 12 -33 0 -42 -14 -45
+-220 -45 -206 0 -220 3 -220 45 0 42 14 45 220 45 139 0 199 -3 208 -12z m0
+-150 c18 -18 14 -56 -7 -68 -12 -6 -95 -10 -201 -10 -106 0 -189 4 -201 10
+-21 12 -25 50 -7 68 17 17 399 17 416 0z"/>
+<path d="M1807 2923 c-4 -3 -7 -43 -7 -88 0 -68 4 -87 21 -109 20 -25 24 -26
+120 -26 134 0 139 5 139 135 l0 95 -133 0 c-74 0 -137 -3 -140 -7z"/>
+<path d="M3040 2835 c0 -130 5 -135 139 -135 96 0 100 1 121 27 18 23 20 38
+18 112 l-3 86 -137 3 -138 3 0 -96z"/>
+</g>
+</svg>
--- a/src/assets/less/index.less
+++ b/src/assets/less/index.less
@@ -2,3 +2,5 @@
 @import "Home/index.less";
 @import "Registion/index.less";
 @import "pages/getstartes.less";
+@import "pages/register.less";
+@import "pages/reported.less";
--- a/src/assets/less/pages/register.less
+++ b/src/assets/less/pages/register.less
+
+  .box-main-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+  }
+
+  .box-register-title {
+    padding: 20px;
+    width: 90%;
+    text-align: left;
+  }
+
+  .div-register-text {
+    border: 1px solid #333;
+    padding: 10px;
+    height: auto;
+    text-align: left;
+  }
+
+  .content-text {
+      padding: 20px;
+  }
+
+  .div-button-submit {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .button-submit {
+    border: 1px solid #333;
+    padding: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    background-color: #1d39c4;
+    font-weight: 500;
+    color: aliceblue;
+  }
+
+  .button-submit:hover {
+    background-color: #8697eb;
+    color: rgb(41, 41, 41);
+    cursor: pointer;
+  }
\ No newline at end of file
--- a/src/assets/less/pages/reported.less
+++ b/src/assets/less/pages/reported.less
+.report-box {
+    padding: 10px;
+    width: 100%;
+    height: auto;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file
--- a/src/router/routes/Pages.jsx
+++ b/src/router/routes/Pages.jsx
@@ -12,14 +12,14 @@ const PagesRoutes = [

  // Landing Register Page
  {
-    path: "/registion",
+    path: "/register",
    component: lazy(() => import("../../view/Pages/Register")),
    layout: "VerticalLayout",
  },

  // Register 
  {
-    path: "/register",
+    path: "/register/registion",
    component: lazy(() => import("../../view/Registion/Registion")),
    layout: "VerticalLayout",
  },

--- a/src/services/index.js
+++ b/src/services/index.js
 import axios from "axios";

+// register
 export const sendToken = (data) => {
  return axios
    .post(
@@ -12,14 +13,37 @@ export const sendToken = (data) => {
    });
 };

+// login
 export const sendLogin = (data) => {
  return axios
-      .post(
-        process.env.REACT_APP_SECRET_API + "/authentication/login",
-        data
-      )
-      .then((response) => response.data)
+    .post(process.env.REACT_APP_SECRET_API + "/authentication/login", data)
+    .then((response) => {
+      if (response.data) {
+        localStorage.setItem("user", JSON.stringify(response.data));
+      }
+
+      return response.data;
+    })
    .catch((err) => {
      console.log(err);
    });
-  };
+};
+
+// logout
+export const sendLogout = () => {
+  return localStorage.removeItem("user")
+}
+
+// get list All garage
+export const FetchGarageAll = () => {
+  // console.log('test55555555', process.env.REACT_APP_SECRET_API)
+  return (
+    axios
+      .get(process.env.REACT_APP_SECRET_API + "/garage/all")
+      // .get("http://localhost:4000/garage/all")
+      .then((response) => response.data)
+      .catch((err) => {
+        console.log(err);
+      })
+  );
+};
--- a/src/view/Dashboards/repairDashboard/repairAdd/index.jsx
+++ b/src/view/Dashboards/repairDashboard/repairAdd/index.jsx
--- a/src/view/Dashboards/repairDashboard/repairList/index.jsx
+++ b/src/view/Dashboards/repairDashboard/repairList/index.jsx
--- a/src/view/Dashboards/repairDashboard/repairSatatus/index.jsx
+++ b/src/view/Dashboards/repairDashboard/repairSatatus/index.jsx
--- a/src/view/Login/Login.jsx
+++ b/src/view/Login/Login.jsx
@@ -31,19 +31,32 @@ function App() {
    };
  }, [vantaEffect]);

+  // const user = JSON.parse(localStorage.getItem('user'))
+  // console.log(user)
+
  const onFinish = (values) => {
    const data = {
      garageID: values.garageID,
      password: values.password,
    };
-    console.log(data);
+    // console.log(data);

-    sendLogin(data).then((response) => console.log("response", response));
+    sendLogin(data).then((response) => {
+      // console.log('response', response.userData)
+      setTimeout(() => {
+        window.location.reload(false);
+      }, 1000);
+    });
  };

+  // const removestr = () => {
+  //   sendLogout();
+  //   window.location.reload(false);
+  // }
+
  return (
    <div className="h-100" ref={myRef}>
-      <Row >
+      <Row>
        <Col
          span={4}
          xs={{ order: 1 }}

--- a/src/view/Pages/CustomerService/RepairShop/data/skateboard-parks.json
+++ b/src/view/Pages/CustomerService/RepairShop/data/skateboard-parks.json
+{
+    "type": "FeatureCollection",
+    "crs": {
+      "type": "name",
+      "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
+    },
+    "features": [
+        {
+            "party" : "garage",
+            "userID" : "garage15493",
+            "password" : "123456",
+         "user_name" : "นายเจริญ การช่าง",
+            "garage_name" : "ส.วิจิตรยนต์",
+            "email" : "test@gmail.com",
+            "garage_type" : "อู่ซ่อมรถ",
+            "address_number" : "58",
+            "moo" : "3",
+            "alley" : "-",
+            "road" : "-",
+            "sub_district" : "หัวเมือง",
+            "district" : "มหาชนะชัย",
+            "province" : "ยโสธร",
+            "pos_code" : "35130",
+            "address_map" : "15.120181622293224,108.12647",
+            "registration_date" : "17-08-2654",
+            "on_time" : "07.30",
+            "off_time" : "18.30",
+            "tel" : "0986181xxx",
+            "letlng" : [15.131781606883338, 104.91443914794922]
+        },
+        {
+            "party" : "garage",
+            "userID" : "kanchang11546",
+            "password" : "115423",
+            "user_name" : "นายเจริญ การช่าง",
+            "garage_name" : "ซ่อมครบทุกวงจร",
+            "email" : "kanchang@gmail.com",
+            "garage_type" : "ศูนย์รถยนต์",
+            "address_number" : "58",
+            "moo" : "3",
+            "alley" : "-",
+            "road" : "-",
+            "sub_district" : "หนองหมก",
+            "district" : "เมือง",
+            "province" : "อุบลราชธานี",
+            "pos_code" : "34190",
+            "address_map" : "10.664654,108.12647",
+            "registration_date" : "17-08-2654",
+            "on_time" : "07.30",
+            "off_time" : "18.30",
+            "tel" : "0986181xxx",
+            "letlng" : [15.115872894936425, 104.91461080932618]
+        },
+        {
+            "party" : "garage",
+            "userID" : "user123",
+            "password" : "225315",
+            "user_name" : "สมจิตร สมใจ",
+            "garage_name" : "อู่ช่างบี",
+            "email" : "somjit@gmail.com",
+            "garage_type" : "ศูนย์รถยนต์, รถจัรกยานยนต์",
+            "address_number" : "134",
+            "moo" : "10",
+            "alley" : "คุณธรรม",
+            "road" : "ธรรม",
+            "sub_district" : "หนองกินเพล",
+            "district" : "เมือง",
+            "province" : "อุบลราชธานี",
+            "pos_code" : "34190",
+            "address_map" : "10.664654,108.12647",
+            "registration_date" : "17-08-2654",
+            "on_time" : "07.30",
+            "off_time" : "18.30",
+            "tel" : "0986181555",
+            "letlng" : [15.108912458169716, 104.89744467163086]
+        },
+        {
+            "party" : "garage",
+            "userID" : "user123",
+            "password" : "225315",
+            "user_name" : "สมจิตร สมใจ",
+            "garage_name" : "สมจิตรการช่าง",
+            "email" : "somjit@gmail.com",
+            "garage_type" : "ศูนย์รถยนต์, รถจัรกยานยนต์",
+            "address_number" : "134",
+            "moo" : "10",
+            "alley" : "คุณธรรม",
+            "road" : "ธรรม",
+            "sub_district" : "หนองกินเพล",
+            "district" : "เมือง",
+            "province" : "อุบลราชธานี",
+            "pos_code" : "34190",
+            "address_map" : "10.664654,108.12647",
+            "registration_date" : "17-08-2654",
+            "on_time" : "07.30",
+            "off_time" : "18.30",
+            "tel" : "0986181555",
+            "letlng" : [15.120181622293224, 104.89675802612305]
+        },
+        {
+            "party" : "garage",
+            "userID" : "user123",
+            "password" : "225315",
+            "user_name" : "สมจิตร สมใจ",
+            "garage_name" : "ศูนย์บริการรถยนต์",
+            "email" : "somjit@gmail.com",
+            "garage_type" : "ศูนย์รถยนต์, รถจัรกยานยนต์",
+            "address_number" : "134",
+            "moo" : "10",
+            "alley" : "คุณธรรม",
+            "road" : "ธรรม",
+            "sub_district" : "หนองกินเพล",
+            "district" : "เมือง",
+            "province" : "อุบลราชธานี",
+            "pos_code" : "34190",
+            "address_map" : "10.664654,108.12647",
+            "registration_date" : "17-08-2654",
+            "on_time" : "07.30",
+            "off_time" : "18.30",
+            "tel" : "0986181555",
+            "letlng" : [15.118524429823255, 104.9075726928711]
+        }
+    ]
+  }
\ No newline at end of file
--- a/src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
+++ b/src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
+import React, { useState, useEffect } from "react";
+
+import {
+  GoogleMap,
+  withScriptjs,
+  withGoogleMap,
+  Marker,
+  InfoWindow,
+} from "react-google-maps";
+
+import IconCar from "../../../../assets/icons/car.png";
+
+import { FetchGarageAll } from "../../../../services";
+
+// const [dataGet, SetDataGet] = useState([]);
+// let datas = []
+
+//   getGarageAll().then((response) => {
+//       console.log('response => ', response)
+//    for (var i in response.data) {
+//        console.log(response.data[i])
+//        datas.push(response.data[i])
+//    }
+
+//   });
+
+//   console.log('datas', JSON.stringify(datas) )
+// console.log('datas', datas)
+
+function Map() {
+  const [selectPark, setSelectPark] = useState(null);
+  const [dataGet, setDataGet] = useState([]);
+
+  useEffect(() => {
+    const getAllgarage = async () => {
+      await FetchGarageAll().then((response) => {
+        if (response) {
+          setDataGet(response.data);
+          // console.log("data", response.data);
+        }
+      });
+    };
+    getAllgarage();
+  }, []);
+
+  return (
+    <GoogleMap
+      defaultZoom={13}
+      defaultCenter={{ lat: 15.118524429823255, lng: 104.9075726928711 }}
+    >
+      {dataGet.length !== 0 ? (
+        <>
+          {dataGet.map((park, index) => (
+            <Marker
+              key={index}
+              position={{
+                lat: JSON.parse(park.address_map)[0],
+                lng: JSON.parse(park.address_map)[1],
+              }}
+              onClick={() => {
+                setSelectPark(park);
+              }}
+              icon={{
+                url: IconCar,
+                scaledSize: new window.google.maps.Size(40, 40),
+              }}
+              //   icon={IconCar}
+            />
+          ))}
+        </>
+      ) : null}
+
+      {selectPark && (
+        <InfoWindow
+          position={{
+            lat: JSON.parse(selectPark.address_map)[0],
+            lng: JSON.parse(selectPark.address_map)[1],
+          }}
+          onCloseClick={() => {
+            setSelectPark(null);
+          }}
+        >
+          <div>
+            <h4>
+              <b>{selectPark.garage_name}</b>
+            </h4>
+            <p>{JSON.parse(selectPark.garage_type)}</p>
+          </div>
+        </InfoWindow>
+      )}
+    </GoogleMap>
+  );
+}
+
+const WrappedMap = withScriptjs(withGoogleMap(Map));
+
+export default function App() {
+  return (
+    <>
+      <WrappedMap
+        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%" }} />}
+      />
+    </>
+  );
+}
--- a/src/view/Pages/CustomerService/RepairShop/index.jsx
+++ b/src/view/Pages/CustomerService/RepairShop/index.jsx
-import React from 'react';
+import React from "react";
+import { Row, Col, Typography } from "antd";

-export default function App () {
+import GoogleMaps from "./googleMaps";
+
+const { Title } = Typography;
+
+
+
+export default function App() {
  return (
    <>
-            Repairshop
+      <Row>
+        <Col span={24}>
+          <Title level={3}>ค้นหาร้านซ่อม</Title>
+        </Col>
+        <Col span={24}>
+          <GoogleMaps />
+        </Col>
+      </Row>
    </>
-    )
+  );
 }
--- a/src/view/Pages/GetStarted/Contents/index.jsx
+++ b/src/view/Pages/GetStarted/Contents/index.jsx
@@ -61,7 +61,7 @@ function App() {
          <ControlOutlined style={{ fontSize: "250%" }} />
          <Title level={5}> ลดขั้นตอนในการทำงาน </Title>
          <Text>
-            ช่วยลดขั้นตอนของการทำงานลงเมื่อต้องตรวจเช็คสภาพอย่างละเอียดอีกครั้ง
+            ช่วยลดขั้นตอนของการทำงานลงเมื่อต้องตรวจเช็คสภาพอุปกรณ์ที่นำมาซ่อมอย่างละเอียดอีกครั้ง
          </Text>
        </div>
      </Col>
@@ -89,7 +89,7 @@ function App() {
          <PieChartOutlined style={{ fontSize: "250%" }} />
          <Title level={5}> ชุดรายงานที่ครอบคลุม </Title>
          <Text>
-            มีชุดรายงานที่ครอบคลุมทุกด้าน จัดเป็นหมวดหมู่ แสดงผลสวยงาม
+            มีชุดรายงานที่ครอบคลุม จัดเป็นหมวดหมู่ แสดงผลสวยงาม
            ตอบสนองทุกมุมมองของทางร้าน
          </Text>
        </div>
@@ -117,8 +117,8 @@ function App() {
          <PushpinOutlined style={{ fontSize: "250%" }} />
          <Title level={5}> ค้นหาร้านซ่อม </Title>
          <Text>
-            ลูกค้าสามารถค้นหาร้านซ่อมที่อยู่ในระบบ
-            ทำให้ดึงดูดลูกค้าให้มาใช้บริการร้านของท่าน
+            ลูกค้าสามารถค้นหาร้านซ่อมที่อยู่ในระบบเพื่อให้ลูกค้ามาใช้บริการที่ร้านซ่อมได้ถูก
+            และทำให้ดึงดูดลูกค้าให้มาใช้บริการร้านของท่าน
          </Text>
        </div>
      </Col>
@@ -131,7 +131,7 @@ function App() {
          <LikeOutlined style={{ fontSize: "250%" }} />
          <Title level={5}> ง่ายต่อการใช้งาน </Title>
          <Text>
-            รูปแบบของระบบมีความเรียบง่าย สามารถได้ง่ายและเรียนรู้การทำงานได้ไว
+            รูปแบบของระบบมีความเรียบง่าย สามารถใช้งานได้ง่ายและเรียนรู้การทำงานได้ไว
          </Text>
        </div>
      </Col>
@@ -145,7 +145,7 @@ function App() {
          <Title level={5}> สามารถใช้งานได้ฟรี </Title>
          <Text>
            ผู้ใช้สามารถใช้งานระบบได้ฟรีโดยไม่มีค่าใช้จ่าย
-            และสามารถลงทะเบียนออนไลน์เริ่มใช้งานได้ทันที
+            และสามารถลงทะเบียนออนไลน์ได้ทันที
          </Text>
        </div>
      </Col>

--- a/src/view/Pages/GetStarted/Footers/index.jsx
+++ b/src/view/Pages/GetStarted/Footers/index.jsx
@@ -32,11 +32,13 @@ function App() {
        className="Col-footer"
      >
        <div className="box2">
+          <Link to={"/register"}>
          <Row className="box2-button">
            <Col span={24} className="bt2-register">
-            <Link to={"/register"}>เริ่มใช้งานทันที</Link>
+            ลงทะเบียนออนไลน์ทันที
            </Col>
          </Row>
+          </Link>
        </div>
      </Col>
    </Row>

--- a/src/view/Pages/GetStarted/Title/index.jsx
+++ b/src/view/Pages/GetStarted/Title/index.jsx
@@ -45,22 +45,24 @@ function App() {
            เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
          </Title>
          <Row className="box-button">
-            
            <Col
              xs={{ span: 11, offset: 1 }}
              lg={{ span: 10, offset: 2 }}
              className="bt-register"
            >
-                <Link className="text-register" to={"/register"}>ลงทะเบียนใช้งานฟรี</Link>
+              <Link className="text-register" to={"/register"}>
+                ลงทะเบียนใช้งานฟรี
+              </Link>
            </Col>

-
            <Col
              xs={{ span: 11, offset: 1 }}
              lg={{ span: 10, offset: 2 }}
              className="bt-login"
            >
-              <Link className="text-login" to={"/login"}>เข้าสู่ระบบ</Link>
+              <Link className="text-login" to={"/login"}>
+                เข้าสู่ระบบ
+              </Link>
            </Col>
          </Row>
        </Col>

--- a/src/view/Pages/Register/index.jsx
+++ b/src/view/Pages/Register/index.jsx
-import React from 'react';
+import React, { useState } from "react";
+
+import { Row, Col, Typography, Checkbox, Form } from "antd";
+
+import { useHistory } from "react-router-dom";
+
+const { Title, Text } = Typography;
+
+export default function App() {
+  let history = useHistory();
+
+  const [chechBox, setCheckBox] = useState(false);
+
+  const handleSubmit = () => {
+    if (chechBox === false) {
+      alert("กรุณาอ่านข้อกำหนดและเงื่อนไขในการให้บริการ!!");
+    } else {
+      history.push("/register/registion");
+    }
+  };

-export default function App () {
  return (
    <>
-            register
+      <Row>
+        <Col span={24} className="box-main-title">
+          <Col className="box-register-title">
+            <Title level={4}>
+              เงื่อนไขการใช้บริการ และนโยบายความเป็นส่วนตัว
+            </Title>
+
+            <div className="div-register-text">
+              <Title level={5}>เงื่อนไขการใช้บริการ </Title>
+              <Text>
+                ข้อตกลงให้การใช้บริการตามคําขอ
+                เป็นไปตามข้อกําหนดและเงื่อนไขดังต่อไปนี้
+              </Text>
+
+              <div className="content-text">
+                <Text strong style={{ color: "red" }}>
+                  ข้อ 1. การตกลงยอมรับข้อกำหนดและเงื่อนไข
+                </Text>
+                <br />
+                <Text style={{ marginTop: "8px" }}>
+                  (1)
+                  ผู้ใช้บริการทุกรายจะต้องใช้บริการตามข้อกำหนดที่ระบุไว้ในข้อกำหนดและเงื่อนไข
+                  ผู้ใช้บริการจะไม่สามารถใช้บริการได้
+                  เว้นเสียแต่ว่าผู้ใช้บริการได้ตกลงยอมรับข้อกำหนดและเงื่อนไข
+                  การตกลงยอมรับดังกล่าวมีผลสมบูรณ์และเพิกถอนมิได้
+                </Text>
+                <br />
+                <Text>
+                  (2) กรณีมีข้อกำหนดและเงื่อนไขเพิ่มเติมสำหรับบริการ
+                  ผู้ใช้บริการจะต้องปฏิบัติตามข้อกำหนดและเงื่อนไขเพิ่มเติมนั้นด้วยเช่นเดียวกับข้อกำหนดและเงื่อนไขนี้
+                </Text>
+              </div>
+
+              <div className="content-text">
+                <Text strong style={{ color: "red" }}>
+                  ข้อ 2. การแก้ไขข้อกำหนดและเงื่อนไข
+                </Text>
+                <br />
+                <Text style={{ marginTop: "8px" }}>
+                  (1) ทางระบบ Repair Center ขอสงวนสิทธิในการแก้ไข เปลี่ยนแปลง
+                  เพิ่มเติม ตัดทอน
+                  บรรดาข้อกำหนดและเงื่อนไขการใช้บริการใดๆที่กำหนดไว้ ณ.ที่นี้
+                  ผู้ใช้บริการมีหน้าที่ติดตามการแก้ไขเปลี่ยนแปลงต่างๆ อยู่เสมอ
+                  และหากภายหลังการแก้ไขเปลี่ยนแปลง
+                  ผู้ใช้บริการยังคงใช้บริการอยู่
+                  ถือว่าผู้ใช้บริการได้อ่านและเข้าใจ
+                  จึงได้ยอมรับตามข้อกำหนดและเงื่อนไขการใช้บริการที่ได้มีการเปลี่ยนแปลงนี้อย่างไม่มีเงื่อนไข
+                  ผู้ใช้บริการไม่อาจอ้างเหตุในการไม่ทราบถึงการเปลี่ยนแปลงข้อกำหนดและเงื่อนการใช้บริการมาเป็นเหตุในการฝ่าฝืนข้อกำหนดและเงื่อนไขนี้ได้
+                </Text>
+              </div>
+
+              <div className="content-text">
+                <Form>
+                  <Form.Item
+                    name="agreement"
+                    valuePropName="checked"
+                    rules={[
+                      {
+                        validator: (_, value) =>
+                          value
+                            ? Promise.resolve()
+                            : Promise.reject(new Error("กรุณาคลิ๊กที่ช่องว่าง เพื่อยอมรับข้อตกลง")),
+                      },
+                    ]}
+                  >
+                    <Checkbox
+                      onChange={(e) => {
+                        setCheckBox(e.target.checked);
+                      }}
+                    >
+                      ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้วและยอมรับข้อกำหนดและเงื่อนไขทุกประการ
+                    </Checkbox>
+                  </Form.Item>
+                </Form>
+              </div>
+              <div className="div-button-submit">
+                <div className="button-submit" onClick={handleSubmit}>
+                  ถัดไป
+                </div>
+              </div>
+            </div>
+          </Col>
+        </Col>
+      </Row>
    </>
-    )
+  );
 }
--- a/src/view/Pages/Report/index.jsx
+++ b/src/view/Pages/Report/index.jsx
-import React from 'react';
+import React from "react";
+
+import { Row, Col, Typography, Form, Input, Button, Select } from "antd";
+
+const formItemLayout = {
+  labelCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 24,
+    },
+    md: {
+      span: 24,
+    },
+    lg: {
+      span: 24,
+    },
+    xl: {
+      span: 24,
+    },
+  },
+  wrapperCol: {
+    xs: {
+      span: 24,
+    },
+    sm: {
+      span: 24,
+    },
+    md: {
+      span: 24,
+    },
+    lg: {
+      span: 24,
+    },
+    xl: {
+      span: 24,
+    },
+  },
+};
+
+const { Option } = Select;
+
+const { Title } = Typography;
+/* eslint-enable no-template-curly-in-string */
+
+export default function App() {
+  const onFinish = (values) => {
+    console.log(values);
+  };

-export default function App () {
  return (
    <>
-            Reported
+      <Row className="report-box">
+        <div className="report-content">
+          <Col span={24} className="box-text-title">
+            <Title level={4}>แจ้งปัญหาการใช้งาน</Title>
+          </Col>
+          <Col  className="div-form">
+            <Form {...formItemLayout} name="nest-messages" onFinish={onFinish}>
+              {/* Garage type ประเภทของร้านซ่อม */}
+              <Form.Item
+                name="party"
+                label="ผู้ใช้งานที่แจ้งรายงาน"
+                tooltip="เลือกประเภทของผู้ใช้"
+                rules={[
+                  {
+                    required: true,
+                    message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
+                  },
+                ]}
+              >
+                <Select
+                  allowClear
+                  style={{ width: "100%" }}
+                  placeholder="Please select"
+                >
+                  <Option value="garage">ร้านซ่อมหรือศูนย์บริการ</Option>
+                  <Option value="member">ลูกค้าสมาชิก</Option>
+                </Select>
+              </Form.Item>
+
+              {/* User Name  ชื่อ-นามสกุล */}
+              <Form.Item
+                name="user_report"
+                label="User ID"
+                tooltip="ร้านซ่อมให้ใช้ ๊User ID  **หากเป็นลูกค้าให้ใช้เบอร์โทรศัพท์ที่ใช้สมัคร member"
+                rules={[
+                  {
+                    required: true,
+                    message: "กรุณาระบุ User ID ของคุณ!",
+                    whitespace: true,
+                  },
+                ]}
+              >
+                <Input />
+              </Form.Item>
+              {/* User Name  ชื่อ-นามสกุล */}
+              <Form.Item
+                name="username"
+                label="ชื่อ-นามสกุล"
+                tooltip="ชื่อ-นามสกุล ของผู้ที่แจ้งปัญหา"
+                rules={[
+                  {
+                    required: true,
+                    message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
+                    whitespace: true,
+                  },
+                ]}
+              >
+                <Input />
+              </Form.Item>
+
+              <Form.Item name="report_detail" label="ปัญหาที่จะรายงาน">
+                <Input.TextArea />
+              </Form.Item>
+
+              <Form.Item name="report_tel" label="หมายเลขโทรศัพท์ที่ติดติดต่อได้">
+                <Input />
+              </Form.Item>
+
+              <Form.Item wrapperCol={{ ...formItemLayout.wrapperCol }}>
+                <Button type="primary" htmlType="submit">
+                  Submit
+                </Button>
+              </Form.Item>
+            </Form>
+          </Col>
+        </div>
+      </Row>
    </>
-    )
+  );
 }
--- a/src/view/Registion/Registion.jsx
+++ b/src/view/Registion/Registion.jsx
@@ -93,7 +93,7 @@ export default function RegistrationForm() {
          scale: 1.0,
          scaleMobile: 1.0,
          backgroundColor: 0xffffff,
-          quantity: 5.00,
+          quantity: 3.00,
        })
      );
    }
@@ -197,7 +197,7 @@ export default function RegistrationForm() {
              ]}
              hasFeedback
            >
-              <Input.Password />
+              <Input.Password minLength={6} />
            </Form.Item>
            {/* confirm Password  ยืนยันรหัสผ่าน */}
            <Form.Item
@@ -223,7 +223,7 @@ export default function RegistrationForm() {
                }),
              ]}
            >
-              <Input.Password />
+              <Input.Password minLength={6} />
            </Form.Item>

            {/* User Name  ชื่อ-นามสกุล */}

--- a/src/view/Registion/googleMap.jsx
+++ b/src/view/Registion/googleMap.jsx
@@ -21,6 +21,7 @@ import {
          draggable={true}
          position={newLatLng[0]}
          onDragEnd={(e) => onMarkerDragEnd(e)}
+          
        />
      </GoogleMap>
    ))
@@ -28,7 +29,7 @@ import {

  export default function App() {
      return (
-        <Col md={24} span={24}>
+        <Col  span={24}>
        <MapWithAMarker
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYQsoMGSxKVOe6vilIiEedgPhRDjcPbC8&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: '100%' }} />}

--- a/yarn.lock
+++ b/yarn.lock
@@ -8745,6 +8745,11 @@
  "resolved" "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
  "version" "4.6.2"

+"lodash.omit@^4.5.0":
+  "integrity" "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+  "resolved" "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz"
+  "version" "4.5.0"
+
 "lodash.template@^4.5.0":
  "integrity" "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A=="
  "resolved" "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz"
@@ -10840,7 +10845,7 @@
    "kleur" "^3.0.3"
    "sisteransi" "^1.0.5"

-"prop-types@^15.0.0", "prop-types@^15.6.2", "prop-types@^15.7.2":
+"prop-types@^15.0.0", "prop-types@^15.6.0", "prop-types@^15.6.2", "prop-types@^15.7.2":
  "integrity" "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ=="
  "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
  "version" "15.7.2"
@@ -11538,6 +11543,17 @@
  optionalDependencies:
    "fsevents" "^2.1.3"

+"react-validation@^3.0.7":
+  "integrity" "sha1-tQcL+KbnN7hw2Hu/tyzMpys/N1A="
+  "resolved" "https://registry.npmjs.org/react-validation/-/react-validation-3.0.7.tgz"
+  "version" "3.0.7"
+  dependencies:
+    "lodash.omit" "^4.5.0"
+    "prop-types" "^15.6.0"
+    "react" "^16.0.0"
+    "shallow-equal" "^1.0.0"
+    "uuid" "^3.1.0"
+
 "react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.9.0", "react@>=15", "react@>=16.0.0", "react@>=16.9.0", "react@17.0.2":
  "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
  "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
@@ -11546,6 +11562,15 @@
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"

+"react@^16.0.0":
+  "integrity" "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g=="
+  "resolved" "https://registry.npmjs.org/react/-/react-16.14.0.tgz"
+  "version" "16.14.0"
+  dependencies:
+    "loose-envify" "^1.1.0"
+    "object-assign" "^4.1.1"
+    "prop-types" "^15.6.2"
+
 "read-pkg-up@^7.0.1":
  "integrity" "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg=="
  "resolved" "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz"
@@ -12359,6 +12384,11 @@
    "inherits" "^2.0.1"
    "safe-buffer" "^5.0.1"

+"shallow-equal@^1.0.0":
+  "integrity" "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+  "resolved" "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz"
+  "version" "1.2.1"
+
 "shallowequal@^1.1.0":
  "integrity" "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
  "resolved" "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
@@ -13667,7 +13697,7 @@
  "resolved" "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
  "version" "1.0.1"

-"uuid@^3.3.2", "uuid@^3.4.0":
+"uuid@^3.1.0", "uuid@^3.3.2", "uuid@^3.4.0":
  "integrity" "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
  "resolved" "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
  "version" "3.4.0"
@@ -13699,6 +13729,11 @@
    "spdx-correct" "^3.0.0"
    "spdx-expression-parse" "^3.0.0"

+"validator@^13.7.0":
+  "integrity" "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
+  "resolved" "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz"
+  "version" "13.7.0"
+
 "value-equal@^1.0.1":
  "integrity" "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
  "resolved" "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz"