Page AddRepair Dashboard

src/Layouts/munuDashboard.jsx → src/Layouts/Menu/menuDashboard.jsx

@@ -13,10 +13,11 @@ import {
   CommentOutlined,
   SettingOutlined,
   LogoutOutlined,
+  DollarOutlined,
 } from "@ant-design/icons";
 
 // import services
-import { sendLogout } from "../services";
+import { sendLogout } from "../../services";
 
 const { Sider } = Layout;
 const { SubMenu } = Menu;
@@ -29,7 +30,7 @@ export default function App() {
   };
 
   const handleLogout = () => {
-    console.log("test Logout");
+    // console.log("test Logout");
     sendLogout();
     setTimeout(() => {
       window.location.reload(false);
@@ -38,7 +39,13 @@ export default function App() {
 
   return (
     <>
-      <div style={{ mixHeight: 360, overflowY: "scroll" }}>
+      <div
+        style={{
+          mixHeight: 360,
+          backgroundColor: "#001529",
+          overflowY: "scroll",
+        }}
+      >
         <Sider
           theme="dark"
           collapsible
@@ -71,22 +78,6 @@ export default function App() {
               </Menu.Item>
             </SubMenu>
 
-            <SubMenu
-              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 />}>
-                <Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
-              </Menu.Item>
-              <Menu.Item key="4" icon={<ToolOutlined />}>
-                <Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
-              </Menu.Item>
-            </SubMenu>
-
             <SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
               <Menu.Item key="5" icon={<UserAddOutlined />}>
                 <Link to={"/dashboard/add-member"}>ลงทะเบียนลูกค้า</Link>
@@ -99,6 +90,10 @@ export default function App() {
               </Menu.Item>
             </SubMenu>
 
+            <Menu.Item key="10" icon={<DollarOutlined />}>
+              <Link to={"/dashboard/payment"}>การชำระเงิน</Link>
+            </Menu.Item>
+
             <Menu.Item key="8" icon={<SettingOutlined />}>
               <Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
             </Menu.Item>
@@ -109,7 +104,7 @@ export default function App() {
 
             <Menu.Item
               onClick={handleLogout}
-              key="10"
+              key="11"
               icon={<LogoutOutlined />}
             >
               ออกจากระบบ

src/Layouts/menulist.jsx → src/Layouts/Menu/menulist.jsx

@@ -24,38 +24,46 @@ export default function App() {
 
   return (
     <>
-      <Sider
-        theme="dark"
-        collapsible
-        collapsed={collapsed}
-        onCollapse={onCollapse}
+      <div
+        style={{
+          mixHeight: 360,
+          backgroundColor: "#001529",
+          overflowY: "scroll",
+        }}
       >
-        <Menu
+        <Sider
           theme="dark"
-          defaultSelectedKeys={["1"]}
-          // defaultOpenKeys={["sub1"]}
-          mode="inline"
+          collapsible
+          collapsed={collapsed}
+          onCollapse={onCollapse}
         >
-          <Menu.Item key="1" icon={<PieChartOutlined />}>
-            <Link to={"/"}>เริ่มต้นใช้งาน</Link>
-          </Menu.Item>
-          <Menu.Item key="2" icon={<DesktopOutlined />}>
-            <Link to={"/register"}>ลงทะเบียนร้านซ่อม</Link>
-          </Menu.Item>
-          <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
-            <Menu.Item key="8" icon={<SearchOutlined />}>
-              <Link to={"/search"}>ค้นหาร้านซ่อม</Link>
+          <Menu
+            theme="dark"
+            defaultSelectedKeys={["1"]}
+            // defaultOpenKeys={["sub1"]}
+            mode="inline"
+          >
+            <Menu.Item key="1" icon={<PieChartOutlined />}>
+              <Link to={"/"}>เริ่มต้นใช้งาน</Link>
             </Menu.Item>
-            <Menu.Item key="6" icon={<FileSearchOutlined />}>
-              <Link to={"/status"}>เช็คสถานะการซ่อม</Link>
+            <Menu.Item key="2" icon={<DesktopOutlined />}>
+              <Link to={"/register"}>ลงทะเบียนร้านซ่อม</Link>
             </Menu.Item>
-          </SubMenu>
+            <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
+              <Menu.Item key="8" icon={<SearchOutlined />}>
+                <Link to={"/search"}>ค้นหาร้านซ่อม</Link>
+              </Menu.Item>
+              <Menu.Item key="6" icon={<FileSearchOutlined />}>
+                <Link to={"/status"}>เช็คสถานะการซ่อม</Link>
+              </Menu.Item>
+            </SubMenu>
 
-          <Menu.Item key="9" icon={<CommentOutlined />}>
-            <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
-          </Menu.Item>
-        </Menu>
-      </Sider>
+            <Menu.Item key="9" icon={<CommentOutlined />}>
+              <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
+            </Menu.Item>
+          </Menu>
+        </Sider>
+      </div>
     </>
   );
 }

src/Layouts/VerticalLayout.jsx

@@ -4,13 +4,10 @@ import { useHistory } from "react-router-dom";
 import { Layout } from "antd";
 
 // import Component
-import HeaderTap from "./tabHeader";
-import MenuList from "./menulist";
-import MenuDashboard from './munuDashboard'
+import HeaderTap from "./Header/tabHeader";
+import MenuList from "./Menu/menulist";
+import MenuDashboard from "./Menu/menuDashboard";
 
-//import
-// import Login from "../view/Login";
-// import RegistionPage from "../view/Registion";
 
 const { Content, Footer } = Layout;
 
@@ -23,16 +20,15 @@ export default function VerticalLayout(props) {
 
   useEffect(() => {
     // console.log("local", localStorage.getItem("user"));
-    setChechLocal(JSON.parse(localStorage.getItem("user")))
+    setChechLocal(JSON.parse(localStorage.getItem("user")));
   }, []);
 
   if (checkLocal === null) {
-    history.push("/")
-  }else {
-    history.push("/dashboard")
+    history.push("/");
+  } else {
+    history.push("/dashboard");
   }
 
-  
   // console.log(checkLocal);
 
   return (
@@ -68,17 +64,28 @@ export default function VerticalLayout(props) {
           </Layout>
         </Layout>
       ) : (
-        <>
-          <Layout
-            style={{
-              minHeight: "93vh",
-              maxHeight: "90vh",
-              paddingTop: "0.5vh",
-            }}
-          >
-            <MenuDashboard />
+        <Layout
+          style={{
+            minHeight: "93vh",
+            maxHeight: "90vh",
+            paddingTop: "0.5vh",
+          }}
+        >
+          <MenuDashboard />
+          <Layout className="site-layout">
+            <Content style={{ margin: "1vh 1vh" }}>
+              <div
+                className="site-layout-background"
+                style={{ mixHeight: 360, overflowY: "scroll" }}
+              >
+                {children}
+              </div>
+            </Content>
+            <Footer className="footer">
+              <p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
+            </Footer>
           </Layout>
-        </>
+        </Layout>
       )}
     </>
   );

src/assets/less/index.less

@@ -4,3 +4,4 @@
 @import "pages/getstartes.less";
 @import "pages/register.less";
 @import "pages/reported.less";
+@import "pages/dashboard/index.less";

src/assets/less/pages/dashboard/index.less

+.div-content-repairadd {
+    border: 1px solid #333;
+    height: auto;
+    padding: 0 5% 5% 5%;
+    margin: 0 5% 5% 5%;
+    // background-color: #a3b4c8;
+}
+
+
+
+.main-select-repair {
+    padding: 10px;
+    // border: 1px solid #333;
+
+    // box-shadow: 1px 3px #001529;
+}
+
+.div-content-main {
+    // border: 1px solid #333;
+}
+.main-content-repair {
+    padding: 10px;
+    // border: 1px solid #333;
+    height: auto;
+    // display: flex;
+}
+
+.div-select {
+    border: 1px solid #333;
+}
+
+.div-select-flex {
+    display: flex;
+}
+
+
+.test-box {
+    border: 1px solid #333;
+}
\ No newline at end of file

src/router/Routers.jsx

+import React from "react";
+// import React, { useEffect, useState } from "react";
 // Router
-import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
-
-// import Ecommerce from "../view/Dashboards/ecommerce";
-
-// import HeaderTap from "../Layouts/tabHeader";
-// import MenuList from "../Layouts/menulist";
-
-//import
-// import Login from "../view/Login";
-// import RegistionPage from "../view/Registion";
+import {
+  BrowserRouter as AppRouter,
+  Route,
+  Switch,
+} from "react-router-dom";
 
 // Routes
 import { Routes } from "./routes";
@@ -16,23 +13,31 @@ import { Routes } from "./routes";
 // Layouts
 import VerticalLayout from "../Layouts/VerticalLayout";
 import FullLayout from "../Layouts/FullLayout";
+// import DashboardLayout from "../Layouts/DashboardLayout";
 
 // Components
 
 import ProtectedRoute from "../ProtectdRoute";
 
-// import { Layout } from "antd";
+export default function Routers() {
+  // const history = useHistory();
+  // const [checkLocal, setChechLocal] = useState(null);
+
+  // useEffect(() => {
+  //   console.log("local", localStorage.getItem("user") === null);
+  //   setChechLocal(JSON.parse(localStorage.getItem("user")));
+  // }, []);
 
-// const { Content, Footer } = Layout;
 
-export default function Routers() {
   // Default Layout
   const DefaultLayout = null; // FullLayout or VerticalLayout
 
   // All of the available layouts
   const Layouts = { VerticalLayout, FullLayout };
 
-  // Return Filtered Array of Routes & Paths
+  // const LayoutsDashboard = { DashboardLayout, FullLayout };
+
+  // Return Filtered Array of Routes & Paths for default page
   const LayoutRoutesAndPaths = (layout) => {
     const LayoutRoutes = [];
     const LayoutPaths = [];
@@ -48,9 +53,28 @@ export default function Routers() {
     return { LayoutRoutes, LayoutPaths };
   };
 
+  // Return Filtered Array of Routes & Paths for dashboard page
+  // const LayoutRoutesAndPathsDashboard = (layout) => {
+  //   const LayoutRoutes2 = [];
+  //   const LayoutPaths2 = [];
+  //   if (Routes) {
+  //     // Checks if Route layout or Default layout matches current layout
+  //     Routes.filter(
+  //       (route) =>
+  //         (route.layout === layout || DefaultLayout === layout) &&
+  //         (LayoutRoutes2.push(route), LayoutPaths2.push(route.path))
+  //     );
+  //   }
+
+  //   return { LayoutRoutes2, LayoutPaths2 };
+  // };
+
+
+
   // Return Route to Render
-  const ResolveRoutes = () => {
-    return Object.keys(Layouts).map((layout, index) => {
+  const ResolveRoutes =  () => {
+  
+    return  Object.keys(Layouts).map((layout, index) => {
       const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
       const LayoutTag = Layouts[layout];
       return (
@@ -74,9 +98,58 @@ export default function Routers() {
     });
   };
 
+  // Return Route to Render
+  // const ResolveRoutesDash =  () => {
+  //   console.log("local2", checkLocal);
+  //   return  Object.keys(LayoutsDashboard).map((layout, index) => {
+  //     const { LayoutRoutes2, LayoutPaths2 } =
+  //       LayoutRoutesAndPathsDashboard(layout);
+  //     const LayoutTag = LayoutsDashboard[layout];
+  //     return (
+  //       <Route path={LayoutPaths2} key={index}>
+  //         <LayoutTag>
+  //           <Switch>
+  //             {LayoutRoutes2.map((route) => {
+  //               return (
+  //                 <ProtectedRoute
+  //                   key={route.path}
+  //                   path={route.path}
+  //                   exact
+  //                   component={route.component}
+  //                 />
+  //               );
+  //             })}
+  //           </Switch>
+  //         </LayoutTag>
+  //       </Route>
+  //     );
+  //   });
+  // };
+
+  // let ContentMain;
+
+  // const Resolve = () => {
+  //   // {checkLocal === null ? ResolveRoutes() : ResolveRoutesDash()}
+  //   return (
+  //     <>
+  //       {checkLocal === null ? <ResolveRoutes /> : <ResolveRoutesDash />}
+  //     </>
+  //   )
+  // }
+
+  // if (checkLocal === null) {
+    
+  //   history.push("/");
+  // } else {
+  //   history.push("/dashboard/add-detail");
+  // }
+
+
   return (
     <AppRouter>
-      <Switch>{ResolveRoutes()}</Switch>
+      <Switch>
+        {ResolveRoutes()}
+      </Switch>
     </AppRouter>
   );
 }

src/router/routes/Pages.jsx

@@ -54,9 +54,14 @@ const PagesRoutes = [
 
   // pages 404
   {
-    path: '/pages/error-404',
-    component: lazy(() => import('../../view/Errors/404/index')),
-    layout: 'FullLayout',
+    path: '/dashboard',
+    component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
+    layout: 'VerticalLayout',
+  },
+  {
+    path: '/dashboard/add-detail',
+    component: lazy(() => import('../../view/Dashboards/repairDashboard/repairAdd/index')),
+    layout: 'VerticalLayout',
   },
 ];
 

src/services/index.js

@@ -31,8 +31,8 @@ export const sendLogin = (data) => {
 
 // logout
 export const sendLogout = () => {
-  return localStorage.removeItem("user")
-}
+  return localStorage.removeItem("user");
+};
 
 // get list All garage
 export const FetchGarageAll = () => {
@@ -47,3 +47,23 @@ export const FetchGarageAll = () => {
       })
   );
 };
+
+// Fetch Thai Address API
+export const FetchThaiAddress = () => {
+  return axios
+    .get("https://thaiaddressapi-thaikub.herokuapp.com/v1/thailand/provinces")
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// get Thai Address API
+export const FetchMemberTel = () => {
+  return axios
+    .get(process.env.REACT_APP_SECRET_API + "/member/all")
+    .then((response) => response.data)
+    .catch((err) => {
+      console.log(err);
+    });
+};

src/view/Dashboards/repairDashboard/repairAdd/data/brand.json

+{
+    "type": {
+        "moto" : [
+            "Honda ฮอนด้า",
+            "Yamaha ยามาฮ่า",
+            "Harley-Davidson",
+            "Kawasaki",
+            "Suzuki ซูซูกิ",
+            "GPX จีพีเอ็กซ์",
+            "Royal Enfield",
+            "Vespa",
+            "Ducati ดูคาติ",
+            "BMW บีเอ็มดับเบิลยู",
+            "Ducati ดูคาติ",
+            "Jeep จี๊ป",
+            "Benelli",
+            "MV Agusta"
+        ],
+        "car" : [
+            "Honda",
+            "Isuzu",
+            "Suzuki",
+            "Mitsubishi",
+            "Nissan",
+            "Toyota",
+            "Mazda",
+            "Ford",
+            "Aston Martin",
+            "Lamborghini",
+            "Audi",
+            "Mercedes-Benz",
+            "Subaru",
+            "Volvo",
+            "BMW",
+            "Hyundai",
+            "MG",
+            "Mini",
+            "Chevrolet",
+            "Maserati",
+            "Thairung"
+        ]
+    }
+  }
\ No newline at end of file

src/view/Dashboards/repairDashboard/repairAdd/index.jsx

+import React, { useEffect, useState } from "react";
+
+import { Row, Col, Typography, Select } from "antd";
+
+// import Component
+import Car from "./component/car";
+import Agriculture from "./component/agriculture";
+import Motorcycle from "./component/motorcycle";
+
+const { Title, Text } = Typography;
+const { Option } = Select;
+
+export default function App() {
+  const [typeSelect, setTypeSelect] = useState();
+  const [checkLocal, setChechLocal] = useState(null);
+
+  useEffect(() => {
+    // console.log("local", localStorage.getItem("user"));
+    setChechLocal(JSON.parse(localStorage.getItem("user")));
+  }, []);
+
+  let MainContent;
+
+  if (typeSelect === "รถยนต์") {
+    MainContent = <Car typeSelect={typeSelect} checkLocal={checkLocal} />;
+  } else if (typeSelect === "รถจักรยานยนต์") {
+    MainContent = (
+      <Motorcycle typeSelect={typeSelect} checkLocal={checkLocal} />
+    );
+  } else if (typeSelect === "อุปกรณ์การเกษตร") {
+    MainContent = (
+      <Agriculture typeSelect={typeSelect} checkLocal={checkLocal} />
+    );
+  } else {
+    MainContent = null;
+  }
+  return (
+    <>
+      <Row>
+        <Col span={24} className="box-text-title">
+          <Title level={4}>เพิ่มการซ่อม</Title>
+        </Col>
+
+        <Col span={24}>
+          <div className="div-content-repairadd">
+            <Col className="main-select-repair">
+              <Title level={5}>ประเภทของอุปกรณ์</Title>
+
+              <Row>
+                <Col
+                  xs={{ span: 1, offset: 1 }}
+                  lg={{ span: 4, offset: 2 }}
+                ></Col>
+                <Col xs={{ span: 19, offset: 1 }} lg={{ span: 8, offset: 2 }}>
+                  <div className="div-select">
+                    <Select
+                      allowClear
+                      style={{ width: "100%" }}
+                      placeholder="กรุณาเลือกประเภท"
+                      onChange={(e) => {
+                        setTypeSelect(e);
+                      }}
+                    >
+                      <Option value="รถยนต์">รถยนต์</Option>
+                      <Option value="รถจักรยานยนต์">รถจักรยานยนต์</Option>
+                      <Option value="อุปกรณ์การเกษตร">อุปกรณ์การเกษตร</Option>
+                    </Select>
+                  </div>
+                </Col>
+                <Col
+                  xs={{ span: 1, offset: 1 }}
+                  lg={{ span: 4, offset: 2 }}
+                ></Col>
+              </Row>
+            </Col>
+            <div style={{display: 'flex', marginTop: '10px'}}>
+              <Title style={{ color: "red" }} level={5}>
+                หมายเหตุ : &nbsp;
+              </Title>
+              <Text>
+                ในการเพิ่มการซ่อมเเต่ละครั้งลูกค้าจำเป็นต้องสมัครสมาชิกก่อนทุกครั้ง
+              </Text>
+            </div>
+
+            {MainContent}
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}