add Table show detail

package-lock.json

@@ -15,6 +15,7 @@
         "@testing-library/user-event": "^12.1.10",
         "antd": "^4.18.2",
         "axios": "^0.24.0",
+        "canvasjs-react-charts": "^1.0.5",
         "craco-less": "^2.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -8374,6 +8375,11 @@
       "integrity": "sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==",
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvasjs-react-charts": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz",
+      "integrity": "sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g=="
+    },
     "node_modules/capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -33403,6 +33409,11 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz",
       "integrity": "sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ=="
     },
+    "canvasjs-react-charts": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz",
+      "integrity": "sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g=="
+    },
     "capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.18.2",
     "axios": "^0.24.0",
+    "canvasjs-react-charts": "^1.0.5",
     "craco-less": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/Layouts/VerticalLayout.jsx

@@ -8,7 +8,6 @@ import HeaderTap from "./Header/tabHeader";
 import MenuList from "./Menu/menulist";
 import MenuDashboard from "./Menu/menuDashboard";
 
-
 const { Content, Footer } = Layout;
 
 export default function VerticalLayout(props) {
@@ -16,6 +15,7 @@ export default function VerticalLayout(props) {
   // let test = "";
   const history = useHistory();
   
+
   const [checkLocal, setChechLocal] = useState(null);
 
   useEffect(() => {
@@ -26,7 +26,10 @@ export default function VerticalLayout(props) {
   if (checkLocal === null) {
     history.push("/");
   } else {
-    history.push("/dashboard");
+    history.push({
+       pathname: "/dashboard",
+       state: checkLocal.userData.userId
+       });
   }
 
   // console.log(checkLocal);

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

@@ -6,8 +6,6 @@
   // background-color: #a3b4c8;
 }
 
-
-
 .main-select-repair {
   padding: 10px;
   // border: 1px solid #333;
@@ -33,7 +31,58 @@
   display: flex;
 }
 
-
 .test-box {
   border: 1px solid #333;
 }
+
+.display-flex-main {
+  display: flex;
+  justify-content: center;
+  height: auto;
+  //   border: 1px solid #333;
+}
+
+.div-content-chart {
+  width: 70%;
+}
+
+.content-chart {
+  display: flex;
+
+  // border: 1px solid #333;
+}
+
+.div-title-detail {
+  background-color: #001529;
+  height: auto;
+}
+
+.title-show-detail {
+  padding: 10px;
+}
+
+.color-fff {
+  color: aliceblue;
+}
+
+.color-fff-hover {
+  color: aliceblue;
+}
+
+.color-fff-hover:hover {
+  color: rgb(0, 0, 0);
+}
+
+
+.color-bfbf {
+  color: #bfbfbf;
+}
+
+.div-p-5 {
+  padding: 5%;
+  // border: 1px solid #001529;
+}
+
+.border {
+  border: 1px solid #001529;
+}

src/assets/less/theme.less

@@ -5,3 +5,10 @@
 @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
   'Noto Color Emoji';
+
+  .bt-them {
+    background-color: #001529;
+    color: aliceblue;
+  }
+
+  
\ No newline at end of file

src/router/Routers.jsx

@@ -20,13 +20,6 @@ import FullLayout from "../Layouts/FullLayout";
 import ProtectedRoute from "../ProtectdRoute";
 
 export default function Routers() {
-  // const history = useHistory();
-  // const [checkLocal, setChechLocal] = useState(null);
-
-  // useEffect(() => {
-  //   console.log("local", localStorage.getItem("user") === null);
-  //   setChechLocal(JSON.parse(localStorage.getItem("user")));
-  // }, []);
 
 
   // Default Layout
@@ -35,7 +28,6 @@ export default function Routers() {
   // All of the available layouts
   const Layouts = { VerticalLayout, FullLayout };
 
-  // const LayoutsDashboard = { DashboardLayout, FullLayout };
 
   // Return Filtered Array of Routes & Paths for default page
   const LayoutRoutesAndPaths = (layout) => {
@@ -53,22 +45,6 @@ export default function Routers() {
     return { LayoutRoutes, LayoutPaths };
   };
 
-  // Return Filtered Array of Routes & Paths for dashboard page
-  // const LayoutRoutesAndPathsDashboard = (layout) => {
-  //   const LayoutRoutes2 = [];
-  //   const LayoutPaths2 = [];
-  //   if (Routes) {
-  //     // Checks if Route layout or Default layout matches current layout
-  //     Routes.filter(
-  //       (route) =>
-  //         (route.layout === layout || DefaultLayout === layout) &&
-  //         (LayoutRoutes2.push(route), LayoutPaths2.push(route.path))
-  //     );
-  //   }
-
-  //   return { LayoutRoutes2, LayoutPaths2 };
-  // };
-
 
 
   // Return Route to Render

src/router/routes/Pages.jsx

@@ -52,17 +52,33 @@ const PagesRoutes = [
     layout: "VerticalLayout",
   },
 
-  // pages 404
+  // Dashboard
   {
     path: '/dashboard',
-    component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
+    component: lazy(() => import('../../view/Dashboards/ecommerce/index')),
     layout: 'VerticalLayout',
   },
+
+  // add-detail
   {
     path: '/dashboard/add-detail',
     component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
     layout: 'VerticalLayout',
   },
+
+  // all-repair
+  {
+    path: '/dashboard/all-repair',
+    component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/index')),
+    layout: 'VerticalLayout',
+  },
+
+  // show-repair
+  {
+    path: '/dashboard/all-repair/detail',
+    component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')),
+    layout: 'VerticalLayout',
+  },
 ];
 
 export default PagesRoutes;

src/services/index.js

@@ -67,3 +67,45 @@ export const FetchMemberTel = () => {
       console.log(err);
     });
 };
+
+// send data to InsertDetails
+export const InsertDetails = (data) => {
+  return axios
+    .post(process.env.REACT_APP_SECRET_API + "/repairdetail/insert", data)
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// 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);
+      })
+  );
+};
+
+// get data FetctDetailByGarageID
+export const FetctDetailByGarageID = (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/getbydetailID", {
+        params: data,
+      })
+      .then((response) => response.data)
+      .catch((err) => {
+        console.log(err);
+      })
+  );
+};

src/view/Dashboards/component/SpareAdd.jsx

+import React, { useState, useEffect } from "react";
+
+import {
+//   Row,
+//   Col,
+  Modal,
+  Button,
+  Input,
+  Divider,
+  Table,
+  Typography,
+} from "antd";
+
+import { PlusCircleFilled } from "@ant-design/icons";
+
+// import Service
+import { FetctDetailByGarageID } 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"],
+// //   },
+// ];
+
+export default function SpareAdd(props) {
+  const detailID = props;
+//   console.log(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");
+
+  useEffect(() => {
+    const getDetailByGarage = async () => {
+
+      await FetctDetailByGarageID(detailID).then(async (response) => {
+        await setDatas(response.data);
+        // console.log('data', response.data)
+      });
+    };
+    getDetailByGarage();
+  }, [detailID]);
+
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    // setModalText("The modal will be closed after two seconds");
+    setConfirmLoading(true);
+    setTimeout(() => {
+      setVisible(false);
+      setConfirmLoading(false);
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    console.log("Clicked cancel button");
+    setVisible(false);
+  };
+
+  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 /> เพิ่มรายการอะไหล่
+          </Text>
+        </Button>
+        <Table dataSource={datas} scroll={{ x: 400 }} className="border">
+          <ColumnGroup title="รายละเอียดการซ่อม">
+            <Column
+              title="ลำดับ"
+              dataIndex="key"
+              key="member_name"
+              width={"10%"}
+            />
+            <Column
+              title="รายการอะไหล่"
+              dataIndex="name"
+              key="member_tel"
+              width={"60%"}
+            />
+
+            <Column
+              title="จำนวน"
+              dataIndex="device_type"
+              key="device_type"
+              width={"10%"}
+            />
+
+            <Column
+              title="ราคาต่อหน่วย"
+              dataIndex="device_type"
+              key="device_type"
+              width={"10%"}
+            />
+            <Column
+              title="ราคาประเมิน"
+              dataIndex="device_type"
+              key="device_type"
+              width={"10%"}
+            />
+          </ColumnGroup>
+        </Table>
+      </div>
+
+      <Modal
+        title="Title"
+        visible={visible}
+        onOk={handleOk}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}
+        width={1000}
+      >
+        <Input />
+      </Modal>
+    </>
+  );
+}

src/view/Dashboards/component/TitleShowDetail.jsx

+import React, { useEffect, useState } from "react";
+
+import { Col, Row, Typography } from "antd";
+import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
+
+// import Service
+import { FetctDetailByGarageID } from "../../../services";
+
+// import { useLocation } from "react-router-dom";
+
+const { Text, Title } = Typography;
+
+export default function App(props) {
+  const detailID = props;
+
+  //set useState
+  const [datas, setDatas] = useState([]);
+
+  useEffect(() => {
+    const getDetailByGarage = async () => {
+      await FetctDetailByGarageID(detailID).then(async (response) => {
+        await setDatas(response.data[0]);
+        // console.log('data', response.data[0])
+      });
+    };
+    getDetailByGarage();
+  }, [detailID]);
+
+  console.log(datas);
+
+  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>
+            {/* <Title level={4} className="color-fff">
+              <Text className="color-fff">{datas.car_number}</Text>
+            </Title>
+            <Text className="color-fff">{datas.car_province}</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.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>
+
+          <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.price}</Text>
+            </Title>
+            <Text className="color-fff">
+              <DollarOutlined /> {datas.status_payment}
+            </Text>
+          </Col>
+        </Row>
+      </div>
+    </>
+  );
+}

src/view/Dashboards/repairDashboard/repairAdd/component/agriculture.jsx → src/view/Dashboards/component/agriculture.jsx

@@ -6,36 +6,23 @@ import {
   Form,
   Input,
   Button,
-  Select,
   Divider,
   DatePicker,
+  Modal,
 } from "antd";
 
 // import services
-import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
-
-import Brand from "../data/brand.json";
+import { FetchMemberTel, InsertDetails } from "../../../services";
 
 // const { Title, Text } = Typography;
-const { Option } = Select;
 
 export default function App(props) {
   const { typeSelect, checkLocal } = props;
 
   // UseState
-  const [province, setProvinec] = useState([]);
   const [member, setMember] = useState([]);
 
   useEffect(() => {
-    const getThaiAddress = async () => {
-      await FetchThaiAddress().then((response) => {
-        if (response) {
-          setProvinec(response.data);
-        }
-      });
-    };
-    getThaiAddress();
-
     const getMemberTel = async () => {
       await FetchMemberTel().then((response) => {
         if (response) {
@@ -64,19 +51,33 @@ export default function App(props) {
       garageID: checkLocal.userData.userId,
       member_tel: values.member_tel,
       device_type: typeSelect,
-      car_number: values.car_number,
-      car_province: values.car_province,
+      equipment: values.equipment,
       brand: values.brand,
-      model: values.model,
-      kilo_number: values.kilo_number,
       repair_date: newDate,
-      repair_detail: values.repair_detail,
+      repair_details: values.repair_details,
+
+      car_number: null,
+      car_province: null,
+      model: null,
+      kilo_number: null,
+      status: "อยู่ระหว่างการซ่อม",
+      price: 0,
+      spare_parts_list: null,
+      status_payment: "ยังไม่ได้ชำระ",
     };
 
+    // console.log('test data', data)
+
     if (member.includes(values.member_tel) === true) {
-      console.log("datas", data);
+      InsertDetails(data).then((response) => {
+        console.log("response", response);
+      });
+      window.location.reload(false)
     } else {
-      alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
+      Modal.info({
+        title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
+        content: `หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม `,
+      });
     }
   };
 
@@ -120,16 +121,16 @@ export default function App(props) {
                 </Col>
 
                 <Row gutter={[0, 16]}>
-                  {/* หมายเลขทะเบียนรถ */}
+                  {/* ชนิดของอุปกรณ์ */}
                   <Col
                     xs={24}
                     md={{ span: 11, offset: 1 }}
                     xl={{ span: 7, offset: 1 }}
                   >
                     <Form.Item
-                      name="car_number"
-                      label="ทะเบียนรถ"
-                      tooltip="หมายเลขทะเบียนรถ"
+                      name="equipment"
+                      label="ประเภทอุปกรณ์"
+                      tooltip="ประเภทของอุปกรณ์ เช่น เครื่องสูบน้ำ หรือเครื่องตัดหญ้า"
                       rules={[
                         {
                           required: true,
@@ -142,45 +143,6 @@ export default function App(props) {
                     </Form.Item>
                   </Col>
 
-                  {/* จังหวัด */}
-                  <Col
-                    xs={24}
-                    md={{ span: 11, offset: 1 }}
-                    xl={{ span: 7, offset: 1 }}
-                  >
-                    <Form.Item
-                      name="car_province"
-                      label="จังหวัด"
-                      tooltip="ทะเบียนจังหวัด"
-                      rules={[
-                        {
-                          required: true,
-                          message: "กรุณาเลือกทะเบียนจังหวัด!",
-                          whitespace: true,
-                        },
-                      ]}
-                    >
-                      <Select
-                        allowClear
-                        style={{ width: "100%" }}
-                        placeholder="เลือกจังหวัด"
-                        // onChange={(e) => {
-                        //   setTypeSelect(e);
-                        // }}
-                      >
-                        {province.length !== 0 ? (
-                          <>
-                            {province.map((api, index) => (
-                              <Option key={index} value={api.province}>
-                                {api.province}
-                              </Option>
-                            ))}
-                          </>
-                        ) : null}
-                      </Select>
-                    </Form.Item>
-                  </Col>
-
                   {/* ยี่ห้อ */}
                   <Col
                     xs={24}
@@ -190,69 +152,11 @@ export default function App(props) {
                     <Form.Item
                       name="brand"
                       label="ยี่ห้อ"
-                      tooltip="ยี่ห้อของรถ"
-                      rules={[
-                        {
-                          required: true,
-                          message: "กรุณาเลือกยี่ห้อของรถ!",
-                          whitespace: true,
-                        },
-                      ]}
-                    >
-                      <Select
-                        allowClear
-                        style={{ width: "100%" }}
-                        placeholder="เลือกยี่ห้อ"
-                      >
-                        {Brand.length !== 0 ? (
-                          <>
-                            {Brand.type.car.map((brand, index) => (
-                              <Option key={index} value={brand}>
-                                {brand}
-                              </Option>
-                            ))}
-                          </>
-                        ) : null}
-                      </Select>
-                    </Form.Item>
-                  </Col>
-
-                  {/* รุ่น Model */}
-                  <Col
-                    xs={24}
-                    md={{ span: 11, offset: 1 }}
-                    xl={{ span: 7, offset: 1 }}
-                  >
-                    <Form.Item
-                      name="model"
-                      label="รุ่น"
-                      tooltip="รุ่นของรถ"
-                      rules={[
-                        {
-                          required: true,
-                          message: "กรุณากรอกรุ่นของรถ!",
-                          whitespace: true,
-                        },
-                      ]}
-                    >
-                      <Input />
-                    </Form.Item>
-                  </Col>
-
-                  {/* รุ่น Kilo Number */}
-                  <Col
-                    xs={24}
-                    md={{ span: 11, offset: 1 }}
-                    xl={{ span: 7, offset: 1 }}
-                  >
-                    <Form.Item
-                      name="kilo_number"
-                      label="หมายเลขกิโล"
-                      tooltip="หมายเลขกิโลของรถ ณ วันที่ซ่อม"
+                      tooltip="ยี่ห้อของอุปกรณ์การเกษตร"
                       rules={[
                         {
                           required: true,
-                          message: "กรุณากรอกหมายเลขกิโล!",
+                          message: "กรุณาระบุยี่ห้อของอุปกรณ์การเกษตร!",
                           whitespace: true,
                         },
                       ]}
@@ -268,9 +172,9 @@ export default function App(props) {
                     xl={{ span: 7, offset: 1 }}
                   >
                     <Form.Item
-                      label="วันที่รับรถ"
+                      label="วันที่รับซ่อม"
                       name="repair_date"
-                      tooltip="เลือกวันที่รับรถ"
+                      tooltip="เลือกวันที่รับซ่อม"
                     >
                       <DatePicker />
                     </Form.Item>
@@ -280,14 +184,14 @@ export default function App(props) {
                   <Col xs={4} md={4} xl={4}></Col>
                   <Col xs={16} md={16} xl={16}>
                     <Form.Item
-                      name="repair_detail"
+                      name="repair_details"
                       label="รายละเอียดการซ่อมเบื้องต้น"
                       tooltip="รายละเอียดการซ่อมเบื้องต้น"
                     >
                       <Input.TextArea />
                     </Form.Item>
                     <Form.Item>
-                      <Button type="primary" htmlType="submit">
+                      <Button className="bt-them" htmlType="submit">
                         เพิ่มการซ่อม
                       </Button>
                     </Form.Item>

src/view/Dashboards/repairDashboard/repairAdd/component/car.jsx → src/view/Dashboards/component/car.jsx

@@ -8,13 +8,18 @@ import {
   Button,
   Select,
   Divider,
+  Modal,
   DatePicker,
 } from "antd";
 
 // import services
-import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
+import {
+  FetchThaiAddress,
+  FetchMemberTel,
+  InsertDetails,
+} from "../../../services";
 
-import Brand from "../data/brand.json";
+import Brand from "../repairDashboard/repairAdd/data/brand.json";
 
 // const { Title, Text } = Typography;
 const { Option } = Select;
@@ -70,13 +75,25 @@ export default function App(props) {
       model: values.model,
       kilo_number: values.kilo_number,
       repair_date: newDate,
-      repair_detail: values.repair_detail,
+      repair_details: values.repair_details,
+
+      status: "อยู่ระหว่างการซ่อม",
+      price: 0,
+      spare_parts_list: null,
+      status_payment: "ยังไม่ได้ชำระ",
+      equipment: null,
     };
 
     if (member.includes(values.member_tel) === true) {
-      console.log("datas", data);
+      InsertDetails(data).then((response) => {
+        console.log("response", response);
+      });
+      window.location.reload(false)
     } else {
-      alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
+      Modal.info({
+        title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
+        content: `หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม `,
+      });
     }
   };
 
@@ -280,14 +297,14 @@ export default function App(props) {
                   <Col xs={4} md={4} xl={4}></Col>
                   <Col xs={16} md={16} xl={16}>
                     <Form.Item
-                      name="repair_detail"
+                      name="repair_details"
                       label="รายละเอียดการซ่อมเบื้องต้น"
                       tooltip="รายละเอียดการซ่อมเบื้องต้น"
                     >
                       <Input.TextArea />
                     </Form.Item>
                     <Form.Item>
-                      <Button type="primary" htmlType="submit">
+                      <Button className="bt-them" htmlType="submit">
                         เพิ่มการซ่อม
                       </Button>
                     </Form.Item>

src/view/Dashboards/repairDashboard/repairAdd/component/motorcycle.jsx → src/view/Dashboards/component/motorcycle.jsx

@@ -9,12 +9,13 @@ import {
   Select,
   Divider,
   DatePicker,
+  Modal,
 } from "antd";
 
 // import services
-import { FetchThaiAddress, FetchMemberTel } from "../../../../../services";
+import { FetchThaiAddress, FetchMemberTel, InsertDetails } from "../../../services";
 
-import Brand from "../data/brand.json";
+import Brand from "../repairDashboard/repairAdd/data/brand.json";
 
 // const { Title, Text } = Typography;
 const { Option } = Select;
@@ -70,13 +71,25 @@ export default function App(props) {
       model: values.model,
       kilo_number: values.kilo_number,
       repair_date: newDate,
-      repair_detail: values.repair_detail,
+      repair_details: values.repair_details,
+
+      status: "อยู่ระหว่างการซ่อม",
+      price: 0,
+      spare_parts_list: null,
+      status_payment: "ยังไม่ได้ชำระ",
+      equipment: null,
     };
 
     if (member.includes(values.member_tel) === true) {
-      console.log("datas", data);
+      InsertDetails(data).then((response) => {
+        console.log("response", response);
+      });
+      window.location.reload(false)
     } else {
-      alert(`หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม`)
+      Modal.info({
+        title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
+        content: `หมายเลข ${values.member_tel} นี้ ยังไม่ได้สมัครสมาชิก กรุณาสมัครสมาชิกก่อนเพิ่มการซ่อม `,
+      });
     }
   };
 
@@ -280,14 +293,14 @@ export default function App(props) {
                   <Col xs={4} md={4} xl={4}></Col>
                   <Col xs={16} md={16} xl={16}>
                     <Form.Item
-                      name="repair_detail"
+                      name="repair_details"
                       label="รายละเอียดการซ่อมเบื้องต้น"
                       tooltip="รายละเอียดการซ่อมเบื้องต้น"
                     >
                       <Input.TextArea />
                     </Form.Item>
                     <Form.Item>
-                      <Button type="primary" htmlType="submit">
+                      <Button className="bt-them" htmlType="submit">
                         เพิ่มการซ่อม
                       </Button>
                     </Form.Item>

src/view/Dashboards/ecommerce/index.jsx

-import { React } from "react";
-import { Layout } from "antd";
+import { React, useEffect, useState } from "react";
 
-import HeaderTap from "../../../Layouts/tabHeader";
-import MenuList from "../../../Layouts/menulist";
+import { Link } from "react-router-dom";
 
-const { Content, Footer } = Layout;
+// Import services
+import { FetctDetailByGarage } from "../../../services";
+
+// import { useLocation } from "react-router-dom";
+
+import { Row, Col, Divider, Result, Button } from "antd";
+
+//import Widget
+import CanvasJSChart from "../../widget/widgetPie";
+// import ColumnJSChart from "../../widget/widgetColumn";
+
+// const { Header } = Layout;
 
 export default function Ecommerce() {
+
+  // let location = useLocation();
+
+  const [datas, setDatas] = useState([]);
+
+  // const  detailID  = location.state
+  // console.log(detailID)
+
+  // console.log("datas", datas);
+
+  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);
+      });
+    };
+    getDetailByGarage();
+  }, []);
+
   return (
     <>
-      <HeaderTap className="site-layout-background" style={{ padding: 0 }} />
-      <Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
-        <MenuList />
-
-        <Layout className="site-layout">
-          <Content style={{ margin: "0 16px" }}>
-            <div
-              className="site-layout-background"
-              style={{ padding: 24, minHeight: 360 }}
-            >
-              Bill is a cat.
+      {datas !== null ? (
+        <>
+          <div className="display-flex-main">
+            <div className="div-content-chart">
+              <Row className="content-chart">
+                <Col xs={24} lg={24} className="chart">
+                  <CanvasJSChart />
+                </Col>
+              </Row>
+            </div>
           </div>
-          </Content>
-          <Footer style={{ textAlign: "center" }}>
-            Ant Design ©2018 Created by Ant UED
-          </Footer>
-        </Layout>
-      </Layout>
+        </>
+      ) : (
+        <>
+          <div className="display-flex-main">
+            <div className="div-content-chart">
+              <Row className="content-chart">
+                <Col xs={24} lg={24} className="chart">
+                  <Result
+                    title="ร้านของคุณยังไม่มีการซ่อม"
+                    extra={
+                      <Button className="bt-them"  key="console">
+                        <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
+                      </Button>
+                    }
+                  />
+                </Col>
+              </Row>
+            </div>
+          </div>
+        </>
+      )}
+
+      <Divider />
+      {/* <CanvasJSChart className="chart" data={location.state} /> */}
     </>
   );
 }

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

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from "react";
 import { Row, Col, Typography, Select } from "antd";
 
 // import Component
-import Car from "./component/car";
-import Agriculture from "./component/agriculture";
-import Motorcycle from "./component/motorcycle";
+import Car from "../../component/car";
+import Agriculture from "../../component/agriculture";
+import Motorcycle from "../../component/motorcycle";
 
 const { Title, Text } = Typography;
 const { Option } = Select;

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

+import React from "react";
+
+// import {  Modal, Button, Input } from "antd";
+
+// import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
+
+import { useLocation } from "react-router-dom";
+
+// Import Component
+import TitleShowDetail from "../../component/TitleShowDetail";
+import SpareAdd from "../../component/SpareAdd";
+
+// const { Meta } = Card;
+// const { Text, Title } = Typography;
+
+export default function ShowDetail() {
+  let location = useLocation();
+
+  //use State
+
+  const detailID = location.state;
+  //   console.log(detailID);
+
+  return (
+    <>
+      <TitleShowDetail detailID={detailID.detailsID} />
+      {/* Show Repair id = {detailID.detailsID} */}
+      <SpareAdd detailID={detailID.detailsID} />
+    </>
+  );
+}

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

+import React from 'react'
+
+
+// Import Component
+import RepairTables from '../../../widget/RepairTable'
+
+export default function App() {
+
+    return (
+        <>
+            <RepairTables />
+        </>
+    )
+}
\ No newline at end of file

src/view/Login/Login.jsx

@@ -49,10 +49,7 @@ function App() {
     });
   };
 
-  // const removestr = () => {
-  //   sendLogout();
-  //   window.location.reload(false);
-  // }
+
 
   return (
     <div className="h-100" ref={myRef}>
@@ -122,7 +119,7 @@ function App() {
                 span: 16,
               }}
             >
-              <Button type="primary" htmlType="submit">
+              <Button className="bt-them" htmlType="submit" >
                 ยืนยัน
               </Button>
             </Form.Item>

src/view/Pages/Register/index.jsx

 import React, { useState } from "react";
 
-import { Row, Col, Typography, Checkbox, Form } from "antd";
+import { Row, Col, Typography, Checkbox, Form, Modal, Button } from "antd";
 
 import { useHistory } from "react-router-dom";
 
@@ -13,7 +13,11 @@ export default function App() {
 
   const handleSubmit = () => {
     if (chechBox === false) {
-      alert("กรุณาอ่านข้อกำหนดและเงื่อนไขในการให้บริการ!!");
+      // alert("กรุณาอ่านข้อกำหนดและเงื่อนไขในการให้บริการ!!");
+      Modal.info({
+        title: "ข้อกำหนดและเงื่อนไข",
+        content: `กรุณาอ่านข้อกำหนดและเงื่อนไขในการใช้บริการ`,
+      });
     } else {
       history.push("/register/registion");
     }
@@ -82,7 +86,11 @@ export default function App() {
                         validator: (_, value) =>
                           value
                             ? Promise.resolve()
-                            : Promise.reject(new Error("กรุณาคลิ๊กที่ช่องว่าง เพื่อยอมรับข้อตกลง")),
+                            : Promise.reject(
+                                new Error(
+                                  "กรุณาคลิ๊กที่ช่องว่าง เพื่อยอมรับข้อตกลง"
+                                )
+                              ),
                       },
                     ]}
                   >
@@ -97,9 +105,10 @@ export default function App() {
                 </Form>
               </div>
               <div className="div-button-submit">
-                <div className="button-submit" onClick={handleSubmit}>
-                  ถัดไป
-                </div>
+               
+                <Button className="bt-them" onClick={handleSubmit}>
+                  ยืนยัน
+                </Button>
               </div>
             </div>
           </Col>

src/view/Registion/Registion.jsx

@@ -492,7 +492,7 @@ export default function RegistrationForm() {
 
             <Form.Item {...tailFormItemLayout}>
               <Button
-                type="primary"
+                className="bt-them"
                 htmlType="submit"
                 style={{ marginTop: "30px" }}
               >

src/view/widget/RepairTable.jsx

+import React, { useState, useEffect } from "react";
+
+import { Table, Space, Typography } from "antd";
+import { Link } from "react-router-dom";
+
+// Import services
+import { FetctDetailByGarage } from "../../services";
+
+const { Column, ColumnGroup } = Table;
+const { Text } = Typography;
+
+export default function App() {
+  const [datas, setDatas] = 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);
+      });
+    };
+    getDetailByGarage();
+  }, []);
+
+  // console.log("datas", datas);
+
+  // const clickMore = (key) => {
+  //   console.log("key", key);
+  // };
+
+  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>
+
+        <ColumnGroup title="รายละเอียด">
+          <Column
+            title="ประเภทการซ่อม"
+            dataIndex="device_type"
+            key="device_type"
+          />
+
+          <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}
+                    </Text>
+                  </>
+                )}
+              </>
+            )}
+          />
+
+          <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>
+    </>
+  );
+}

src/view/widget/widgetColumn.jsx

+import React, { useEffect, useState } from "react";
+
+import { CanvasJSChart } from "canvasjs-react-charts";
+
+// Import services
+import { FetctDetailByGarage } from "../../services";
+
+export default function Ecommerce(props) {
+  const [datas, setDatas] = 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);
+      });
+    };
+    getDetailByGarage();
+  }, []);
+
+  // console.log("datas", datas.length);
+
+  let carlist = [];
+  let motolist = [];
+  let agirculturelist = [];
+
+  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);
+    }
+  }
+
+  const options = {
+    animationEnabled: true,
+    theme: "light1", // "light1", "dark1", "dark2"
+    title: {
+      text: "รายการซ่อมทั้งหมด",
+    },
+    data: [
+      {
+        type: "column",
+        // indexLabel: "{label}: {y}%",
+        startAngle: 60,
+        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: "รถยนต์" },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <CanvasJSChart
+        options={options}
+        /* onRef={ref => this.chart = ref} */
+      />
+    </>
+  );
+}

src/view/widget/widgetPie.jsx

+import React, { useEffect, useState } from "react";
+import {Typography} from 'antd'
+
+import { CanvasJSChart } from "canvasjs-react-charts";
+
+// Import services
+import { FetctDetailByGarage } from "../../services";
+
+const { Title } = Typography
+
+export default function Ecommerce(props) {
+  const [datas, setDatas] = 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);
+      });
+    };
+    getDetailByGarage();
+  }, []);
+
+  // console.log("datas", datas);
+  // console.log("datas", datas.length);
+  let carlist = [];
+  let motolist = [];
+  let agirculturelist = [];
+  let totol = []
+
+  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);
+      }
+      totol.push(datas[i])
+    }
+  } else {
+    // console.log('data is null', datas)
+  }
+
+  // console.log("datas", carlist,motolist, agirculturelist );
+
+  const options = {
+    animationEnabled: true,
+    theme: "light1", // "light1", "dark1", "dark2"
+    title: {
+      text: "รายการซ่อมทั้งหมด",
+    },
+    data: [
+      {
+        type: "doughnut", //doughnut
+        startAngle: -90,
+        // style={{width: '50px'}},
+        dataPoints: [
+          { y: carlist.length, label: "รถยนต์" },
+          { y: motolist.length, label: "รถจักรยานยนต์" },
+          { y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <div style={{ heigth: "200px" }}>
+      <CanvasJSChart
+        options={options}
+        /* onRef={ref => this.chart = ref} */
+      />
+      <Title level={5}>การซ่อมทั้งหมด {totol.length} รายการ</Title>
+    </div>
+  );
+}

yarn.lock

@@ -4416,6 +4416,11 @@
   "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz"
   "version" "1.0.30001282"
 
+"canvasjs-react-charts@^1.0.5":
+  "integrity" "sha512-8P3KnAvCqftmqf4O/xG6PlIDcTr0IvzuE4l6ACXIOROKtFmnmUu/xPEeq+0vI9Xvh7zXjzZvRqw0p1uxXr034g=="
+  "resolved" "https://registry.npmjs.org/canvasjs-react-charts/-/canvasjs-react-charts-1.0.5.tgz"
+  "version" "1.0.5"
+
 "capture-exit@^2.0.0":
   "integrity" "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g=="
   "resolved" "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz"