Skip to content

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

add 18/02/2565

parent 25ddf61a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1504 additions and 308 deletions
package.json
View file @ b0050fb6
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-google-maps": "^9.4.5", "react-google-maps": "^9.4.5",
"react-highlight-words": "^0.17.0",
"react-router-dom": "5.2.0", "react-router-dom": "5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-validation": "^3.0.7", "react-validation": "^3.0.7",
......
src/Layouts/Header/tabHeader.jsx
View file @ b0050fb6
...@@ -31,8 +31,7 @@ export default function App() { ...@@ -31,8 +31,7 @@ export default function App() {
<Col span={15}> <Col span={15}>
<Row> <Row>
<Row className="main-logo" onClick={clicklogo}> <Row className="main-logo" onClick={clicklogo}>
<div> Repair </div>&nbsp; Repair Center
<div className="logo"> Center</div>
</Row> </Row>
</Row> </Row>
</Col> </Col>
......
src/Layouts/Menu/menuDashboard.jsx
View file @ b0050fb6
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Layout, Menu } from "antd"; import { Col, Layout, Menu, Row, Typography, Avatar } from "antd";
import { import {
HomeOutlined, HomeOutlined,
AppstoreAddOutlined, AppstoreAddOutlined,
ToolOutlined, ToolOutlined,
UnorderedListOutlined,
OrderedListOutlined, OrderedListOutlined,
UserAddOutlined, UserAddOutlined,
TeamOutlined, TeamOutlined,
...@@ -13,7 +12,7 @@ import { ...@@ -13,7 +12,7 @@ import {
CommentOutlined, CommentOutlined,
SettingOutlined, SettingOutlined,
LogoutOutlined, LogoutOutlined,
DollarOutlined, // DollarOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
// import services // import services
...@@ -21,10 +20,13 @@ import { sendLogout } from "../../services"; ...@@ -21,10 +20,13 @@ import { sendLogout } from "../../services";
const { Sider } = Layout; const { Sider } = Layout;
const { SubMenu } = Menu; const { SubMenu } = Menu;
const { Title } = Typography;
export default function App() { export default function App() {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
const onCollapse = (collapsed) => { const onCollapse = (collapsed) => {
setCollapsed(collapsed); setCollapsed(collapsed);
}; };
...@@ -46,12 +48,30 @@ export default function App() { ...@@ -46,12 +48,30 @@ export default function App() {
overflowY: "scroll", overflowY: "scroll",
}} }}
> >
{/* <Divider /> */}
{/* <Divider /> */}
<Sider <Sider
theme="dark" theme="dark"
collapsible collapsible
collapsed={collapsed} collapsed={collapsed}
onCollapse={onCollapse} 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 <Menu
theme="dark" theme="dark"
defaultSelectedKeys={["1"]} defaultSelectedKeys={["1"]}
...@@ -62,20 +82,16 @@ export default function App() { ...@@ -62,20 +82,16 @@ export default function App() {
<Link to={"/dashboard"}>หน้าแรก</Link> <Link to={"/dashboard"}>หน้าแรก</Link>
</Menu.Item> </Menu.Item>
<SubMenu <SubMenu key="sub1" icon={<ToolOutlined />} title="จัดการงานซ่อม">
key="sub1"
icon={<UnorderedListOutlined />}
title="จัดการงานซ่อม"
>
<Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
</Menu.Item>
<Menu.Item key="3" icon={<AppstoreAddOutlined />}> <Menu.Item key="3" icon={<AppstoreAddOutlined />}>
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link> <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="4" icon={<ToolOutlined />}> <Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link> <Link to={"/dashboard/all-repair"}>งานซ่อมทั้งหมด</Link>
</Menu.Item> </Menu.Item>
{/* <Menu.Item key="4" icon={<ToolOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
</Menu.Item> */}
</SubMenu> </SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า"> <SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
...@@ -86,20 +102,20 @@ export default function App() { ...@@ -86,20 +102,20 @@ export default function App() {
<Link to={"/dashboard/search-repair"}>ค้นหาการซ่อม</Link> <Link to={"/dashboard/search-repair"}>ค้นหาการซ่อม</Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}> <Menu.Item key="7" icon={<TeamOutlined />}>
<Link to={"/dashboard/search-member"}>ลูกค้าของฉัน</Link> <Link to={"/dashboard/member"}>ลูกค้าของฉัน</Link>
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
{/*
<Menu.Item key="10" icon={<DollarOutlined />}> <Menu.Item key="10" icon={<DollarOutlined />}>
<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={"/dashboard/reported"}>แจ้งปัญหาการใช้งาน</Link> <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
......
src/Layouts/Menu/menulist.jsx
View file @ b0050fb6
...@@ -16,7 +16,7 @@ const { Sider } = Layout; ...@@ -16,7 +16,7 @@ const { Sider } = Layout;
const { SubMenu } = Menu; const { SubMenu } = Menu;
export default function App() { export default function App() {
const [collapsed, setCollapsed] = useState(true); const [collapsed, setCollapsed] = useState(false);
const onCollapse = (collapsed) => { const onCollapse = (collapsed) => {
setCollapsed(collapsed); setCollapsed(collapsed);
...@@ -40,7 +40,7 @@ export default function App() { ...@@ -40,7 +40,7 @@ export default function App() {
<Menu <Menu
theme="dark" theme="dark"
defaultSelectedKeys={["1"]} defaultSelectedKeys={["1"]}
// defaultOpenKeys={["sub1"]} defaultOpenKeys={["sub1"]}
mode="inline" mode="inline"
> >
<Menu.Item key="1" icon={<PieChartOutlined />}> <Menu.Item key="1" icon={<PieChartOutlined />}>
......
src/Layouts/VerticalLayout.jsx
View file @ b0050fb6
...@@ -8,13 +8,12 @@ import HeaderTap from "./Header/tabHeader"; ...@@ -8,13 +8,12 @@ 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";
const { Content, Footer } = Layout; const { Content } = Layout;
export default function VerticalLayout(props) { export default function VerticalLayout(props) {
const { children } = props; const { children } = props;
// let test = ""; // let test = "";
const history = useHistory(); const history = useHistory();
const [checkLocal, setChechLocal] = useState(null); const [checkLocal, setChechLocal] = useState(null);
...@@ -23,17 +22,18 @@ export default function VerticalLayout(props) { ...@@ -23,17 +22,18 @@ 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({ history.push({
pathname: "/dashboard", pathname: "/dashboard",
state: checkLocal.userData.userId state: checkLocal.userData.userId,
}); });
// console.log('test', checkLocal)
} }
// console.log(checkLocal);
return ( return (
<> <>
<HeaderTap <HeaderTap
...@@ -48,7 +48,7 @@ export default function VerticalLayout(props) { ...@@ -48,7 +48,7 @@ export default function VerticalLayout(props) {
{checkLocal === null ? ( {checkLocal === null ? (
<Layout <Layout
style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }} style={{ minHeight: "90vh", maxHeight: "90vh" }}
> >
<MenuList /> <MenuList />
...@@ -61,17 +61,17 @@ export default function VerticalLayout(props) { ...@@ -61,17 +61,17 @@ export default function VerticalLayout(props) {
{children} {children}
</div> </div>
</Content> </Content>
<Footer className="footer"> {/* <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 <Layout
style={{ style={{
minHeight: "93vh", minHeight: "90vh",
maxHeight: "90vh", maxHeight: "90vh",
paddingTop: "0.5vh", // paddingTop: "0.5vh",
}} }}
> >
<MenuDashboard /> <MenuDashboard />
...@@ -84,9 +84,9 @@ export default function VerticalLayout(props) { ...@@ -84,9 +84,9 @@ export default function VerticalLayout(props) {
{children} {children}
</div> </div>
</Content> </Content>
<Footer className="footer"> {/* <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>
)} )}
......
src/assets/fonts/index.css
View file @ b0050fb6
...@@ -4,3 +4,12 @@ body { ...@@ -4,3 +4,12 @@ body {
font-family: 'Mitr', sans-serif; font-family: 'Mitr', sans-serif;
} }
.bg-freecar {
/* background-image: url("../images/freeCar.jpg"); */
background-image: linear-gradient(#001529, #25274d);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/* background-size: cover; */
}
/* 44318d, 25274d, faed26 */
src/assets/less/index.less
View file @ b0050fb6
...@@ -5,3 +5,5 @@ ...@@ -5,3 +5,5 @@
@import "pages/register.less"; @import "pages/register.less";
@import "pages/reported.less"; @import "pages/reported.less";
@import "pages/dashboard/index.less"; @import "pages/dashboard/index.less";
@base-url: "D:\Project\Repair-app\src\assets\images";
src/assets/less/pages/dashboard/index.less
View file @ b0050fb6
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
// box-shadow: 1px 3px #001529; // box-shadow: 1px 3px #001529;
} }
.div-content-main { // .div-content-main {
// border: 1px solid #333; // // border: 1px solid #333;
} // }
.main-content-repair { .main-content-repair {
padding: 10px; padding: 10px;
// border: 1px solid #333; // border: 1px solid #333;
...@@ -86,3 +86,48 @@ ...@@ -86,3 +86,48 @@
.border { .border {
border: 1px solid #001529; border: 1px solid #001529;
} }
.bt-delete {
color: red;
font-weight: bold;
}
.div-lr-5 {
padding: 0% 5% 2% 5%;
// border: 1px solid #001529;
}
.bg-theme {
background-color: #001529;
color: aliceblue;
}
.w-100 {
min-height: 87vh;
}
.bg-theme {
background-color: #001529;
}
.display-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.w-auto {
height: auto;
}
.color-faed26 {
color: #faed26;
}
// .left {
// // display: flex;
// justify-content: left;
// }
src/router/routes/Pages.jsx
View file @ b0050fb6
...@@ -79,6 +79,42 @@ const PagesRoutes = [ ...@@ -79,6 +79,42 @@ const PagesRoutes = [
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')), component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')),
layout: 'VerticalLayout', layout: 'VerticalLayout',
}, },
// status
// {
// path: '/dashboard/status',
// component: lazy(() => import('../../view/Dashboards/repairDashboard/repairSatatus/index')),
// layout: 'VerticalLayout',
// },
// Add Member
{
path: '/dashboard/add-member',
component: lazy(() => import('../../view/Dashboards/member/addMember')),
layout: 'VerticalLayout',
},
// Search Repair
{
path: '/dashboard/search-repair',
component: lazy(() => import('../../view/Dashboards/member/searchMember')),
layout: 'VerticalLayout',
},
// Show Repair
{
path: '/dashboard/search-repair/details',
component: lazy(() => import('../../view/Dashboards/member/ShowDetailMember')),
layout: 'VerticalLayout',
},
// Show Repair
{
path: '/dashboard/member',
component: lazy(() => import('../../view/Dashboards/member/member')),
layout: 'VerticalLayout',
},
]; ];
export default PagesRoutes; export default PagesRoutes;
src/services/index.js
View file @ b0050fb6
...@@ -18,10 +18,9 @@ export const sendLogin = (data) => { ...@@ -18,10 +18,9 @@ export const sendLogin = (data) => {
return axios return axios
.post(process.env.REACT_APP_SECRET_API + "/authentication/login", data) .post(process.env.REACT_APP_SECRET_API + "/authentication/login", data)
.then((response) => { .then((response) => {
if (response.data) { if (response.data.code === 200) {
localStorage.setItem("user", JSON.stringify(response.data)); localStorage.setItem("user", JSON.stringify(response.data));
} }
return response.data; return response.data;
}) })
.catch((err) => { .catch((err) => {
...@@ -36,7 +35,6 @@ export const sendLogout = () => { ...@@ -36,7 +35,6 @@ export const sendLogout = () => {
// get list All garage // get list All garage
export const FetchGarageAll = () => { export const FetchGarageAll = () => {
// console.log('test55555555', process.env.REACT_APP_SECRET_API)
return ( return (
axios axios
.get(process.env.REACT_APP_SECRET_API + "/garage/all") .get(process.env.REACT_APP_SECRET_API + "/garage/all")
...@@ -80,23 +78,18 @@ export const InsertDetails = (data) => { ...@@ -80,23 +78,18 @@ export const InsertDetails = (data) => {
// get data FetctDetailByGarage // get data FetctDetailByGarage
export const FetctDetailByGarage = (data) => { export const FetctDetailByGarage = (data) => {
// console.log('fetdata', data) return axios
return ( .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
axios params: data,
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data) })
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", { .then((response) => response.data)
params: data, .catch((err) => {
}) console.log(err);
.then((response) => response.data) });
.catch((err) => {
console.log(err);
})
);
}; };
// get data FetctDetailByGarageID // get data FetctDetailByGarageID
export const FetctDetailByGarageID = (data) => { export const FetctDetailByGarageID = (data) => {
// console.log('fetdata', data)
return ( return (
axios axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data) // .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
...@@ -109,3 +102,97 @@ export const FetctDetailByGarageID = (data) => { ...@@ -109,3 +102,97 @@ export const FetctDetailByGarageID = (data) => {
}) })
); );
}; };
// get data FetctDetailByMember
export const FetchDetailByMember = (data) => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbymember", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// send data to Insert Spare to Details
export const InsertSpare = (data) => {
return axios
.post(process.env.REACT_APP_SECRET_API + "/repairdetail/insert-spare", data)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// get data FetctDetailByGarageID
export const FetchSpareByDetailID = (data) => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getspare-detailid", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Delete Spare
export const DeleteSpare = (data) => {
return axios
.delete(process.env.REACT_APP_SECRET_API + "/repairdetail/delete-spare", {
data: { id: data },
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Update Spare
export const UpdateDetail = (data) => {
console.log(data);
return axios
.put(process.env.REACT_APP_SECRET_API + "/repairdetail/update-detail", data)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Insert Member
export const InsertMember = (data) => {
// console.log('service', data)
return axios
.post(process.env.REACT_APP_SECRET_API + "/member/insert", data)
.then((response) => {
return response.data;
})
.catch((err) => {
console.log(err);
});
};
// get data FetctMemberByGaragename
export const FetctMemberByGarage= (data) => {
// console.log(data)
return axios
.get(process.env.REACT_APP_SECRET_API + "/member/getmember/member-regis", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// // logout
// export const sendLogout = () => {
// return localStorage.removeItem("user");
// };
src/view/Dashboards/component/ContentSearch.jsx 0 → 100644
View file @ b0050fb6
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Col, Row, Card, Typography } from "antd";
// import Service
import { FetchDetailByMember } from "../../../services";
const { Text } = Typography;
export default function ContentSearch(props) {
//set useState
const [datas, setDatas] = useState([]);
const { tel } = props;
useEffect(() => {
let data = {
member_tel: tel,
};
const getDetailByMember = async () => {
if (tel !== undefined) {
await FetchDetailByMember(data).then(async (response) => {
await setDatas(response.data);
// console.log('data', response.data[0])
});
} else {
setDatas([]);
}
};
getDetailByMember();
}, [tel]);
// console.log("datas", datas, "tel", tel);
return (
<>
<Row gutter={[0, 16]}>
{datas !== undefined ? (
<>
{datas.map((val, index) => {
return (
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 7, offset: 1 }}
className="border left"
>
<Card
type="inner"
title={val.garage_name + " " + val.repair_date}
extra={
<Link
to={{
pathname: "/dashboard/search-repair/details",
state: {
detailID: val.detailsID,
memberTel: val.member_tel,
},
}}
>
<Text style={{ color: "blue" }}>เพิ่มเติม</Text>
</Link>
}
>
<Text>
<b>ประเภท : </b>
{val.device_type}
</Text>
<br />
{val.device_type === "รถยนต์" ||
val.device_type === "รถจักรยานยนต์" ? (
<>
<Text>
<b>ทะเบียนรถ : </b>
{val.car_number} {val.car_province}
</Text>
<br />
<Text>
<b>ยี่ห้อ / รุ่น : </b>
{val.brand} {val.model}
</Text>
<br />
</>
) : (
<>
<Text>
<b>ชนิด : </b>
{val.equipment}
</Text>
<br />
<Text>
<b>ยี่ห้อ / รุ่น : </b>
{val.brand}
</Text>
<br />
</>
)}
<Text>
<b>การซ่อมเบื้องต้น : </b>
{val.repair_details}
</Text>
</Card>
</Col>
);
})}
</>
) : null}
</Row>
</>
);
}
src/view/Dashboards/component/SpareAdd.jsx
View file @ b0050fb6
This diff is collapsed.
src/view/Dashboards/component/TitleShowDetail.jsx
View file @ b0050fb6
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Col, Row, Typography } from "antd"; import { Col, Divider, Row, Typography } from "antd";
import { MobileOutlined, DollarOutlined } from "@ant-design/icons"; import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
// import Service // import Service
...@@ -26,7 +26,7 @@ export default function App(props) { ...@@ -26,7 +26,7 @@ export default function App(props) {
getDetailByGarage(); getDetailByGarage();
}, [detailID]); }, [detailID]);
console.log(datas); // console.log(datas);
return ( return (
<> <>
...@@ -111,6 +111,15 @@ export default function App(props) { ...@@ -111,6 +111,15 @@ export default function App(props) {
</Col> </Col>
</Row> </Row>
</div> </div>
<Divider />
<div>
<Row>
<Col span={24}>
<Title level={4}>รายละเอียดการซ่อมเบื้องต้น</Title>
<Text>{datas.repair_details}</Text>
</Col>
</Row>
</div>
</> </>
); );
} }
src/view/Dashboards/component/agriculture.jsx
View file @ b0050fb6
...@@ -70,9 +70,16 @@ export default function App(props) { ...@@ -70,9 +70,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) { if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => { InsertDetails(data).then((response) => {
console.log("response", response); Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
}); });
window.location.reload(false)
} else { } else {
Modal.info({ Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก", title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/component/car.jsx
View file @ b0050fb6
...@@ -86,9 +86,16 @@ export default function App(props) { ...@@ -86,9 +86,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) { if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => { InsertDetails(data).then((response) => {
console.log("response", response); Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
}); });
window.location.reload(false)
} else { } else {
Modal.info({ Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก", title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/component/motorcycle.jsx
View file @ b0050fb6
...@@ -82,9 +82,16 @@ export default function App(props) { ...@@ -82,9 +82,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) { if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => { InsertDetails(data).then((response) => {
console.log("response", response); Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
}); });
window.location.reload(false)
} else { } else {
Modal.info({ Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก", title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/ecommerce/index.jsx
View file @ b0050fb6
...@@ -7,16 +7,15 @@ import { FetctDetailByGarage } from "../../../services"; ...@@ -7,16 +7,15 @@ import { FetctDetailByGarage } from "../../../services";
// import { useLocation } from "react-router-dom"; // import { useLocation } from "react-router-dom";
import { Row, Col, Divider, Result, Button } from "antd"; import { Row, Col, Divider, Result, Button, Statistic } from "antd";
//import Widget //import Widget
import CanvasJSChart from "../../widget/widgetPie"; import CanvasJSChart from "../../widget/widgetPie";
// import ColumnJSChart from "../../widget/widgetColumn"; import ColumnJSChart from "../../widget/widgetColumn";
// const { Header } = Layout; // const { Header } = Layout;
export default function Ecommerce() { export default function Ecommerce() {
// let location = useLocation(); // let location = useLocation();
const [datas, setDatas] = useState([]); const [datas, setDatas] = useState([]);
...@@ -44,15 +43,52 @@ export default function Ecommerce() { ...@@ -44,15 +43,52 @@ export default function Ecommerce() {
<> <>
{datas !== null ? ( {datas !== null ? (
<> <>
<div className="display-flex-main"> {/* <div className="display-flex-main"> */}
<div className="div-content-chart"> {/* <div className="div-content-chart"> */}
<Row className="content-chart"> <Row gutter={[0, 16]} style={{ padding: "4%" }}>
<Col xs={24} lg={24} className="chart"> <Col xs={24} lg={{ span: 10, offset: 1 }}>
<CanvasJSChart /> <CanvasJSChart />
</Col>
<Col xs={24} lg={{ span: 10, offset: 2 }}>
<ColumnJSChart />
</Col>
</Row>
<Divider />
<Row>
<Col span={12}>
<Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}>
<Statistic title="ลูกค้าทั้งหมดของระบบ" value={120} />
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic
title="ลูกค้าของฉัน"
value={12}
// precision={2}
/>
</Col> </Col>
</Row> </Row>
</div> </Col>
</div>
<Col span={12}>
<Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}>
<Statistic title="การรายงาน" value={120} />
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic
title="รายได้ทั้งหมดของร้าน (บาท)"
value={19356}
precision={2}
/>
</Col>
</Row>
</Col>
</Row>
{/* </div> */}
{/* </div> */}
</> </>
) : ( ) : (
<> <>
...@@ -63,7 +99,7 @@ export default function Ecommerce() { ...@@ -63,7 +99,7 @@ export default function Ecommerce() {
<Result <Result
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"}>เพิ่มการซ่อม</Link>
</Button> </Button>
} }
...@@ -75,7 +111,6 @@ export default function Ecommerce() { ...@@ -75,7 +111,6 @@ export default function Ecommerce() {
</> </>
)} )}
<Divider />
{/* <CanvasJSChart className="chart" data={location.state} /> */} {/* <CanvasJSChart className="chart" data={location.state} /> */}
</> </>
); );
......
src/view/Dashboards/member/ShowDetailMember.jsx 0 → 100644
View file @ b0050fb6
import React, { useEffect, useState } from "react";
import { Col, Row, Typography, Table, Divider } from "antd";
import { MobileOutlined } from "@ant-design/icons";
import { useLocation } from "react-router-dom";
// import Service
import { FetctDetailByGarageID, FetchSpareByDetailID } from "../../../services";
// import { useLocation } from "react-router-dom";
const { Text, Title } = Typography;
const { Column, ColumnGroup } = Table;
export default function App() {
let location = useLocation();
// const detailID = props;
const detailID = location.state;
//set useState
const [datas, setDatas] = useState([]);
const [dataSpare, setDataSpare] = useState([]);
useEffect(() => {
const getDetailByGarage = async () => {
await FetctDetailByGarageID(detailID).then(async (response) => {
await setDatas(response.data[0]);
// console.log('data', response.data[0])
});
await FetchSpareByDetailID(detailID).then((response) => {
if (response.data) {
setDataSpare(response.data);
}
});
};
getDetailByGarage();
}, [detailID]);
let listData = [];
if (dataSpare.length !== 0) {
for (let i = 0; i < dataSpare.length; i++) {
let toarr = JSON.parse(dataSpare[i].spare);
// console.log("toarr", toarr);
let newData = {
spareID: dataSpare[i].spareID,
spareName: toarr.spareName,
qty: toarr.qty,
qtyPrice: toarr.qtyPrice,
sumPrice: toarr.sumPrice,
};
listData.push(newData);
}
}
// console.log('dataspare',dataSpare);
// console.log('spare',listData);
return (
<>
<div className="div-title-detail">
<Row gutter={[0, 32]} className="title-show-detail">
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ชื่ออุปกรณ์</Text>
<Title level={4} className="color-fff">
{/* <Text className="color-fff">{datas.brand} {datas.model}</Text> */}
{datas.device_type === "รถจักรยานยนต์" ||
datas.device_type === "รถยนต์" ? (
<>
<Text className="color-fff">
{datas.brand} {datas.model}
</Text>
</>
) : (
<>
<Text className="color-fff">{datas.equipment}</Text>
</>
)}
</Title>
<Text className="color-fff">{datas.device_type}</Text>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ทะเบียน / ชนิด</Text>
{datas.device_type === "รถจักรยานยนต์" ||
datas.device_type === "รถยนต์" ? (
<>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.car_number}</Text>
</Title>
<Text className="color-fff">{datas.car_province}</Text>
</>
) : (
<>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.equipment}</Text>
</Title>
</>
)}
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ลูกค้า</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">คุณ {datas.member_name}</Text>
</Title>
<Text className="color-fff">
<MobileOutlined />
{datas.member_tel}
</Text>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ร้านที่รับซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.garage_name}</Text>
</Title>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">วันที่รับซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.repair_date}</Text>
</Title>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">สถานะการซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.status}</Text>
</Title>
</Col>
</Row>
</div>
<div>
<Divider />
<Row>
<Col span={24}>
<Title level={4}>รายละเอียดการซ่อมเบื้องต้น</Title>
<Text>{datas.repair_details}</Text>
</Col>
</Row>
</div>
<div className="div-p-5">
<Table
dataSource={listData}
scroll={{ x: 400 }}
bordered
className="border"
>
<ColumnGroup title="รายละเอียดการซ่อม">
<Column
title="ลำดับ"
width={"10%"}
render={(value, item, index) => index + 1}
/>
<Column
title="รายการซ่อม / อะไหล่"
dataIndex="spareName"
key="spareName"
width={"48%"}
/>
<Column title="จำนวน" dataIndex="qty" key="qty" width={"10%"} />
<Column
title="ราคาต่อหน่วย"
dataIndex="qtyPrice"
key="qtyPrice"
width={"12%"}
/>
<Column
title="ราคารวม"
dataIndex="sumPrice"
key="sumPrice"
width={"10%"}
/>
</ColumnGroup>
</Table>
</div>
</>
);
}
src/view/Dashboards/member/addMember.jsx 0 → 100644
View file @ b0050fb6
import React from "react";
import { Col, Form, Row, Typography, Input, Divider, Button, Modal } from "antd";
import { UserAddOutlined } from "@ant-design/icons";
// Import Services
import { InsertMember } from "../../../services";
const { Title } = Typography;
export default function AddMember() {
// console.log(JSON.parse(localStorage.getItem("user")).userData.garageName);
let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
let userID = JSON.parse(localStorage.getItem("user")).userData.userId;
const onFinish = (values) => {
// console.log("values", values);
let addresss = {
address_details: values.address_details,
sub_district: values.sub_district,
district: values.district,
province: values.province,
poscode: values.poscode,
};
let newAddress = JSON.stringify(addresss);
let data = {
party: "member",
garageID: userID,
member_tel: values.member_tel,
member_name: values.member_name,
member_ads: newAddress,
shop_register: garageName,
};
// console.log("data", data);
InsertMember(data).then((response) => {
if (response) {
if (response.code === 200) {
Modal.info({
title: "เรียบร้อยแล้ว",
content: `สมัครสมาชิกให้ลูกค้าเรียบร้อยแล้ว`,
onOk: () => {window.location.reload(false)}
});
} else {
// console.log("response", response.message);
Modal.info({
title: "มีลูกค้าสมาชิกนี้แล้ว",
content: `ลูกค้ารหัส ${values.member_tel} นี้ สมัครสมาชิกแล้ว กรุณาตรวจสอบอีกที`,
});
}
}
});
// console.log("values", JSON.parse(data.memeber_ads));
};
return (
<>
<Row gutter={[0, 32]}>
<Col
xs={{ span: 24 }}
lg={{ span: 8 }}
className="w-100 bg-theme display-flex-center"
>
<Col>
<UserAddOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<Title level={2} style={{ color: "#a4b3b6" }}>
ลงทะเบียนลูกค้า
</Title>
</Col>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 16 }}
className="display-flex-center"
>
<Row>
<Form onFinish={onFinish}>
<Col span={16} offset={2}>
<Divider orientation="left">
<b>ข้อมูลลูกค้า</b>
</Divider>
<Form.Item
label="หมายเลขโทรศัพท์"
name="member_tel"
tooltip="หมายเลขโทรศัพท์ของลูกค้าที่ใช้สมัครนี้
จะถูกนำไปใช้เป็นรหัสหลักของลูกค้าในการค้นหาการซ่อมในระบบต่อไป"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขโทรศัพท์ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
{/* <Text style={{ color: "red" }}>
*หมายเลขโทรศัพท์ของลูกค้าที่ใช้สมัครนี้
จะถูกนำไปใช้เป็นรหัสหลักของลูกค้าในการค้นหาการซ่อมในระบบต่อไป
</Text> */}
</Col>
<Col span={16} offset={2}>
<Form.Item
label="ชื่อ-นามสกุล"
name="member_name"
rules={[
{
required: true,
message: "กรุณากรอก ชื่อ-นามสกุล ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col span={16} offset={2}>
<Divider orientation="left">
<b>ข้อมูลที่อยู่ลูกค้า</b>
</Divider>
<Form.Item
label="รายละเอียดที่อยู่"
name="address_details"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input.TextArea showCount maxLength={100} />
</Form.Item>
</Col>
<Col span={16} offset={2}>
<Row>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<Form.Item
label="ตำบล"
name="sub_district"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Form.Item
label="อำเภอ"
name="district"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
</Row>
</Col>
<Col span={16} offset={2}>
<Row>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<Form.Item
label="จังหวัด"
name="province"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Form.Item
label="รหัสไปรษณีย์"
name="poscode"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
</Row>
</Col>
<Form.Item>
<Button className="bt-them" htmlType="submit">
ยืนยัน
</Button>
</Form.Item>
</Form>
</Row>
</Col>
</Row>
</>
);
}
src/view/Dashboards/member/member.jsx 0 → 100644
View file @ b0050fb6
import React, { useState, useEffect } from "react";
import { Table, Input, Button, Space, Row, Col, Typography } from "antd";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "@ant-design/icons";
// import Service
import { FetctMemberByGarage } from "../../../services";
const { Title } = Typography
export default function Member() {
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
const [datas, setDatas] = useState([]);
let userId = JSON.parse(localStorage.getItem("user")).userData.userId;
useEffect(() => {
let data = {
userId: userId,
};
const getFunction = async () => {
await FetctMemberByGarage(data).then(async (response) => {
if (response.code === 500) {
console.log("data", response);
} else {
await setDatas(response.data);
}
// console.log('data', response)
});
};
getFunction();
}, [userId]);
let listData = [];
if (datas.length !== 0) {
for (let i = 0; i < datas.length; i++) {
let ads = JSON.parse(datas[i].member_ads);
let newData = {
member_name: datas[i].member_name,
member_tel: datas[i].member_tel,
register: datas[i].registration_date,
address_details: ads.address_details,
sub_district: ads.sub_district,
district: ads.district,
province: ads.province,
poscode: ads.poscode,
};
listData.push(newData);
}
}
const getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
ref={(node) => {
// searchInput = node;
}}
placeholder={`ค้นหา ${dataIndex}`}
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ marginBottom: 8, display: "block" }}
/>
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
ค้นหา
</Button>
<Button
onClick={() => handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
ล้าง
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: "",
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
// setTimeout(() => searchInput.select(), 100);
}
},
render: (text) =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
),
});
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
// this.setState({
// searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
};
const handleReset = (clearFilters) => {
clearFilters();
// this.setState({ searchText: "" });
setSearchText("");
};
const columns = [
{
title: "หมายเลขสมาชิก",
dataIndex: "member_tel",
key: "member_tel",
width: "20%",
...getColumnSearchProps("member_tel"),
},
{
title: "ชื่อ",
dataIndex: "member_name",
key: "member_name",
width: "20%",
...getColumnSearchProps("member_name"),
},
{
title: "ที่อยู่",
render: (record) => {
return (
<>
{record.address_details}, {record.sub_district}, {record.district},{" "}
{record.province}, {record.poscode}
</>
);
},
},
{
title: "วันที่ลงทะเบียน",
dataIndex: "register",
key: "register",
width: "20%",
...getColumnSearchProps("register"),
},
];
return (
<>
<Row style={{padding: "3% 0 0 0"}}>
<Col span={24}>
<Title level={3}>ลูกค้าทั้งหมดของร้าน</Title>
</Col>
</Row>
<div className="div-p-5">
<Table
scroll={{ x: 500 }}
bordered
columns={columns}
dataSource={listData}
/>
</div>
</>
);
}
src/view/Dashboards/member/searchMember.jsx 0 → 100644
View file @ b0050fb6
import React, { useState } from "react";
import { Col, Row, Typography, Input } from "antd";
// import { UserAddOutlined } from "@ant-design/icons";
// Import Component
import ContentSearch from '../component/ContentSearch'
const { Title, Text } = Typography;
const { Search } = Input;
export default function SearchMember() {
const [tel, setTel] = useState();
const onSearch = (value) => {
// console.log('value', typeof(value));
setTel(value);
};
// console.log(tel);
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>
<Col span={24}>
<ContentSearch tel={tel} />
</Col>
</Row>
</>
);
}
src/view/Dashboards/repairDashboard/repairAdd/index.jsx
View file @ b0050fb6
...@@ -37,8 +37,8 @@ export default function App() { ...@@ -37,8 +37,8 @@ export default function App() {
return ( return (
<> <>
<Row> <Row>
<Col span={24} className="box-text-title"> <Col span={24} style={{padding: '5%'}}>
<Title level={4}>เพิ่มการซ่อม</Title> <Title level={3}>เพิ่มการซ่อม</Title>
</Col> </Col>
<Col span={24}> <Col span={24}>
...@@ -73,7 +73,7 @@ export default function App() { ...@@ -73,7 +73,7 @@ export default function App() {
></Col> ></Col>
</Row> </Row>
</Col> </Col>
<div style={{display: 'flex', marginTop: '10px'}}> <div style={{ display: "flex", marginTop: "10px" }}>
<Title style={{ color: "red" }} level={5}> <Title style={{ color: "red" }} level={5}>
หมายเหตุ : &nbsp; หมายเหตุ : &nbsp;
</Title> </Title>
......
src/view/Dashboards/repairDashboard/repairList/ShowDetail.jsx
View file @ b0050fb6
...@@ -19,13 +19,14 @@ export default function ShowDetail() { ...@@ -19,13 +19,14 @@ export default function ShowDetail() {
//use State //use State
const detailID = location.state; const detailID = location.state;
// console.log(detailID); const memberTel = location.state;
// console.log(detailID, memberTel.memberTel);
return ( return (
<> <>
<TitleShowDetail detailID={detailID.detailsID} /> <TitleShowDetail detailID={detailID.detailsID} />
{/* Show Repair id = {detailID.detailsID} */} {/* Show Repair id = {detailID.detailsID} */}
<SpareAdd detailID={detailID.detailsID} /> <SpareAdd detailID={detailID.detailsID} memberTel={memberTel.memberTel} />
</> </>
); );
} }
src/view/Dashboards/repairDashboard/repairSatatus/index.jsx
View file @ b0050fb6
import React from "react";
import { Row, Col, Typography, Select } from "antd";
const { Title } = Typography;
const { Option } = Select;
export default function App() {
return (
<>
<Row gutter={[0, 32]} className="div-p-5">
<Col span={24}>
<Row>
<Col xs={{ span: 2 }} lg={{ span: 6 }}></Col>
<Col xs={{ span: 20 }} lg={{ span: 12 }}>
<Title level={4}>ค้นหาตามสถานะ </Title>
<div className="div-select">
<Select
allowClear
style={{ width: "100%" }}
placeholder="กรุณาเลือกสถานะ"
onChange={(e) => {
// setTypeSelect(e);
}}
>
<Option value="สำเร็จ">สำเร็จ</Option>
<Option value="อยู่ระหว่างการซ่อม">อยู่ระหว่างการซ่อม</Option>
</Select>
</div>
</Col>
<Col xs={{ span: 2 }} lg={{ span: 6 }}></Col>
</Row>
</Col>
<Col span={24}>test</Col>
</Row>
</>
);
}
src/view/Login/Login.jsx
View file @ b0050fb6
// import liff from "@line/liff"; // import liff from "@line/liff";
import React, { useEffect, useState, useRef } from "react"; import React from "react";
import { Form, Input, Button, Row, Col, Divider } from "antd"; import { Form, Input, Button, Row, Col, Modal, Typography } from "antd";
import BIRDS from "vanta/dist/vanta.birds.min"; import { LoginOutlined } from "@ant-design/icons";
import { sendLogin } from "../../services"; import { sendLogin } from "../../services";
function App() { const { Title } = Typography;
const [vantaEffect, setVantaEffect] = useState(0);
const myRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
BIRDS({
el: myRef.current,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
// const user = JSON.parse(localStorage.getItem('user'))
// console.log(user)
function App() {
const onFinish = (values) => { const onFinish = (values) => {
const data = { const data = {
garageID: values.garageID, garageID: values.garageID,
...@@ -42,98 +18,86 @@ function App() { ...@@ -42,98 +18,86 @@ function App() {
// console.log(data); // console.log(data);
sendLogin(data).then((response) => { sendLogin(data).then((response) => {
// console.log('response', response.userData) if (response.code === 200) {
setTimeout(() => { setTimeout(() => {
window.location.reload(false); window.location.reload(false);
}, 1000); }, 1000);
} else {
Modal.info({
title: "ไม่มีผู้ใช้นี้ในระบบ",
content: `กรุณาตรวจสอบ UserID / รหัสผ่าน ของท่าน`,
});
}
}); });
}; };
return ( return (
<div className="h-100" ref={myRef}> <>
<Row> <Row gutter={[0, 32]}>
<Col <Col
span={4} xs={{ span: 24 }}
xs={{ order: 1 }} lg={{ span: 8 }}
sm={{ order: 2 }} className="w-100 bg-theme display-flex-center"
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> <Col>
<Divider orientation="center"> <LoginOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<b>เข้าสู่ระบบร้านซ่อม</b>
</Divider>
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
autoComplete="off"
>
<Form.Item
label="User ID"
name="garageID"
rules={[
{
required: true,
message: "กรุณากรอก User ID ของคุณ!",
},
]}
>
<Input />
</Form.Item>
<Form.Item <Title level={2} style={{ color: "#a4b3b6" }}>
label="รหัสผ่าน" เข้าสู่ระบบร้านค้า
name="password" </Title>
rules={[ </Col>
{ </Col>
required: true,
message: "กรุณากรอกรหัสผ่านของคุณ!",
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item <Col
wrapperCol={{ xs={{ span: 24 }}
offset: 8, lg={{ span: 16 }}
span: 16, className="display-flex-center"
>
<Row>
<Form
name="basic"
initialValues={{
remember: true,
}} }}
onFinish={onFinish}
autoComplete="off"
> >
<Button className="bt-them" htmlType="submit" > <Form.Item
ยืนยัน label="User ID"
</Button> name="garageID"
</Form.Item> rules={[
</Form> {
required: true,
message: "กรุณากรอก User ID ของคุณ!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="รหัสผ่าน"
name="password"
rules={[
{
required: true,
message: "กรุณากรอกรหัสผ่านของคุณ!",
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button className="bt-them" htmlType="submit">
ยืนยัน
</Button>
</Form.Item>
</Form>
</Row>
</Col> </Col>
<Col
span={6}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
</Row> </Row>
</div> </>
); );
} }
......
src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
View file @ b0050fb6
...@@ -85,6 +85,7 @@ function Map() { ...@@ -85,6 +85,7 @@ function Map() {
<b>{selectPark.garage_name}</b> <b>{selectPark.garage_name}</b>
</h4> </h4>
<p>{JSON.parse(selectPark.garage_type)}</p> <p>{JSON.parse(selectPark.garage_type)}</p>
<p>เปิด {selectPark.on_time} - {selectPark.off_time}</p>
</div> </div>
</InfoWindow> </InfoWindow>
)} )}
......
src/view/Pages/GetStarted/Title/index.jsx
View file @ b0050fb6
...@@ -23,10 +23,9 @@ function App() { ...@@ -23,10 +23,9 @@ function App() {
scale: 1.0, scale: 1.0,
scaleMobile: 1.0, scaleMobile: 1.0,
backgroundColor: 0xffffff, backgroundColor: 0xffffff,
color1: 0x87, color1: 0x55505f,
color2: 0x0, color2: 0x60931,
birdSize: 0.8, birdSize: 0.7,
quantity: 4.2,
}) })
); );
} }
...@@ -39,9 +38,9 @@ function App() { ...@@ -39,9 +38,9 @@ function App() {
<Row ref={myRef} className="getstart-box"> <Row ref={myRef} className="getstart-box">
<div className="div-box-title"> <div className="div-box-title">
<Col span={24} className="getstart-box-title"> <Col span={24} className="getstart-box-title">
<Title>Repair Center</Title> <Title level={1}>Repair Center</Title>
<Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title> <Title level={2}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
<Title level={5}> <Title level={3}>
เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
</Title> </Title>
<Row className="box-button"> <Row className="box-button">
......
src/view/Pages/Register/index.jsx
View file @ b0050fb6
...@@ -99,13 +99,15 @@ export default function App() { ...@@ -99,13 +99,15 @@ export default function App() {
setCheckBox(e.target.checked); setCheckBox(e.target.checked);
}} }}
> >
ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้วและยอมรับข้อกำหนดและเงื่อนไขทุกประการ <Text>
ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้ว
และยอมรับข้อกำหนดและเงื่อนไขทุกการ
</Text>
</Checkbox> </Checkbox>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
<div className="div-button-submit"> <div className="div-button-submit">
<Button className="bt-them" onClick={handleSubmit}> <Button className="bt-them" onClick={handleSubmit}>
ยืนยัน ยืนยัน
</Button> </Button>
......
src/view/Pages/Report/index.jsx
View file @ b0050fb6
...@@ -2,6 +2,8 @@ import React from "react"; ...@@ -2,6 +2,8 @@ import React from "react";
import { Row, Col, Typography, Form, Input, Button, Select } from "antd"; import { Row, Col, Typography, Form, Input, Button, Select } from "antd";
import { CommentOutlined } from "@ant-design/icons";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { xs: {
...@@ -45,18 +47,38 @@ const { Title } = Typography; ...@@ -45,18 +47,38 @@ 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);
}; };
return ( return (
<> <>
<Row className="report-box"> <Row gutter={[0, 32]}>
<div className="report-content"> <Col
<Col span={24} className="box-text-title"> xs={{ span: 24 }}
<Title level={4}>แจ้งปัญหาการใช้งาน</Title> lg={{ span: 8 }}
className="w-100 bg-theme display-flex-center"
>
<Col>
<CommentOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<Title level={2} style={{ color: "#a4b3b6" }}>
แจ้งปัญหาการใช้งาน
</Title>
</Col> </Col>
<Col className="div-form"> </Col>
<Col
xs={{ span: 24 }}
lg={{ span: 16 }}
className="display-flex-center"
>
<Row >
<Col span={24}>
<Title level={4}>แจ้งปัญหาการใช้งาน</Title>
</Col>
<Form {...formItemLayout} name="nest-messages" onFinish={onFinish}> <Form {...formItemLayout} name="nest-messages" onFinish={onFinish}>
{/* Garage type ประเภทของร้านซ่อม */} {/* Garage type ประเภทของร้านซ่อม */}
<Form.Item <Form.Item
...@@ -112,21 +134,24 @@ export default function App() { ...@@ -112,21 +134,24 @@ export default function App() {
</Form.Item> </Form.Item>
<Form.Item name="report_detail" label="ปัญหาที่จะรายงาน"> <Form.Item name="report_detail" label="ปัญหาที่จะรายงาน">
<Input.TextArea /> <Input.TextArea showCount maxLength={200} />
</Form.Item> </Form.Item>
<Form.Item name="report_tel" label="หมายเลขโทรศัพท์ที่ติดติดต่อได้"> <Form.Item
name="report_tel"
label="หมายเลขโทรศัพท์ที่ติดติดต่อได้"
>
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{ ...formItemLayout.wrapperCol }}> <Form.Item wrapperCol={{ ...formItemLayout.wrapperCol }}>
<Button type="primary" htmlType="submit"> <Button className="bt-them" htmlType="submit">
Submit Submit
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</Col> </Row>
</div> </Col>
</Row> </Row>
</> </>
); );
......
src/view/Registion/Registion.jsx
View file @ b0050fb6
This diff is collapsed.
src/view/widget/RepairTable.jsx
View file @ b0050fb6
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Highlighter from "react-highlight-words";
import { Table, Space, Typography } from "antd"; import { Table, Space, Typography, Row, Col, Input, Button } from "antd";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { SearchOutlined } from "@ant-design/icons";
// Import services // Import services
import { FetctDetailByGarage } from "../../services"; import { FetctDetailByGarage } from "../../services";
const { Column, ColumnGroup } = Table; // const { Column, ColumnGroup } = Table;
const { Text } = Typography; const { Text, Title } = Typography;
export default function App() { export default function App() {
const [datas, setDatas] = useState([]); const [datas, setDatas] = useState([]);
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
useEffect(() => { useEffect(() => {
const getDetailByGarage = async () => { const getDetailByGarage = async () => {
let local = { let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId, garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
}; };
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => { await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data); await setDatas(response.data);
}); });
...@@ -26,87 +30,201 @@ export default function App() { ...@@ -26,87 +30,201 @@ export default function App() {
getDetailByGarage(); getDetailByGarage();
}, []); }, []);
// console.log("datas", datas); // console.log('datas' , datas)
// const clickMore = (key) => { ///test
// console.log("key", key);
// };
return ( const getColumnSearchProps = (dataIndex) => ({
<> filterDropdown: ({
<Table dataSource={datas} scroll={{ x: 1000, y: 400 }}> setSelectedKeys,
<ColumnGroup title="ลูกค้า"> selectedKeys,
<Column confirm,
title="ชื่อลูกค้า" clearFilters,
dataIndex="member_name" }) => (
key="member_name" <div style={{ padding: 8 }}>
/> <Input
<Column title="รหัสลูกค้า" dataIndex="member_tel" key="member_tel" /> ref={(node) => {
</ColumnGroup> // searchInput = node;
}}
placeholder={`ค้นหา`}
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ marginBottom: 8, display: "block" }}
/>
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
ค้นหา
</Button>
<Button
onClick={() => handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
ล้าง
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: "",
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
// setTimeout(() => searchInput.select(), 100);
}
},
render: (text) =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
),
});
<ColumnGroup title="รายละเอียด"> const handleSearch = (selectedKeys, confirm, dataIndex) => {
<Column confirm();
title="ประเภทการซ่อม" setSearchText(selectedKeys[0]);
dataIndex="device_type" setSearchedColumn(dataIndex);
key="device_type" // this.setState({
/> // searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
};
<Column const handleReset = (clearFilters) => {
title="ทะเบียน/ชนิด" clearFilters();
key="detailsID" // this.setState({ searchText: "" });
render={(text, record) => ( setSearchText("");
<> };
{record.device_type === "รถจักรยานยนต์" ||
record.device_type === "รถยนต์" ? ( const columns = [
<> {
<Space size="small"> title: "ชื่อลูกค้า",
<Text style={{ fontWeight: "bold" }}> dataIndex: "member_name",
{record.car_number} key: "member_name",
</Text> ...getColumnSearchProps("member_name"),
</Space> },
{<br />} {
<Text>{record.car_province}</Text> title: "รหัสลูกค้า",
</> dataIndex: "member_tel",
) : ( key: "member_tel",
<> ...getColumnSearchProps("member_tel"),
<Text> },
{record.equipment} {
title: "ประเภทการซ่อม",
dataIndex: "device_type",
key: "device_type",
...getColumnSearchProps("device_type"),
},
{
title: "ทะเบียน/ชนิด",
key: "detailsID",
...getColumnSearchProps("car_number"),
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: "repair_details",
key: "repair_details",
},
{
title: "วันที่รับซ่อม",
dataIndex: "repair_date",
key: "repair_date",
...getColumnSearchProps("repair_date"),
},
{
title: "สถานะ",
dataIndex: "status",
key: "status",
...getColumnSearchProps("status"),
},
{
title: "เพิ่มเติม",
key: "detailsID",
render: (record) => {
return (
<>
<Link
to={{
pathname: "/dashboard/all-repair/detail",
state: {
detailsID: record.detailsID,
memberTel: record.member_tel,
},
}}
>
<Text style={{ color: "blue" }}>
{/* <ToolOutlined style={{fontSize: "200%"}} /> */}
จัดการงานซ่อม
</Text> </Text>
</> </Link>
)} </>
</> );
)} },
/> },
];
////
return (
<>
<Row>
<Col span={24} style={{ marginTop: "3%" }}>
<Title level={3}>งานซ่อมทั้งหมดที่มี</Title>
</Col>
</Row>
<Column <div className="div-p-5">
title="รายละเอียดการซ่อมเบื้องต้น" <Table
dataIndex="repair_details" scroll={{ x: 500 }}
key="repair_details" bordered
/> columns={columns}
<Column dataSource={datas}
title="วันที่รับซ่อม" />
dataIndex="repair_date" </div>
key="repair_date"
/>
<Column title="สถานะ" dataIndex="status" key="status" />
<Column
title="เพิ่มเติม"
key="detailsID"
render={(text, record) => (
<Space size="middle">
<Link
to={{
pathname: "/dashboard/all-repair/detail",
state: { detailsID: record.detailsID },
}}
>
<Text style={{ color: "blue" }}>จัดการ</Text>
</Link>
</Space>
)}
/>
</ColumnGroup>
</Table>
</> </>
); );
} }
src/view/widget/widgetColumn.jsx
View file @ b0050fb6
...@@ -27,39 +27,53 @@ export default function Ecommerce(props) { ...@@ -27,39 +27,53 @@ export default function Ecommerce(props) {
let carlist = []; let carlist = [];
let motolist = []; let motolist = [];
let agirculturelist = []; let agirculturelist = [];
let repairSum = []
let succeed = []
let notSucceed = []
for (let i = 0; i < datas.length; i++) { if (datas !== null) {
if (datas[i].device_type === "รถยนต์") { for (let i = 0; i < datas.length; i++) {
// console.log(datas[i].device_type); if (datas[i].device_type === "รถยนต์") {
carlist.push(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 === "รถจักรยานยนต์") {
} motolist.push(datas[i].device_type);
if (datas[i].device_type === "อุปกรณ์การเกษตร") { }
agirculturelist.push(datas[i].device_type); if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
}
// console.log(datas[i].status)
repairSum.push(datas[i].length)
if (datas[i].status === "อยู่ระหว่างการซ่อม") {
succeed.push(datas[i].status)
// console.log(datas[i].status)
}
if (datas[i].status === "สำเร็จ") {
notSucceed.push(datas[i].status)
}
} }
} }
const options = { const options = {
animationEnabled: true, animationEnabled: true,
theme: "light1", // "light1", "dark1", "dark2" theme: "light2", // "light1", "dark1", "dark2"
title: { title: {
text: "รายการซ่อมทั้งหมด", text: "สรุปการซ่อม",
}, },
data: [ data: [
{ {
type: "column", // Change type to "bar", "area", "spline", "pie",etc.
type: "column",
// indexLabel: "{label}: {y}%", // indexLabel: "{label}: {y}%",
startAngle: 60, startAngle: 90,
dataPoints: [ dataPoints: [
{ y: carlist.length, label: "รถยนต์" }, { y: repairSum.length, label: "การซ่อมทั้งหมด" },
{ y: motolist.length, label: "รถจักรยานยนต์" }, { y: notSucceed.length, label: "สำเร็จ" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" }, { y: succeed.length, label: "กำลังดำเนินการซ่อม" },
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
], ],
}, },
], ],
......
yarn.lock
View file @ b0050fb6
This diff is collapsed.
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