add 18/02/2565

b0050fb6 · chaiwat · 25ddf61a · b0050fb6 · b0050fb6 · b0050fb6
Commit b0050fb6 authored Feb 20, 2022 by chaiwat
34 changed files
--- a/package.json
+++ b/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",

--- a/src/Layouts/Header/tabHeader.jsx
+++ b/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;
+              Repair Center
-              <div className="logo"> Center</div>
            </Row>
          </Row>
        </Col>

--- a/src/Layouts/Menu/menuDashboard.jsx
+++ b/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
+            <SubMenu key="sub1" icon={<ToolOutlined />} title="จัดการงานซ่อม">
-              key="sub1"
-              icon={<UnorderedListOutlined />}
-              title="จัดการงานซ่อม"
-            >
-              <Menu.Item key="2" icon={<OrderedListOutlined />}>
-                <Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
-              </Menu.Item>
              <Menu.Item key="3" icon={<AppstoreAddOutlined />}>
                <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
              </Menu.Item>
-              <Menu.Item key="4" icon={<ToolOutlined />}>
+              <Menu.Item key="2" icon={<OrderedListOutlined />}>
-                <Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
+                <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

--- a/src/Layouts/Menu/menulist.jsx
+++ b/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 />}>

--- a/src/Layouts/VerticalLayout.jsx
+++ b/src/Layouts/VerticalLayout.jsx
@@ -8,14 +8,13 @@ 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);
  useEffect(() => {
@@ -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
+      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>
      )}

--- a/src/assets/fonts/index.css
+++ b/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 */
--- a/src/assets/images/freeCar.jpg
+++ b/src/assets/images/freeCar.jpg
--- a/src/assets/less/index.less
+++ b/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";
--- a/src/assets/less/pages/dashboard/index.less
+++ b/src/assets/less/pages/dashboard/index.less
@@ -13,9 +13,9 @@
  // box-shadow: 1px 3px #001529;
 }
-.div-content-main {
+// .div-content-main {
-  // border: 1px solid #333;
+//   // 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;
+// }
--- a/src/router/routes/Pages.jsx
+++ b/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;
--- a/src/services/index.js
+++ b/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
-  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);
-      })
+    });
-  );
 };
 // 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");
+// };
--- a/src/view/Dashboards/component/ContentSearch.jsx
+++ b/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>
+    </>
+  );
+}
--- a/src/view/Dashboards/component/SpareAdd.jsx
+++ b/src/view/Dashboards/component/SpareAdd.jsx
--- a/src/view/Dashboards/component/TitleShowDetail.jsx
+++ b/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>
    </>
  );
 }
--- a/src/view/Dashboards/component/agriculture.jsx
+++ b/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: "ลูกค้ายังไม่ได้สมัครสมาชิก",

--- a/src/view/Dashboards/component/car.jsx
+++ b/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: "ลูกค้ายังไม่ได้สมัครสมาชิก",

--- a/src/view/Dashboards/component/motorcycle.jsx
+++ b/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: "ลูกค้ายังไม่ได้สมัครสมาชิก",

--- a/src/view/Dashboards/ecommerce/index.jsx
+++ b/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="display-flex-main"> */}
-            <div className="div-content-chart">
+          {/* <div className="div-content-chart"> */}
-              <Row className="content-chart">
+          <Row gutter={[0, 16]} style={{ padding: "4%" }}>
-                <Col xs={24} lg={24} className="chart">
+            <Col xs={24} lg={{ span: 10, offset: 1 }}>
              <CanvasJSChart />
            </Col>
+            <Col xs={24} lg={{ span: 10, offset: 2 }}>
+              <ColumnJSChart />
+            </Col>
          </Row>
-            </div>
-          </div>
+          <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>
+            </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> */}
        </>
      ) : (
        <>
@@ -75,7 +111,6 @@ export default function Ecommerce() {
        </>
      )}
-      <Divider />
      {/* <CanvasJSChart className="chart" data={location.state} /> */}
    </>
  );

--- a/src/view/Dashboards/member/ShowDetailMember.jsx
+++ b/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>
+    </>
+  );
+}
--- a/src/view/Dashboards/member/addMember.jsx
+++ b/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>
+    </>
+  );
+}
--- a/src/view/Dashboards/member/member.jsx
+++ b/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>
+    </>
+  );
+}
--- a/src/view/Dashboards/member/searchMember.jsx
+++ b/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>
+    </>
+  );
+}
--- a/src/view/Dashboards/repairDashboard/repairAdd/index.jsx
+++ b/src/view/Dashboards/repairDashboard/repairAdd/index.jsx
@@ -37,8 +37,8 @@ export default function App() {
  return (
    <>
      <Row>
-        <Col span={24} className="box-text-title">
+        <Col span={24} style={{padding: '5%'}}>
-          <Title level={4}>เพิ่มการซ่อม</Title>
+          <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>

--- a/src/view/Dashboards/repairDashboard/repairList/ShowDetail.jsx
+++ b/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} />
    </>
  );
 }
--- a/src/view/Dashboards/repairDashboard/repairSatatus/index.jsx
+++ b/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>
+    </>
+  );
+}
--- a/src/view/Login/Login.jsx
+++ b/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 { Title } = Typography;
-  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)
+function App() {
  const onFinish = (values) => {
    const data = {
      garageID: values.garageID,
@@ -42,45 +18,44 @@ function App() {
    // console.log(data);
    sendLogin(data).then((response) => {
-      // console.log('response', response.userData)
+      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={{ span: 24 }}
-          xs={{ order: 1 }}
+          lg={{ span: 8 }}
-          sm={{ order: 2 }}
+          className="w-100 bg-theme display-flex-center"
-          md={{ order: 3 }}
+        >
-          lg={{ order: 4 }}
+          <Col>
-        ></Col>
+            <LoginOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
+            <Title level={2} style={{ color: "#a4b3b6" }}>
+              เข้าสู่ระบบร้านค้า
+            </Title>
+          </Col>
+        </Col>
        <Col
-          // style={{ textAlign: "center" }}
+          xs={{ span: 24 }}
-          span={12}
+          lg={{ span: 16 }}
-          xs={{ order: 1 }}
+          className="display-flex-center"
-          sm={{ order: 2 }}
-          md={{ order: 3 }}
-          lg={{ order: 4 }}
        >
-          <div className="title"></div>
+          <Row>
-          <Divider orientation="center">
-            <b>เข้าสู่ระบบร้านซ่อม</b>
-          </Divider>
            <Form
              name="basic"
-            labelCol={{
-              span: 8,
-            }}
-            wrapperCol={{
-              span: 16,
-            }}
              initialValues={{
                remember: true,
              }}
@@ -113,27 +88,16 @@ function App() {
                <Input.Password />
              </Form.Item>
-            <Form.Item
+              <Form.Item>
-              wrapperCol={{
+                <Button className="bt-them" htmlType="submit">
-                offset: 8,
-                span: 16,
-              }}
-            >
-              <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>
+    </>
  );
 }

--- a/src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
+++ b/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>
      )}

--- a/src/view/Pages/GetStarted/Title/index.jsx
+++ b/src/view/Pages/GetStarted/Title/index.jsx
@@ -23,10 +23,9 @@ function App() {
          scale: 1.0,
          scaleMobile: 1.0,
          backgroundColor: 0xffffff,
-          color1: 0x87,
+          color1: 0x55505f,
-          color2: 0x0,
+          color2: 0x60931,
-          birdSize: 0.8,
+          birdSize: 0.7,
-          quantity: 4.2,
        })
      );
    }
@@ -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={1}>Repair Center</Title>
-          <Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
+          <Title level={2}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
-          <Title level={5}>
+          <Title level={3}>
            เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
          </Title>
          <Row className="box-button">

--- a/src/view/Pages/Register/index.jsx
+++ b/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>

--- a/src/view/Pages/Report/index.jsx
+++ b/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">
+      <Row gutter={[0, 32]}>
-        <div className="report-content">
+        <Col
-          <Col span={24} className="box-text-title">
+          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>
+        <Col
+          xs={{ span: 24 }}
+          lg={{ span: 16 }}
+          className="display-flex-center"
+        >
+          <Row >
+            <Col span={24}>
              <Title level={4}>แจ้งปัญหาการใช้งาน</Title>
            </Col>
-          <Col  className="div-form">
            <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>
+          </Row>
        </Col>
-        </div>
      </Row>
    </>
  );

--- a/src/view/Registion/Registion.jsx
+++ b/src/view/Registion/Registion.jsx
--- a/src/view/widget/RepairTable.jsx
+++ b/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 { Column, ColumnGroup } = Table;
-const { Text } = Typography;
+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,35 +30,119 @@ export default function App() {
    getDetailByGarage();
  }, []);
-  // console.log("datas", datas);
+  // console.log('datas' , datas)
-  // const clickMore = (key) => {
+  ///test
-  //   console.log("key", key);
-  // };
-  return (
+  const getColumnSearchProps = (dataIndex) => ({
-    <>
+    filterDropdown: ({
-      <Table dataSource={datas} scroll={{ x: 1000, y: 400 }}>
+      setSelectedKeys,
-        <ColumnGroup title="ลูกค้า">
+      selectedKeys,
-          <Column
+      confirm,
-            title="ชื่อลูกค้า"
+      clearFilters,
-            dataIndex="member_name"
+    }) => (
-            key="member_name"
+      <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" }}
        />
-          <Column title="รหัสลูกค้า" dataIndex="member_tel" key="member_tel" />
+        <Space>
-        </ColumnGroup>
+          <Button
+            type="primary"
-        <ColumnGroup title="รายละเอียด">
+            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
-          <Column
+            icon={<SearchOutlined />}
-            title="ประเภทการซ่อม"
+            size="small"
-            dataIndex="device_type"
+            style={{ width: 90 }}
-            key="device_type"
+          >
+            ค้นหา
+          </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,
+    // });
+  };
-          <Column
+  const handleReset = (clearFilters) => {
-            title="ทะเบียน/ชนิด"
+    clearFilters();
-            key="detailsID"
+    // this.setState({ searchText: "" });
-            render={(text, record) => (
+    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 === "รถยนต์" ? (
@@ -69,44 +157,74 @@ export default function App() {
                    </>
                  ) : (
                    <>
-                    <Text>
+                      <Text>{record.equipment}</Text>
-                      {record.equipment}
-                    </Text>
                    </>
                  )}
          </>
-            )}
+        );
-          />
+      },
-          <Column
+    },
-            title="รายละเอียดการซ่อมเบื้องต้น"
+    {
-            dataIndex="repair_details"
+      title: "รายละเอียดการซ่อมเบื้องต้น",
-            key="repair_details"
+      dataIndex: "repair_details",
-          />
+      key: "repair_details",
-          <Column
+    },
-            title="วันที่รับซ่อม"
+    {
-            dataIndex="repair_date"
+      title: "วันที่รับซ่อม",
-            key="repair_date"
+      dataIndex: "repair_date",
-          />
+      key: "repair_date",
-          <Column title="สถานะ" dataIndex="status" key="status" />
+      ...getColumnSearchProps("repair_date"),
-          <Column
+    },
-            title="เพิ่มเติม"
+    {
-            key="detailsID"
+      title: "สถานะ",
-            render={(text, record) => (
+      dataIndex: "status",
-              <Space size="middle">
+      key: "status",
+      ...getColumnSearchProps("status"),
+    },
+    {
+      title: "เพิ่มเติม",
+      key: "detailsID",
+      render: (record) => {
+        return (
+          <>
           <Link
                    to={{
                      pathname: "/dashboard/all-repair/detail",
-                    state: { detailsID: record.detailsID },
+                      state: {
+                        detailsID: record.detailsID,
+                        memberTel: record.member_tel,
+                      },
                    }}
                  >
-                  <Text style={{ color: "blue" }}>จัดการ</Text>
+                    <Text style={{ color: "blue" }}>
+                      {/* <ToolOutlined style={{fontSize: "200%"}} /> */}
+                      จัดการงานซ่อม
+                    </Text>
                  </Link>
-              </Space>
+          </>
-            )}
+        );
+      },
+    },
+  ];
+  ////
+  return (
+    <>
+      <Row>
+        <Col span={24} style={{ marginTop: "3%" }}>
+          <Title level={3}>งานซ่อมทั้งหมดที่มี</Title>
+        </Col>
+      </Row>
+      <div className="div-p-5">
+        <Table
+          scroll={{ x: 500 }}
+          bordered
+          columns={columns}
+          dataSource={datas}
        />
-        </ColumnGroup>
+      </div>
-      </Table>
    </>
  );
 }
--- a/src/view/widget/widgetColumn.jsx
+++ b/src/view/widget/widgetColumn.jsx
@@ -27,7 +27,11 @@ export default function Ecommerce(props) {
  let carlist = [];
  let motolist = [];
  let agirculturelist = [];
+  let repairSum = []
+  let succeed = []
+  let notSucceed = []
+  if (datas !== null) {
    for (let i = 0; i < datas.length; i++) {
      if (datas[i].device_type === "รถยนต์") {
        // console.log(datas[i].device_type);
@@ -39,27 +43,37 @@ export default function Ecommerce(props) {
      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: [
      {
+        // Change type to "bar", "area", "spline", "pie",etc.
        type: "column", 
        // indexLabel: "{label}: {y}%",
-        startAngle: 60,
+        startAngle: 90,
        dataPoints: [
-          { y: carlist.length, label: "รถยนต์" },
+          { y: repairSum.length, label: "การซ่อมทั้งหมด" },
-          { y: motolist.length, label: "รถจักรยานยนต์" },
+          { y: notSucceed.length, label: "สำเร็จ" },
-          { y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
+          { y: succeed.length, label: "กำลังดำเนินการซ่อม" },
-          { y: carlist.length, label: "รถยนต์" },
-          { y: motolist.length, label: "รถจักรยานยนต์" },
-          { y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
-          { y: carlist.length, label: "รถยนต์" },
        ],
      },
    ],

--- a/yarn.lock
+++ b/yarn.lock