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 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-maps": "^9.4.5",
"react-highlight-words": "^0.17.0",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-validation": "^3.0.7",
......
src/Layouts/Header/tabHeader.jsx
View file @ b0050fb6
......@@ -31,8 +31,7 @@ export default function App() {
<Col span={15}>
<Row>
<Row className="main-logo" onClick={clicklogo}>
<div> Repair </div>&nbsp;
<div className="logo"> Center</div>
Repair Center
</Row>
</Row>
</Col>
......
src/Layouts/Menu/menuDashboard.jsx
View file @ b0050fb6
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Layout, Menu } from "antd";
import { Col, Layout, Menu, Row, Typography, Avatar } from "antd";
import {
HomeOutlined,
AppstoreAddOutlined,
ToolOutlined,
UnorderedListOutlined,
OrderedListOutlined,
UserAddOutlined,
TeamOutlined,
......@@ -13,7 +12,7 @@ import {
CommentOutlined,
SettingOutlined,
LogoutOutlined,
DollarOutlined,
// DollarOutlined,
} from "@ant-design/icons";
// import services
......@@ -21,10 +20,13 @@ import { sendLogout } from "../../services";
const { Sider } = Layout;
const { SubMenu } = Menu;
const { Title } = Typography;
export default function App() {
const [collapsed, setCollapsed] = useState(false);
let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
};
......@@ -46,12 +48,30 @@ export default function App() {
overflowY: "scroll",
}}
>
{/* <Divider /> */}
{/* <Divider /> */}
<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"]}
......@@ -62,20 +82,16 @@ export default function App() {
<Link to={"/dashboard"}>หน้าแรก</Link>
</Menu.Item>
<SubMenu
key="sub1"
icon={<UnorderedListOutlined />}
title="จัดการงานซ่อม"
>
<Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
</Menu.Item>
<SubMenu key="sub1" icon={<ToolOutlined />} title="จัดการงานซ่อม">
<Menu.Item key="3" icon={<AppstoreAddOutlined />}>
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
</Menu.Item>
<Menu.Item key="4" icon={<ToolOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
<Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/all-repair"}>งานซ่อมทั้งหมด</Link>
</Menu.Item>
{/* <Menu.Item key="4" icon={<ToolOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
</Menu.Item> */}
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
......@@ -86,20 +102,20 @@ export default function App() {
<Link to={"/dashboard/search-repair"}>ค้นหาการซ่อม</Link>
</Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}>
<Link to={"/dashboard/search-member"}>ลูกค้าของฉัน</Link>
<Link to={"/dashboard/member"}>ลูกค้าของฉัน</Link>
</Menu.Item>
</SubMenu>
{/*
<Menu.Item key="10" icon={<DollarOutlined />}>
<Link to={"/dashboard/payment"}>การชำระเงิน</Link>
</Menu.Item>
</Menu.Item> */}
<Menu.Item key="8" icon={<SettingOutlined />}>
<Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
</Menu.Item>
<Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/dashboard/reported"}>แจ้งปัญหาการใช้งาน</Link>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item>
<Menu.Item
......
src/Layouts/Menu/menulist.jsx
View file @ b0050fb6
......@@ -16,7 +16,7 @@ const { Sider } = Layout;
const { SubMenu } = Menu;
export default function App() {
const [collapsed, setCollapsed] = useState(true);
const [collapsed, setCollapsed] = useState(false);
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
......@@ -40,7 +40,7 @@ export default function App() {
<Menu
theme="dark"
defaultSelectedKeys={["1"]}
// defaultOpenKeys={["sub1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
......
src/Layouts/VerticalLayout.jsx
View file @ b0050fb6
......@@ -8,13 +8,12 @@ import HeaderTap from "./Header/tabHeader";
import MenuList from "./Menu/menulist";
import MenuDashboard from "./Menu/menuDashboard";
const { Content, Footer } = Layout;
const { Content } = Layout;
export default function VerticalLayout(props) {
const { children } = props;
// let test = "";
const history = useHistory();
const [checkLocal, setChechLocal] = useState(null);
......@@ -23,17 +22,18 @@ export default function VerticalLayout(props) {
setChechLocal(JSON.parse(localStorage.getItem("user")));
}, []);
if (checkLocal === null) {
history.push("/");
} else {
history.push({
pathname: "/dashboard",
state: checkLocal.userData.userId
});
pathname: "/dashboard",
state: checkLocal.userData.userId,
});
// console.log('test', checkLocal)
}
// console.log(checkLocal);
return (
<>
<HeaderTap
......@@ -48,7 +48,7 @@ export default function VerticalLayout(props) {
{checkLocal === null ? (
<Layout
style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
style={{ minHeight: "90vh", maxHeight: "90vh" }}
>
<MenuList />
......@@ -61,17 +61,17 @@ export default function VerticalLayout(props) {
{children}
</div>
</Content>
<Footer className="footer">
{/* <Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Footer> */}
</Layout>
</Layout>
) : (
<Layout
style={{
minHeight: "93vh",
minHeight: "90vh",
maxHeight: "90vh",
paddingTop: "0.5vh",
// paddingTop: "0.5vh",
}}
>
<MenuDashboard />
......@@ -84,9 +84,9 @@ export default function VerticalLayout(props) {
{children}
</div>
</Content>
<Footer className="footer">
{/* <Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Footer> */}
</Layout>
</Layout>
)}
......
src/assets/fonts/index.css
View file @ b0050fb6
......@@ -4,3 +4,12 @@ body {
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 @@
@import "pages/register.less";
@import "pages/reported.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 @@
// box-shadow: 1px 3px #001529;
}
.div-content-main {
// border: 1px solid #333;
}
// .div-content-main {
// // border: 1px solid #333;
// }
.main-content-repair {
padding: 10px;
// border: 1px solid #333;
......@@ -86,3 +86,48 @@
.border {
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 = [
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')),
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;
src/services/index.js
View file @ b0050fb6
......@@ -18,10 +18,9 @@ export const sendLogin = (data) => {
return axios
.post(process.env.REACT_APP_SECRET_API + "/authentication/login", data)
.then((response) => {
if (response.data) {
if (response.data.code === 200) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response.data;
})
.catch((err) => {
......@@ -36,7 +35,6 @@ export const sendLogout = () => {
// get list All garage
export const FetchGarageAll = () => {
// console.log('test55555555', process.env.REACT_APP_SECRET_API)
return (
axios
.get(process.env.REACT_APP_SECRET_API + "/garage/all")
......@@ -80,23 +78,18 @@ export const InsertDetails = (data) => {
// get data FetctDetailByGarage
export const FetctDetailByGarage = (data) => {
// console.log('fetdata', data)
return (
axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
})
);
return axios
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// get data FetctDetailByGarageID
export const FetctDetailByGarageID = (data) => {
// console.log('fetdata', data)
return (
axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", 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 { Col, Row, Typography } from "antd";
import { Col, Divider, Row, Typography } from "antd";
import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
// import Service
......@@ -26,7 +26,7 @@ export default function App(props) {
getDetailByGarage();
}, [detailID]);
console.log(datas);
// console.log(datas);
return (
<>
......@@ -111,6 +111,15 @@ export default function App(props) {
</Col>
</Row>
</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) {
if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => {
console.log("response", response);
Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
});
window.location.reload(false)
} else {
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/component/car.jsx
View file @ b0050fb6
......@@ -86,9 +86,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => {
console.log("response", response);
Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
});
window.location.reload(false)
} else {
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/component/motorcycle.jsx
View file @ b0050fb6
......@@ -82,9 +82,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => {
console.log("response", response);
Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
});
window.location.reload(false)
} else {
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/ecommerce/index.jsx
View file @ b0050fb6
......@@ -7,16 +7,15 @@ import { FetctDetailByGarage } from "../../../services";
// 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 CanvasJSChart from "../../widget/widgetPie";
// import ColumnJSChart from "../../widget/widgetColumn";
import ColumnJSChart from "../../widget/widgetColumn";
// const { Header } = Layout;
export default function Ecommerce() {
// let location = useLocation();
const [datas, setDatas] = useState([]);
......@@ -44,15 +43,52 @@ export default function Ecommerce() {
<>
{datas !== null ? (
<>
<div className="display-flex-main">
<div className="div-content-chart">
<Row className="content-chart">
<Col xs={24} lg={24} className="chart">
<CanvasJSChart />
{/* <div className="display-flex-main"> */}
{/* <div className="div-content-chart"> */}
<Row gutter={[0, 16]} style={{ padding: "4%" }}>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<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>
</Row>
</div>
</div>
</Col>
<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() {
<Result
title="ร้านของคุณยังไม่มีการซ่อม"
extra={
<Button className="bt-them" key="console">
<Button className="bt-them" key="console">
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
</Button>
}
......@@ -75,7 +111,6 @@ export default function Ecommerce() {
</>
)}
<Divider />
{/* <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() {
return (
<>
<Row>
<Col span={24} className="box-text-title">
<Title level={4}>เพิ่มการซ่อม</Title>
<Col span={24} style={{padding: '5%'}}>
<Title level={3}>เพิ่มการซ่อม</Title>
</Col>
<Col span={24}>
......@@ -73,7 +73,7 @@ export default function App() {
></Col>
</Row>
</Col>
<div style={{display: 'flex', marginTop: '10px'}}>
<div style={{ display: "flex", marginTop: "10px" }}>
<Title style={{ color: "red" }} level={5}>
หมายเหตุ : &nbsp;
</Title>
......
src/view/Dashboards/repairDashboard/repairList/ShowDetail.jsx
View file @ b0050fb6
......@@ -19,13 +19,14 @@ export default function ShowDetail() {
//use State
const detailID = location.state;
// console.log(detailID);
const memberTel = location.state;
// console.log(detailID, memberTel.memberTel);
return (
<>
<TitleShowDetail detailID={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 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";
function App() {
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)
const { Title } = Typography;
function App() {
const onFinish = (values) => {
const data = {
garageID: values.garageID,
......@@ -42,98 +18,86 @@ function App() {
// console.log(data);
sendLogin(data).then((response) => {
// console.log('response', response.userData)
setTimeout(() => {
window.location.reload(false);
}, 1000);
if (response.code === 200) {
setTimeout(() => {
window.location.reload(false);
}, 1000);
} else {
Modal.info({
title: "ไม่มีผู้ใช้นี้ในระบบ",
content: `กรุณาตรวจสอบ UserID / รหัสผ่าน ของท่าน`,
});
}
});
};
return (
<div className="h-100" ref={myRef}>
<Row>
<>
<Row gutter={[0, 32]}>
<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 }}
xs={{ span: 24 }}
lg={{ span: 8 }}
className="w-100 bg-theme display-flex-center"
>
<div className="title"></div>
<Divider orientation="center">
<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>
<Col>
<LoginOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<Form.Item
label="รหัสผ่าน"
name="password"
rules={[
{
required: true,
message: "กรุณากรอกรหัสผ่านของคุณ!",
},
]}
>
<Input.Password />
</Form.Item>
<Title level={2} style={{ color: "#a4b3b6" }}>
เข้าสู่ระบบร้านค้า
</Title>
</Col>
</Col>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
<Col
xs={{ span: 24 }}
lg={{ span: 16 }}
className="display-flex-center"
>
<Row>
<Form
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
autoComplete="off"
>
<Button className="bt-them" htmlType="submit" >
ยืนยัน
</Button>
</Form.Item>
</Form>
<Form.Item
label="User ID"
name="garageID"
rules={[
{
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
span={6}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
</Row>
</div>
</>
);
}
......
src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
View file @ b0050fb6
......@@ -85,6 +85,7 @@ function Map() {
<b>{selectPark.garage_name}</b>
</h4>
<p>{JSON.parse(selectPark.garage_type)}</p>
<p>เปิด {selectPark.on_time} - {selectPark.off_time}</p>
</div>
</InfoWindow>
)}
......
src/view/Pages/GetStarted/Title/index.jsx
View file @ b0050fb6
......@@ -23,10 +23,9 @@ function App() {
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
color1: 0x87,
color2: 0x0,
birdSize: 0.8,
quantity: 4.2,
color1: 0x55505f,
color2: 0x60931,
birdSize: 0.7,
})
);
}
......@@ -39,9 +38,9 @@ function App() {
<Row ref={myRef} className="getstart-box">
<div className="div-box-title">
<Col span={24} className="getstart-box-title">
<Title>Repair Center</Title>
<Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
<Title level={5}>
<Title level={1}>Repair Center</Title>
<Title level={2}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
<Title level={3}>
เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
</Title>
<Row className="box-button">
......
src/view/Pages/Register/index.jsx
View file @ b0050fb6
......@@ -99,13 +99,15 @@ export default function App() {
setCheckBox(e.target.checked);
}}
>
ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้วและยอมรับข้อกำหนดและเงื่อนไขทุกประการ
<Text>
ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้ว
และยอมรับข้อกำหนดและเงื่อนไขทุกการ
</Text>
</Checkbox>
</Form.Item>
</Form>
</div>
<div className="div-button-submit">
<Button className="bt-them" onClick={handleSubmit}>
ยืนยัน
</Button>
......
src/view/Pages/Report/index.jsx
View file @ b0050fb6
......@@ -2,6 +2,8 @@ import React from "react";
import { Row, Col, Typography, Form, Input, Button, Select } from "antd";
import { CommentOutlined } from "@ant-design/icons";
const formItemLayout = {
labelCol: {
xs: {
......@@ -45,18 +47,38 @@ const { Title } = Typography;
/* eslint-enable no-template-curly-in-string */
export default function App() {
const onFinish = (values) => {
console.log(values);
};
return (
<>
<Row className="report-box">
<div className="report-content">
<Col span={24} className="box-text-title">
<Title level={4}>แจ้งปัญหาการใช้งาน</Title>
<Row gutter={[0, 32]}>
<Col
xs={{ span: 24 }}
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 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}>
{/* Garage type ประเภทของร้านซ่อม */}
<Form.Item
......@@ -112,21 +134,24 @@ export default function App() {
</Form.Item>
<Form.Item name="report_detail" label="ปัญหาที่จะรายงาน">
<Input.TextArea />
<Input.TextArea showCount maxLength={200} />
</Form.Item>
<Form.Item name="report_tel" label="หมายเลขโทรศัพท์ที่ติดติดต่อได้">
<Form.Item
name="report_tel"
label="หมายเลขโทรศัพท์ที่ติดติดต่อได้"
>
<Input />
</Form.Item>
<Form.Item wrapperCol={{ ...formItemLayout.wrapperCol }}>
<Button type="primary" htmlType="submit">
<Button className="bt-them" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Col>
</div>
</Row>
</Col>
</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 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 { SearchOutlined } from "@ant-design/icons";
// Import services
import { FetctDetailByGarage } from "../../services";
const { Column, ColumnGroup } = Table;
const { Text } = Typography;
// const { Column, ColumnGroup } = Table;
const { Text, Title } = Typography;
export default function App() {
const [datas, setDatas] = useState([]);
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
};
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data);
});
......@@ -26,87 +30,201 @@ export default function App() {
getDetailByGarage();
}, []);
// console.log("datas", datas);
// console.log('datas' , datas)
// const clickMore = (key) => {
// console.log("key", key);
// };
///test
return (
<>
<Table dataSource={datas} scroll={{ x: 1000, y: 400 }}>
<ColumnGroup title="ลูกค้า">
<Column
title="ชื่อลูกค้า"
dataIndex="member_name"
key="member_name"
/>
<Column title="รหัสลูกค้า" dataIndex="member_tel" key="member_tel" />
</ColumnGroup>
const getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
ref={(node) => {
// 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="รายละเอียด">
<Column
title="ประเภทการซ่อม"
dataIndex="device_type"
key="device_type"
/>
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
// this.setState({
// searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
};
<Column
title="ทะเบียน/ชนิด"
key="detailsID"
render={(text, record) => (
<>
{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}
const handleReset = (clearFilters) => {
clearFilters();
// this.setState({ searchText: "" });
setSearchText("");
};
const columns = [
{
title: "ชื่อลูกค้า",
dataIndex: "member_name",
key: "member_name",
...getColumnSearchProps("member_name"),
},
{
title: "รหัสลูกค้า",
dataIndex: "member_tel",
key: "member_tel",
...getColumnSearchProps("member_tel"),
},
{
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>
</>
)}
</>
)}
/>
</Link>
</>
);
},
},
];
////
return (
<>
<Row>
<Col span={24} style={{ marginTop: "3%" }}>
<Title level={3}>งานซ่อมทั้งหมดที่มี</Title>
</Col>
</Row>
<Column
title="รายละเอียดการซ่อมเบื้องต้น"
dataIndex="repair_details"
key="repair_details"
/>
<Column
title="วันที่รับซ่อม"
dataIndex="repair_date"
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>
<div className="div-p-5">
<Table
scroll={{ x: 500 }}
bordered
columns={columns}
dataSource={datas}
/>
</div>
</>
);
}
src/view/widget/widgetColumn.jsx
View file @ b0050fb6
......@@ -27,39 +27,53 @@ export default function Ecommerce(props) {
let carlist = [];
let motolist = [];
let agirculturelist = [];
let repairSum = []
let succeed = []
let notSucceed = []
for (let i = 0; i < datas.length; i++) {
if (datas[i].device_type === "รถยนต์") {
// console.log(datas[i].device_type);
carlist.push(datas[i].device_type);
}
if (datas[i].device_type === "รถจักรยานยนต์") {
motolist.push(datas[i].device_type);
}
if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
if (datas !== null) {
for (let i = 0; i < datas.length; i++) {
if (datas[i].device_type === "รถยนต์") {
// console.log(datas[i].device_type);
carlist.push(datas[i].device_type);
}
if (datas[i].device_type === "รถจักรยานยนต์") {
motolist.push(datas[i].device_type);
}
if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
}
// 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 = {
animationEnabled: true,
theme: "light1", // "light1", "dark1", "dark2"
theme: "light2", // "light1", "dark1", "dark2"
title: {
text: "รายการซ่อมทั้งหมด",
text: "สรุปการซ่อม",
},
data: [
{
type: "column",
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
// indexLabel: "{label}: {y}%",
startAngle: 60,
startAngle: 90,
dataPoints: [
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
{ y: repairSum.length, label: "การซ่อมทั้งหมด" },
{ y: notSucceed.length, label: "สำเร็จ" },
{ y: succeed.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