add dashbroad 8/3/2565

package-lock.json

@@ -22998,7 +22998,6 @@
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz",
       "integrity": "sha512-OyVrrPvvFcHvV0ssz5EDZ+7Rf5qLat/+mmujjchNw5FfbJWNDwkpQ99EcVE6+FtNRmX9wFa1LGNpZLUTvp/4GQ==",
-      "license": "MIT",
       "dependencies": {
         "classnames": "^2.2.6",
         "rc-resize-observer": "^1.0.0",

src/services/index.js

@@ -250,6 +250,18 @@ export const FetchReportAll = () => {
     });
 };
 
+// Get Detail
+export const FetchDetailAll = () => {
+  return axios
+    .get(process.env.REACT_APP_SECRET_API + "/repairdetail/all")
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+
+
 // // logout
 // export const sendLogout = () => {
 //   return localStorage.removeItem("user");

src/view/Admin/Admin.jsx

-import React, { useState, useEffect} from 'react'
-
+import React, { useState, useEffect } from "react";
+import { Row, Col, Card, Typography, Divider } from "antd";
 
+import { UserOutlined, ShopOutlined, AlertOutlined } from "@ant-design/icons";
 
 // import services
-import { FetchGarageAll } from "../../services";
+import { FetchGarageAll, FetchMemberAll, FetchGarage } from "../../services";
+
+import { Link } from "react-router-dom";
+
+// Import Component
+import Reported from "./Reported";
+import Member from "./MemberSetting/Member";
+import Garage from "./Garage";
 
+import ChartsAllRepair from "../../view/widget/ChartsAllRepair";
 
+const { Text } = Typography;
 
+const gridStyle = {
+  width: "100%",
+  textAlign: "center",
+  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
+  borderRadius: "4%",
+  backgroundColor: "#096dd9",
+};
 
 function Admin() {
+  const [datas, setDatas] = useState([]);
+  // const [report, setReport] = useState([]);
+  const [member, setMember] = useState([]);
+  const [garageAll, setGarageAll] = useState([]);
+
+  useEffect(() => {
+    const getGarage = async () => {
+      await FetchGarageAll().then(async (response) => {
+        if (response.code === 500) {
+          console.log("data", response);
+        } else {
+          await setDatas(response.data);
+          //  console.log('data', response.data)
+        }
+      });
+    };
+    getGarage();
+
+    const getMember = async () => {
+      await FetchMemberAll().then(async (response) => {
+        if (response.code === 500) {
+          console.log("data", response);
+        } else {
+          await setMember(response.data);
+        }
+        // console.log('data', response)
+      });
+    };
+    getMember();
+
+    const getGarageAll = async () => {
+      await FetchGarage().then((response) => {
+        if (response.code === 500) {
+          console.log("data", response);
+        } else {
+          // console.log("data", response);
+          setGarageAll(response.data);
+        }
+      });
+    };
+    getGarageAll();
+  }, []);
+  // console.log("data", datas);
+
+  let non_approve = [];
+  if (garageAll !== null) {
+    garageAll.forEach((e) => {
+      if (e.confirmation === "non-approved") {
+        non_approve.push(e);
+      }
+    });
+  }
 
-    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);
-              //  console.log('data', response.data)
-            }
-            // console.log('data', response)
-          });
-        };
-        getGarage();
-      }, []);
-
-    
-
-      
   return (
-    <>Admin</>
-  )
+    <>
+      <div style={{ padding: "3% 2% 0 2%" }}>
+        <Row gutter={[0, 16]}>
+          <Col xs={{ span: 14, offset: 5 }} lg={{ span: 6, offset: 1 }}>
+            <Link to={"/admin/all-garage"}>
+              <Card.Grid hoverable={false} style={gridStyle}>
+                <Row>
+                  <Col span={8}>
+                    <ShopOutlined
+                      style={{ fontSize: "400%", color: "#ffff" }}
+                    />
+                  </Col>
+                  <Col span={16}>
+                    <Text style={{ color: "#bfbfbf" }}>จำนวนร้านซ่อม</Text>
+                    <br />
+                    <Text style={{ color: "#ffff", fontSize: "25px" }}>
+                      {datas.length}
+                    </Text>
+                  </Col>
+                </Row>
+              </Card.Grid>
+            </Link>
+          </Col>
+          <Col xs={{ span: 14, offset: 5 }} lg={{ span: 6, offset: 2 }}>
+            <Link to={"/admin/all-member"}>
+              <Card.Grid hoverable={false} style={gridStyle}>
+                <Row>
+                  <Col span={8}>
+                    <UserOutlined
+                      style={{ fontSize: "400%", color: "#ffff" }}
+                    />
+                  </Col>
+                  <Col span={16}>
+                    <Text style={{ color: "#bfbfbf" }}>ลูกค้าสมาชิก</Text>
+                    <br />
+                    <Text style={{ color: "#ffff", fontSize: "25px" }}>
+                      {member.length}
+                    </Text>
+                  </Col>
+                </Row>
+              </Card.Grid>
+            </Link>
+          </Col>
+          <Col xs={{ span: 14, offset: 5 }} lg={{ span: 6, offset: 2 }}>
+            <Link to={"/admin/approve"}>
+              {/* <Badge size="default" count={non_approve.length}> */}
+              <Card.Grid hoverable={false} style={gridStyle}>
+                <Row>
+                  <Col span={8}>
+                    <AlertOutlined
+                      style={{ fontSize: "400%", color: "#ffff" }}
+                    />
+                  </Col>
+                  <Col span={16}>
+                    <Text style={{ color: "#bfbfbf" }}>
+                      ร้านซ่อมที่ยังไม่อนุมัติ
+                    </Text>
+                    <br />
+                    <Text style={{ color: "#ffff", fontSize: "25px" }}>
+                      {non_approve.length}
+                    </Text>
+                  </Col>
+                </Row>
+              </Card.Grid>
+              {/* </Badge> */}
+            </Link>
+          </Col>
+        </Row>
+      </div>
+
+      <Divider />
+
+      <div>
+        <Row gutter={[0, 16]}>
+          <Col xs={24} lg={{ span: 16 }}>
+            {/* <Title level={4}>การซ่อมทั้งหมด</Title> */}
+            <ChartsAllRepair />
+          </Col>
+
+          <Col
+            style={{ height: "400px", overflowY: "scroll" }}
+            className="pageHeader"
+            xs={24}
+            lg={{ span: 8 }}
+          >
+            <Reported />
+          </Col>
+        </Row>
+      </div>
+
+      <Divider />
+
+      <div>
+        <Row gutter={[0, 16]}>
+          <Col
+            style={{ height: "400px", overflowY: "scroll" }}
+            xs={24}
+            lg={{ span: 12 }}
+          >
+            <Garage />
+          </Col>
+          <Col
+            style={{ height: "400px", overflowY: "scroll" }}
+            xs={24}
+            lg={{ span: 12 }}
+          >
+            <Member />
+          </Col>
+        </Row>
+      </div>
+    </>
+  );
 }
 
-export default Admin
+export default Admin;
\ 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 { Collapse, Col, Row, Typography, Divider, Avatar, Image } from "antd";
 
 import { RightCircleOutlined } from "@ant-design/icons";
 import { Link } from "react-router-dom";
@@ -8,6 +8,9 @@ import { Link } from "react-router-dom";
 // import services
 import { FetchGarageAll } from "../../services";
 
+// import Image
+import GarageIcon from "../../assets/icons/garage.png";
+
 const { Title, Text } = Typography;
 const { Panel } = Collapse;
 
@@ -25,6 +28,7 @@ function Garage() {
       });
     };
     getGarage();
+
   }, []);
 
   // function callback(key) {
@@ -32,7 +36,6 @@ function Garage() {
   // }
 
   const genExtra = (id, data) => (
-    
     <Link
       to={{
         pathname: "/admin/all-garage/detail",
@@ -57,15 +60,29 @@ function Garage() {
           <Title level={3}> รายชื่อร้านซ่อมทั้งหมด </Title>
         </Col>
 
+        {/* defaultActiveKey={["0"]} */}
+
         <Col span={24}>
-          <Collapse defaultActiveKey={['0']}>
+          <Collapse >
             {datas.length !== 0 ? (
               <>
                 {datas.map((val, index) => {
                   return (
                     <>
                       <Panel
-                        header={val.garage_name}
+                        header={
+                          <>
+                            <Avatar
+                              src={
+                                <Image
+                                  src={GarageIcon}
+                                  style={{ width: 30, paddingRight: "3px" }}
+                                />
+                              }
+                            />
+                            {val.garage_name}
+                          </>
+                        }
                         key={index}
                         extra={genExtra(val.garageID, val)}
                       >

src/view/Admin/MemberSetting/Member.jsx

@@ -196,7 +196,7 @@ export default function Member() {
     </Row>
       <div className="div-p-5">
         <Table
-          scroll={{ x: 500 }}
+          scroll={{ x: 400 }}
           bordered
           columns={columns}
           dataSource={datas}

src/view/Admin/Reported.jsx

@@ -4,7 +4,7 @@ import { Col, Row, Comment, List, Typography } from "antd";
 
 import { FetchReportAll } from "../../services";
 
-import { PhoneOutlined } from "@ant-design/icons";
+import { PhoneOutlined, UserOutlined, CarOutlined } from "@ant-design/icons";
 
 // import IconGarage from "../../assets/icons/garage.png";
 import IconMember from "../../assets/icons/profile.png";
@@ -30,7 +30,7 @@ function Reported() {
     <>
       <Row className="text-left div-p-5">
         <Col>
-          <Title level={3}>การแจ้งปัญหาการใช้งาน</Title>
+          <Title level={3}>ปัญหาการใช้งาน</Title>
         </Col>
 
         <Col style={{ padding: "2%" }} span={24}>
@@ -48,11 +48,11 @@ function Reported() {
                         <span key="comment-basic-reply-to">
                           {item.party === "garage" ? (
                             <>
-                              ร้านซ่อม, <PhoneOutlined /> {item.report_tel}
+                             <CarOutlined /> ร้านซ่อม, <PhoneOutlined /> {item.report_tel}
                             </>
                           ) : (
                             <>
-                              ลูกค้า, <PhoneOutlined /> {item.report_tel}
+                             <UserOutlined /> ลูกค้า, <PhoneOutlined /> {item.report_tel}
                             </>
                           )}
                         </span>,

src/view/widget/ChartsAllRepair.jsx

+import React, { useEffect, useState } from "react";
+// import ReactDOM from 'react-dom';
+import { Pie } from "@ant-design/plots";
+
+import { FetchDetailAll } from "../../services";
+import { Typography } from "antd";
+
+const { Title } = Typography;
+
+export default function DemoPie() {
+  const [datas, setDatas] = useState([]);
+
+  useEffect(() => {
+    const getDetail = async () => {
+      await FetchDetailAll().then((response) => {
+        if (response.data) {
+          setDatas(response.data);
+        }
+      });
+    };
+    getDetail();
+  }, []);
+
+//   console.log("all", datas);
+
+  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]);
+    }
+  }
+
+  const data = [
+    {
+      type: "รถยนต์",
+      value: carlist.length,
+    },
+    {
+      type: "อุปกรณ์การเกษตร",
+      value: agirculturelist.length,
+    },
+    {
+      type: "รถจักรยานยนต์",
+      value: motolist.length,
+    },
+  ];
+  const config = {
+    appendPadding: 10,
+    data,
+    angleField: "value",
+    colorField: "type",
+    radius: 0.8,
+    label: {
+      type: "outer",
+    },
+    // 自定义状态样式
+    state: {
+      active: {
+        style: {
+          lineWidth: 0,
+          fillOpacity: 0.65,
+        },
+      },
+    },
+    // 添加 element 选中和激活交互
+    interactions: [
+      {
+        type: "element-single-selected",
+      },
+      {
+        type: "element-active",
+      },
+    ],
+  };
+  return (
+    <>
+      <Pie {...config} />
+      <Title level={5}>การซ่อมทั้งระบบ {totol.length} รายการ</Title>
+    </>
+  );
+}