add 3/3/2565

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

@@ -124,10 +124,15 @@
   color: #faed26;
 }
 
-// .left {
-//   // display: flex;
-//   justify-content: left;
-// }
+.text-left {
+  // display: flex;
+  text-align: left;
+}
+
+.pageHeader {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border-radius: 1%;
+}
 
 
 

src/router/routes/Pages.jsx

@@ -131,6 +131,20 @@ const PagesRoutes = [
       layout: 'VerticalLayout',
     },
 
+    // Garage Detail
+    {
+      path: '/admin/all-garage/detail',
+      component: lazy(() => import('../../view/Admin/garageDetail')),
+      layout: 'VerticalLayout',
+    },
+
+     // Admin Approve
+     {
+      path: '/admin/approve',
+      component: lazy(() => import('../../view/Admin/Approve')),
+      layout: 'VerticalLayout',
+    },
+
 ];
 
 

src/view/Admin/Admin.jsx

@@ -12,9 +12,6 @@ function Admin() {
 
     const [datas, setDatas] = useState([]);
 
-    
-      
-
     useEffect(() => {
         const getGarage = async () => {
           await FetchGarageAll().then(async (response) => {

src/view/Admin/Approve.jsx

+import React from 'react'
+
+function Approve() {
+  return (
+    <>Approve</>
+  )
+}
+
+export default Approve
\ No newline at end of file

src/view/Admin/Garage.jsx

 import React, { useState, useEffect } from "react";
 
 import { Collapse, Col, Row, Typography, Divider } from "antd";
+
+import { RightCircleOutlined } from "@ant-design/icons";
+import { Link } from "react-router-dom";
+
 // import services
 import { FetchGarageAll } from "../../services";
 
 const { Title, Text } = Typography;
 const { Panel } = Collapse;
 
-const text = `
-  A dog is a type of domesticated animal.
-  Known for its loyalty and faithfulness,
-  it can be found as a welcome guest in many households across the world.
-`;
-
 function Garage() {
   const [datas, setDatas] = useState([]);
 
   useEffect(() => {
-    const getGarage = async () => {
-      await FetchGarageAll().then(async (response) => {
-        if (response.code === 500) {
-          console.log("data", response);
-        } else {
-          await setDatas(response.data[0]);
+    const getGarage = () => {
+      FetchGarageAll().then((response) => {
+        if (response.data) {
+          setDatas(response.data);
           //  console.log('data', response.data)
         }
         // console.log('data', response)
@@ -31,9 +27,28 @@ function Garage() {
     getGarage();
   }, []);
 
-  function callback(key) {
-    console.log(key);
-  }
+  // function callback(key) {
+  //   // console.log(key);
+  // }
+
+  const genExtra = (id, data) => (
+    
+    <Link
+      to={{
+        pathname: "/admin/all-garage/detail",
+        state: {
+          garageID: id,
+          data: data,
+        },
+      }}
+    >
+      <RightCircleOutlined />
+    </Link>
+  );
+
+  // const detailGarage = (id) => {
+  //   console.log("id", id);
+  // };
 
   return (
     <>
@@ -43,64 +58,86 @@ function Garage() {
         </Col>
 
         <Col span={24}>
-          <Collapse onChange={callback}>
-            <Panel header={datas.garage_name} key="1" extra={datas.province}>
-              <Row gutter={[0, 16]}>
-                <Divider orientation="left" plain>
-                  รายละเอียดร้านซ่อม
-                </Divider>
-                <Col
-                  xs={24}
-                  md={{ span: 11, offset: 1 }}
-                  lg={{ span: 7, offset: 1 }}
-                >
-                  <Text style={{ fontWeight: "bold" }}>User ID : </Text>
-                  <Text>{datas.garageID} </Text>
-                </Col>
-
-                <Col
-                  xs={24}
-                  md={{ span: 11, offset: 1 }}
-                  lg={{ span: 7, offset: 1 }}
-                >
-                  <Text style={{ fontWeight: "bold" }}>ชื่อร้าน : </Text>
-                  <Text>{datas.garage_name} </Text>
-                </Col>
-
-                <Col
-                  xs={24}
-                  md={{ span: 11, offset: 1 }}
-                  lg={{ span: 7, offset: 1 }}
-                >
-                  <Text style={{ fontWeight: "bold" }}>ชื่อ-สกุล : </Text>
-                  <Text>{datas.user_name} </Text>
-                </Col>
-
-                <Col
-                  xs={24}
-                  md={{ span: 11, offset: 1 }}
-                  lg={{ span: 7, offset: 1 }}
-                >
-                  <Text style={{ fontWeight: "bold" }}>E-Mail : </Text>
-                  <Text>{datas.email} </Text>
-                </Col>
-
-                <Col
-                  xs={24}
-                  md={{ span: 11, offset: 1 }}
-                  lg={{ span: 7, offset: 1 }}
-                >
-                  <Text style={{ fontWeight: "bold" }}>ประเภทร้านซ่อม : </Text>
-                  <Text>{datas.garage_type} </Text>
-                </Col>
-              </Row>
-            </Panel>
-            <Panel header="This is panel header 2" key="2">
-              <p>{text}</p>
-            </Panel>
-            <Panel header="This is panel header 3" key="3">
-              <p>{text}</p>
-            </Panel>
+          <Collapse>
+            {datas.length !== 0 ? (
+              <>
+                {datas.map((val, index) => {
+                  return (
+                    <>
+                      <Panel
+                        header={val.garage_name}
+                        key={index}
+                        extra={genExtra(val.garageID, val)}
+                      >
+                        <Row gutter={[0, 16]} className="text-left">
+                          <Divider orientation="left" plain>
+                            รายละเอียดร้านซ่อม
+                          </Divider>
+
+                          <Col xs={24} lg={{ span: 7, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              ชื่อร้าน :{" "}
+                            </Text>
+                            <Text>{val.garage_name} </Text>
+                          </Col>
+
+                          <Col xs={24} lg={{ span: 7, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              ชื่อ-สกุล :{" "}
+                            </Text>
+                            <Text>{val.user_name} </Text>
+                          </Col>
+
+                          <Col xs={24} lg={{ span: 7, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              E-Mail :{" "}
+                            </Text>
+                            <Text>{val.email} </Text>
+                          </Col>
+
+                          <Col xs={24} lg={{ span: 7, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              ประเภทร้านซ่อม :{" "}
+                            </Text>
+                            <Text>
+                              {JSON.parse(val.garage_type).join(",  ")}{" "}
+                            </Text>
+                          </Col>
+
+                          <Col xs={24} lg={{ span: 7, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              เวลาเปิด - ปิด :{" "}
+                            </Text>
+                            <Text>
+                              {val.on_time} - {val.off_time}{" "}
+                            </Text>
+                          </Col>
+
+                          <Col xs={24} lg={{ span: 7, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              เบอร์โทรศัพท์ :{" "}
+                            </Text>
+                            <Text>{val.tel} </Text>
+                          </Col>
+
+                          <Col xs={24} lg={{ span: 15, offset: 1 }}>
+                            <Text style={{ fontWeight: "bold" }}>
+                              ที่อยู่ :{" "}
+                            </Text>
+                            <Text>
+                              {val.address_number} หมู่ {val.moo} ซอย{" "}
+                              {val.alley} ถนน {val.road} ต.{val.sub_district} อ.
+                              {val.district} จ.{val.province} {val.pos_code}{" "}
+                            </Text>
+                          </Col>
+                        </Row>
+                        <Divider />
+                      </Panel>
+                    </>
+                  );
+                })}
+              </>
+            ) : null}
           </Collapse>
         </Col>
       </Row>

src/view/Admin/garageDetail.jsx

+import React, { useState, useEffect } from "react";
+
+import {
+  PageHeader,
+  Button,
+  Statistic,
+  Descriptions,
+  Row,
+  Col,
+  Modal,
+} from "antd";
+
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from "react-google-maps";
+
+import { useLocation } from "react-router-dom";
+
+// Import services
+import { FetctDetailByGarage } from "../../services";
+
+import IconCar from "../../assets/icons/car.png";
+
+export default function GarageDetail() {
+  let location = useLocation;
+  const garageID = location().state;
+  const garage = location().state.data;
+
+  const [datas, setDatas] = useState([]);
+
+  const [visible, setVisible] = useState(false);
+
+  //   console.log(garage);
+
+  useEffect(() => {
+    const getDetailByGarage = async () => {
+      await FetctDetailByGarage(garageID).then(async (response) => {
+        await setDatas(response.data);
+      });
+    };
+    getDetailByGarage();
+  }, [garageID]);
+
+  //   console.log(datas);
+
+  let newData = [];
+  let car = [];
+  let moto = [];
+  let arg = [];
+  let succeed = [];
+  let notSucceed = [];
+
+  if (datas !== null) {
+    for (let i = 0; i < datas.length; i++) {
+      newData.push(datas[i]);
+
+      if (datas[i].device_type === "รถยนต์") {
+        car.push(datas[i]);
+      }
+      if (datas[i].device_type === "รถจักรยานยนต์") {
+        moto.push(datas[i]);
+      }
+      if (datas[i].device_type === "อุปกรณ์การเกษตร") {
+        arg.push(datas[i]);
+      }
+
+      if (datas[i].status === "สำเร็จ") {
+        succeed.push(datas[i]);
+      }
+      if (datas[i].status === "อยู่ระหว่างการซ่อม") {
+        notSucceed.push(datas[i]);
+      }
+    }
+  }
+
+  let newLatLng = [
+    {
+      lat: JSON.parse(garage.address_map)[0],
+      lng: JSON.parse(garage.address_map)[1],
+    },
+  ];
+
+  // console.log(newLatLng);
+
+  const MapWithAMarker = withScriptjs(
+    withGoogleMap(() => (
+      <GoogleMap defaultZoom={15} defaultCenter={newLatLng[0]}>
+        <Marker
+          position={newLatLng[0]}
+          icon={{
+            url: IconCar,
+            scaledSize: new window.google.maps.Size(40, 40),
+          }}
+        />
+      </GoogleMap>
+    ))
+  );
+
+  return (
+    <>
+      <Row className="div-p-5">
+        <Col span={24} className="pageHeader" style={{ padding: "2%" }}>
+          <PageHeader
+            className="site-page-header"
+            onBack={() => window.history.back()}
+            title={garage.garage_name}
+            subTitle="ข้อมูลการซ่อมของร้าน"
+            extra={[
+              <Button key="3" onClick={() => setVisible(true)}>
+                ดูตำแหน่งของร้าน
+              </Button>,
+            ]}
+          >
+            <Row gutter={[0, 16]}>
+              <Col span={24}>
+                <Descriptions size="small" column={2}>
+                  <Descriptions.Item label="เจ้าของร้าน">
+                    คุณ {garage.user_name}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="ชื่อร้าน">
+                    {garage.garage_name}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="ประเภท">
+                    {JSON.parse(garage.garage_type).join(",  ")}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="เข้าร่วมระบบ">
+                    {garage.registration_date}
+                  </Descriptions.Item>
+                </Descriptions>
+              </Col>
+
+              <Statistic
+                title="การซ่อมทั้งหมด"
+                value={newData.length}
+                style={{
+                  margin: "0 20px",
+                }}
+              />
+              <Statistic
+                title="ที่สำเร็จ"
+                value={succeed.length}
+                style={{
+                  margin: "0 20px",
+                }}
+              />
+              <Statistic
+                title="กำลังดำเนินการซ่อม"
+                value={notSucceed.length}
+                style={{
+                  margin: "0 20px",
+                }}
+              />
+              <br />
+              <Statistic
+                title="รถยนต์"
+                value={car.length}
+                style={{
+                  margin: "0 20px",
+                }}
+              />
+              <Statistic
+                title="รถจักรยานยนต์"
+                value={moto.length}
+                style={{
+                  margin: "0 20px",
+                }}
+              />
+              <Statistic
+                title="อุปกรณ์การเกษตร"
+                value={arg.length}
+                style={{
+                  margin: "0 20px",
+                }}
+              />
+            </Row>
+          </PageHeader>
+        </Col>
+      </Row>
+
+      <Modal
+        title={garage.garage_name}
+        centered
+        visible={visible}
+        onOk={() => setVisible(false)}
+        onCancel={() => setVisible(false)}
+        width={700}
+      >
+        <MapWithAMarker
+          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYQsoMGSxKVOe6vilIiEedgPhRDjcPbC8&libraries=geometry,drawing,places"
+          loadingElement={<div style={{ height: "100%" }} />}
+          containerElement={<div style={{ height: "400px" }} />}
+          mapElement={<div style={{ height: "100%" }} />}
+        />
+      </Modal>
+    </>
+  );
+}

src/view/Dashboards/member/ShowDetailMember.jsx

@@ -8,7 +8,6 @@ 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;

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

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

src/view/Registion/googleMap.jsx

-import { Col } from 'antd'
+import { Col,   } from 'antd'
 import {
     withScriptjs,
     withGoogleMap,
@@ -11,7 +11,7 @@ import {
   const onMarkerDragEnd = (event) => {
     newLatLng[0].lat = event.latLng.lat()
     newLatLng[0].lng = event.latLng.lng()
-    console.log('newLat', newLatLng[0].lat, 'newLng', newLatLng[0].lng)
+    // console.log('newLat', newLatLng[0].lat, 'newLng', newLatLng[0].lng)
   }
 
   const MapWithAMarker = withScriptjs(