Skip to content

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

add 26/02/65

parent b0050fb6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1078 additions and 98 deletions
src/Layouts/Header/tabHeader.jsx
View file @ ebf673ab
......@@ -18,7 +18,19 @@ export default function App() {
if (checkLocal === null) {
history.push("/");
} else {
history.push("/dashboard");
if (checkLocal.userData.userId === "admin") {
history.push({
pathname: "/admin/dashboard",
state: checkLocal.userData.userId,
});
} else {
history.push({
pathname: "/dashboard",
state: checkLocal.userData.userId,
});
}
// console.log("test", checkLocal.userData.userId);
}
};
// const onclickLogin = () => {
......
src/Layouts/Menu/menuAdmin.jsx 0 → 100644
View file @ ebf673ab
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Col, Layout, Menu, Row, Typography, Avatar, Badge } from "antd";
import {
HomeOutlined,
SolutionOutlined,
ToolOutlined,
TeamOutlined,
// SettingOutlined,
LogoutOutlined,
// DollarOutlined,
} from "@ant-design/icons";
// import services
import { sendLogout, FetchGarage } from "../../services";
const { Sider } = Layout;
const { SubMenu } = Menu;
const { Title } = Typography;
export default function App() {
const [collapsed, setCollapsed] = useState(false);
const [datas, setDatas] = useState([]);
let garageName = JSON.parse(localStorage.getItem("user")).userData.userId;
// console.log("test Logout", garageName);
useEffect(() => {
const getGarage = async () => {
await FetchGarage().then(async (response) => {
if (response.code === 500) {
console.log("data", response);
} else {
await setDatas(response.data);
}
// console.log('data', response)
});
};
getGarage();
}, []);
let countNoti = [];
if (datas !== null) {
datas.forEach((e) => {
if (e.confirmation === "non-approved") {
countNoti.push(e.confirmation);
}
});
}
// console.log("data", countNoti.length);
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
};
const handleLogout = () => {
// console.log("test Logout");
sendLogout();
setTimeout(() => {
window.location.reload(false);
}, 1000);
};
return (
<>
<div
style={{
mixHeight: 360,
backgroundColor: "#001529",
overflowY: "scroll",
}}
>
<Sider
theme="dark"
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
>
<Row className="display-flex-center">
<Col>
<Title level={5} style={{ color: "#ffbf00" }}>
<Avatar
style={{
backgroundColor: "#ffbf00",
verticalAlign: "middle",
}}
size="large"
gap={"gap"}
>
{garageName}
</Avatar>{" "}
&nbsp;
{garageName}
</Title>
</Col>
</Row>
<Menu
theme="dark"
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="1" icon={<HomeOutlined />}>
<Link to={"/admin/dashboard"}>หน้าแรก</Link>
</Menu.Item>
<SubMenu key="sub1" icon={<ToolOutlined />} title="สมาชิก">
<Menu.Item key="3" icon={<ToolOutlined />}>
<Link to={"/admin/all-garage"}>ร้านซ่อม</Link>
</Menu.Item>
<Menu.Item key="4" icon={<TeamOutlined />}>
<Link to={"/admin/all-member"}>ลูกค้าสมาชิก</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="6" icon={<SolutionOutlined />}>
<Badge count={countNoti.length}>
<Link
to={"/admin/approve"}
style={{ color: "#f0f2f5", paddingRight: "20px" }}
>
อนุมัติร้านซ่อม
</Link>
</Badge>
</Menu.Item>
{/*
<Menu.Item key="10" icon={<DollarOutlined />}>
<Link to={"/dashboard/payment"}>การชำระเงิน</Link>
</Menu.Item> */}
{/* <Menu.Item key="8" icon={<SettingOutlined />}>
<Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
</Menu.Item> */}
<Menu.Item
onClick={handleLogout}
key="11"
icon={<LogoutOutlined />}
>
ออกจากระบบ
</Menu.Item>
</Menu>
</Sider>
</div>
</>
);
}
src/Layouts/Menu/menuDashboard.jsx
View file @ ebf673ab
......@@ -10,7 +10,7 @@ import {
TeamOutlined,
FileSearchOutlined,
CommentOutlined,
SettingOutlined,
// SettingOutlined,
LogoutOutlined,
// DollarOutlined,
} from "@ant-design/icons";
......@@ -110,9 +110,9 @@ export default function App() {
<Link to={"/dashboard/payment"}>การชำระเงิน</Link>
</Menu.Item> */}
<Menu.Item key="8" icon={<SettingOutlined />}>
{/* <Menu.Item key="8" icon={<SettingOutlined />}>
<Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
</Menu.Item>
</Menu.Item> */}
<Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
......
src/Layouts/Menu/menulist.jsx
View file @ ebf673ab
......@@ -8,6 +8,7 @@ import {
SearchOutlined,
FileSearchOutlined,
CommentOutlined,
LoginOutlined
} from "@ant-design/icons";
import { Link } from "react-router-dom";
......@@ -56,11 +57,17 @@ export default function App() {
<Menu.Item key="6" icon={<FileSearchOutlined />}>
<Link to={"/status"}>เช็คสถานะการซ่อม</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="3" icon={<LoginOutlined />}>
<Link to={"/login"}>เข้าสู่ระบบ</Link>
</Menu.Item>
</Menu>
</Sider>
</div>
......
src/Layouts/VerticalLayout.jsx
View file @ ebf673ab
......@@ -7,6 +7,7 @@ import { Layout } from "antd";
import HeaderTap from "./Header/tabHeader";
import MenuList from "./Menu/menulist";
import MenuDashboard from "./Menu/menuDashboard";
import MenuAdmin from "./Menu/menuAdmin";
const { Content } = Layout;
......@@ -22,16 +23,22 @@ export default function VerticalLayout(props) {
setChechLocal(JSON.parse(localStorage.getItem("user")));
}, []);
if (checkLocal === null) {
history.push("/");
} else {
if (checkLocal.userData.userId === "admin") {
history.push({
pathname: "/admin/dashboard",
state: checkLocal.userData.userId,
});
} else {
history.push({
pathname: "/dashboard",
state: checkLocal.userData.userId,
});
// console.log('test', checkLocal)
}
// console.log("test", checkLocal.userData.userId);
}
return (
......@@ -47,9 +54,7 @@ export default function VerticalLayout(props) {
/>
{checkLocal === null ? (
<Layout
style={{ minHeight: "90vh", maxHeight: "90vh" }}
>
<Layout style={{ minHeight: "90vh", maxHeight: "90vh" }}>
<MenuList />
<Layout className="site-layout">
......@@ -67,6 +72,34 @@ export default function VerticalLayout(props) {
</Layout>
</Layout>
) : (
<>
{checkLocal.userData.userId === "admin" ? (
<>
<Layout
style={{
minHeight: "90vh",
maxHeight: "90vh",
// paddingTop: "0.5vh",
}}
>
<MenuAdmin />
<Layout className="site-layout">
<Content style={{ margin: "1vh 1vh" }}>
<div
className="site-layout-background"
style={{ mixHeight: 360, overflowY: "scroll" }}
>
{children}
</div>
</Content>
{/* <Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer> */}
</Layout>
</Layout>
</>
) : (
<>
<Layout
style={{
minHeight: "90vh",
......@@ -89,6 +122,9 @@ export default function VerticalLayout(props) {
</Footer> */}
</Layout>
</Layout>
</>
)}
</>
)}
</>
);
......
src/assets/fonts/index.css
View file @ ebf673ab
......@@ -2,6 +2,7 @@
body {
font-family: 'Mitr', sans-serif;
}
.bg-freecar {
......
src/assets/less/Layouts/header.less
View file @ ebf673ab
......@@ -6,6 +6,7 @@
}
.site-layout .site-layout-background {
background: #fff;
// #f0f2f5
}
.footer {
......@@ -17,3 +18,4 @@
.footer p {
text-align: center;
}
src/router/routes/Pages.jsx
View file @ ebf673ab
......@@ -114,6 +114,23 @@ const PagesRoutes = [
component: lazy(() => import('../../view/Dashboards/member/member')),
layout: 'VerticalLayout',
},
// Admin
{
path: '/admin/dashboard',
component: lazy(() => import('../../view/Admin/Admin')),
layout: 'VerticalLayout',
},
// Garage
{
path: '/admin/all-garage',
component: lazy(() => import('../../view/Admin/Garage')),
layout: 'VerticalLayout',
},
];
......
src/services/index.js
View file @ ebf673ab
......@@ -20,6 +20,8 @@ export const sendLogin = (data) => {
.then((response) => {
if (response.data.code === 200) {
localStorage.setItem("user", JSON.stringify(response.data));
} else if (response.data.code === 202) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response.data;
})
......@@ -33,17 +35,24 @@ export const sendLogout = () => {
return localStorage.removeItem("user");
};
// get list All garage
// get list All garage is Approve
export const FetchGarageAll = () => {
return (
axios
return axios
.get(process.env.REACT_APP_SECRET_API + "/garage/all")
// .get("http://localhost:4000/garage/all")
.then((response) => response.data)
.catch((err) => {
console.log(err);
})
);
});
};
// get list garage All
export const FetchGarage = () => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/garage/all-repair")
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Fetch Thai Address API
......@@ -140,7 +149,6 @@ export const FetchSpareByDetailID = (data) => {
// Delete Spare
export const DeleteSpare = (data) => {
return axios
.delete(process.env.REACT_APP_SECRET_API + "/repairdetail/delete-spare", {
data: { id: data },
......@@ -162,7 +170,6 @@ export const UpdateDetail = (data) => {
});
};
// Insert Member
export const InsertMember = (data) => {
// console.log('service', data)
......@@ -176,9 +183,8 @@ export const InsertMember = (data) => {
});
};
// get data FetctMemberByGaragename
export const FetctMemberByGarage= (data) => {
export const FetctMemberByGarage = (data) => {
// console.log(data)
return axios
......@@ -191,8 +197,32 @@ export const FetctMemberByGarage= (data) => {
});
};
// Insert Report
export const InsertReport = (data) => {
// console.log('service', data)
return axios
.post(process.env.REACT_APP_SECRET_API + "/report/insert", data)
.then((response) => {
return response.data;
})
.catch((err) => {
console.log(err);
});
};
// get All Member
export const FetchMemberAll = () => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/member/all")
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// // logout
// export const sendLogout = () => {
// return localStorage.removeItem("user");
// };
src/view/Admin/Admin.jsx 0 → 100644
View file @ ebf673ab
import React, { useState, useEffect} from 'react'
// import services
import { FetchGarageAll } from "../../services";
function Admin() {
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</>
)
}
export default Admin
\ No newline at end of file
src/view/Admin/Garage.jsx 0 → 100644
View file @ ebf673ab
import React, { useState, useEffect } from "react";
import { Collapse, Col, Row, Typography, Divider } from "antd";
// 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]);
// console.log('data', response.data)
}
// console.log('data', response)
});
};
getGarage();
}, []);
function callback(key) {
console.log(key);
}
return (
<>
<Row className="div-p-5">
<Col span={24}>
<Title level={3}> รายชื่อร้านซ่อมทั้งหมด </Title>
</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>
</Col>
</Row>
</>
);
}
export default Garage;
src/view/Dashboards/ecommerce/index.jsx
View file @ ebf673ab
......@@ -3,11 +3,16 @@ import { React, useEffect, useState } from "react";
import { Link } from "react-router-dom";
// Import services
import { FetctDetailByGarage } from "../../../services";
import {
FetctDetailByGarage,
FetctMemberByGarage,
FetchMemberAll,
} from "../../../services";
// import { useLocation } from "react-router-dom";
import { Row, Col, Divider, Result, Button, Statistic } from "antd";
import { PlusOutlined } from "@ant-design/icons";
//import Widget
import CanvasJSChart from "../../widget/widgetPie";
......@@ -19,12 +24,12 @@ export default function Ecommerce() {
// let location = useLocation();
const [datas, setDatas] = useState([]);
const [member, setMember] = useState([]);
const [allMember, setAllMember] = useState([]);
// const detailID = location.state
// console.log(detailID)
// console.log("datas", datas);
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
......@@ -36,16 +41,74 @@ export default function Ecommerce() {
await setDatas(response.data);
});
};
let data = {
userId: JSON.parse(localStorage.getItem("user")).userData.userId,
};
const getMember = async () => {
await FetctMemberByGarage(data).then(async (response) => {
if (response.code === 500) {
console.log("data", response);
} else {
await setMember(response.data);
}
// console.log('data', response.data)
});
};
const getMemberAll = async () => {
await FetchMemberAll().then(async (response) => {
await setAllMember(response.data);
// console.log("data", response.data);
});
};
getDetailByGarage();
getMember();
getMemberAll();
}, []);
let sumPrice = 0;
let listMember = [];
let listAllMember = [];
if (datas !== null) {
for (let i = 0; i < datas.length; i++) {
sumPrice = sumPrice + datas[i].price;
}
}
if (member !== null) {
for (let i = 0; i < member.length; i++) {
// console.log(member)
listMember.push(member[i]);
}
}
if (allMember !== null) {
for (let i = 0; i < allMember.length; i++) {
// console.log(member)
listAllMember.push(allMember[i]);
}
}
let date = new Date();
let dateNow = date.toLocaleDateString("th-TH", {
year: "numeric",
month: "long",
day: "numeric",
});
// console.log("member", member);
return (
<>
{datas !== null ? (
<>
{/* <div className="display-flex-main"> */}
{/* <div className="div-content-chart"> */}
<Row gutter={[0, 16]} style={{ padding: "4%" }}>
<Row gutter={[0, 16]} style={{ padding: "2%" }}>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<CanvasJSChart />
</Col>
......@@ -53,20 +116,23 @@ export default function Ecommerce() {
<ColumnJSChart />
</Col>
</Row>
<Button className="bt-them" key="console">
<Link to={"/dashboard/add-detail"}>
<PlusOutlined /> เพิ่มการซ่อม
</Link>
</Button>
<Divider />
<Row>
<Col span={12}>
<Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}>
<Statistic title="ลูกค้าทั้งหมดของระบบ" value={120} />
<Statistic title="ปฏิทิน" value={dateNow} />
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic
title="ลูกค้าของฉัน"
value={12}
// precision={2}
title="ลูกค้าทั้งหมดของระบบ"
value={listAllMember.length}
/>
</Col>
</Row>
......@@ -75,20 +141,20 @@ export default function Ecommerce() {
<Col span={12}>
<Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}>
<Statistic title="การรายงาน" value={120} />
<Link to={"/dashboard/member"}>
<Statistic title="ลูกค้าของฉัน" value={listMember.length} />
</Link>
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic
title="รายได้ทั้งหมดของร้าน (บาท)"
value={19356}
value={sumPrice}
precision={2}
/>
</Col>
</Row>
</Col>
</Row>
{/* </div> */}
{/* </div> */}
</>
) : (
<>
......@@ -100,7 +166,9 @@ export default function Ecommerce() {
title="ร้านของคุณยังไม่มีการซ่อม"
extra={
<Button className="bt-them" key="console">
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
<Link to={"/dashboard/add-detail"}>
<PlusOutlined /> เพิ่มการซ่อม
</Link>
</Button>
}
/>
......
src/view/Dashboards/member/ShowDetailMember.jsx
View file @ ebf673ab
......@@ -19,6 +19,8 @@ export default function App() {
const detailID = location.state;
// console.log(detailID)
//set useState
const [datas, setDatas] = useState([]);
const [dataSpare, setDataSpare] = useState([]);
......@@ -26,8 +28,12 @@ export default function App() {
useEffect(() => {
const getDetailByGarage = async () => {
await FetctDetailByGarageID(detailID).then(async (response) => {
if (response.data) {
await setDatas(response.data[0]);
// console.log('data', response.data[0])
// console.log('data', response)
}
// console.log('data', response)
});
await FetchSpareByDetailID(detailID).then((response) => {
if (response.data) {
......@@ -147,7 +153,7 @@ export default function App() {
</Row>
</div>
<div className="div-p-5">
<div className="div-p-5" style={{padding: "2% 10% 2% 10%"}}>
<Table
dataSource={listData}
scroll={{ x: 400 }}
......@@ -164,23 +170,23 @@ export default function App() {
title="รายการซ่อม / อะไหล่"
dataIndex="spareName"
key="spareName"
width={"48%"}
width={"50%"}
/>
<Column title="จำนวน" dataIndex="qty" key="qty" width={"10%"} />
<Column title="จำนวน" dataIndex="qty" key="qty" width={"20%"} />
<Column
{/* <Column
title="ราคาต่อหน่วย"
dataIndex="qtyPrice"
key="qtyPrice"
width={"12%"}
/>
<Column
/> */}
{/* <Column
title="ราคารวม"
dataIndex="sumPrice"
key="sumPrice"
width={"10%"}
/>
/> */}
</ColumnGroup>
</Table>
</div>
......
src/view/Dashboards/member/member.jsx
View file @ ebf673ab
......@@ -21,7 +21,7 @@ export default function Member() {
let data = {
userId: userId,
};
const getFunction = async () => {
const getMember = async () => {
await FetctMemberByGarage(data).then(async (response) => {
if (response.code === 500) {
console.log("data", response);
......@@ -31,7 +31,7 @@ export default function Member() {
// console.log('data', response)
});
};
getFunction();
getMember();
}, [userId]);
let listData = [];
......
src/view/Login/Login.jsx
View file @ ebf673ab
// import liff from "@line/liff";
import React from "react";
import { Form, Input, Button, Row, Col, Modal, Typography } from "antd";
import { Form, Input, Button, Row, Col, Modal, Typography, Steps } from "antd";
import { LoginOutlined } from "@ant-design/icons";
import {
LoginOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from "@ant-design/icons";
import { sendLogin } from "../../services";
const { Title } = Typography;
const { Step } = Steps;
function App() {
const onFinish = (values) => {
......@@ -18,10 +24,38 @@ function App() {
// console.log(data);
sendLogin(data).then((response) => {
// console.log(response.code);
if (response.code === 200) {
setTimeout(() => {
window.location.reload(false);
}, 1000);
} else if (response.code === 205) {
Modal.info({
title: (
<Title level={4}>ร้านซ่อมของท่านกำลังรอการอนุมัติจากระบบ</Title>
),
content: (
<Steps style={{ padding: "5%" }}>
<Step
status="finish"
title="ลงทะเบียน"
icon={<SolutionOutlined />}
/>
<Step
status="process"
title="อยู่ระหว่างการตรวจสอบ"
icon={<LoadingOutlined />}
/>
<Step status="wait" title="สำเร็จ" icon={<SmileOutlined />} />
</Steps>
),
width: "900px",
// `ร้านซ่อมของท่านกำลังรอการอนุมัติจากระบบ`
});
} else if (response.code === 202) {
setTimeout(() => {
window.location.reload(false);
}, 1000);
} else {
Modal.info({
title: "ไม่มีผู้ใช้นี้ในระบบ",
......
src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
View file @ ebf673ab
......@@ -12,20 +12,6 @@ import IconCar from "../../../../assets/icons/car.png";
import { FetchGarageAll } from "../../../../services";
// const [dataGet, SetDataGet] = useState([]);
// let datas = []
// getGarageAll().then((response) => {
// console.log('response => ', response)
// for (var i in response.data) {
// console.log(response.data[i])
// datas.push(response.data[i])
// }
// });
// console.log('datas', JSON.stringify(datas) )
// console.log('datas', datas)
function Map() {
const [selectPark, setSelectPark] = useState(null);
......@@ -101,7 +87,7 @@ export default function App() {
<WrappedMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: "100%" }} />}
containerElement={<div style={{ height: "400px" }} />}
containerElement={<div style={{ height: "600px" }} />}
mapElement={<div style={{ height: "100%" }} />}
/>
</>
......
src/view/Pages/CustomerService/RepairShop/index.jsx
View file @ ebf673ab
......@@ -3,18 +3,60 @@ import { Row, Col, Typography } from "antd";
import GoogleMaps from "./googleMaps";
const { Title } = Typography;
const { Title, Text } = Typography;
// const { Search } = Input;
export default function App() {
// const [valueInput, setValueInput] = useState();
// const onSearch = (value) => {
// // console.log('value', typeof(value));
// setValueInput(value);
// };
export default function App() {
return (
<>
<Row>
<Row gutter={[0, 32]}>
<Col xs={{ span: 24 }} lg={{ span: 24 }} className="w-auto bg-freecar ">
<Row className="div-p-5" gutter={[0, 32]}>
<Col span={24}>
<Title level={3}>ค้นหาร้านซ่อม</Title>
<Title level={2}>
<Text style={{ color: "#aaabb8" }}>
ร้านซ่อมที่มีในระบบทั้งหมด
</Text>
</Title>
</Col>
<Col span={24}>
<Text style={{ color: "#a4b3b6" }}>
ระบบจะแสดงร้านซ่อมที่มีในระบบทั้งหมด
โดยทุกร้านได้ทำการสมัครเข้าร่วมกับระบบ Repair Center
ระบบจัดการร้านซ่อม เรียบร้อยแล้ว
</Text>
</Col>
{/* <Col span={24}>
<Row>
<Col xs={1} lg={{ span: 6 }}></Col>
<Col xs={22} lg={{ span: 12 }}>
<Search
// style={{border: '1px solid yellow'}}
placeholder="กรอกหมายเลขโทรศัพท์ของลูกค้า"
allowClear
enterButton="ค้นหา"
size="large"
onSearch={onSearch}
/>
</Col>
<Col xs={1} lg={{ span: 6 }}></Col>
</Row>
</Col> */}
</Row>
</Col>
</Row>
<Row style={{ padding: "2% 15% 2% 15%" }}>
<Col className="border" span={24}>
<GoogleMaps />
</Col>
</Row>
......
src/view/Pages/CustomerService/RepairStatus/index.jsx
View file @ ebf673ab
import React from 'react';
import React, { useState } from "react";
import { Row, Col, Typography, Input, Table, Space, Modal } from "antd";
export default function App () {
import { Link } from "react-router-dom";
// import Service
import { FetchDetailByMember } from "../../../../services";
const { Title, Text } = Typography;
const { Search } = Input;
export default function App() {
//set useState
const [datas, setDatas] = useState([]);
const onSearch = (value) => {
let data = {
member_tel: value,
};
if (value !== undefined) {
FetchDetailByMember(data).then(async (response) => {
if (response.code === 200) {
await setDatas(response.data);
// console.log("data", response.data);
} else {
Modal.info({
title: "ไม่มีหมายเลขสมาชิกนี้",
content: `กรุณาตรวจสอบหมายเลขโทรศัพท์ หรือรหัสลูกค้าอีกครั้ง`,
});
setDatas([]);
}
});
} else {
setDatas([]);
}
};
// console.log("datas", datas);
let listData = [];
if (datas.length !== 0) {
for (let i = 0; i < datas.length; i++) {
let newData = {
detailsID: datas[i].detailsID,
member_tel: datas[i].member_tel,
member_name: datas[i].member_name,
device_type: datas[i].device_type,
repair_date: datas[i].repair_date,
garage_name: datas[i].garage_name,
status: datas[i].status,
status_payment: datas[i].status_payment,
equipment: datas[i].equipment,
brand: datas[i].brand,
car_number: datas[i].car_number,
car_province: datas[i].car_province,
price: datas[i].price,
};
listData.push(newData);
}
}
const columns = [
{
title: "ประเภทอุปกรณ์",
dataIndex: "device_type",
key: "device_type",
},
{
title: "ทะเบียน/ชนิด",
render: (record) => {
return (
<>
{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>
</>
)}
</>
);
},
},
{
title: "ร้านที่รับซ่อม",
dataIndex: "garage_name",
key: "garage_name",
},
{
title: "วันที่รับซ่อม",
dataIndex: "repair_date",
key: "repair_date",
},
{
title: "สถานะ",
key: "status",
render: (record) => {
return (
<>
{record.status === "สำเร็จ" ? (
<>
<Text
style={{
color: "green",
backgroundColor: "#b7eb8f",
padding: "2px",
}}
>
{record.status}
</Text>
</>
) : (
<>
<Text
style={{
color: "red",
backgroundColor: "#fff566",
padding: "2px",
}}
>
{record.status}
</Text>
</>
)}
</>
);
},
},
{
title: "การชำระเงิน",
// dataIndex: "status_payment",
key: "status_payment",
render: (record) => {
return (
<>
<Text style={{ color: "red", fontWeight: "bold" }}>
{record.price}฿
</Text>
{" => "}
<Text>
{record.status_payment}
</Text>
</>
);
},
},
{
title: "เพิ่มเติม",
key: "detailsID",
render: (record) => {
return (
<>
Repair Status
<Link
to={{
pathname: "/dashboard/search-repair/details",
state: {
detailID: record.detailsID,
memberTel: record.member_tel,
},
}}
>
<Text style={{ color: "blue" }}>
{/* <ToolOutlined style={{fontSize: "200%"}} /> */}
รายละเอียด
</Text>
</Link>
</>
);
},
},
];
return (
<>
<Row gutter={[0, 32]}>
<Col xs={{ span: 24 }} lg={{ span: 24 }} className="w-auto bg-freecar ">
<Row className="div-p-5" gutter={[0, 32]}>
<Col span={24}>
<Title level={2}>
<Text style={{ color: "#aaabb8" }}>เช็คสถานะการซ่อม</Text>
</Title>
</Col>
<Col span={24}>
<Text style={{ color: "#a4b3b6" }}>
ระบบจะแสดงการซ่อมของลูกค้าทั้งหมด
ที่ถูกเพิ่มไว้โดยร้านซ่อมที่เข้าร่วมกับระบบ
โดยลูกค้าสามารถเช็คสถานะได้โดยการกรอกหมายเลขโทรศัพท์
หรือรหัสของลูกค้า
</Text>
</Col>
<Col span={24}>
<Row>
<Col xs={1} lg={{ span: 6 }}></Col>
<Col xs={22} lg={{ span: 12 }}>
<Search
// style={{border: '1px solid yellow'}}
placeholder="กรอกหมายเลขโทรศัพท์ของลูกค้า"
allowClear
enterButton="ค้นหา"
size="large"
onSearch={onSearch}
/>
</Col>
<Col xs={1} lg={{ span: 6 }}></Col>
</Row>
</Col>
</Row>
</Col>
</Row>
{datas.length !== 0 ? (
<>
<div className="div-p-5">
<Table
scroll={{ x: 500 }}
bordered
columns={columns}
dataSource={listData}
/>
</div>
</>
) : null}
</>
)
);
}
src/view/Pages/GetStarted/ContentImage/index.jsx
View file @ ebf673ab
import React, { useState } from "react";
import { Row, Col, Typography, Image } from "antd";
import { Row, Col, Typography, Image, Carousel } from "antd";
// Import Images 264098267_614589809650713_7432399148669275975_n.png
import reportImg from "../../../../assets/images/Example/263773393_1270118020174602_2666156037006331548_n.png";
import userUseImg from "../../../../assets/images/Example/264098267_614589809650713_7432399148669275975_n.png";
import detailImg from "../../../../assets/images/Example/266805480_2127046747444617_6752024179146129762_n.png";
import Image1 from "../../../../assets/images/1.png";
import Image2 from "../../../../assets/images/2.png";
import Image3 from "../../../../assets/images/3.png";
import Image4 from "../../../../assets/images/4.png";
import Image5 from "../../../../assets/images/5.png";
import Image6 from "../../../../assets/images/6.png";
import Image7 from "../../../../assets/images/7.png";
const { Title, Text } = Typography;
const { Title } = Typography;
function App() {
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(false);
const [visible4, setVisible4] = useState(false);
const [visible5, setVisible5] = useState(false);
const [visible6, setVisible6] = useState(false);
const [visible7, setVisible7] = useState(false);
return (
<Row gutter={[16, 16]} className="content-box">
......@@ -21,7 +31,160 @@ function App() {
<Title level={4}>รูปตัวอย่างการใช้งาน</Title>
</Col>
<Col
<Col span={24}>
<Carousel autoplay>
{/* <div style={contentStyle}> */}
<div >
<Image
preview={{ visible1: false }}
src={Image1}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible1(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible1,
onVisibleChange: (vis) => setVisible1(vis),
}}
>
<Image src={Image1} />
</Image.PreviewGroup>
</div>
</div>
<div >
<Image
preview={{ visible2: false }}
src={Image2}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible2(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible2,
onVisibleChange: (vis) => setVisible2(vis),
}}
>
<Image src={Image2} />
</Image.PreviewGroup>
</div>
</div>
<div >
<Image
preview={{ visible3: false }}
src={Image3}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible3(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible3,
onVisibleChange: (vis) => setVisible3(vis),
}}
>
<Image src={Image3} />
</Image.PreviewGroup>
</div>
</div>
<div >
<Image
preview={{ visible4: false }}
src={Image4}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible4(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible4,
onVisibleChange: (vis) => setVisible4(vis),
}}
>
<Image src={Image4} />
</Image.PreviewGroup>
</div>
</div>
<div >
<Image
preview={{ visible5: false }}
src={Image5}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible5(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible5,
onVisibleChange: (vis) => setVisible5(vis),
}}
>
<Image src={Image5} />
</Image.PreviewGroup>
</div>
</div>
<div >
<Image
preview={{ visible6: false }}
src={Image6}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible6(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible6,
onVisibleChange: (vis) => setVisible6(vis),
}}
>
<Image src={Image6} />
</Image.PreviewGroup>
</div>
</div>
<div >
<Image
preview={{ visible7: false }}
src={Image7}
width={700}
height={400}
style={{border : '1px solid #333'}}
onClick={() => setVisible7(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{
visible7,
onVisibleChange: (vis) => setVisible7(vis),
}}
>
<Image src={Image7} />
</Image.PreviewGroup>
</div>
</div>
</Carousel>
</Col>
{/* <Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 6, offset: 4 }}
......@@ -30,7 +193,6 @@ function App() {
className="Col-content"
>
<div>
<div></div>
<Image
preview={{ visible1: false }}
width={200}
......@@ -124,7 +286,7 @@ function App() {
</div>
<Text>รูปหน้าบริการลูกค้า</Text>
</div>
</Col>
</Col> */}
</Row>
);
}
......
src/view/Pages/GetStarted/Title/index.jsx
View file @ ebf673ab
......@@ -25,7 +25,7 @@ function App() {
backgroundColor: 0xffffff,
color1: 0x55505f,
color2: 0x60931,
birdSize: 0.7,
birdSize: 0.7
})
);
}
......
src/view/Pages/Report/index.jsx
View file @ ebf673ab
import React from "react";
import { Row, Col, Typography, Form, Input, Button, Select } from "antd";
import { Row, Col, Typography, Form, Input, Button, Select, Modal } from "antd";
import { CommentOutlined } from "@ant-design/icons";
// Import services
import { InsertReport } from "../../../services";
const formItemLayout = {
labelCol: {
xs: {
......@@ -47,10 +50,20 @@ const { Title } = Typography;
/* eslint-enable no-template-curly-in-string */
export default function App() {
const onFinish = (values) => {
console.log(values);
// console.log(values);
InsertReport(values).then((response) => {
// console.log(response)
Modal.info({
title: "เรียบร้อย",
content: `แจ้งปัญหาการใช้งานเรียบร้อยแล้ว`,
onOk: () => {
setTimeout(() => {
window.location.reload(false)
}, 1);
}
});
})
};
return (
......@@ -75,7 +88,7 @@ export default function App() {
lg={{ span: 16 }}
className="display-flex-center"
>
<Row >
<Row>
<Col span={24}>
<Title level={4}>แจ้งปัญหาการใช้งาน</Title>
</Col>
......
src/view/Registion/Registion.jsx
View file @ ebf673ab
This diff is collapsed.
src/view/widget/RepairTable.jsx
View file @ ebf673ab
......@@ -106,15 +106,10 @@ export default function App() {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
// this.setState({
// searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
};
const handleReset = (clearFilters) => {
clearFilters();
// this.setState({ searchText: "" });
setSearchText("");
};
......@@ -163,7 +158,6 @@ export default function App() {
</>
);
},
},
{
title: "รายละเอียดการซ่อมเบื้องต้น",
......@@ -178,9 +172,40 @@ export default function App() {
},
{
title: "สถานะ",
dataIndex: "status",
// dataIndex: "status",
key: "status",
...getColumnSearchProps("status"),
render: (record) => {
return (
<>
{record.status === "สำเร็จ" ? (
<>
<Text
style={{
color: "green",
backgroundColor: "#b7eb8f",
padding: "2px",
}}
>
{record.status}
</Text>
</>
) : (
<>
<Text
style={{
color: "red",
backgroundColor: "#fff566",
padding: "2px",
}}
>
{record.status}
</Text>
</>
)}
</>
);
},
},
{
title: "เพิ่มเติม",
......@@ -223,6 +248,7 @@ export default function App() {
bordered
columns={columns}
dataSource={datas}
className="border"
/>
</div>
</>
......
src/view/widget/widgetPie.jsx
View file @ ebf673ab
import React, { useEffect, useState } from "react";
import {Typography} from 'antd'
import { Typography } from "antd";
import { Link } from "react-router-dom";
import { CanvasJSChart } from "canvasjs-react-charts";
// Import services
import { FetctDetailByGarage } from "../../services";
const { Title } = Typography
const { Title } = Typography;
export default function Ecommerce(props) {
const [datas, setDatas] = useState([]);
......@@ -30,7 +32,7 @@ export default function Ecommerce(props) {
let carlist = [];
let motolist = [];
let agirculturelist = [];
let totol = []
let totol = [];
if (datas !== null) {
for (let i = 0; i < datas.length; i++) {
......@@ -44,7 +46,7 @@ export default function Ecommerce(props) {
if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
}
totol.push(datas[i])
totol.push(datas[i]);
}
} else {
// console.log('data is null', datas)
......@@ -78,7 +80,9 @@ export default function Ecommerce(props) {
options={options}
/* onRef={ref => this.chart = ref} */
/>
<Link to={"/dashboard/all-repair"}>
<Title level={5}>การซ่อมทั้งหมด {totol.length} รายการ</Title>
</Link>
</div>
);
}
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