Skip to content

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

add dashbroad 8/3/2565

parent 44042d09
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 37 deletions
package-lock.json
View file @ 5e99d003
......@@ -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
View file @ 5e99d003
......@@ -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
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 { 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
\ No newline at end of file
export default Admin;
src/view/Admin/Garage.jsx
View file @ 5e99d003
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
View file @ 5e99d003
......@@ -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
View file @ 5e99d003
......@@ -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 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