add 18/02/2565

package.json

@@ -15,6 +15,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-maps": "^9.4.5",
+    "react-highlight-words": "^0.17.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.3",
     "react-validation": "^3.0.7",

src/Layouts/Header/tabHeader.jsx

@@ -31,8 +31,7 @@ export default function App() {
         <Col span={15}>
           <Row>
             <Row className="main-logo" onClick={clicklogo}>
-              <div> Repair </div>&nbsp;
-              <div className="logo"> Center</div>
+              Repair Center
             </Row>
           </Row>
         </Col>

src/Layouts/Menu/menuDashboard.jsx

 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { Layout, Menu } from "antd";
+import { Col,  Layout, Menu, Row, Typography, Avatar } from "antd";
 import {
   HomeOutlined,
   AppstoreAddOutlined,
   ToolOutlined,
-  UnorderedListOutlined,
   OrderedListOutlined,
   UserAddOutlined,
   TeamOutlined,
@@ -13,7 +12,7 @@ import {
   CommentOutlined,
   SettingOutlined,
   LogoutOutlined,
-  DollarOutlined,
+  // DollarOutlined,
 } from "@ant-design/icons";
 
 // import services
@@ -21,10 +20,13 @@ import { sendLogout } from "../../services";
 
 const { Sider } = Layout;
 const { SubMenu } = Menu;
+const { Title } = Typography;
 
 export default function App() {
   const [collapsed, setCollapsed] = useState(false);
 
+  let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
+
   const onCollapse = (collapsed) => {
     setCollapsed(collapsed);
   };
@@ -46,12 +48,30 @@ export default function App() {
           overflowY: "scroll",
         }}
       >
+        {/* <Divider /> */}
+       
+        {/* <Divider /> */}
+
         <Sider
           theme="dark"
           collapsible
           collapsed={collapsed}
           onCollapse={onCollapse}
         >
+           <Row className="display-flex-center">
+          <Col>
+            <Title level={5} style={{color: "#ffbf00"}}>
+              <Avatar
+                style={{ backgroundColor: "#ffbf00", verticalAlign: "middle" }}
+                size="large"
+                gap={"gap"}
+              >
+                {garageName}
+              </Avatar> &nbsp;
+              {garageName}
+            </Title>
+          </Col>
+        </Row>
           <Menu
             theme="dark"
             defaultSelectedKeys={["1"]}
@@ -62,20 +82,16 @@ export default function App() {
               <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>
+            <SubMenu key="sub1" icon={<ToolOutlined />} title="จัดการงานซ่อม">
               <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 key="2" icon={<OrderedListOutlined />}>
+                <Link to={"/dashboard/all-repair"}>งานซ่อมทั้งหมด</Link>
               </Menu.Item>
+              {/* <Menu.Item key="4" icon={<ToolOutlined />}>
+                <Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
+              </Menu.Item> */}
             </SubMenu>
 
             <SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
@@ -86,20 +102,20 @@ export default function App() {
                 <Link to={"/dashboard/search-repair"}>ค้นหาการซ่อม</Link>
               </Menu.Item>
               <Menu.Item key="7" icon={<TeamOutlined />}>
-                <Link to={"/dashboard/search-member"}>ลูกค้าของฉัน</Link>
+                <Link to={"/dashboard/member"}>ลูกค้าของฉัน</Link>
               </Menu.Item>
             </SubMenu>
-
+{/* 
             <Menu.Item key="10" icon={<DollarOutlined />}>
               <Link to={"/dashboard/payment"}>การชำระเงิน</Link>
-            </Menu.Item>
+            </Menu.Item> */}
 
             <Menu.Item key="8" icon={<SettingOutlined />}>
               <Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
             </Menu.Item>
 
             <Menu.Item key="9" icon={<CommentOutlined />}>
-              <Link to={"/dashboard/reported"}>แจ้งปัญหาการใช้งาน</Link>
+              <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
             </Menu.Item>
 
             <Menu.Item

src/Layouts/Menu/menulist.jsx

@@ -16,7 +16,7 @@ const { Sider } = Layout;
 const { SubMenu } = Menu;
 
 export default function App() {
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(false);
 
   const onCollapse = (collapsed) => {
     setCollapsed(collapsed);
@@ -40,7 +40,7 @@ export default function App() {
           <Menu
             theme="dark"
             defaultSelectedKeys={["1"]}
-            // defaultOpenKeys={["sub1"]}
+            defaultOpenKeys={["sub1"]}
             mode="inline"
           >
             <Menu.Item key="1" icon={<PieChartOutlined />}>

src/Layouts/VerticalLayout.jsx

@@ -8,13 +8,12 @@ import HeaderTap from "./Header/tabHeader";
 import MenuList from "./Menu/menulist";
 import MenuDashboard from "./Menu/menuDashboard";
 
-const { Content, Footer } = Layout;
+const { Content } = Layout;
 
 export default function VerticalLayout(props) {
   const { children } = props;
   // let test = "";
   const history = useHistory();
-  
 
   const [checkLocal, setChechLocal] = useState(null);
 
@@ -23,17 +22,18 @@ export default function VerticalLayout(props) {
     setChechLocal(JSON.parse(localStorage.getItem("user")));
   }, []);
 
+  
+
   if (checkLocal === null) {
     history.push("/");
   } else {
     history.push({
-       pathname: "/dashboard",
-       state: checkLocal.userData.userId
-       });
+      pathname: "/dashboard",
+      state: checkLocal.userData.userId,
+    });
+    // console.log('test', checkLocal)
   }
 
-  // console.log(checkLocal);
-
   return (
     <>
       <HeaderTap
@@ -48,7 +48,7 @@ export default function VerticalLayout(props) {
 
       {checkLocal === null ? (
         <Layout
-          style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
+          style={{ minHeight: "90vh", maxHeight: "90vh" }}
         >
           <MenuList />
 
@@ -61,17 +61,17 @@ export default function VerticalLayout(props) {
                 {children}
               </div>
             </Content>
-            <Footer className="footer">
+            {/* <Footer className="footer">
               <p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
-            </Footer>
+            </Footer> */}
           </Layout>
         </Layout>
       ) : (
         <Layout
           style={{
-            minHeight: "93vh",
+            minHeight: "90vh",
             maxHeight: "90vh",
-            paddingTop: "0.5vh",
+            // paddingTop: "0.5vh",
           }}
         >
           <MenuDashboard />
@@ -84,9 +84,9 @@ export default function VerticalLayout(props) {
                 {children}
               </div>
             </Content>
-            <Footer className="footer">
+            {/* <Footer className="footer">
               <p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
-            </Footer>
+            </Footer> */}
           </Layout>
         </Layout>
       )}

src/assets/fonts/index.css

@@ -4,3 +4,12 @@ body {
     font-family: 'Mitr', sans-serif;
 }
 
+.bg-freecar {
+    /* background-image: url("../images/freeCar.jpg"); */
+    background-image: linear-gradient(#001529, #25274d);
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    /* background-size: cover; */
+  }
+  /* 44318d, 25274d, faed26 */
+

src/assets/less/index.less

@@ -5,3 +5,5 @@
 @import "pages/register.less";
 @import "pages/reported.less";
 @import "pages/dashboard/index.less";
+
+@base-url: "D:\Project\Repair-app\src\assets\images";

src/assets/less/pages/dashboard/index.less

@@ -13,9 +13,9 @@
   // box-shadow: 1px 3px #001529;
 }
 
-.div-content-main {
-  // border: 1px solid #333;
-}
+// .div-content-main {
+//   // border: 1px solid #333;
+// }
 .main-content-repair {
   padding: 10px;
   // border: 1px solid #333;
@@ -86,3 +86,48 @@
 .border {
   border: 1px solid #001529;
 }
+
+.bt-delete {
+ color: red;
+ font-weight: bold;
+}
+
+.div-lr-5 {
+  padding: 0% 5% 2% 5%;
+  // border: 1px solid #001529;
+}
+
+.bg-theme {
+  background-color: #001529;
+    color: aliceblue;
+}
+
+.w-100 {
+  min-height: 87vh;
+}
+
+.bg-theme {
+  background-color: #001529;
+}
+
+.display-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.w-auto {
+  height: auto;
+}
+
+.color-faed26 {
+  color: #faed26;
+}
+
+// .left {
+//   // display: flex;
+//   justify-content: left;
+// }
+
+
+

src/router/routes/Pages.jsx

@@ -79,6 +79,42 @@ const PagesRoutes = [
     component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')),
     layout: 'VerticalLayout',
   },
+
+  // status
+  // {
+  //   path: '/dashboard/status',
+  //   component: lazy(() => import('../../view/Dashboards/repairDashboard/repairSatatus/index')),
+  //   layout: 'VerticalLayout',
+  // },
+
+    // Add Member
+  {
+    path: '/dashboard/add-member',
+    component: lazy(() => import('../../view/Dashboards/member/addMember')),
+    layout: 'VerticalLayout',
+  },
+
+    // Search Repair
+    {
+      path: '/dashboard/search-repair',
+      component: lazy(() => import('../../view/Dashboards/member/searchMember')),
+      layout: 'VerticalLayout',
+    },
+
+    // Show Repair
+    {
+      path: '/dashboard/search-repair/details',
+      component: lazy(() => import('../../view/Dashboards/member/ShowDetailMember')),
+      layout: 'VerticalLayout',
+    },
+
+     // Show Repair
+     {
+      path: '/dashboard/member',
+      component: lazy(() => import('../../view/Dashboards/member/member')),
+      layout: 'VerticalLayout',
+    },
 ];
 
+
 export default PagesRoutes;

src/services/index.js

@@ -18,10 +18,9 @@ export const sendLogin = (data) => {
   return axios
     .post(process.env.REACT_APP_SECRET_API + "/authentication/login", data)
     .then((response) => {
-      if (response.data) {
+      if (response.data.code === 200) {
         localStorage.setItem("user", JSON.stringify(response.data));
       }
-
       return response.data;
     })
     .catch((err) => {
@@ -36,7 +35,6 @@ export const sendLogout = () => {
 
 // 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")
@@ -80,23 +78,18 @@ export const InsertDetails = (data) => {
 
 // get data FetctDetailByGarage
 export const FetctDetailByGarage = (data) => {
-  // console.log('fetdata', data)
-  return (
-    axios
-      // .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
-      .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
-        params: data,
-      })
-      .then((response) => response.data)
-      .catch((err) => {
-        console.log(err);
-      })
-  );
+  return axios
+    .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
+      params: data,
+    })
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
 };
 
 // get data FetctDetailByGarageID
 export const FetctDetailByGarageID = (data) => {
-  // console.log('fetdata', data)
   return (
     axios
       // .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
@@ -109,3 +102,97 @@ export const FetctDetailByGarageID = (data) => {
       })
   );
 };
+
+// get data FetctDetailByMember
+export const FetchDetailByMember = (data) => {
+  return axios
+    .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbymember", {
+      params: data,
+    })
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// send data to Insert Spare to Details
+export const InsertSpare = (data) => {
+  return axios
+    .post(process.env.REACT_APP_SECRET_API + "/repairdetail/insert-spare", data)
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// get data FetctDetailByGarageID
+export const FetchSpareByDetailID = (data) => {
+  return axios
+
+    .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getspare-detailid", {
+      params: data,
+    })
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// Delete Spare
+export const DeleteSpare = (data) => {
+  
+  return axios
+    .delete(process.env.REACT_APP_SECRET_API + "/repairdetail/delete-spare", {
+      data: { id: data },
+    })
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// Update Spare
+export const UpdateDetail = (data) => {
+  console.log(data);
+  return axios
+    .put(process.env.REACT_APP_SECRET_API + "/repairdetail/update-detail", data)
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+
+// Insert Member
+export const InsertMember = (data) => {
+  // console.log('service', data)
+  return axios
+    .post(process.env.REACT_APP_SECRET_API + "/member/insert", data)
+    .then((response) => {
+      return response.data;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+
+// get data FetctMemberByGaragename
+export const FetctMemberByGarage= (data) => {
+  // console.log(data)
+  return axios
+
+    .get(process.env.REACT_APP_SECRET_API + "/member/getmember/member-regis", {
+      params: data,
+    })
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// // logout
+// export const sendLogout = () => {
+//   return localStorage.removeItem("user");
+// };
+

src/view/Dashboards/component/ContentSearch.jsx

+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { Col, Row, Card, Typography } from "antd";
+
+// import Service
+import { FetchDetailByMember } from "../../../services";
+
+const { Text } = Typography;
+
+export default function ContentSearch(props) {
+  //set useState
+  const [datas, setDatas] = useState([]);
+
+  const { tel } = props;
+
+  useEffect(() => {
+    let data = {
+      member_tel: tel,
+    };
+    const getDetailByMember = async () => {
+      if (tel !== undefined) {
+        await FetchDetailByMember(data).then(async (response) => {
+          await setDatas(response.data);
+          // console.log('data', response.data[0])
+        });
+      } else {
+        setDatas([]);
+      }
+    };
+    getDetailByMember();
+  }, [tel]);
+
+//   console.log("datas", datas, "tel", tel);
+
+  return (
+    <>
+      <Row gutter={[0, 16]}>
+        {datas !== undefined ? (
+          <>
+            {datas.map((val, index) => {
+              return (
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 7, offset: 1 }}
+                  className="border left"
+                >
+                  <Card
+                    type="inner"
+                    title={val.garage_name + " " + val.repair_date}
+                    extra={
+                      <Link
+                        to={{
+                          pathname: "/dashboard/search-repair/details",
+                          state: {
+                            detailID: val.detailsID,
+                            memberTel: val.member_tel,
+                          },
+                        }}
+                      >
+                        <Text style={{ color: "blue" }}>เพิ่มเติม</Text>
+                      </Link>
+                    }
+                  >
+                    <Text>
+                      <b>ประเภท : </b>
+                      {val.device_type}
+                    </Text>
+                    <br />
+                    {val.device_type === "รถยนต์" ||
+                    val.device_type === "รถจักรยานยนต์" ? (
+                      <>
+                        <Text>
+                          <b>ทะเบียนรถ : </b>
+                          {val.car_number} {val.car_province}
+                        </Text>
+                        <br />
+                        <Text>
+                          <b>ยี่ห้อ / รุ่น : </b>
+                          {val.brand} {val.model}
+                        </Text>
+                        <br />
+                      </>
+                    ) : (
+                      <>
+                        <Text>
+                          <b>ชนิด : </b>
+                          {val.equipment}
+                        </Text>
+                        <br />
+                        <Text>
+                          <b>ยี่ห้อ / รุ่น : </b>
+                          {val.brand}
+                        </Text>
+                        <br />
+                      </>
+                    )}
+
+                    <Text>
+                      <b>การซ่อมเบื้องต้น : </b>
+                      {val.repair_details}
+                    </Text>
+                  </Card>
+                </Col>
+              );
+            })}
+          </>
+        ) : null}
+      </Row>
+    </>
+  );
+}

src/view/Dashboards/component/SpareAdd.jsx

 import React, { useState, useEffect } from "react";
 
 import {
-//   Row,
-//   Col,
   Modal,
   Button,
   Input,
   Divider,
   Table,
   Typography,
+  Row,
+  Col,
+  Space,
+  Select,
+  // Popconfirm
 } from "antd";
 
-import { PlusCircleFilled } from "@ant-design/icons";
+import {
+  PlusCircleFilled,
+  DeleteOutlined,
+  ExclamationCircleOutlined,
+  OrderedListOutlined,
+  SaveOutlined,
+} from "@ant-design/icons";
 
 // import Service
-import { FetctDetailByGarageID } from '../../../services'
+import {
+  FetchSpareByDetailID,
+  InsertSpare,
+  DeleteSpare,
+  UpdateDetail,
+} from "../../../services";
 
 const { Column, ColumnGroup } = Table;
-const { Text } = Typography;
-
-// const data = [
-// //   {
-// //     key: "1",
-// //     name: "ยางใน",
-// //     age: 32,
-// //     address: "New York No. 1 Lake Park",
-// //     tags: ["nice", "developer"],
-// //   },
-// //   {
-// //     key: "2",
-// //     name: "น้ำมันเครื่อง",
-// //     age: 42,
-// //     address: "London No. 1 Lake Park",
-// //     tags: ["loser"],
-// //   },
-// //   {
-// //     key: "3",
-// //     name: "test",
-// //     age: 32,
-// //     address: "Sidney No. 1 Lake Park",
-// //     tags: ["cool", "teacher"],
-// //   },
-// ];
+const { Text, Title } = Typography;
+const { confirm } = Modal;
+const { Option } = Select;
 
 export default function SpareAdd(props) {
-  const detailID = props;
-//   console.log(detailID);
+  const {detailID, memberTel} = props;
+  // console.log(memberTel, detailID)
 
   // Set State
   const [visible, setVisible] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [ datas, setDatas  ] = useState([])
-  // const [modalText, setModalText] = useState("Content of the modal");
+  const [datas, setDatas] = useState([]);
+  const [status, setStatus] = useState('อยู่ระหว่างการซ่อม');
+  const [payment, setPayment] = useState('ยังไม่ได้ชำระ');
 
-  useEffect(() => {
-    const getDetailByGarage = async () => {
+  // state spare
+  const [spareName, setSpareName] = useState();
+  const [qty, setQTY] = useState();
+  const [qtyPrice, setQTYPrice] = useState();
+  const [sumPrice, setSumPrice] = useState(0);
 
-      await FetctDetailByGarageID(detailID).then(async (response) => {
-        await setDatas(response.data);
-        // console.log('data', response.data)
+  useEffect(() => {
+    const getSpare = async () => {
+      let data = {
+        detailID: detailID
+      }
+      await FetchSpareByDetailID(data).then((response) => {
+        if (response.data) {
+          setDatas(response.data);
+        }
       });
+      setSumPrice(qty * qtyPrice);
     };
-    getDetailByGarage();
-  }, [detailID]);
-
+    getSpare();
+  }, [detailID, qty, qtyPrice]);
 
   const showModal = () => {
     setVisible(true);
   };
 
+  let listData = [];
+  let sum = 0;
+  if (datas.length !== 0) {
+    for (let i = 0; i < datas.length; i++) {
+      let toarr = JSON.parse(datas[i].spare);
+      sum = sum + toarr.sumPrice;
+      let newData = {
+        spareID: datas[i].spareID,
+        spareName: toarr.spareName,
+        qty: toarr.qty,
+        qtyPrice: toarr.qtyPrice,
+        sumPrice: toarr.sumPrice,
+      };
+
+      listData.push(newData);
+    }
+  }
+
+  // console.log(listData);
+
   const handleOk = () => {
+    let listSpare = {
+      spareName: spareName,
+      qty: qty,
+      qtyPrice: qtyPrice,
+      sumPrice: sumPrice,
+    };
+
+    // let sum = 0;
+    // sum = sum +
+
+    const data = {
+      detailsID: detailID,
+      memberTel: memberTel,
+      spare: JSON.stringify(listSpare),
+    };
+
+    // console.log('data', data)
+
+    if (spareName === "" || spareName === null || spareName === undefined) {
+      Modal.info({
+        title: "ข้อมูลไม่ครบ",
+        content: `กรุณากรอกรายการการซ่อม`,
+      });
+    } else {
+      InsertSpare(data);
+    }
+
     // setModalText("The modal will be closed after two seconds");
     setConfirmLoading(true);
     setTimeout(() => {
       setVisible(false);
       setConfirmLoading(false);
+
+      setSpareName(null);
+      setQTY();
+      setQTYPrice();
+      setSumPrice(0);
     }, 2000);
   };
 
   const handleCancel = () => {
-    console.log("Clicked cancel button");
+    // console.log("Clicked cancel button");
     setVisible(false);
   };
 
+  function destroyAll() {
+    Modal.destroyAll();
+  }
+
+  const handleDelete = (id) => {
+    confirm({
+      icon: <ExclamationCircleOutlined />,
+      content: <Button onClick={destroyAll}>คลิ๊ก ok เพื่อลบรายการนี้</Button>,
+      onOk() {
+        // console.log("detele", id);
+        DeleteSpare(id);
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
+    });
+  };
+
+  const handleSave = () => {
+   
+    let data = {
+      status: status,
+      status_payment: payment,
+      sumPrice: sum,
+      detailsID: detailID
+    }
+    // console.log('data', data)
+    UpdateDetail(data)
+    setTimeout(() => {
+      window.location.reload(false)
+    }, 1);
+  }
+
   return (
     <>
       <Divider />
-      {/* <div className="div-p-5">
-        <Row gutter={[0, 32]}>
-          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
-            test
-          </Col>
-          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
-            test
-          </Col>
-          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
-            test
-          </Col>
-        </Row>
-      </div> */}
 
       <div className="div-p-5">
         <Button className="bt-them" onClick={showModal}>
           <Text className="color-fff-hover">
-            <PlusCircleFilled /> เพิ่มรายการอะไหล่
+            <PlusCircleFilled /> เพิ่มรายการซ่อม
           </Text>
         </Button>
-        <Table dataSource={datas} scroll={{ x: 400 }} className="border">
+
+        <Table
+          dataSource={listData}
+          scroll={{ x: 400 }}
+          bordered
+          className="border"
+        >
           <ColumnGroup title="รายละเอียดการซ่อม">
             <Column
               title="ลำดับ"
-              dataIndex="key"
-              key="member_name"
               width={"10%"}
+              render={(value, item, index) => index + 1}
             />
             <Column
-              title="รายการอะไหล่"
-              dataIndex="name"
-              key="member_tel"
-              width={"60%"}
+              title="รายการซ่อม / อะไหล่"
+              dataIndex="spareName"
+              key="spareName"
+              width={"48%"}
             />
 
-            <Column
-              title="จำนวน"
-              dataIndex="device_type"
-              key="device_type"
-              width={"10%"}
-            />
+            <Column title="จำนวน" dataIndex="qty" key="qty" width={"10%"} />
 
             <Column
               title="ราคาต่อหน่วย"
-              dataIndex="device_type"
-              key="device_type"
+              dataIndex="qtyPrice"
+              key="qtyPrice"
+              width={"12%"}
+            />
+            <Column
+              title="ราคารวม"
+              dataIndex="sumPrice"
+              key="sumPrice"
               width={"10%"}
             />
+
             <Column
-              title="ราคาประเมิน"
-              dataIndex="device_type"
-              key="device_type"
+              title="ลบข้อมูล"
               width={"10%"}
+              key="spairID"
+              render={(text, record, key) => (
+                <Space size="middle">
+                  <Button
+                    className="bt-delete"
+                    onClick={() => {
+                      handleDelete(record.spareID);
+                    }}
+                  >
+                    <DeleteOutlined />
+                  </Button>
+                </Space>
+              )}
             />
           </ColumnGroup>
         </Table>
       </div>
 
+      {/* สรุปรายการซ่อม */}
+      {listData.length !== 0 ? (
+        <div>
+          <Row gutter={[0, 16]}>
+            <Col lg={{ span: 11, offset: 1 }}>
+              <Title level={5}>
+                <Text>
+                  <OrderedListOutlined /> สรุปรายการซ่อม
+                </Text>
+              </Title>
+              <div className="border">
+                <Row style={{ marginTop: "10px" }}>
+                  <Col span={11} offset={1}>
+                    <Title level={5}>
+                      <Text>รายการ</Text>
+                    </Title>
+                  </Col>
+                  <Col span={5} offset={1}>
+                    <Title level={5}>
+                      <Text>จำนวน</Text>
+                    </Title>
+                  </Col>
+                  <Col span={5} offset={1}>
+                    <Title level={5}>
+                      <Text>ราคา</Text>
+                    </Title>
+                  </Col>
+                  {/* <Divider /> */}
+
+                  {listData.map((val) => {
+                    return (
+                      <>
+                        <Col span={11} offset={1}>
+                          {val.spareName}
+                        </Col>
+                        <Col span={5} offset={1}>
+                          {val.qty}
+                        </Col>
+                        <Col span={5} offset={1}>
+                          {val.sumPrice}
+                        </Col>
+                      </>
+                    );
+                  })}
+                  <Divider />
+                  <Col span={11} offset={1}>
+                    <Title level={5}>
+                      <Text>ยอดสุทธิ</Text>
+                    </Title>
+                  </Col>
+                  <Col span={11} offset={1}>
+                    <Title level={5}>
+                      <Text style={{ color: "red" }}>{sum} บาท</Text>
+                    </Title>
+                  </Col>
+                </Row>
+              </div>
+            </Col>
+
+            {/* อัพเดตสถานะ Update Status */}
+            <Col xs={24} sm={24} md={24} lg={{ span: 11, offset: 1 }}>
+              <Title level={5}>
+                <Text>
+                <SaveOutlined /> อัพเดตสถานะ
+                </Text>
+              </Title>
+              <div className="border">
+                <Row style={{ marginTop: "5%" }}>
+                  <Col span={10} offset={1}>
+                    <Title level={5}>
+                      <Text>สถานะการซ่อม</Text>
+                    </Title>
+                    <div className="div-select">
+                      <Select
+                        allowClear
+                        style={{ width: "100%" }}
+                        defaultValue="อยู่ระหว่างการซ่อม"
+                        onChange={(e) => {
+                          setStatus(e);
+                          // console.log(e)
+                        }}
+                      >
+                        <Option value="อยู่ระหว่างการซ่อม">
+                          อยู่ระหว่างการซ่อม
+                        </Option>
+                        <Option value="สำเร็จ">สำเร็จ</Option>
+                      </Select>
+                    </div>
+                  </Col>
+
+                  <Col span={11} offset={1}>
+                    <Title level={5}>
+                      <Text>การชำระเงิน</Text>
+                    </Title>
+                    <div className="div-select">
+                      <Select
+                        allowClear
+                        style={{ width: "100%" }}
+                        defaultValue={{ value: 'ยังไม่ได้ชำระ' }}
+                        
+                        onChange={(e) => {
+                          setPayment(e);
+                        }}
+                      >
+                        <Option value="ยังไม่ได้ชำระ">ยังไม่ได้ชำระ</Option>
+                        <Option value="ชำระแล้ว">ชำระแล้ว</Option>
+                      </Select>
+                    </div>
+                  </Col>
+
+                  <Divider />
+
+                  <Col span={24}>
+                    <Button className="bt-them" onClick={handleSave}>
+                      <Text className="color-fff-hover">
+                        <SaveOutlined /> บันทึก
+                      </Text>
+                    </Button>
+                  </Col>
+                </Row>
+              </div>
+            </Col>
+          </Row>
+        </div>
+      ) : null}
+
+      {/* Model Pop Up */}
       <Modal
-        title="Title"
+        title="เพิ่มรายการซ่อม / อะไหล่"
         visible={visible}
         onOk={handleOk}
         confirmLoading={confirmLoading}
         onCancel={handleCancel}
         width={1000}
       >
-        <Input />
+        <Row>
+          <Col lg={{ span: 11, offset: 1 }}>
+            <Text>รายการ</Text>
+            <Input
+              required={true}
+              value={spareName}
+              onChange={(e) => {
+                setSpareName(e.target.value);
+              }}
+            />
+          </Col>
+          <Col lg={{ span: 3, offset: 1 }}>
+            <Text>จำนวน</Text>
+            <Input
+              required={true}
+              type="number"
+              value={qty}
+              onChange={(e) => {
+                setQTY(e.target.value);
+              }}
+            />
+          </Col>
+          <Col lg={{ span: 3, offset: 1 }}>
+            <Text>ราคาต่อหน่วย</Text>
+            <Input
+              required={true}
+              type="number"
+              value={qtyPrice}
+              onChange={(e) => {
+                setQTYPrice(e.target.value);
+              }}
+            />
+          </Col>
+          <Col lg={{ span: 3, offset: 1 }}>
+            <Text>ยอดรวม</Text>
+            <Input type="number" value={sumPrice} />
+          </Col>
+        </Row>
       </Modal>
     </>
   );

src/view/Dashboards/component/TitleShowDetail.jsx

 import React, { useEffect, useState } from "react";
 
-import { Col, Row, Typography } from "antd";
+import { Col, Divider, Row, Typography } from "antd";
 import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
 
 // import Service
@@ -26,7 +26,7 @@ export default function App(props) {
     getDetailByGarage();
   }, [detailID]);
 
-  console.log(datas);
+  // console.log(datas);
 
   return (
     <>
@@ -111,6 +111,15 @@ export default function App(props) {
           </Col>
         </Row>
       </div>
+      <Divider />
+      <div>
+        <Row>
+          <Col span={24}>
+            <Title level={4}>รายละเอียดการซ่อมเบื้องต้น</Title>
+            <Text>{datas.repair_details}</Text>
+          </Col>
+        </Row>
+      </div>
     </>
   );
 }

src/view/Dashboards/component/agriculture.jsx

@@ -70,9 +70,16 @@ export default function App(props) {
 
     if (member.includes(values.member_tel) === true) {
       InsertDetails(data).then((response) => {
-        console.log("response", response);
+        Modal.info({
+          title: "สำเร็จ",
+          content: `เพิ่มการซ่อมสำเร็จ`,
+          onOk: () => {
+            setTimeout(() => {
+              window.location.reload(false);
+            }, 1);
+          },
+        });
       });
-      window.location.reload(false)
     } else {
       Modal.info({
         title: "ลูกค้ายังไม่ได้สมัครสมาชิก",

src/view/Dashboards/component/car.jsx

@@ -86,9 +86,16 @@ export default function App(props) {
 
     if (member.includes(values.member_tel) === true) {
       InsertDetails(data).then((response) => {
-        console.log("response", response);
+        Modal.info({
+          title: "สำเร็จ",
+          content: `เพิ่มการซ่อมสำเร็จ`,
+          onOk: () => {
+            setTimeout(() => {
+              window.location.reload(false);
+            }, 1);
+          },
+        });
       });
-      window.location.reload(false)
     } else {
       Modal.info({
         title: "ลูกค้ายังไม่ได้สมัครสมาชิก",

src/view/Dashboards/component/motorcycle.jsx

@@ -82,9 +82,16 @@ export default function App(props) {
 
     if (member.includes(values.member_tel) === true) {
       InsertDetails(data).then((response) => {
-        console.log("response", response);
+        Modal.info({
+          title: "สำเร็จ",
+          content: `เพิ่มการซ่อมสำเร็จ`,
+          onOk: () => {
+            setTimeout(() => {
+              window.location.reload(false);
+            }, 1);
+          },
+        });
       });
-      window.location.reload(false)
     } else {
       Modal.info({
         title: "ลูกค้ายังไม่ได้สมัครสมาชิก",

src/view/Dashboards/ecommerce/index.jsx

@@ -7,16 +7,15 @@ import { FetctDetailByGarage } from "../../../services";
 
 // import { useLocation } from "react-router-dom";
 
-import { Row, Col, Divider, Result, Button } from "antd";
+import { Row, Col, Divider, Result, Button, Statistic } from "antd";
 
 //import Widget
 import CanvasJSChart from "../../widget/widgetPie";
-// import ColumnJSChart from "../../widget/widgetColumn";
+import ColumnJSChart from "../../widget/widgetColumn";
 
 // const { Header } = Layout;
 
 export default function Ecommerce() {
-
   // let location = useLocation();
 
   const [datas, setDatas] = useState([]);
@@ -44,15 +43,52 @@ export default function Ecommerce() {
     <>
       {datas !== null ? (
         <>
-          <div className="display-flex-main">
-            <div className="div-content-chart">
-              <Row className="content-chart">
-                <Col xs={24} lg={24} className="chart">
-                  <CanvasJSChart />
+          {/* <div className="display-flex-main"> */}
+          {/* <div className="div-content-chart"> */}
+          <Row gutter={[0, 16]} style={{ padding: "4%" }}>
+            <Col xs={24} lg={{ span: 10, offset: 1 }}>
+              <CanvasJSChart />
+            </Col>
+            <Col xs={24} lg={{ span: 10, offset: 2 }}>
+              <ColumnJSChart />
+            </Col>
+          </Row>
+
+          <Divider />
+
+          <Row>
+            <Col span={12}>
+              <Row gutter={16}>
+                <Col xs={24} lg={{ span: 11 }}>
+                  <Statistic title="ลูกค้าทั้งหมดของระบบ" value={120} />
+                </Col>
+                <Col xs={24} lg={{ span: 11, offset: 1 }}>
+                  <Statistic
+                    title="ลูกค้าของฉัน"
+                    value={12}
+                    // precision={2}
+                  />
                 </Col>
               </Row>
-            </div>
-          </div>
+            </Col>
+
+            <Col span={12}>
+              <Row gutter={16}>
+                <Col xs={24} lg={{ span: 11 }}>
+                  <Statistic title="การรายงาน" value={120} />
+                </Col>
+                <Col xs={24} lg={{ span: 11, offset: 1 }}>
+                  <Statistic
+                    title="รายได้ทั้งหมดของร้าน (บาท)"
+                    value={19356}
+                    precision={2}
+                  />
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+          {/* </div> */}
+          {/* </div> */}
         </>
       ) : (
         <>
@@ -63,7 +99,7 @@ export default function Ecommerce() {
                   <Result
                     title="ร้านของคุณยังไม่มีการซ่อม"
                     extra={
-                      <Button className="bt-them"  key="console">
+                      <Button className="bt-them" key="console">
                         <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
                       </Button>
                     }
@@ -75,7 +111,6 @@ export default function Ecommerce() {
         </>
       )}
 
-      <Divider />
       {/* <CanvasJSChart className="chart" data={location.state} /> */}
     </>
   );

src/view/Dashboards/member/ShowDetailMember.jsx

+import React, { useEffect, useState } from "react";
+
+import { Col, Row, Typography, Table, Divider } from "antd";
+import { MobileOutlined } from "@ant-design/icons";
+
+import { useLocation } from "react-router-dom";
+
+// import Service
+import { FetctDetailByGarageID, FetchSpareByDetailID } from "../../../services";
+
+// import { useLocation } from "react-router-dom";
+
+const { Text, Title } = Typography;
+const { Column, ColumnGroup } = Table;
+
+export default function App() {
+  let location = useLocation();
+  //   const detailID = props;
+
+  const detailID = location.state;
+
+  //set useState
+  const [datas, setDatas] = useState([]);
+  const [dataSpare, setDataSpare] = useState([]);
+
+  useEffect(() => {
+    const getDetailByGarage = async () => {
+      await FetctDetailByGarageID(detailID).then(async (response) => {
+        await setDatas(response.data[0]);
+        // console.log('data', response.data[0])
+      });
+      await FetchSpareByDetailID(detailID).then((response) => {
+        if (response.data) {
+          setDataSpare(response.data);
+        }
+      });
+    };
+    getDetailByGarage();
+  }, [detailID]);
+
+  let listData = [];
+  if (dataSpare.length !== 0) {
+    for (let i = 0; i < dataSpare.length; i++) {
+      let toarr = JSON.parse(dataSpare[i].spare);
+      // console.log("toarr", toarr);
+      let newData = {
+        spareID: dataSpare[i].spareID,
+        spareName: toarr.spareName,
+        qty: toarr.qty,
+        qtyPrice: toarr.qtyPrice,
+        sumPrice: toarr.sumPrice,
+      };
+
+      listData.push(newData);
+    }
+  }
+
+  // console.log('dataspare',dataSpare);
+
+  // console.log('spare',listData);
+
+  return (
+    <>
+      <div className="div-title-detail">
+        <Row gutter={[0, 32]} className="title-show-detail">
+          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
+            <Text className="color-bfbf">ชื่ออุปกรณ์</Text>
+            <Title level={4} className="color-fff">
+              {/* <Text className="color-fff">{datas.brand} {datas.model}</Text> */}
+              {datas.device_type === "รถจักรยานยนต์" ||
+              datas.device_type === "รถยนต์" ? (
+                <>
+                  <Text className="color-fff">
+                    {datas.brand} {datas.model}
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <Text className="color-fff">{datas.equipment}</Text>
+                </>
+              )}
+            </Title>
+            <Text className="color-fff">{datas.device_type}</Text>
+          </Col>
+
+          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
+            <Text className="color-bfbf">ทะเบียน / ชนิด</Text>
+
+            {datas.device_type === "รถจักรยานยนต์" ||
+            datas.device_type === "รถยนต์" ? (
+              <>
+                <Title level={4} className="color-fff">
+                  <Text className="color-fff">{datas.car_number}</Text>
+                </Title>
+                <Text className="color-fff">{datas.car_province}</Text>
+              </>
+            ) : (
+              <>
+                <Title level={4} className="color-fff">
+                  <Text className="color-fff">{datas.equipment}</Text>
+                </Title>
+              </>
+            )}
+          </Col>
+
+          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
+            <Text className="color-bfbf">ลูกค้า</Text>
+            <Title level={4} className="color-fff">
+              <Text className="color-fff">คุณ {datas.member_name}</Text>
+            </Title>
+            <Text className="color-fff">
+              <MobileOutlined />
+              {datas.member_tel}
+            </Text>
+          </Col>
+
+          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
+            <Text className="color-bfbf">ร้านที่รับซ่อม</Text>
+            <Title level={4} className="color-fff">
+              <Text className="color-fff">{datas.garage_name}</Text>
+            </Title>
+          </Col>
+
+          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
+            <Text className="color-bfbf">วันที่รับซ่อม</Text>
+            <Title level={4} className="color-fff">
+              <Text className="color-fff">{datas.repair_date}</Text>
+            </Title>
+          </Col>
+
+          <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
+            <Text className="color-bfbf">สถานะการซ่อม</Text>
+            <Title level={4} className="color-fff">
+              <Text className="color-fff">{datas.status}</Text>
+            </Title>
+          </Col>
+        </Row>
+      </div>
+
+      <div>
+        <Divider />
+        <Row>
+          <Col span={24}>
+            <Title level={4}>รายละเอียดการซ่อมเบื้องต้น</Title>
+            <Text>{datas.repair_details}</Text>
+          </Col>
+        </Row>
+      </div>
+
+      <div className="div-p-5">
+        <Table
+          dataSource={listData}
+          scroll={{ x: 400 }}
+          bordered
+          className="border"
+        >
+          <ColumnGroup title="รายละเอียดการซ่อม">
+            <Column
+              title="ลำดับ"
+              width={"10%"}
+              render={(value, item, index) => index + 1}
+            />
+            <Column
+              title="รายการซ่อม / อะไหล่"
+              dataIndex="spareName"
+              key="spareName"
+              width={"48%"}
+            />
+
+            <Column title="จำนวน" dataIndex="qty" key="qty" width={"10%"} />
+
+            <Column
+              title="ราคาต่อหน่วย"
+              dataIndex="qtyPrice"
+              key="qtyPrice"
+              width={"12%"}
+            />
+            <Column
+              title="ราคารวม"
+              dataIndex="sumPrice"
+              key="sumPrice"
+              width={"10%"}
+            />
+          </ColumnGroup>
+        </Table>
+      </div>
+    </>
+  );
+}

src/view/Dashboards/member/addMember.jsx

+import React from "react";
+import { Col, Form, Row, Typography, Input, Divider, Button, Modal } from "antd";
+
+import { UserAddOutlined } from "@ant-design/icons";
+
+// Import Services
+import { InsertMember } from "../../../services";
+
+const { Title } = Typography;
+
+export default function AddMember() {
+  // console.log(JSON.parse(localStorage.getItem("user")).userData.garageName);
+
+  let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
+  let userID = JSON.parse(localStorage.getItem("user")).userData.userId;
+
+  const onFinish = (values) => {
+    // console.log("values", values);
+    let addresss = {
+      address_details: values.address_details,
+      sub_district: values.sub_district,
+      district: values.district,
+      province: values.province,
+      poscode: values.poscode,
+    };
+    let newAddress = JSON.stringify(addresss);
+    let data = {
+      party: "member",
+      garageID: userID,
+      member_tel: values.member_tel,
+      member_name: values.member_name,
+      member_ads: newAddress,
+      shop_register: garageName,
+    };
+    // console.log("data", data);
+
+    InsertMember(data).then((response) => {
+      if (response) {
+        if (response.code === 200) {
+          Modal.info({
+            title: "เรียบร้อยแล้ว",
+            content: `สมัครสมาชิกให้ลูกค้าเรียบร้อยแล้ว`,
+            onOk: () => {window.location.reload(false)}
+          });
+        } else {
+          // console.log("response", response.message);
+          Modal.info({
+            title: "มีลูกค้าสมาชิกนี้แล้ว",
+            content: `ลูกค้ารหัส ${values.member_tel} นี้ สมัครสมาชิกแล้ว กรุณาตรวจสอบอีกที`,
+          });
+        }
+      }
+    });
+
+    // console.log("values", JSON.parse(data.memeber_ads));
+  };
+  return (
+    <>
+      <Row gutter={[0, 32]}>
+        <Col
+          xs={{ span: 24 }}
+          lg={{ span: 8 }}
+          className="w-100 bg-theme display-flex-center"
+        >
+          <Col>
+            <UserAddOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
+
+            <Title level={2} style={{ color: "#a4b3b6" }}>
+              ลงทะเบียนลูกค้า
+            </Title>
+          </Col>
+        </Col>
+
+        <Col
+          xs={{ span: 24 }}
+          lg={{ span: 16 }}
+          className="display-flex-center"
+        >
+          <Row>
+            <Form onFinish={onFinish}>
+              <Col span={16} offset={2}>
+                <Divider orientation="left">
+                  <b>ข้อมูลลูกค้า</b>
+                </Divider>
+                <Form.Item
+                  label="หมายเลขโทรศัพท์"
+                  name="member_tel"
+                  tooltip="หมายเลขโทรศัพท์ของลูกค้าที่ใช้สมัครนี้
+                  จะถูกนำไปใช้เป็นรหัสหลักของลูกค้าในการค้นหาการซ่อมในระบบต่อไป"
+                  rules={[
+                    {
+                      required: true,
+                      message: "กรุณากรอกหมายเลขโทรศัพท์ของลูกค้า!",
+                    },
+                  ]}
+                >
+                  <Input />
+                </Form.Item>
+                {/* <Text style={{ color: "red" }}>
+                    *หมายเลขโทรศัพท์ของลูกค้าที่ใช้สมัครนี้
+                    จะถูกนำไปใช้เป็นรหัสหลักของลูกค้าในการค้นหาการซ่อมในระบบต่อไป
+                  </Text> */}
+              </Col>
+
+              <Col span={16} offset={2}>
+                <Form.Item
+                  label="ชื่อ-นามสกุล"
+                  name="member_name"
+                  rules={[
+                    {
+                      required: true,
+                      message: "กรุณากรอก ชื่อ-นามสกุล ของลูกค้า!",
+                    },
+                  ]}
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+
+              <Col span={16} offset={2}>
+                <Divider orientation="left">
+                  <b>ข้อมูลที่อยู่ลูกค้า</b>
+                </Divider>
+                <Form.Item
+                  label="รายละเอียดที่อยู่"
+                  name="address_details"
+                  rules={[
+                    {
+                      required: true,
+                      message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
+                    },
+                  ]}
+                >
+                  <Input.TextArea showCount maxLength={100} />
+                </Form.Item>
+              </Col>
+
+              <Col span={16} offset={2}>
+                <Row>
+                  <Col xs={24} lg={{ span: 10, offset: 1 }}>
+                    <Form.Item
+                      label="ตำบล"
+                      name="sub_district"
+                      rules={[
+                        {
+                          required: true,
+                          message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                  </Col>
+                  <Col xs={24} lg={{ span: 11, offset: 1 }}>
+                    <Form.Item
+                      label="อำเภอ"
+                      name="district"
+                      rules={[
+                        {
+                          required: true,
+                          message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                  </Col>
+                </Row>
+              </Col>
+
+              <Col span={16} offset={2}>
+                <Row>
+                  <Col xs={24} lg={{ span: 10, offset: 1 }}>
+                    <Form.Item
+                      label="จังหวัด"
+                      name="province"
+                      rules={[
+                        {
+                          required: true,
+                          message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                  </Col>
+                  <Col xs={24} lg={{ span: 11, offset: 1 }}>
+                    <Form.Item
+                      label="รหัสไปรษณีย์"
+                      name="poscode"
+                      rules={[
+                        {
+                          required: true,
+                          message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                  </Col>
+                </Row>
+              </Col>
+              <Form.Item>
+                <Button className="bt-them" htmlType="submit">
+                  ยืนยัน
+                </Button>
+              </Form.Item>
+            </Form>
+          </Row>
+        </Col>
+      </Row>
+    </>
+  );
+}

src/view/Dashboards/member/member.jsx

+import React, { useState, useEffect } from "react";
+
+import { Table, Input, Button, Space, Row, Col, Typography } from "antd";
+import Highlighter from "react-highlight-words";
+import { SearchOutlined } from "@ant-design/icons";
+
+// import Service
+import { FetctMemberByGarage } from "../../../services";
+
+const { Title } = Typography
+
+export default function Member() {
+  const [searchText, setSearchText] = useState("");
+  const [searchedColumn, setSearchedColumn] = useState("");
+
+  const [datas, setDatas] = useState([]);
+
+  let userId = JSON.parse(localStorage.getItem("user")).userData.userId;
+
+  useEffect(() => {
+    let data = {
+      userId: userId,
+    };
+    const getFunction = async () => {
+      await FetctMemberByGarage(data).then(async (response) => {
+        if (response.code === 500) {
+          console.log("data", response);
+        } else {
+          await setDatas(response.data);
+        }
+        // console.log('data', response)
+      });
+    };
+    getFunction();
+  }, [userId]);
+
+  let listData = [];
+
+  if (datas.length !== 0) {
+    for (let i = 0; i < datas.length; i++) {
+      let ads = JSON.parse(datas[i].member_ads);
+
+      let newData = {
+        member_name: datas[i].member_name,
+        member_tel: datas[i].member_tel,
+        register: datas[i].registration_date,
+        address_details: ads.address_details,
+        sub_district: ads.sub_district,
+        district: ads.district,
+        province: ads.province,
+        poscode: ads.poscode,
+      };
+      listData.push(newData);
+    }
+  }
+
+  const getColumnSearchProps = (dataIndex) => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      clearFilters,
+    }) => (
+      <div style={{ padding: 8 }}>
+        <Input
+          ref={(node) => {
+            // searchInput = node;
+          }}
+          placeholder={`ค้นหา ${dataIndex}`}
+          value={selectedKeys[0]}
+          onChange={(e) =>
+            setSelectedKeys(e.target.value ? [e.target.value] : [])
+          }
+          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
+          style={{ marginBottom: 8, display: "block" }}
+        />
+        <Space>
+          <Button
+            type="primary"
+            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
+            icon={<SearchOutlined />}
+            size="small"
+            style={{ width: 90 }}
+          >
+            ค้นหา
+          </Button>
+          <Button
+            onClick={() => handleReset(clearFilters)}
+            size="small"
+            style={{ width: 90 }}
+          >
+            ล้าง
+          </Button>
+        </Space>
+      </div>
+    ),
+    filterIcon: (filtered) => (
+      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
+    ),
+    onFilter: (value, record) =>
+      record[dataIndex]
+        ? record[dataIndex]
+            .toString()
+            .toLowerCase()
+            .includes(value.toLowerCase())
+        : "",
+    onFilterDropdownVisibleChange: (visible) => {
+      if (visible) {
+        // setTimeout(() => searchInput.select(), 100);
+      }
+    },
+    render: (text) =>
+      searchedColumn === dataIndex ? (
+        <Highlighter
+          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
+          searchWords={[searchText]}
+          autoEscape
+          textToHighlight={text ? text.toString() : ""}
+        />
+      ) : (
+        text
+      ),
+  });
+
+  const handleSearch = (selectedKeys, confirm, dataIndex) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex);
+    // this.setState({
+    //   searchText: selectedKeys[0],
+    //   searchedColumn: dataIndex,
+    // });
+  };
+
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    // this.setState({ searchText: "" });
+    setSearchText("");
+  };
+
+  const columns = [
+    {
+      title: "หมายเลขสมาชิก",
+      dataIndex: "member_tel",
+      key: "member_tel",
+      width: "20%",
+      ...getColumnSearchProps("member_tel"),
+    },
+    {
+      title: "ชื่อ",
+      dataIndex: "member_name",
+      key: "member_name",
+      width: "20%",
+      ...getColumnSearchProps("member_name"),
+    },
+    {
+      title: "ที่อยู่",
+      render: (record) => {
+        return (
+          <>
+            {record.address_details}, {record.sub_district}, {record.district},{" "}
+            {record.province}, {record.poscode}
+          </>
+        );
+      },
+    },
+    {
+      title: "วันที่ลงทะเบียน",
+      dataIndex: "register",
+      key: "register",
+      width: "20%",
+      ...getColumnSearchProps("register"),
+    },
+  ];
+
+  return (
+    <>
+    <Row style={{padding: "3% 0 0 0"}}>
+      <Col span={24}>
+        <Title level={3}>ลูกค้าทั้งหมดของร้าน</Title>
+      </Col>
+    </Row>
+      <div className="div-p-5">
+        <Table
+          scroll={{ x: 500 }}
+          bordered
+          columns={columns}
+          dataSource={listData}
+        />
+      </div>
+    </>
+  );
+}

src/view/Dashboards/member/searchMember.jsx

+import React, { useState } from "react";
+import { Col, Row, Typography, Input } from "antd";
+
+// import { UserAddOutlined } from "@ant-design/icons";
+
+// Import Component
+import ContentSearch from '../component/ContentSearch'
+
+const { Title, Text } = Typography;
+const { Search } = Input;
+
+export default function SearchMember() {
+  const [tel, setTel] = useState();
+  const onSearch = (value) => {
+    // console.log('value', typeof(value));
+    setTel(value);
+  };
+
+//   console.log(tel);
+
+  return (
+    <>
+      <Row gutter={[0, 32]}>
+        <Col xs={{ span: 24 }} lg={{ span: 24 }} className="w-auto bg-freecar ">
+          <Row className="div-p-5" gutter={[0, 32]}>
+            <Col span={24}>
+              <Title level={2}>
+                <Text style={{ color: "#aaabb8" }}>ค้นหาการซ่อมของลูกค้า</Text>
+              </Title>
+            </Col>
+            <Col span={24}>
+              <Text style={{ color: "#a4b3b6" }}>
+                การค้นหาประวัติการซ่อมของลูกค้า
+                เป็นการค้นหาทุกการซ่อมของลูกค้าครั้งก่อนหน้า
+                โดยลูกค้าจะต้องเป็นลูกค้าสมาชิกเท่านั้น
+              </Text>
+            </Col>
+
+            <Col span={24}>
+              <Row>
+                <Col xs={1} lg={{ span: 6 }}></Col>
+                <Col xs={22} lg={{ span: 12 }}>
+                  <Search
+                    // style={{border: '1px solid yellow'}}
+                    placeholder="กรอกหมายเลขโทรศัพท์ของลูกค้า"
+                    allowClear
+                    enterButton="ค้นหา"
+                    size="large"
+                    onSearch={onSearch}
+                  />
+                </Col>
+                <Col xs={1} lg={{ span: 6 }}></Col>
+              </Row>
+            </Col>
+          </Row>
+        </Col>
+
+        <Col span={24}>
+          <ContentSearch tel={tel} />
+        </Col>
+      </Row>
+    </>
+  );
+}

src/view/Dashboards/repairDashboard/repairAdd/index.jsx

@@ -37,8 +37,8 @@ export default function App() {
   return (
     <>
       <Row>
-        <Col span={24} className="box-text-title">
-          <Title level={4}>เพิ่มการซ่อม</Title>
+        <Col span={24} style={{padding: '5%'}}>
+          <Title level={3}>เพิ่มการซ่อม</Title>
         </Col>
 
         <Col span={24}>
@@ -73,7 +73,7 @@ export default function App() {
                 ></Col>
               </Row>
             </Col>
-            <div style={{display: 'flex', marginTop: '10px'}}>
+            <div style={{ display: "flex", marginTop: "10px" }}>
               <Title style={{ color: "red" }} level={5}>
                 หมายเหตุ : &nbsp;
               </Title>

src/view/Dashboards/repairDashboard/repairList/ShowDetail.jsx

@@ -19,13 +19,14 @@ export default function ShowDetail() {
   //use State
 
   const detailID = location.state;
-  //   console.log(detailID);
+  const memberTel = location.state;
+    // console.log(detailID, memberTel.memberTel);
 
   return (
     <>
       <TitleShowDetail detailID={detailID.detailsID} />
       {/* Show Repair id = {detailID.detailsID} */}
-      <SpareAdd detailID={detailID.detailsID} />
+      <SpareAdd detailID={detailID.detailsID} memberTel={memberTel.memberTel} />
     </>
   );
 }

src/view/Dashboards/repairDashboard/repairSatatus/index.jsx

+import React from "react";
+
+import { Row, Col, Typography, Select } from "antd";
+
+const { Title } = Typography;
+const { Option } = Select;
+
+export default function App() {
+  return (
+    <>
+      <Row gutter={[0, 32]} className="div-p-5">
+        <Col span={24}>
+          <Row>
+            <Col xs={{ span: 2 }} lg={{ span: 6 }}></Col>
+            <Col xs={{ span: 20 }} lg={{ span: 12 }}>
+              <Title level={4}>ค้นหาตามสถานะ </Title>
+              <div className="div-select">
+                <Select
+                  allowClear
+                  style={{ width: "100%" }}
+                  placeholder="กรุณาเลือกสถานะ"
+                  onChange={(e) => {
+                    // setTypeSelect(e);
+                  }}
+                >
+                  <Option value="สำเร็จ">สำเร็จ</Option>
+                  <Option value="อยู่ระหว่างการซ่อม">อยู่ระหว่างการซ่อม</Option>
+                </Select>
+              </div>
+            </Col>
+            <Col xs={{ span: 2 }} lg={{ span: 6 }}></Col>
+          </Row>
+        </Col>
+
+        <Col span={24}>test</Col>
+      </Row>
+    </>
+  );
+}

src/view/Login/Login.jsx

 // import liff from "@line/liff";
-import React, { useEffect, useState, useRef } from "react";
+import React from "react";
 
-import { Form, Input, Button, Row, Col, Divider } from "antd";
+import { Form, Input, Button, Row, Col, Modal, Typography } from "antd";
 
-import BIRDS from "vanta/dist/vanta.birds.min";
+import { LoginOutlined } from "@ant-design/icons";
 
 import { sendLogin } from "../../services";
 
-function App() {
-  const [vantaEffect, setVantaEffect] = useState(0);
-  const myRef = useRef(null);
-  useEffect(() => {
-    if (!vantaEffect) {
-      setVantaEffect(
-        BIRDS({
-          el: myRef.current,
-          mouseControls: true,
-          touchControls: true,
-          gyroControls: false,
-          minHeight: 200.0,
-          minWidth: 200.0,
-          scale: 1.0,
-          scaleMobile: 1.0,
-          backgroundColor: 0xffffff,
-        })
-      );
-    }
-    return () => {
-      if (vantaEffect) vantaEffect.destroy();
-    };
-  }, [vantaEffect]);
-
-  // const user = JSON.parse(localStorage.getItem('user'))
-  // console.log(user)
+const { Title } = Typography;
 
+function App() {
   const onFinish = (values) => {
     const data = {
       garageID: values.garageID,
@@ -42,98 +18,86 @@ function App() {
     // console.log(data);
 
     sendLogin(data).then((response) => {
-      // console.log('response', response.userData)
-      setTimeout(() => {
-        window.location.reload(false);
-      }, 1000);
+      if (response.code === 200) {
+        setTimeout(() => {
+          window.location.reload(false);
+        }, 1000);
+      } else {
+        Modal.info({
+          title: "ไม่มีผู้ใช้นี้ในระบบ",
+          content: `กรุณาตรวจสอบ UserID / รหัสผ่าน ของท่าน`,
+        });
+      }
     });
   };
 
-
-
   return (
-    <div className="h-100" ref={myRef}>
-      <Row>
+    <>
+      <Row gutter={[0, 32]}>
         <Col
-          span={4}
-          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 }}
+          xs={{ span: 24 }}
+          lg={{ span: 8 }}
+          className="w-100 bg-theme display-flex-center"
         >
-          <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>
+          <Col>
+            <LoginOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
 
-            <Form.Item
-              label="รหัสผ่าน"
-              name="password"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณากรอกรหัสผ่านของคุณ!",
-                },
-              ]}
-            >
-              <Input.Password />
-            </Form.Item>
+            <Title level={2} style={{ color: "#a4b3b6" }}>
+              เข้าสู่ระบบร้านค้า
+            </Title>
+          </Col>
+        </Col>
 
-            <Form.Item
-              wrapperCol={{
-                offset: 8,
-                span: 16,
+        <Col
+          xs={{ span: 24 }}
+          lg={{ span: 16 }}
+          className="display-flex-center"
+        >
+          <Row>
+            <Form
+              name="basic"
+              initialValues={{
+                remember: true,
               }}
+              onFinish={onFinish}
+              autoComplete="off"
             >
-              <Button className="bt-them" htmlType="submit" >
-                ยืนยัน
-              </Button>
-            </Form.Item>
-          </Form>
+              <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>
+                <Button className="bt-them" htmlType="submit">
+                  ยืนยัน
+                </Button>
+              </Form.Item>
+            </Form>
+          </Row>
         </Col>
-        <Col
-          span={6}
-          xs={{ order: 1 }}
-          sm={{ order: 2 }}
-          md={{ order: 3 }}
-          lg={{ order: 4 }}
-        ></Col>
       </Row>
-    </div>
+    </>
   );
 }
 

src/view/Pages/CustomerService/RepairShop/googleMaps.jsx

@@ -85,6 +85,7 @@ function Map() {
               <b>{selectPark.garage_name}</b>
             </h4>
             <p>{JSON.parse(selectPark.garage_type)}</p>
+            <p>เปิด {selectPark.on_time} - {selectPark.off_time}</p>
           </div>
         </InfoWindow>
       )}

src/view/Pages/GetStarted/Title/index.jsx

@@ -23,10 +23,9 @@ function App() {
           scale: 1.0,
           scaleMobile: 1.0,
           backgroundColor: 0xffffff,
-          color1: 0x87,
-          color2: 0x0,
-          birdSize: 0.8,
-          quantity: 4.2,
+          color1: 0x55505f,
+          color2: 0x60931,
+          birdSize: 0.7,
         })
       );
     }
@@ -39,9 +38,9 @@ function App() {
     <Row ref={myRef} className="getstart-box">
       <div className="div-box-title">
         <Col span={24} className="getstart-box-title">
-          <Title>Repair Center</Title>
-          <Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
-          <Title level={5}>
+          <Title level={1}>Repair Center</Title>
+          <Title level={2}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
+          <Title level={3}>
             เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
           </Title>
           <Row className="box-button">

src/view/Pages/Register/index.jsx

@@ -99,13 +99,15 @@ export default function App() {
                         setCheckBox(e.target.checked);
                       }}
                     >
-                      ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้วและยอมรับข้อกำหนดและเงื่อนไขทุกประการ
+                      <Text>
+                        ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้ว
+                        และยอมรับข้อกำหนดและเงื่อนไขทุกการ
+                      </Text>
                     </Checkbox>
                   </Form.Item>
                 </Form>
               </div>
               <div className="div-button-submit">
-               
                 <Button className="bt-them" onClick={handleSubmit}>
                   ยืนยัน
                 </Button>

src/view/Pages/Report/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 
 import { Row, Col, Typography, Form, Input, Button, Select } from "antd";
 
+import { CommentOutlined } from "@ant-design/icons";
+
 const formItemLayout = {
   labelCol: {
     xs: {
@@ -45,18 +47,38 @@ const { Title } = Typography;
 /* eslint-enable no-template-curly-in-string */
 
 export default function App() {
+
+ 
   const onFinish = (values) => {
     console.log(values);
   };
 
   return (
     <>
-      <Row className="report-box">
-        <div className="report-content">
-          <Col span={24} className="box-text-title">
-            <Title level={4}>แจ้งปัญหาการใช้งาน</Title>
+      <Row gutter={[0, 32]}>
+        <Col
+          xs={{ span: 24 }}
+          lg={{ span: 8 }}
+          className="w-100 bg-theme display-flex-center"
+        >
+          <Col>
+            <CommentOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
+
+            <Title level={2} style={{ color: "#a4b3b6" }}>
+              แจ้งปัญหาการใช้งาน
+            </Title>
           </Col>
-          <Col  className="div-form">
+        </Col>
+
+        <Col
+          xs={{ span: 24 }}
+          lg={{ span: 16 }}
+          className="display-flex-center"
+        >
+          <Row >
+            <Col span={24}>
+              <Title level={4}>แจ้งปัญหาการใช้งาน</Title>
+            </Col>
             <Form {...formItemLayout} name="nest-messages" onFinish={onFinish}>
               {/* Garage type ประเภทของร้านซ่อม */}
               <Form.Item
@@ -112,21 +134,24 @@ export default function App() {
               </Form.Item>
 
               <Form.Item name="report_detail" label="ปัญหาที่จะรายงาน">
-                <Input.TextArea />
+                <Input.TextArea showCount maxLength={200} />
               </Form.Item>
 
-              <Form.Item name="report_tel" label="หมายเลขโทรศัพท์ที่ติดติดต่อได้">
+              <Form.Item
+                name="report_tel"
+                label="หมายเลขโทรศัพท์ที่ติดติดต่อได้"
+              >
                 <Input />
               </Form.Item>
 
               <Form.Item wrapperCol={{ ...formItemLayout.wrapperCol }}>
-                <Button type="primary" htmlType="submit">
+                <Button className="bt-them" htmlType="submit">
                   Submit
                 </Button>
               </Form.Item>
             </Form>
-          </Col>
-        </div>
+          </Row>
+        </Col>
       </Row>
     </>
   );

src/view/Registion/Registion.jsx

-import React, { useState, useEffect, useRef } from "react";
+import React, { useState } from "react";
 // import axios from "axios";
 import {
   Form,
@@ -9,6 +9,8 @@ import {
   Button,
   Divider,
   TimePicker,
+  Typography,
+  Modal,
 } from "antd";
 import moment from "moment";
 
@@ -19,8 +21,6 @@ import {
   Marker,
 } from "react-google-maps";
 
-import BIRDS from "vanta/dist/vanta.birds.min";
-
 import { sendToken } from "../../services";
 
 let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }];
@@ -28,12 +28,12 @@ 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);
+  // console.log("newLat", newLatLng[0].lat, "newLng", newLatLng[0].lng);
 };
 
 const MapWithAMarker = withScriptjs(
   withGoogleMap(() => (
-    <GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
+    <GoogleMap defaultZoom={15} defaultCenter={newLatLng[0]}>
       <Marker
         draggable={true}
         position={newLatLng[0]}
@@ -44,64 +44,11 @@ const MapWithAMarker = withScriptjs(
 );
 
 const { Option } = Select;
+const { Title } = Typography;
 
-const formItemLayout = {
-  labelCol: {
-    xs: {
-      span: 24,
-    },
-    sm: {
-      span: 8,
-    },
-  },
-  wrapperCol: {
-    xs: {
-      span: 24,
-    },
-    sm: {
-      span: 16,
-    },
-  },
-};
-const tailFormItemLayout = {
-  wrapperCol: {
-    xs: {
-      span: 24,
-      offset: 0,
-    },
-    sm: {
-      span: 16,
-      offset: 8,
-    },
-  },
-};
 
 //Main Function
 export default function RegistrationForm() {
-  const [vantaEffect, setVantaEffect] = useState(0);
-  const myRef = useRef(null);
-  useEffect(() => {
-    if (!vantaEffect) {
-      setVantaEffect(
-        BIRDS({
-          el: myRef.current,
-          mouseControls: true,
-          touchControls: true,
-          gyroControls: false,
-          minHeight: 200.0,
-          minWidth: 200.0,
-          scale: 1.0,
-          scaleMobile: 1.0,
-          backgroundColor: 0xffffff,
-          quantity: 3.00,
-        })
-      );
-    }
-    return () => {
-      if (vantaEffect) vantaEffect.destroy();
-    };
-  }, [vantaEffect]);
-
   const [ontime, setOnTime] = useState();
   const [offtime, setOffTime] = useState();
 
@@ -130,7 +77,25 @@ export default function RegistrationForm() {
       tel: values.phone,
     };
 
-    sendToken(data).then((response) => console.log("response", response));
+    sendToken(data).then((response) => {
+      if (response) {
+        if (response.code === 200) {
+          Modal.info({
+            title: "เรียบร้อยแล้ว",
+            content: `สมัครสมาชิกให้ลูกค้าเรียบร้อยแล้ว`,
+            onOk: () => {
+              window.location.reload(false);
+            },
+          });
+        } else {
+          // console.log("response", response.message);
+          Modal.info({
+            title: "มีสมาชิกนี้แล้ว",
+            content: `user ID นี้ สมัครสมาชิกแล้ว กรุณาตรวจสอบอีกที`,
+          });
+        }
+      }
+    });
   };
 
   const handleOnTime = (time, timeString) => {
@@ -142,373 +107,837 @@ export default function RegistrationForm() {
   };
 
   return (
-    <div className="h-auto" ref={myRef}>
-      <Row >
-        <Col
-          span={4}
-          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>
+    <>
+      <Row>
+        <Col span={24}>
+          <div style={{ padding: "2%" }}>
+            <Title>ลงทะเบียนร้านซ่อม</Title>
+          </div>
           <Divider orientation="left">
-            <b>รายละเอียดของร้าน</b>
+            <Title level={4}>รายละเอียดของร้าน</Title>
           </Divider>
+
           <Form
-            {...formItemLayout}
             form={form}
             name="register"
             onFinish={onFinish}
             scrollToFirstError
           >
-            {/* User ID */}
-            <Form.Item
-              name="userID"
-              label="User ID"
-              tooltip="User ID เพื่อใช้ในการเข้าระบบในครั้งต่อไป"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระบุ userID ของคุณ",
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* Password  รหัสผ่าน*/}
-            <Form.Item
-              name="password"
-              label="รหัสผ่าน"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาใส่รหัสผ่านของคุณ!",
-                },
-              ]}
-              hasFeedback
-            >
-              <Input.Password minLength={6} />
-            </Form.Item>
-            {/* confirm Password  ยืนยันรหัสผ่าน */}
-            <Form.Item
-              name="confirm"
-              label="ยืนยันรหัสผ่าน"
-              dependencies={["password"]}
-              hasFeedback
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณายืนยันรหัสผ่านของคุณ!",
-                },
-                ({ getFieldValue }) => ({
-                  validator(_, value) {
-                    if (!value || getFieldValue("password") === value) {
-                      return Promise.resolve();
-                    }
-
-                    return Promise.reject(
-                      new Error("รหัสผ่านทั้งสองที่คุณป้อนไม่ตรงกัน!")
-                    );
-                  },
-                }),
-              ]}
-            >
-              <Input.Password minLength={6} />
-            </Form.Item>
-
-            {/* User Name  ชื่อ-นามสกุล */}
-            <Form.Item
-              name="username"
-              label="ชื่อ-นามสกุล"
-              tooltip="ชื่อเจ้าของร้าน หรือผู้ที่ได้รับผิดชอบ"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* Garage Name ชื่อร้านซ่อม */}
-            <Form.Item
-              name="garagename"
-              label="ชื่อร้านซ่อม"
-              tooltip="ชื่อร้านซ่อม หรืออู่ซ่อมรถ"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระบุ ชื่อร้านซ่อม หรืออู่ซ่อมรถ ของคุณ!",
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* Gmail */}
-            <Form.Item
-              name="email"
-              label="E-mail"
-              rules={[
-                {
-                  type: "email",
-                  message: "ข้อมูลที่ป้อนไม่ถูกต้อง ตามรูปแบบ E-mail!",
-                },
-                {
-                  required: true,
-                  message: "กรุณาใส่อีเมลของคุณ!",
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* Garage type ประเภทของร้านซ่อม */}
-            <Form.Item
-              name="garagetype"
-              label="ประเภทของร้านซ่อม"
-              tooltip="เลือกประเภทของร้านซ่อม (สามารถเลือกได้มากกว่าหนึ่งประเภท)"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
-                },
-              ]}
-            >
-              <Select
-                mode="multiple"
-                allowClear
-                style={{ width: "100%" }}
-                placeholder="Please select"
-              >
-                <Option value="ศูนย์บริการรถยนต์">ศูนย์บริการรถยนต์</Option>
-                <Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
-                <Option value="ศูนย์บริการรถจักรยานยนต์">
-                  ศูนย์บริการรถจักรยานยนต์
-                </Option>
-                <Option value="อู่ซ่อมรถจักรยานยนต์">
-                  อู่ซ่อมรถจักรยานยนต์
-                </Option>
-                <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
-                  ร้านบริการซ่อมอุปกรณ์การเกษตร
-                </Option>
-              </Select>
-            </Form.Item>
-
-            {/* หมายเลขโทรศัพท์ */}
-            <Form.Item
-              style={{ marginTop: "20px" }}
-              name="phone"
-              label="หมายเลขโทรศัพท์"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาใส่หมายเลขโทรศัพท์ของคุณ!",
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* เวลาที่ร้านเปิด */}
-            <Form.Item
-              style={{ marginTop: "20px" }}
-              label="เวลาที่ร้านเปิด"
-              rules={[
-                {
-                  // required: true,
-                  // message: "กรุณาระบุเวลาเปิด-ปิดร้านของคุณ",
-                },
-              ]}
-            >
-              <Row>
-                <TimePicker
-                  defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
-                  onChange={handleOnTime}
-                />
-                <div className="div-time">ถึงเวลา</div>
-
-                <TimePicker
-                  defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
-                  onChange={handleOffTime}
-                />
+            <div style={{ padding: "2% 10% 2% 10%" }}>
+              <Row gutter={[0, 16]}>
+                {/* User ID */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="userID"
+                    label="User ID"
+                    tooltip="User ID เพื่อใช้ในการเข้าระบบในครั้งต่อไป"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระบุ userID ของคุณ",
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* Password  รหัสผ่าน*/}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="password"
+                    label="รหัสผ่าน"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาใส่รหัสผ่านของคุณ!",
+                      },
+                    ]}
+                    hasFeedback
+                  >
+                    <Input.Password minLength={6} />
+                  </Form.Item>
+                </Col>
+
+                {/* confirm Password  ยืนยันรหัสผ่าน */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="confirm"
+                    label="ยืนยันรหัสผ่าน"
+                    dependencies={["password"]}
+                    hasFeedback
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณายืนยันรหัสผ่านของคุณ!",
+                      },
+                      ({ getFieldValue }) => ({
+                        validator(_, value) {
+                          if (!value || getFieldValue("password") === value) {
+                            return Promise.resolve();
+                          }
+
+                          return Promise.reject(
+                            new Error("รหัสผ่านทั้งสองที่คุณป้อนไม่ตรงกัน!")
+                          );
+                        },
+                      }),
+                    ]}
+                  >
+                    <Input.Password minLength={6} />
+                  </Form.Item>
+                </Col>
+
+                {/* User Name  ชื่อ-นามสกุล */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="username"
+                    label="ชื่อ-นามสกุล"
+                    tooltip="ชื่อเจ้าของร้าน หรือผู้ที่ได้รับผิดชอบ"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* Garage Name ชื่อร้านซ่อม */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="garagename"
+                    label="ชื่อร้านซ่อม"
+                    tooltip="ชื่อร้านซ่อม หรืออู่ซ่อมรถ"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระบุ ชื่อร้านซ่อม หรืออู่ซ่อมรถ ของคุณ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* Gmail */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="email"
+                    label="E-mail"
+                    rules={[
+                      {
+                        type: "email",
+                        message: "ข้อมูลที่ป้อนไม่ถูกต้อง ตามรูปแบบ E-mail!",
+                      },
+                      {
+                        required: true,
+                        message: "กรุณาใส่อีเมลของคุณ!",
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* Garage type ประเภทของร้านซ่อม */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="garagetype"
+                    label="ประเภทของร้านซ่อม"
+                    tooltip="เลือกประเภทของร้านซ่อม (สามารถเลือกได้มากกว่าหนึ่งประเภท)"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
+                      },
+                    ]}
+                  >
+                    <Select
+                      mode="multiple"
+                      allowClear
+                      style={{ width: "100%" }}
+                      placeholder="Please select"
+                    >
+                      <Option value="ศูนย์บริการรถยนต์">
+                        ศูนย์บริการรถยนต์
+                      </Option>
+                      <Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
+                      <Option value="ศูนย์บริการรถจักรยานยนต์">
+                        ศูนย์บริการรถจักรยานยนต์
+                      </Option>
+                      <Option value="อู่ซ่อมรถจักรยานยนต์">
+                        อู่ซ่อมรถจักรยานยนต์
+                      </Option>
+                      <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
+                        ร้านบริการซ่อมอุปกรณ์การเกษตร
+                      </Option>
+                    </Select>
+                  </Form.Item>
+                </Col>
+
+                {/* หมายเลขโทรศัพท์ */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="phone"
+                    label="หมายเลขโทรศัพท์"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาใส่หมายเลขโทรศัพท์ของคุณ!",
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* เวลาที่ร้านเปิด */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    style={{ marginTop: "20px" }}
+                    label="เวลาที่ร้านเปิด-ปิด"
+                    rules={[
+                      {
+                        // required: true,
+                        // message: "กรุณาระบุเวลาเปิด-ปิดร้านของคุณ",
+                      },
+                    ]}
+                  >
+                    <Row>
+                      <Col span={11}>
+                        <TimePicker
+                          defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
+                          onChange={handleOnTime}
+                        />
+                      </Col>
+                      <Col span={2}>-</Col>
+                      <Col span={11}>
+                        <TimePicker
+                          defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
+                          onChange={handleOffTime}
+                        />
+                      </Col>
+                    </Row>
+                  </Form.Item>
+                </Col>
               </Row>
-            </Form.Item>
+            </div>
 
             <Divider orientation="left">
-              <b>ที่อยู่ของร้าน</b>
+              <Title level={4}>รายละเอียดที่อยู่ของร้าน</Title>
             </Divider>
 
-            <Row>
-              {/* Addess Number บ้านเลขที่*/}
-              <Form.Item
-                name="addressnumber"
-                label="ตั้งอยู่เลขที่"
-                rules={[
-                  {
-                    required: true,
-                    message: "กรุณาระที่อยู่ให้ครบ!",
-                    whitespace: true,
-                  },
-                ]}
-              >
-                <Input />
-              </Form.Item>
-
-              {/* หมู่ที่ */}
-              <Form.Item
-                name="moo"
-                label="หมู่ที่"
-                rules={[
-                  {
-                    required: true,
-                    message: "กรุณาระที่อยู่ให้ครบ!",
-                    whitespace: true,
-                  },
-                ]}
-              >
-                <Input />
-              </Form.Item>
-            </Row>
-
-            <Row>
-              {/* ตรอก/ซอย */}
-              <Form.Item
-                name="alley"
-                label="ตรอก/ซอย"
-                rules={[
-                  {
-                    required: true,
-                    message: "กรุณาระที่อยู่ให้ครบ!",
-                    whitespace: true,
-                  },
-                ]}
-              >
-                <Input />
-              </Form.Item>
-
-              {/* ถนน */}
-              <Form.Item
-                name="road"
-                label="ถนน"
-                rules={[
-                  {
-                    required: true,
-                    message: "กรุณาระที่อยู่ให้ครบ!",
-                    whitespace: true,
-                  },
-                ]}
-              >
-                <Input />
-              </Form.Item>
-            </Row>
-
-            {/* ตำบล/แขวง */}
-            <Form.Item
-              name="subdistrict"
-              label="ตำบล/แขวง"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระที่อยู่ให้ครบ!",
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* อำเภอ/เขต */}
-            <Form.Item
-              name="district"
-              label="อำเภอ/เขต"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระที่อยู่ให้ครบ!",
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* จังหวัด */}
-            <Form.Item
-              name="province"
-              label="จังหวัด"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระที่อยู่ให้ครบ!",
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-
-            {/* รหัสไปรษณีย์ */}
-            <Form.Item
-              name="poscode"
-              label="รหัสไปรษณีย์"
-              rules={[
-                {
-                  required: true,
-                  message: "กรุณาระที่อยู่ให้ครบ!",
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
+            <div style={{ padding: "2% 10% 2% 10%" }}>
+              <Row gutter={[0, 16]}>
+                {/* Addess Number บ้านเลขที่*/}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="addressnumber"
+                    label="ตั้งอยู่เลขที่"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* หมู่ที่ */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="moo"
+                    label="หมู่ที่"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* ตรอก/ซอย */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="alley"
+                    label="ตรอก/ซอย"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* ถนน */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="road"
+                    label="ถนน"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* ตำบล/แขวง */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="subdistrict"
+                    label="ตำบล/แขวง"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* อำเภอ/เขต */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="district"
+                    label="อำเภอ/เขต"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* จังหวัด */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="province"
+                    label="จังหวัด"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+
+                {/* รหัสไปรษณีย์ */}
+                <Col
+                  xs={24}
+                  md={{ span: 11, offset: 1 }}
+                  lg={{ span: 11, offset: 1 }}
+                >
+                  <Form.Item
+                    name="poscode"
+                    label="รหัสไปรษณีย์"
+                    rules={[
+                      {
+                        required: true,
+                        message: "กรุณาระที่อยู่ให้ครบ!",
+                        whitespace: true,
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+              </Row>
+            </div>
 
             <Divider orientation="left">
-              <b>กรุณาปักหมุดที่อยู่ของร้าน</b>
+              <Title level={4}>ปรักหมุดที่อยู่ของร้าน</Title>
             </Divider>
 
-            {/* ปักหมุดแผนที่ */}
-            <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: "300px" }} />}
-                mapElement={<div style={{ height: "100%" }} />}
-              />
+            <div style={{ padding: "2% 10% 2% 10%" }}>
+              <Row gutter={[0, 16]}>
+                <Col xs={24} lg={{ span: 16, offset: 1 }}>
+                  <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: "450px" }} />}
+                    mapElement={<div style={{ height: "100%" }} />}
+                  />
+                </Col>
+              </Row>
+            </div>
+            <Col span={24}>
+              <Form.Item >
+                <Button
+                  className="bt-them"
+                  htmlType="submit"
+                  style={{ marginTop: "30px" }}
+                >
+                  ยืนยันการสมัคร
+                </Button>
+              </Form.Item>
             </Col>
-
-            <Form.Item {...tailFormItemLayout}>
-              <Button
-                className="bt-them"
-                htmlType="submit"
-                style={{ marginTop: "30px" }}
-              >
-                ยืนยันการสมัคร
-              </Button>
-            </Form.Item>
           </Form>
         </Col>
-        <Col
-          span={6}
-          xs={{ order: 1 }}
-          sm={{ order: 2 }}
-          md={{ order: 3 }}
-          lg={{ order: 4 }}
-        ></Col>
       </Row>
-    </div>
+    </>
+    // <div className="h-auto">
+    //   <Row>
+    //     <Col
+    //       span={4}
+    //       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="left">
+    //         <b>รายละเอียดของร้าน</b>
+    //       </Divider>
+    //       <Form
+    //         {...formItemLayout}
+    //         form={form}
+    //         name="register"
+    //         onFinish={onFinish}
+    //         scrollToFirstError
+    //       >
+    //         {/* User ID */}
+    //         <Form.Item
+    //           name="userID"
+    //           label="User ID"
+    //           tooltip="User ID เพื่อใช้ในการเข้าระบบในครั้งต่อไป"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระบุ userID ของคุณ",
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* Password  รหัสผ่าน*/}
+    //         <Form.Item
+    //           name="password"
+    //           label="รหัสผ่าน"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาใส่รหัสผ่านของคุณ!",
+    //             },
+    //           ]}
+    //           hasFeedback
+    //         >
+    //           <Input.Password minLength={6} />
+    //         </Form.Item>
+    //         {/* confirm Password  ยืนยันรหัสผ่าน */}
+    //         <Form.Item
+    //           name="confirm"
+    //           label="ยืนยันรหัสผ่าน"
+    //           dependencies={["password"]}
+    //           hasFeedback
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณายืนยันรหัสผ่านของคุณ!",
+    //             },
+    //             ({ getFieldValue }) => ({
+    //               validator(_, value) {
+    //                 if (!value || getFieldValue("password") === value) {
+    //                   return Promise.resolve();
+    //                 }
+
+    //                 return Promise.reject(
+    //                   new Error("รหัสผ่านทั้งสองที่คุณป้อนไม่ตรงกัน!")
+    //                 );
+    //               },
+    //             }),
+    //           ]}
+    //         >
+    //           <Input.Password minLength={6} />
+    //         </Form.Item>
+
+    //         {/* User Name  ชื่อ-นามสกุล */}
+    //         <Form.Item
+    //           name="username"
+    //           label="ชื่อ-นามสกุล"
+    //           tooltip="ชื่อเจ้าของร้าน หรือผู้ที่ได้รับผิดชอบ"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
+    //               whitespace: true,
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* Garage Name ชื่อร้านซ่อม */}
+    //         <Form.Item
+    //           name="garagename"
+    //           label="ชื่อร้านซ่อม"
+    //           tooltip="ชื่อร้านซ่อม หรืออู่ซ่อมรถ"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระบุ ชื่อร้านซ่อม หรืออู่ซ่อมรถ ของคุณ!",
+    //               whitespace: true,
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* Gmail */}
+    //         <Form.Item
+    //           name="email"
+    //           label="E-mail"
+    //           rules={[
+    //             {
+    //               type: "email",
+    //               message: "ข้อมูลที่ป้อนไม่ถูกต้อง ตามรูปแบบ E-mail!",
+    //             },
+    //             {
+    //               required: true,
+    //               message: "กรุณาใส่อีเมลของคุณ!",
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* Garage type ประเภทของร้านซ่อม */}
+    //         <Form.Item
+    //           name="garagetype"
+    //           label="ประเภทของร้านซ่อม"
+    //           tooltip="เลือกประเภทของร้านซ่อม (สามารถเลือกได้มากกว่าหนึ่งประเภท)"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
+    //             },
+    //           ]}
+    //         >
+    //           <Select
+    //             mode="multiple"
+    //             allowClear
+    //             style={{ width: "100%" }}
+    //             placeholder="Please select"
+    //           >
+    //             <Option value="ศูนย์บริการรถยนต์">ศูนย์บริการรถยนต์</Option>
+    //             <Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
+    //             <Option value="ศูนย์บริการรถจักรยานยนต์">
+    //               ศูนย์บริการรถจักรยานยนต์
+    //             </Option>
+    //             <Option value="อู่ซ่อมรถจักรยานยนต์">
+    //               อู่ซ่อมรถจักรยานยนต์
+    //             </Option>
+    //             <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
+    //               ร้านบริการซ่อมอุปกรณ์การเกษตร
+    //             </Option>
+    //           </Select>
+    //         </Form.Item>
+
+    //         {/* หมายเลขโทรศัพท์ */}
+    //         <Form.Item
+    //           style={{ marginTop: "20px" }}
+    //           name="phone"
+    //           label="หมายเลขโทรศัพท์"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาใส่หมายเลขโทรศัพท์ของคุณ!",
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* เวลาที่ร้านเปิด */}
+    //         <Form.Item
+    //           style={{ marginTop: "20px" }}
+    //           label="เวลาที่ร้านเปิด"
+    //           rules={[
+    //             {
+    //               // required: true,
+    //               // message: "กรุณาระบุเวลาเปิด-ปิดร้านของคุณ",
+    //             },
+    //           ]}
+    //         >
+    //           <Row>
+    //             <TimePicker
+    //               defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
+    //               onChange={handleOnTime}
+    //             />
+    //             <div className="div-time">ถึงเวลา</div>
+
+    //             <TimePicker
+    //               defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
+    //               onChange={handleOffTime}
+    //             />
+    //           </Row>
+    //         </Form.Item>
+
+    //         <Divider orientation="left">
+    //           <b>ที่อยู่ของร้าน</b>
+    //         </Divider>
+
+    //         <Row>
+    //           {/* Addess Number บ้านเลขที่*/}
+    //           <Form.Item
+    //             name="addressnumber"
+    //             label="ตั้งอยู่เลขที่"
+    //             rules={[
+    //               {
+    //                 required: true,
+    //                 message: "กรุณาระที่อยู่ให้ครบ!",
+    //                 whitespace: true,
+    //               },
+    //             ]}
+    //           >
+    //             <Input />
+    //           </Form.Item>
+
+    //           {/* หมู่ที่ */}
+    //           <Form.Item
+    //             name="moo"
+    //             label="หมู่ที่"
+    //             rules={[
+    //               {
+    //                 required: true,
+    //                 message: "กรุณาระที่อยู่ให้ครบ!",
+    //                 whitespace: true,
+    //               },
+    //             ]}
+    //           >
+    //             <Input />
+    //           </Form.Item>
+    //         </Row>
+
+    //         <Row>
+    //           {/* ตรอก/ซอย */}
+    //           <Form.Item
+    //             name="alley"
+    //             label="ตรอก/ซอย"
+    //             rules={[
+    //               {
+    //                 required: true,
+    //                 message: "กรุณาระที่อยู่ให้ครบ!",
+    //                 whitespace: true,
+    //               },
+    //             ]}
+    //           >
+    //             <Input />
+    //           </Form.Item>
+
+    //           {/* ถนน */}
+    //           <Form.Item
+    //             name="road"
+    //             label="ถนน"
+    //             rules={[
+    //               {
+    //                 required: true,
+    //                 message: "กรุณาระที่อยู่ให้ครบ!",
+    //                 whitespace: true,
+    //               },
+    //             ]}
+    //           >
+    //             <Input />
+    //           </Form.Item>
+    //         </Row>
+
+    //         {/* ตำบล/แขวง */}
+    //         <Form.Item
+    //           name="subdistrict"
+    //           label="ตำบล/แขวง"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระที่อยู่ให้ครบ!",
+    //               whitespace: true,
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* อำเภอ/เขต */}
+    //         <Form.Item
+    //           name="district"
+    //           label="อำเภอ/เขต"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระที่อยู่ให้ครบ!",
+    //               whitespace: true,
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* จังหวัด */}
+    //         <Form.Item
+    //           name="province"
+    //           label="จังหวัด"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระที่อยู่ให้ครบ!",
+    //               whitespace: true,
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         {/* รหัสไปรษณีย์ */}
+    //         <Form.Item
+    //           name="poscode"
+    //           label="รหัสไปรษณีย์"
+    //           rules={[
+    //             {
+    //               required: true,
+    //               message: "กรุณาระที่อยู่ให้ครบ!",
+    //               whitespace: true,
+    //             },
+    //           ]}
+    //         >
+    //           <Input />
+    //         </Form.Item>
+
+    //         <Divider orientation="left">
+    //           <b>กรุณาปักหมุดที่อยู่ของร้าน</b>
+    //         </Divider>
+
+    //         {/* ปักหมุดแผนที่ */}
+    //         <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: "300px" }} />}
+    //             mapElement={<div style={{ height: "100%" }} />}
+    //           />
+    //         </Col>
+
+    //         <Form.Item {...tailFormItemLayout}>
+    //           <Button
+    //             className="bt-them"
+    //             htmlType="submit"
+    //             style={{ marginTop: "30px" }}
+    //           >
+    //             ยืนยันการสมัคร
+    //           </Button>
+    //         </Form.Item>
+    //       </Form>
+    //     </Col>
+    //     <Col
+    //       span={6}
+    //       xs={{ order: 1 }}
+    //       sm={{ order: 2 }}
+    //       md={{ order: 3 }}
+    //       lg={{ order: 4 }}
+    //     ></Col>
+    //   </Row>
+    // </div>
   );
 }

src/view/widget/RepairTable.jsx

 import React, { useState, useEffect } from "react";
+import Highlighter from "react-highlight-words";
 
-import { Table, Space, Typography } from "antd";
+import { Table, Space, Typography, Row, Col, Input, Button } from "antd";
 import { Link } from "react-router-dom";
 
+import { SearchOutlined } from "@ant-design/icons";
+
 // Import services
 import { FetctDetailByGarage } from "../../services";
 
-const { Column, ColumnGroup } = Table;
-const { Text } = Typography;
+// const { Column, ColumnGroup } = Table;
+const { Text, Title } = Typography;
 
 export default function App() {
   const [datas, setDatas] = useState([]);
 
+  const [searchText, setSearchText] = useState("");
+  const [searchedColumn, setSearchedColumn] = useState("");
+
   useEffect(() => {
     const getDetailByGarage = async () => {
       let local = {
         garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
       };
-      // console.log("local", local);
-      // console.log(local);
       await FetctDetailByGarage(local).then(async (response) => {
         await setDatas(response.data);
       });
@@ -26,87 +30,201 @@ export default function App() {
     getDetailByGarage();
   }, []);
 
-  // console.log("datas", datas);
+  // console.log('datas' , datas)
 
-  // const clickMore = (key) => {
-  //   console.log("key", key);
-  // };
+  ///test
 
-  return (
-    <>
-      <Table dataSource={datas} scroll={{ x: 1000, y: 400 }}>
-        <ColumnGroup title="ลูกค้า">
-          <Column
-            title="ชื่อลูกค้า"
-            dataIndex="member_name"
-            key="member_name"
-          />
-          <Column title="รหัสลูกค้า" dataIndex="member_tel" key="member_tel" />
-        </ColumnGroup>
+  const getColumnSearchProps = (dataIndex) => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      clearFilters,
+    }) => (
+      <div style={{ padding: 8 }}>
+        <Input
+          ref={(node) => {
+            // searchInput = node;
+          }}
+          placeholder={`ค้นหา`}
+          value={selectedKeys[0]}
+          onChange={(e) =>
+            setSelectedKeys(e.target.value ? [e.target.value] : [])
+          }
+          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
+          style={{ marginBottom: 8, display: "block" }}
+        />
+        <Space>
+          <Button
+            type="primary"
+            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
+            icon={<SearchOutlined />}
+            size="small"
+            style={{ width: 90 }}
+          >
+            ค้นหา
+          </Button>
+          <Button
+            onClick={() => handleReset(clearFilters)}
+            size="small"
+            style={{ width: 90 }}
+          >
+            ล้าง
+          </Button>
+        </Space>
+      </div>
+    ),
+    filterIcon: (filtered) => (
+      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
+    ),
+    onFilter: (value, record) =>
+      record[dataIndex]
+        ? record[dataIndex]
+            .toString()
+            .toLowerCase()
+            .includes(value.toLowerCase())
+        : "",
+    onFilterDropdownVisibleChange: (visible) => {
+      if (visible) {
+        // setTimeout(() => searchInput.select(), 100);
+      }
+    },
+    render: (text) =>
+      searchedColumn === dataIndex ? (
+        <Highlighter
+          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
+          searchWords={[searchText]}
+          autoEscape
+          textToHighlight={text ? text.toString() : ""}
+        />
+      ) : (
+        text
+      ),
+  });
 
-        <ColumnGroup title="รายละเอียด">
-          <Column
-            title="ประเภทการซ่อม"
-            dataIndex="device_type"
-            key="device_type"
-          />
+  const handleSearch = (selectedKeys, confirm, dataIndex) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex);
+    // this.setState({
+    //   searchText: selectedKeys[0],
+    //   searchedColumn: dataIndex,
+    // });
+  };
 
-          <Column
-            title="ทะเบียน/ชนิด"
-            key="detailsID"
-            render={(text, record) => (
-              <>
-                {record.device_type === "รถจักรยานยนต์" ||
-                record.device_type === "รถยนต์" ? (
-                  <>
-                    <Space size="small">
-                      <Text style={{ fontWeight: "bold" }}>
-                        {record.car_number}
-                      </Text>
-                    </Space>
-                    {<br />}
-                    <Text>{record.car_province}</Text>
-                  </>
-                ) : (
-                  <>
-                    <Text>
-                      {record.equipment}
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    // this.setState({ searchText: "" });
+    setSearchText("");
+  };
+
+  const columns = [
+    {
+      title: "ชื่อลูกค้า",
+      dataIndex: "member_name",
+      key: "member_name",
+      ...getColumnSearchProps("member_name"),
+    },
+    {
+      title: "รหัสลูกค้า",
+      dataIndex: "member_tel",
+      key: "member_tel",
+      ...getColumnSearchProps("member_tel"),
+    },
+    {
+      title: "ประเภทการซ่อม",
+      dataIndex: "device_type",
+      key: "device_type",
+      ...getColumnSearchProps("device_type"),
+    },
+    {
+      title: "ทะเบียน/ชนิด",
+      key: "detailsID",
+      ...getColumnSearchProps("car_number"),
+      render: (record) => {
+        return (
+          <>
+            {record.device_type === "รถจักรยานยนต์" ||
+                  record.device_type === "รถยนต์" ? (
+                    <>
+                      <Space size="small">
+                        <Text style={{ fontWeight: "bold" }}>
+                          {record.car_number}
+                        </Text>
+                      </Space>
+                      {<br />}
+                      <Text>{record.car_province}</Text>
+                    </>
+                  ) : (
+                    <>
+                      <Text>{record.equipment}</Text>
+                    </>
+                  )}
+          </>
+        );
+      },
+      
+    },
+    {
+      title: "รายละเอียดการซ่อมเบื้องต้น",
+      dataIndex: "repair_details",
+      key: "repair_details",
+    },
+    {
+      title: "วันที่รับซ่อม",
+      dataIndex: "repair_date",
+      key: "repair_date",
+      ...getColumnSearchProps("repair_date"),
+    },
+    {
+      title: "สถานะ",
+      dataIndex: "status",
+      key: "status",
+      ...getColumnSearchProps("status"),
+    },
+    {
+      title: "เพิ่มเติม",
+      key: "detailsID",
+      render: (record) => {
+        return (
+          <>
+           <Link
+                    to={{
+                      pathname: "/dashboard/all-repair/detail",
+                      state: {
+                        detailsID: record.detailsID,
+                        memberTel: record.member_tel,
+                      },
+                    }}
+                  >
+                    <Text style={{ color: "blue" }}>
+                      {/* <ToolOutlined style={{fontSize: "200%"}} /> */}
+                      จัดการงานซ่อม
                     </Text>
-                  </>
-                )}
-              </>
-            )}
-          />
+                  </Link>
+          </>
+        );
+      },
+    },
+  ];
+  ////
+
+  return (
+    <>
+      <Row>
+        <Col span={24} style={{ marginTop: "3%" }}>
+          <Title level={3}>งานซ่อมทั้งหมดที่มี</Title>
+        </Col>
+      </Row>
 
-          <Column
-            title="รายละเอียดการซ่อมเบื้องต้น"
-            dataIndex="repair_details"
-            key="repair_details"
-          />
-          <Column
-            title="วันที่รับซ่อม"
-            dataIndex="repair_date"
-            key="repair_date"
-          />
-          <Column title="สถานะ" dataIndex="status" key="status" />
-          <Column
-            title="เพิ่มเติม"
-            key="detailsID"
-            render={(text, record) => (
-              <Space size="middle">
-                <Link
-                  to={{
-                    pathname: "/dashboard/all-repair/detail",
-                    state: { detailsID: record.detailsID },
-                  }}
-                >
-                  <Text style={{ color: "blue" }}>จัดการ</Text>
-                </Link>
-              </Space>
-            )}
-          />
-        </ColumnGroup>
-      </Table>
+      <div className="div-p-5">
+        <Table
+          scroll={{ x: 500 }}
+          bordered
+          columns={columns}
+          dataSource={datas}
+        />
+      </div>
     </>
   );
 }

src/view/widget/widgetColumn.jsx

@@ -27,39 +27,53 @@ export default function Ecommerce(props) {
   let carlist = [];
   let motolist = [];
   let agirculturelist = [];
+  let repairSum = []
+  let succeed = []
+  let notSucceed = []
 
-  for (let i = 0; i < datas.length; i++) {
-    if (datas[i].device_type === "รถยนต์") {
-      // console.log(datas[i].device_type);
-      carlist.push(datas[i].device_type);
-    }
-    if (datas[i].device_type === "รถจักรยานยนต์") {
-      motolist.push(datas[i].device_type);
-    }
-    if (datas[i].device_type === "อุปกรณ์การเกษตร") {
-      agirculturelist.push(datas[i].device_type);
+  if (datas !== null) {
+    for (let i = 0; i < datas.length; i++) {
+      if (datas[i].device_type === "รถยนต์") {
+        // console.log(datas[i].device_type);
+        carlist.push(datas[i].device_type);
+      }
+      if (datas[i].device_type === "รถจักรยานยนต์") {
+        motolist.push(datas[i].device_type);
+      }
+      if (datas[i].device_type === "อุปกรณ์การเกษตร") {
+        agirculturelist.push(datas[i].device_type);
+      }
+      // console.log(datas[i].status)
+      repairSum.push(datas[i].length)
+  
+      if (datas[i].status === "อยู่ระหว่างการซ่อม") {
+        succeed.push(datas[i].status)
+        // console.log(datas[i].status)
+      }
+      if (datas[i].status === "สำเร็จ") {
+        notSucceed.push(datas[i].status)
+      }
     }
   }
+  
 
   const options = {
     animationEnabled: true,
-    theme: "light1", // "light1", "dark1", "dark2"
+    theme: "light2", // "light1", "dark1", "dark2"
     title: {
-      text: "รายการซ่อมทั้งหมด",
+      text: "สรุปการซ่อม",
     },
     data: [
       {
-        type: "column",
+        // Change type to "bar", "area", "spline", "pie",etc.
+        type: "column", 
         // indexLabel: "{label}: {y}%",
-        startAngle: 60,
+        startAngle: 90,
         dataPoints: [
-          { y: carlist.length, label: "รถยนต์" },
-          { y: motolist.length, label: "รถจักรยานยนต์" },
-          { y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
-          { y: carlist.length, label: "รถยนต์" },
-          { y: motolist.length, label: "รถจักรยานยนต์" },
-          { y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
-          { y: carlist.length, label: "รถยนต์" },
+          { y: repairSum.length, label: "การซ่อมทั้งหมด" },
+          { y: notSucceed.length, label: "สำเร็จ" },
+          { y: succeed.length, label: "กำลังดำเนินการซ่อม" },
+          
         ],
       },
     ],