Skip to content

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

add 26/02/65

parent b0050fb6
Hide whitespace changes
Inline Side-by-side
Showing with 1147 additions and 534 deletions
src/Layouts/Header/tabHeader.jsx
View file @ ebf673ab
...@@ -18,7 +18,19 @@ export default function App() { ...@@ -18,7 +18,19 @@ export default function App() {
if (checkLocal === null) { if (checkLocal === null) {
history.push("/"); history.push("/");
} else { } 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 = () => { // 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 { ...@@ -10,7 +10,7 @@ import {
TeamOutlined, TeamOutlined,
FileSearchOutlined, FileSearchOutlined,
CommentOutlined, CommentOutlined,
SettingOutlined, // SettingOutlined,
LogoutOutlined, LogoutOutlined,
// DollarOutlined, // DollarOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
...@@ -110,9 +110,9 @@ export default function App() { ...@@ -110,9 +110,9 @@ export default function App() {
<Link to={"/dashboard/payment"}>การชำระเงิน</Link> <Link to={"/dashboard/payment"}>การชำระเงิน</Link>
</Menu.Item> */} </Menu.Item> */}
<Menu.Item key="8" icon={<SettingOutlined />}> {/* <Menu.Item key="8" icon={<SettingOutlined />}>
<Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link> <Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
</Menu.Item> </Menu.Item> */}
<Menu.Item key="9" icon={<CommentOutlined />}> <Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link> <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
......
src/Layouts/Menu/menulist.jsx
View file @ ebf673ab
...@@ -8,6 +8,7 @@ import { ...@@ -8,6 +8,7 @@ import {
SearchOutlined, SearchOutlined,
FileSearchOutlined, FileSearchOutlined,
CommentOutlined, CommentOutlined,
LoginOutlined
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
...@@ -56,11 +57,17 @@ export default function App() { ...@@ -56,11 +57,17 @@ export default function App() {
<Menu.Item key="6" icon={<FileSearchOutlined />}> <Menu.Item key="6" icon={<FileSearchOutlined />}>
<Link to={"/status"}>เช็คสถานะการซ่อม</Link> <Link to={"/status"}>เช็คสถานะการซ่อม</Link>
</Menu.Item> </Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<CommentOutlined />}> <Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link> <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item> </Menu.Item>
</SubMenu>
<Menu.Item key="3" icon={<LoginOutlined />}>
<Link to={"/login"}>เข้าสู่ระบบ</Link>
</Menu.Item>
</Menu> </Menu>
</Sider> </Sider>
</div> </div>
......
src/Layouts/VerticalLayout.jsx
View file @ ebf673ab
...@@ -7,6 +7,7 @@ import { Layout } from "antd"; ...@@ -7,6 +7,7 @@ import { Layout } from "antd";
import HeaderTap from "./Header/tabHeader"; import HeaderTap from "./Header/tabHeader";
import MenuList from "./Menu/menulist"; import MenuList from "./Menu/menulist";
import MenuDashboard from "./Menu/menuDashboard"; import MenuDashboard from "./Menu/menuDashboard";
import MenuAdmin from "./Menu/menuAdmin";
const { Content } = Layout; const { Content } = Layout;
...@@ -22,16 +23,22 @@ export default function VerticalLayout(props) { ...@@ -22,16 +23,22 @@ export default function VerticalLayout(props) {
setChechLocal(JSON.parse(localStorage.getItem("user"))); setChechLocal(JSON.parse(localStorage.getItem("user")));
}, []); }, []);
if (checkLocal === null) { if (checkLocal === null) {
history.push("/"); history.push("/");
} else { } else {
history.push({ if (checkLocal.userData.userId === "admin") {
pathname: "/dashboard", history.push({
state: checkLocal.userData.userId, pathname: "/admin/dashboard",
}); state: checkLocal.userData.userId,
// console.log('test', checkLocal) });
} else {
history.push({
pathname: "/dashboard",
state: checkLocal.userData.userId,
});
}
// console.log("test", checkLocal.userData.userId);
} }
return ( return (
...@@ -47,9 +54,7 @@ export default function VerticalLayout(props) { ...@@ -47,9 +54,7 @@ export default function VerticalLayout(props) {
/> />
{checkLocal === null ? ( {checkLocal === null ? (
<Layout <Layout style={{ minHeight: "90vh", maxHeight: "90vh" }}>
style={{ minHeight: "90vh", maxHeight: "90vh" }}
>
<MenuList /> <MenuList />
<Layout className="site-layout"> <Layout className="site-layout">
...@@ -67,28 +72,59 @@ export default function VerticalLayout(props) { ...@@ -67,28 +72,59 @@ export default function VerticalLayout(props) {
</Layout> </Layout>
</Layout> </Layout>
) : ( ) : (
<Layout <>
style={{ {checkLocal.userData.userId === "admin" ? (
minHeight: "90vh", <>
maxHeight: "90vh", <Layout
// paddingTop: "0.5vh", style={{
}} minHeight: "90vh",
> maxHeight: "90vh",
<MenuDashboard /> // paddingTop: "0.5vh",
<Layout className="site-layout"> }}
<Content style={{ margin: "1vh 1vh" }}>
<div
className="site-layout-background"
style={{ mixHeight: 360, overflowY: "scroll" }}
> >
{children} <MenuAdmin />
</div> <Layout className="site-layout">
</Content> <Content style={{ margin: "1vh 1vh" }}>
{/* <Footer className="footer"> <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> <p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer> */} </Footer> */}
</Layout> </Layout>
</Layout> </Layout>
</>
) : (
<>
<Layout
style={{
minHeight: "90vh",
maxHeight: "90vh",
// paddingTop: "0.5vh",
}}
>
<MenuDashboard />
<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>
</>
)}
</>
)} )}
</> </>
); );
......
src/assets/fonts/index.css
View file @ ebf673ab
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
body { body {
font-family: 'Mitr', sans-serif; font-family: 'Mitr', sans-serif;
} }
.bg-freecar { .bg-freecar {
......
src/assets/less/Layouts/header.less
View file @ ebf673ab
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
font-weight: bold; font-weight: bold;
} }
.site-layout .site-layout-background { .site-layout .site-layout-background {
background: #fff; background: #fff;
// #f0f2f5
} }
.footer { .footer {
...@@ -17,3 +18,4 @@ ...@@ -17,3 +18,4 @@
.footer p { .footer p {
text-align: center; text-align: center;
} }
src/router/routes/Pages.jsx
View file @ ebf673ab
...@@ -114,6 +114,23 @@ const PagesRoutes = [ ...@@ -114,6 +114,23 @@ const PagesRoutes = [
component: lazy(() => import('../../view/Dashboards/member/member')), component: lazy(() => import('../../view/Dashboards/member/member')),
layout: 'VerticalLayout', 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,7 +20,9 @@ export const sendLogin = (data) => { ...@@ -20,7 +20,9 @@ export const sendLogin = (data) => {
.then((response) => { .then((response) => {
if (response.data.code === 200) { if (response.data.code === 200) {
localStorage.setItem("user", JSON.stringify(response.data)); localStorage.setItem("user", JSON.stringify(response.data));
} } else if (response.data.code === 202) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response.data; return response.data;
}) })
.catch((err) => { .catch((err) => {
...@@ -33,17 +35,24 @@ export const sendLogout = () => { ...@@ -33,17 +35,24 @@ export const sendLogout = () => {
return localStorage.removeItem("user"); return localStorage.removeItem("user");
}; };
// get list All garage // get list All garage is Approve
export const FetchGarageAll = () => { export const FetchGarageAll = () => {
return ( return axios
axios .get(process.env.REACT_APP_SECRET_API + "/garage/all")
.get(process.env.REACT_APP_SECRET_API + "/garage/all") .then((response) => response.data)
// .get("http://localhost:4000/garage/all") .catch((err) => {
.then((response) => response.data) console.log(err);
.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 // Fetch Thai Address API
...@@ -140,7 +149,6 @@ export const FetchSpareByDetailID = (data) => { ...@@ -140,7 +149,6 @@ export const FetchSpareByDetailID = (data) => {
// Delete Spare // Delete Spare
export const DeleteSpare = (data) => { export const DeleteSpare = (data) => {
return axios return axios
.delete(process.env.REACT_APP_SECRET_API + "/repairdetail/delete-spare", { .delete(process.env.REACT_APP_SECRET_API + "/repairdetail/delete-spare", {
data: { id: data }, data: { id: data },
...@@ -162,7 +170,6 @@ export const UpdateDetail = (data) => { ...@@ -162,7 +170,6 @@ export const UpdateDetail = (data) => {
}); });
}; };
// Insert Member // Insert Member
export const InsertMember = (data) => { export const InsertMember = (data) => {
// console.log('service', data) // console.log('service', data)
...@@ -176,9 +183,8 @@ export const InsertMember = (data) => { ...@@ -176,9 +183,8 @@ export const InsertMember = (data) => {
}); });
}; };
// get data FetctMemberByGaragename // get data FetctMemberByGaragename
export const FetctMemberByGarage= (data) => { export const FetctMemberByGarage = (data) => {
// console.log(data) // console.log(data)
return axios return axios
...@@ -191,8 +197,32 @@ export const FetctMemberByGarage= (data) => { ...@@ -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 // // logout
// export const sendLogout = () => { // export const sendLogout = () => {
// return localStorage.removeItem("user"); // 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"; ...@@ -3,11 +3,16 @@ import { React, useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
// Import services // Import services
import { FetctDetailByGarage } from "../../../services"; import {
FetctDetailByGarage,
FetctMemberByGarage,
FetchMemberAll,
} from "../../../services";
// import { useLocation } from "react-router-dom"; // import { useLocation } from "react-router-dom";
import { Row, Col, Divider, Result, Button, Statistic } from "antd"; import { Row, Col, Divider, Result, Button, Statistic } from "antd";
import { PlusOutlined } from "@ant-design/icons";
//import Widget //import Widget
import CanvasJSChart from "../../widget/widgetPie"; import CanvasJSChart from "../../widget/widgetPie";
...@@ -19,12 +24,12 @@ export default function Ecommerce() { ...@@ -19,12 +24,12 @@ export default function Ecommerce() {
// let location = useLocation(); // let location = useLocation();
const [datas, setDatas] = useState([]); const [datas, setDatas] = useState([]);
const [member, setMember] = useState([]);
const [allMember, setAllMember] = useState([]);
// const detailID = location.state // const detailID = location.state
// console.log(detailID) // console.log(detailID)
// console.log("datas", datas);
useEffect(() => { useEffect(() => {
const getDetailByGarage = async () => { const getDetailByGarage = async () => {
let local = { let local = {
...@@ -36,16 +41,74 @@ export default function Ecommerce() { ...@@ -36,16 +41,74 @@ export default function Ecommerce() {
await setDatas(response.data); 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(); 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 ( return (
<> <>
{datas !== null ? ( {datas !== null ? (
<> <>
{/* <div className="display-flex-main"> */} <Row gutter={[0, 16]} style={{ padding: "2%" }}>
{/* <div className="div-content-chart"> */}
<Row gutter={[0, 16]} style={{ padding: "4%" }}>
<Col xs={24} lg={{ span: 10, offset: 1 }}> <Col xs={24} lg={{ span: 10, offset: 1 }}>
<CanvasJSChart /> <CanvasJSChart />
</Col> </Col>
...@@ -53,20 +116,23 @@ export default function Ecommerce() { ...@@ -53,20 +116,23 @@ export default function Ecommerce() {
<ColumnJSChart /> <ColumnJSChart />
</Col> </Col>
</Row> </Row>
<Button className="bt-them" key="console">
<Link to={"/dashboard/add-detail"}>
<PlusOutlined /> เพิ่มการซ่อม
</Link>
</Button>
<Divider /> <Divider />
<Row> <Row>
<Col span={12}> <Col span={12}>
<Row gutter={16}> <Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}> <Col xs={24} lg={{ span: 11 }}>
<Statistic title="ลูกค้าทั้งหมดของระบบ" value={120} /> <Statistic title="ปฏิทิน" value={dateNow} />
</Col> </Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}> <Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic <Statistic
title="ลูกค้าของฉัน" title="ลูกค้าทั้งหมดของระบบ"
value={12} value={listAllMember.length}
// precision={2}
/> />
</Col> </Col>
</Row> </Row>
...@@ -75,20 +141,20 @@ export default function Ecommerce() { ...@@ -75,20 +141,20 @@ export default function Ecommerce() {
<Col span={12}> <Col span={12}>
<Row gutter={16}> <Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}> <Col xs={24} lg={{ span: 11 }}>
<Statistic title="การรายงาน" value={120} /> <Link to={"/dashboard/member"}>
<Statistic title="ลูกค้าของฉัน" value={listMember.length} />
</Link>
</Col> </Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}> <Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic <Statistic
title="รายได้ทั้งหมดของร้าน (บาท)" title="รายได้ทั้งหมดของร้าน (บาท)"
value={19356} value={sumPrice}
precision={2} precision={2}
/> />
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
{/* </div> */}
{/* </div> */}
</> </>
) : ( ) : (
<> <>
...@@ -100,7 +166,9 @@ export default function Ecommerce() { ...@@ -100,7 +166,9 @@ export default function Ecommerce() {
title="ร้านของคุณยังไม่มีการซ่อม" title="ร้านของคุณยังไม่มีการซ่อม"
extra={ extra={
<Button className="bt-them" key="console"> <Button className="bt-them" key="console">
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link> <Link to={"/dashboard/add-detail"}>
<PlusOutlined /> เพิ่มการซ่อม
</Link>
</Button> </Button>
} }
/> />
......
src/view/Dashboards/member/ShowDetailMember.jsx
View file @ ebf673ab
...@@ -16,9 +16,11 @@ const { Column, ColumnGroup } = Table; ...@@ -16,9 +16,11 @@ const { Column, ColumnGroup } = Table;
export default function App() { export default function App() {
let location = useLocation(); let location = useLocation();
// const detailID = props; // const detailID = props;
const detailID = location.state; const detailID = location.state;
// console.log(detailID)
//set useState //set useState
const [datas, setDatas] = useState([]); const [datas, setDatas] = useState([]);
const [dataSpare, setDataSpare] = useState([]); const [dataSpare, setDataSpare] = useState([]);
...@@ -26,8 +28,12 @@ export default function App() { ...@@ -26,8 +28,12 @@ export default function App() {
useEffect(() => { useEffect(() => {
const getDetailByGarage = async () => { const getDetailByGarage = async () => {
await FetctDetailByGarageID(detailID).then(async (response) => { await FetctDetailByGarageID(detailID).then(async (response) => {
await setDatas(response.data[0]); if (response.data) {
// console.log('data', response.data[0]) await setDatas(response.data[0]);
// console.log('data', response)
}
// console.log('data', response)
}); });
await FetchSpareByDetailID(detailID).then((response) => { await FetchSpareByDetailID(detailID).then((response) => {
if (response.data) { if (response.data) {
...@@ -147,7 +153,7 @@ export default function App() { ...@@ -147,7 +153,7 @@ export default function App() {
</Row> </Row>
</div> </div>
<div className="div-p-5"> <div className="div-p-5" style={{padding: "2% 10% 2% 10%"}}>
<Table <Table
dataSource={listData} dataSource={listData}
scroll={{ x: 400 }} scroll={{ x: 400 }}
...@@ -164,23 +170,23 @@ export default function App() { ...@@ -164,23 +170,23 @@ export default function App() {
title="รายการซ่อม / อะไหล่" title="รายการซ่อม / อะไหล่"
dataIndex="spareName" dataIndex="spareName"
key="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="ราคาต่อหน่วย" title="ราคาต่อหน่วย"
dataIndex="qtyPrice" dataIndex="qtyPrice"
key="qtyPrice" key="qtyPrice"
width={"12%"} width={"12%"}
/> /> */}
<Column {/* <Column
title="ราคารวม" title="ราคารวม"
dataIndex="sumPrice" dataIndex="sumPrice"
key="sumPrice" key="sumPrice"
width={"10%"} width={"10%"}
/> /> */}
</ColumnGroup> </ColumnGroup>
</Table> </Table>
</div> </div>
......
src/view/Dashboards/member/member.jsx
View file @ ebf673ab
...@@ -21,7 +21,7 @@ export default function Member() { ...@@ -21,7 +21,7 @@ export default function Member() {
let data = { let data = {
userId: userId, userId: userId,
}; };
const getFunction = async () => { const getMember = async () => {
await FetctMemberByGarage(data).then(async (response) => { await FetctMemberByGarage(data).then(async (response) => {
if (response.code === 500) { if (response.code === 500) {
console.log("data", response); console.log("data", response);
...@@ -31,7 +31,7 @@ export default function Member() { ...@@ -31,7 +31,7 @@ export default function Member() {
// console.log('data', response) // console.log('data', response)
}); });
}; };
getFunction(); getMember();
}, [userId]); }, [userId]);
let listData = []; let listData = [];
......
src/view/Login/Login.jsx
View file @ ebf673ab
// import liff from "@line/liff"; // import liff from "@line/liff";
import React from "react"; 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"; import { sendLogin } from "../../services";
const { Title } = Typography; const { Title } = Typography;
const { Step } = Steps;
function App() { function App() {
const onFinish = (values) => { const onFinish = (values) => {
...@@ -18,10 +24,38 @@ function App() { ...@@ -18,10 +24,38 @@ function App() {
// console.log(data); // console.log(data);
sendLogin(data).then((response) => { sendLogin(data).then((response) => {
// console.log(response.code);
if (response.code === 200) { if (response.code === 200) {
setTimeout(() => { setTimeout(() => {
window.location.reload(false); window.location.reload(false);
}, 1000); }, 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 { } else {
Modal.info({ Modal.info({
title: "ไม่มีผู้ใช้นี้ในระบบ", title: "ไม่มีผู้ใช้นี้ในระบบ",
......
src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
View file @ ebf673ab
...@@ -12,20 +12,6 @@ import IconCar from "../../../../assets/icons/car.png"; ...@@ -12,20 +12,6 @@ import IconCar from "../../../../assets/icons/car.png";
import { FetchGarageAll } from "../../../../services"; 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() { function Map() {
const [selectPark, setSelectPark] = useState(null); const [selectPark, setSelectPark] = useState(null);
...@@ -101,7 +87,7 @@ export default function App() { ...@@ -101,7 +87,7 @@ export default function App() {
<WrappedMap <WrappedMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places" googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: "100%" }} />} loadingElement={<div style={{ height: "100%" }} />}
containerElement={<div style={{ height: "400px" }} />} containerElement={<div style={{ height: "600px" }} />}
mapElement={<div style={{ height: "100%" }} />} 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"; ...@@ -3,18 +3,60 @@ import { Row, Col, Typography } from "antd";
import GoogleMaps from "./googleMaps"; 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 ( return (
<> <>
<Row> <Row gutter={[0, 32]}>
<Col span={24}> <Col xs={{ span: 24 }} lg={{ span: 24 }} className="w-auto bg-freecar ">
<Title level={3}>ค้นหาร้านซ่อม</Title> <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" }}>
ระบบจะแสดงร้านซ่อมที่มีในระบบทั้งหมด
โดยทุกร้านได้ทำการสมัครเข้าร่วมกับระบบ 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> </Col>
<Col span={24}> </Row>
<Row style={{ padding: "2% 15% 2% 15%" }}>
<Col className="border" span={24}>
<GoogleMaps /> <GoogleMaps />
</Col> </Col>
</Row> </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";
return (
// 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 (
<>
<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 ? (
<> <>
Repair Status <div className="div-p-5">
<Table
scroll={{ x: 500 }}
bordered
columns={columns}
dataSource={listData}
/>
</div>
</> </>
) ) : null}
} </>
\ No newline at end of file );
}
src/view/Pages/GetStarted/ContentImage/index.jsx
View file @ ebf673ab
import React, { useState } from "react"; 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 Images 264098267_614589809650713_7432399148669275975_n.png
import reportImg from "../../../../assets/images/Example/263773393_1270118020174602_2666156037006331548_n.png"; import Image1 from "../../../../assets/images/1.png";
import userUseImg from "../../../../assets/images/Example/264098267_614589809650713_7432399148669275975_n.png"; import Image2 from "../../../../assets/images/2.png";
import detailImg from "../../../../assets/images/Example/266805480_2127046747444617_6752024179146129762_n.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() { function App() {
const [visible1, setVisible1] = useState(false); const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false); const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(false); const [visible3, setVisible3] = useState(false);
const [visible4, setVisible4] = useState(false); const [visible4, setVisible4] = useState(false);
const [visible5, setVisible5] = useState(false);
const [visible6, setVisible6] = useState(false);
const [visible7, setVisible7] = useState(false);
return ( return (
<Row gutter={[16, 16]} className="content-box"> <Row gutter={[16, 16]} className="content-box">
...@@ -21,7 +31,160 @@ function App() { ...@@ -21,7 +31,160 @@ function App() {
<Title level={4}>รูปตัวอย่างการใช้งาน</Title> <Title level={4}>รูปตัวอย่างการใช้งาน</Title>
</Col> </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 }} xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }} sm={{ span: 8, offset: 8 }}
md={{ span: 6, offset: 4 }} md={{ span: 6, offset: 4 }}
...@@ -30,7 +193,6 @@ function App() { ...@@ -30,7 +193,6 @@ function App() {
className="Col-content" className="Col-content"
> >
<div> <div>
<div></div>
<Image <Image
preview={{ visible1: false }} preview={{ visible1: false }}
width={200} width={200}
...@@ -124,7 +286,7 @@ function App() { ...@@ -124,7 +286,7 @@ function App() {
</div> </div>
<Text>รูปหน้าบริการลูกค้า</Text> <Text>รูปหน้าบริการลูกค้า</Text>
</div> </div>
</Col> </Col> */}
</Row> </Row>
); );
} }
......
src/view/Pages/GetStarted/Title/index.jsx
View file @ ebf673ab
...@@ -25,7 +25,7 @@ function App() { ...@@ -25,7 +25,7 @@ function App() {
backgroundColor: 0xffffff, backgroundColor: 0xffffff,
color1: 0x55505f, color1: 0x55505f,
color2: 0x60931, color2: 0x60931,
birdSize: 0.7, birdSize: 0.7
}) })
); );
} }
......
src/view/Pages/Report/index.jsx
View file @ ebf673ab
import React from "react"; 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 { CommentOutlined } from "@ant-design/icons";
// Import services
import { InsertReport } from "../../../services";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { xs: {
...@@ -47,10 +50,20 @@ const { Title } = Typography; ...@@ -47,10 +50,20 @@ const { Title } = Typography;
/* eslint-enable no-template-curly-in-string */ /* eslint-enable no-template-curly-in-string */
export default function App() { export default function App() {
const onFinish = (values) => { 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 ( return (
...@@ -75,7 +88,7 @@ export default function App() { ...@@ -75,7 +88,7 @@ export default function App() {
lg={{ span: 16 }} lg={{ span: 16 }}
className="display-flex-center" className="display-flex-center"
> >
<Row > <Row>
<Col span={24}> <Col span={24}>
<Title level={4}>แจ้งปัญหาการใช้งาน</Title> <Title level={4}>แจ้งปัญหาการใช้งาน</Title>
</Col> </Col>
......
src/view/Registion/Registion.jsx
View file @ ebf673ab
...@@ -75,6 +75,7 @@ export default function RegistrationForm() { ...@@ -75,6 +75,7 @@ export default function RegistrationForm() {
on_time: ontime, on_time: ontime,
off_time: offtime, off_time: offtime,
tel: values.phone, tel: values.phone,
confirmation: "non-approved",
}; };
sendToken(data).then((response) => { sendToken(data).then((response) => {
...@@ -541,7 +542,7 @@ export default function RegistrationForm() { ...@@ -541,7 +542,7 @@ export default function RegistrationForm() {
</div> </div>
<Divider orientation="left"> <Divider orientation="left">
<Title level={4}>ปรักหมุดที่อยู่ของร้าน</Title> <Title level={4}>เลือกตำแหน่งที่อยู่ของร้าน</Title>
</Divider> </Divider>
<div style={{ padding: "2% 10% 2% 10%" }}> <div style={{ padding: "2% 10% 2% 10%" }}>
...@@ -571,373 +572,6 @@ export default function RegistrationForm() { ...@@ -571,373 +572,6 @@ export default function RegistrationForm() {
</Col> </Col>
</Row> </Row>
</> </>
// <div className="h-auto">
// <Row>
// <Col
// span={4}
// xs={{ order: 1 }}
// sm={{ order: 2 }}
// md={{ order: 3 }}
// lg={{ order: 4 }}
// ></Col>
// <Col
// // style={{ textAlign: "center" }}
// span={12}
// xs={{ order: 1 }}
// sm={{ order: 2 }}
// md={{ order: 3 }}
// lg={{ order: 4 }}
// >
// <div className="title">ลงทะเบียนร้านซ่อม</div>
// <Divider orientation="left">
// <b>รายละเอียดของร้าน</b>
// </Divider>
// <Form
// {...formItemLayout}
// form={form}
// name="register"
// onFinish={onFinish}
// scrollToFirstError
// >
// {/* User ID */}
// <Form.Item
// name="userID"
// label="User ID"
// tooltip="User ID เพื่อใช้ในการเข้าระบบในครั้งต่อไป"
// rules={[
// {
// required: true,
// message: "กรุณาระบุ userID ของคุณ",
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Password รหัสผ่าน*/}
// <Form.Item
// name="password"
// label="รหัสผ่าน"
// rules={[
// {
// required: true,
// message: "กรุณาใส่รหัสผ่านของคุณ!",
// },
// ]}
// hasFeedback
// >
// <Input.Password minLength={6} />
// </Form.Item>
// {/* confirm Password ยืนยันรหัสผ่าน */}
// <Form.Item
// name="confirm"
// label="ยืนยันรหัสผ่าน"
// dependencies={["password"]}
// hasFeedback
// rules={[
// {
// required: true,
// message: "กรุณายืนยันรหัสผ่านของคุณ!",
// },
// ({ getFieldValue }) => ({
// validator(_, value) {
// if (!value || getFieldValue("password") === value) {
// return Promise.resolve();
// }
// return Promise.reject(
// new Error("รหัสผ่านทั้งสองที่คุณป้อนไม่ตรงกัน!")
// );
// },
// }),
// ]}
// >
// <Input.Password minLength={6} />
// </Form.Item>
// {/* User Name ชื่อ-นามสกุล */}
// <Form.Item
// name="username"
// label="ชื่อ-นามสกุล"
// tooltip="ชื่อเจ้าของร้าน หรือผู้ที่ได้รับผิดชอบ"
// rules={[
// {
// required: true,
// message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Garage Name ชื่อร้านซ่อม */}
// <Form.Item
// name="garagename"
// label="ชื่อร้านซ่อม"
// tooltip="ชื่อร้านซ่อม หรืออู่ซ่อมรถ"
// rules={[
// {
// required: true,
// message: "กรุณาระบุ ชื่อร้านซ่อม หรืออู่ซ่อมรถ ของคุณ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Gmail */}
// <Form.Item
// name="email"
// label="E-mail"
// rules={[
// {
// type: "email",
// message: "ข้อมูลที่ป้อนไม่ถูกต้อง ตามรูปแบบ E-mail!",
// },
// {
// required: true,
// message: "กรุณาใส่อีเมลของคุณ!",
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Garage type ประเภทของร้านซ่อม */}
// <Form.Item
// name="garagetype"
// label="ประเภทของร้านซ่อม"
// tooltip="เลือกประเภทของร้านซ่อม (สามารถเลือกได้มากกว่าหนึ่งประเภท)"
// rules={[
// {
// required: true,
// message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
// },
// ]}
// >
// <Select
// mode="multiple"
// allowClear
// style={{ width: "100%" }}
// placeholder="Please select"
// >
// <Option value="ศูนย์บริการรถยนต์">ศูนย์บริการรถยนต์</Option>
// <Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
// <Option value="ศูนย์บริการรถจักรยานยนต์">
// ศูนย์บริการรถจักรยานยนต์
// </Option>
// <Option value="อู่ซ่อมรถจักรยานยนต์">
// อู่ซ่อมรถจักรยานยนต์
// </Option>
// <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
// ร้านบริการซ่อมอุปกรณ์การเกษตร
// </Option>
// </Select>
// </Form.Item>
// {/* หมายเลขโทรศัพท์ */}
// <Form.Item
// style={{ marginTop: "20px" }}
// name="phone"
// label="หมายเลขโทรศัพท์"
// rules={[
// {
// required: true,
// message: "กรุณาใส่หมายเลขโทรศัพท์ของคุณ!",
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* เวลาที่ร้านเปิด */}
// <Form.Item
// style={{ marginTop: "20px" }}
// label="เวลาที่ร้านเปิด"
// rules={[
// {
// // required: true,
// // message: "กรุณาระบุเวลาเปิด-ปิดร้านของคุณ",
// },
// ]}
// >
// <Row>
// <TimePicker
// defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
// onChange={handleOnTime}
// />
// <div className="div-time">ถึงเวลา</div>
// <TimePicker
// defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
// onChange={handleOffTime}
// />
// </Row>
// </Form.Item>
// <Divider orientation="left">
// <b>ที่อยู่ของร้าน</b>
// </Divider>
// <Row>
// {/* Addess Number บ้านเลขที่*/}
// <Form.Item
// name="addressnumber"
// label="ตั้งอยู่เลขที่"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* หมู่ที่ */}
// <Form.Item
// name="moo"
// label="หมู่ที่"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// </Row>
// <Row>
// {/* ตรอก/ซอย */}
// <Form.Item
// name="alley"
// label="ตรอก/ซอย"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* ถนน */}
// <Form.Item
// name="road"
// label="ถนน"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// </Row>
// {/* ตำบล/แขวง */}
// <Form.Item
// name="subdistrict"
// label="ตำบล/แขวง"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* อำเภอ/เขต */}
// <Form.Item
// name="district"
// label="อำเภอ/เขต"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* จังหวัด */}
// <Form.Item
// name="province"
// label="จังหวัด"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* รหัสไปรษณีย์ */}
// <Form.Item
// name="poscode"
// label="รหัสไปรษณีย์"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// <Divider orientation="left">
// <b>กรุณาปักหมุดที่อยู่ของร้าน</b>
// </Divider>
// {/* ปักหมุดแผนที่ */}
// <Col md={24} span={24}>
// <MapWithAMarker
// 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: "300px" }} />}
// mapElement={<div style={{ height: "100%" }} />}
// />
// </Col>
// <Form.Item {...tailFormItemLayout}>
// <Button
// className="bt-them"
// htmlType="submit"
// style={{ marginTop: "30px" }}
// >
// ยืนยันการสมัคร
// </Button>
// </Form.Item>
// </Form>
// </Col>
// <Col
// span={6}
// xs={{ order: 1 }}
// sm={{ order: 2 }}
// md={{ order: 3 }}
// lg={{ order: 4 }}
// ></Col>
// </Row>
// </div>
); );
} }
src/view/widget/RepairTable.jsx
View file @ ebf673ab
...@@ -106,15 +106,10 @@ export default function App() { ...@@ -106,15 +106,10 @@ export default function App() {
confirm(); confirm();
setSearchText(selectedKeys[0]); setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex); setSearchedColumn(dataIndex);
// this.setState({
// searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
}; };
const handleReset = (clearFilters) => { const handleReset = (clearFilters) => {
clearFilters(); clearFilters();
// this.setState({ searchText: "" });
setSearchText(""); setSearchText("");
}; };
...@@ -145,25 +140,24 @@ export default function App() { ...@@ -145,25 +140,24 @@ export default function App() {
return ( return (
<> <>
{record.device_type === "รถจักรยานยนต์" || {record.device_type === "รถจักรยานยนต์" ||
record.device_type === "รถยนต์" ? ( record.device_type === "รถยนต์" ? (
<> <>
<Space size="small"> <Space size="small">
<Text style={{ fontWeight: "bold" }}> <Text style={{ fontWeight: "bold" }}>
{record.car_number} {record.car_number}
</Text> </Text>
</Space> </Space>
{<br />} {<br />}
<Text>{record.car_province}</Text> <Text>{record.car_province}</Text>
</> </>
) : ( ) : (
<> <>
<Text>{record.equipment}</Text> <Text>{record.equipment}</Text>
</> </>
)} )}
</> </>
); );
}, },
}, },
{ {
title: "รายละเอียดการซ่อมเบื้องต้น", title: "รายละเอียดการซ่อมเบื้องต้น",
...@@ -178,9 +172,40 @@ export default function App() { ...@@ -178,9 +172,40 @@ export default function App() {
}, },
{ {
title: "สถานะ", title: "สถานะ",
dataIndex: "status", // dataIndex: "status",
key: "status", key: "status",
...getColumnSearchProps("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: "เพิ่มเติม", title: "เพิ่มเติม",
...@@ -188,20 +213,20 @@ export default function App() { ...@@ -188,20 +213,20 @@ export default function App() {
render: (record) => { render: (record) => {
return ( return (
<> <>
<Link <Link
to={{ to={{
pathname: "/dashboard/all-repair/detail", pathname: "/dashboard/all-repair/detail",
state: { state: {
detailsID: record.detailsID, detailsID: record.detailsID,
memberTel: record.member_tel, memberTel: record.member_tel,
}, },
}} }}
> >
<Text style={{ color: "blue" }}> <Text style={{ color: "blue" }}>
{/* <ToolOutlined style={{fontSize: "200%"}} /> */} {/* <ToolOutlined style={{fontSize: "200%"}} /> */}
จัดการงานซ่อม จัดการงานซ่อม
</Text> </Text>
</Link> </Link>
</> </>
); );
}, },
...@@ -223,6 +248,7 @@ export default function App() { ...@@ -223,6 +248,7 @@ export default function App() {
bordered bordered
columns={columns} columns={columns}
dataSource={datas} dataSource={datas}
className="border"
/> />
</div> </div>
</> </>
......
src/view/widget/widgetPie.jsx
View file @ ebf673ab
import React, { useEffect, useState } from "react"; 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 { CanvasJSChart } from "canvasjs-react-charts";
// Import services // Import services
import { FetctDetailByGarage } from "../../services"; import { FetctDetailByGarage } from "../../services";
const { Title } = Typography const { Title } = Typography;
export default function Ecommerce(props) { export default function Ecommerce(props) {
const [datas, setDatas] = useState([]); const [datas, setDatas] = useState([]);
...@@ -30,7 +32,7 @@ export default function Ecommerce(props) { ...@@ -30,7 +32,7 @@ export default function Ecommerce(props) {
let carlist = []; let carlist = [];
let motolist = []; let motolist = [];
let agirculturelist = []; let agirculturelist = [];
let totol = [] let totol = [];
if (datas !== null) { if (datas !== null) {
for (let i = 0; i < datas.length; i++) { for (let i = 0; i < datas.length; i++) {
...@@ -44,7 +46,7 @@ export default function Ecommerce(props) { ...@@ -44,7 +46,7 @@ export default function Ecommerce(props) {
if (datas[i].device_type === "อุปกรณ์การเกษตร") { if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type); agirculturelist.push(datas[i].device_type);
} }
totol.push(datas[i]) totol.push(datas[i]);
} }
} else { } else {
// console.log('data is null', datas) // console.log('data is null', datas)
...@@ -78,7 +80,9 @@ export default function Ecommerce(props) { ...@@ -78,7 +80,9 @@ export default function Ecommerce(props) {
options={options} options={options}
/* onRef={ref => this.chart = ref} */ /* onRef={ref => this.chart = ref} */
/> />
<Title level={5}>การซ่อมทั้งหมด {totol.length} รายการ</Title> <Link to={"/dashboard/all-repair"}>
<Title level={5}>การซ่อมทั้งหมด {totol.length} รายการ</Title>
</Link>
</div> </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