Skip to content

R
Repair-app
Commit 5e99d003 authored by chaiwat's avatar chaiwat
Browse files
Options

add dashbroad 8/3/2565

parent 44042d09
Show whitespace changes
Inline Side-by-side
Showing with 301 additions and 20 deletions
package-lock.json
View file @ 5e99d003
...@@ -22998,7 +22998,6 @@ ...@@ -22998,7 +22998,6 @@
"version": "3.4.2", "version": "3.4.2",
"resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz", "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz",
"integrity": "sha512-OyVrrPvvFcHvV0ssz5EDZ+7Rf5qLat/+mmujjchNw5FfbJWNDwkpQ99EcVE6+FtNRmX9wFa1LGNpZLUTvp/4GQ==", "integrity": "sha512-OyVrrPvvFcHvV0ssz5EDZ+7Rf5qLat/+mmujjchNw5FfbJWNDwkpQ99EcVE6+FtNRmX9wFa1LGNpZLUTvp/4GQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"classnames": "^2.2.6", "classnames": "^2.2.6",
"rc-resize-observer": "^1.0.0", "rc-resize-observer": "^1.0.0",
src/services/index.js
View file @ 5e99d003
...@@ -250,6 +250,18 @@ export const FetchReportAll = () => { ...@@ -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 // // logout
// export const sendLogout = () => { // export const sendLogout = () => {
// return localStorage.removeItem("user"); // return localStorage.removeItem("user");
......
src/view/Admin/Admin.jsx
View file @ 5e99d003
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 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";
function Admin() { 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 [datas, setDatas] = useState([]);
// const [report, setReport] = useState([]);
const [member, setMember] = useState([]);
const [garageAll, setGarageAll] = useState([]);
useEffect(() => { useEffect(() => {
const getGarage = async () => { const getGarage = async () => {
...@@ -21,18 +40,158 @@ function Admin() { ...@@ -21,18 +40,158 @@ function Admin() {
await setDatas(response.data); await setDatas(response.data);
// console.log('data', response.data) // console.log('data', response.data)
} }
// console.log('data', response)
}); });
}; };
getGarage(); 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);
}
});
}
return ( 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
View file @ 5e99d003
import React, { useState, useEffect } from "react"; 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 { RightCircleOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
...@@ -8,6 +8,9 @@ import { Link } from "react-router-dom"; ...@@ -8,6 +8,9 @@ import { Link } from "react-router-dom";
// import services // import services
import { FetchGarageAll } from "../../services"; import { FetchGarageAll } from "../../services";
// import Image
import GarageIcon from "../../assets/icons/garage.png";
const { Title, Text } = Typography; const { Title, Text } = Typography;
const { Panel } = Collapse; const { Panel } = Collapse;
...@@ -25,6 +28,7 @@ function Garage() { ...@@ -25,6 +28,7 @@ function Garage() {
}); });
}; };
getGarage(); getGarage();
}, []); }, []);
// function callback(key) { // function callback(key) {
...@@ -32,7 +36,6 @@ function Garage() { ...@@ -32,7 +36,6 @@ function Garage() {
// } // }
const genExtra = (id, data) => ( const genExtra = (id, data) => (
<Link <Link
to={{ to={{
pathname: "/admin/all-garage/detail", pathname: "/admin/all-garage/detail",
...@@ -57,15 +60,29 @@ function Garage() { ...@@ -57,15 +60,29 @@ function Garage() {
<Title level={3}> รายชื่อร้านซ่อมทั้งหมด </Title> <Title level={3}> รายชื่อร้านซ่อมทั้งหมด </Title>
</Col> </Col>
{/* defaultActiveKey={["0"]} */}
<Col span={24}> <Col span={24}>
<Collapse defaultActiveKey={['0']}> <Collapse >
{datas.length !== 0 ? ( {datas.length !== 0 ? (
<> <>
{datas.map((val, index) => { {datas.map((val, index) => {
return ( return (
<> <>
<Panel <Panel
header={val.garage_name} header={
<>
<Avatar
src={
<Image
src={GarageIcon}
style={{ width: 30, paddingRight: "3px" }}
/>
}
/>
{val.garage_name}
</>
}
key={index} key={index}
extra={genExtra(val.garageID, val)} extra={genExtra(val.garageID, val)}
> >
......
src/view/Admin/MemberSetting/Member.jsx
View file @ 5e99d003
...@@ -196,7 +196,7 @@ export default function Member() { ...@@ -196,7 +196,7 @@ export default function Member() {
</Row> </Row>
<div className="div-p-5"> <div className="div-p-5">
<Table <Table
scroll={{ x: 500 }} scroll={{ x: 400 }}
bordered bordered
columns={columns} columns={columns}
dataSource={datas} dataSource={datas}
......
src/view/Admin/Reported.jsx
View file @ 5e99d003
...@@ -4,7 +4,7 @@ import { Col, Row, Comment, List, Typography } from "antd"; ...@@ -4,7 +4,7 @@ import { Col, Row, Comment, List, Typography } from "antd";
import { FetchReportAll } from "../../services"; 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 IconGarage from "../../assets/icons/garage.png";
import IconMember from "../../assets/icons/profile.png"; import IconMember from "../../assets/icons/profile.png";
...@@ -30,7 +30,7 @@ function Reported() { ...@@ -30,7 +30,7 @@ function Reported() {
<> <>
<Row className="text-left div-p-5"> <Row className="text-left div-p-5">
<Col> <Col>
<Title level={3}>การแจ้งปัญหาการใช้งาน</Title> <Title level={3}>ปัญหาการใช้งาน</Title>
</Col> </Col>
<Col style={{ padding: "2%" }} span={24}> <Col style={{ padding: "2%" }} span={24}>
...@@ -48,11 +48,11 @@ function Reported() { ...@@ -48,11 +48,11 @@ function Reported() {
<span key="comment-basic-reply-to"> <span key="comment-basic-reply-to">
{item.party === "garage" ? ( {item.party === "garage" ? (
<> <>
ร้านซ่อม, <PhoneOutlined /> {item.report_tel} <CarOutlined /> ร้านซ่อม, <PhoneOutlined /> {item.report_tel}
</> </>
) : ( ) : (
<> <>
ลูกค้า, <PhoneOutlined /> {item.report_tel} <UserOutlined /> ลูกค้า, <PhoneOutlined /> {item.report_tel}
</> </>
)} )}
</span>, </span>,
......
src/view/widget/ChartsAllRepair.jsx 0 → 100644
View file @ 5e99d003
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>
</>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment