Implement report view

services/web/src/actions/userActions.ts

@@ -156,6 +156,13 @@ export const getVehicleServicesAction = ({ accessToken, VIN, callback, ...data }
   };
 };
 
+export const getServiceReportAction = ({ accessToken, reportId, callback, ...data }: ActionPayload & AccessTokenPayload) => {
+  return {
+    type: actionTypes.GET_SERVICE_REPORT,
+    payload: { accessToken, reportId, callback, ...data },
+  };
+};
+
 export const changeEmailAction = ({ accessToken, callback, ...data }: ActionPayload & AccessTokenPayload) => {
   return {
     type: actionTypes.CHANGE_EMAIL,

services/web/src/components/layout/layout.tsx

@@ -40,11 +40,11 @@ import UnlockContainer from "../../containers/unlock/unlock";
 import NewPostContainer from "../../containers/newPost/newPost";
 import PostContainer from "../../containers/post/post";
 import VehicleServiceDashboardContainer from "../../containers/vehicleServiceDashboard/vehicleServiceDashboard";
+import ServiceReportContiner from "../../containers/serviceReport/serviceReport";
 import {
   logOutUserAction,
   validateAccessTokenAction,
 } from "../../actions/userActions";
-import { validateAccessToken } from "../../sagas/userSaga";
 import { isAccessTokenValid } from "../../utils";
 
 const { Content } = Layout;
@@ -158,12 +158,19 @@ const StyledComp: React.FC<PropsFromRedux> = (props) => {
     setWindowHeight(window.innerHeight);
   }
 
+  const isLoggedIn = props.isLoggedIn;
+  const accessToken = props.accessToken;
+  const validateAccessToken = props.validateAccessToken;
+
   useEffect(() => {
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
+      if (isLoggedIn) {
+        validateAccessToken({ accessToken: accessToken });
+      }
     };
-  }, []);
+  }, [isLoggedIn, validateAccessToken, accessToken]);
 
   return (
     <Spin spinning={props.fetchingData} className="spinner">
@@ -295,6 +302,19 @@ const StyledComp: React.FC<PropsFromRedux> = (props) => {
                 />
               }
             />
+            <Route
+              path="/service-report"
+              element={
+                <AfterLogin
+                  component={ServiceReportContiner}
+                  isLoggedIn={props.isLoggedIn}
+                  componentRole={roleTypes.ROLE_USER}
+                  userRole={props.role}
+                  accessToken={props.accessToken}
+                  logOutUser={props.logOutUser}
+                />
+              }
+            />
             <Route
               path="/shop"
               element={

services/web/src/components/mechanicDashboard/mechanicDashboard.tsx

@@ -14,7 +14,7 @@
  */
 
 import React from "react";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Layout } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 
 const { Meta } = Card;
@@ -41,7 +41,7 @@ interface MechanicDashboardProps {
 
 const MechanicDashboard: React.FC<MechanicDashboardProps> = ({ services }) => {
   return (
-    <>
+    <Layout className="page-container">
       <PageHeader title="Pending Services" />
       <Row gutter={[16, 24]}>
         {services.map((service) => (
@@ -63,7 +63,7 @@ const MechanicDashboard: React.FC<MechanicDashboardProps> = ({ services }) => {
           </Col>
         ))}
       </Row>
-    </>
+    </Layout>
   );
 };
 

services/web/src/components/order/order.tsx

@@ -65,7 +65,7 @@ const Order: React.FC<PropsFromRedux> = ({ order }) => {
   );
 
   return (
-    <Layout>
+    <Layout className="page-container">
       <PageHeader
         title="Order Details"
         className="page-header"

services/web/src/components/pastOrders/pastOrders.tsx

@@ -78,7 +78,7 @@ const PastOrders: React.FC<PastOrdersProps> = (props) => {
           <Button
             type="primary"
             shape="round"
-            size="large"
+            size="middle"
             key="order-details"
             onClick={() => navigate(`/orders?order_id=${order.id}`)}
           >
@@ -90,7 +90,7 @@ const PastOrders: React.FC<PastOrdersProps> = (props) => {
             type="primary"
             shape="round"
             icon={order.status === "delivered" && <RollbackOutlined />}
-            size="large"
+            size="middle"
             key="return-order"
             disabled={order.status !== "delivered"}
             onClick={() => props.returnOrder(order.id)}
@@ -103,7 +103,7 @@ const PastOrders: React.FC<PastOrdersProps> = (props) => {
   );
 
   return (
-    <Layout>
+    <Layout className="page-container">
       <PageHeader
         title="Past Orders"
         className="page-header"

services/web/src/components/serviceReport/serviceReport.tsx

@@ -0,0 +1,115 @@
+/*
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { Card, Row, Col, Descriptions, Spin, Layout } from "antd";
+import { PageHeader } from "@ant-design/pro-components";
+import { Content } from "antd/es/layout/layout";
+
+interface Owner {
+  email: string;
+  number: string;
+}
+
+interface Vehicle {
+  owner: Owner;
+  id: string;
+  vin: string;
+}
+
+interface Mechanic {
+  mechanic_code: string;
+  user: Owner
+}
+
+interface Service {
+  id: string;
+  problem_details: string;
+  created_on: string;
+  vehicle: Vehicle;
+  status: string;
+  mechanic: Mechanic;
+}
+
+interface ServiceReportProps {
+  service: Service;
+}
+
+const ServiceReport: React.FC<ServiceReportProps> = ({ service }) => {
+  if (!service) {
+    console.log("Service is undefined");
+    return (
+      <Content>
+        <Spin style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}/>
+      </Content>
+    );
+  }
+
+  return (
+    <Layout className="page-container">
+      <PageHeader
+        title={`Service Report: ${service.vehicle.vin} ${service.status}`}
+        subTitle={service.created_on}
+        className="service-report-header"
+        style={{ width: '80%', margin: 'auto' }}
+      />
+      <Card className="service-report-card" style={{ margin: 'auto', width: '80%' }}>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Report Details" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="Report ID">{service.id}</Descriptions.Item>
+                <Descriptions.Item label="Report Status">{service.status}</Descriptions.Item>
+                <Descriptions.Item label="Created On">{service.created_on}</Descriptions.Item>
+                <Descriptions.Item label="Problem Details" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{service.problem_details}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Assigned Mechanic" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="Mechanic Code">{service.mechanic.mechanic_code}</Descriptions.Item>
+                <Descriptions.Item label="Mechanic Email">{service.mechanic.user.email}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Vehicle Information" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="VIN">{service.vehicle.vin}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+          <Col>
+            <Card title="Owner Information" className="info-card">
+              <Descriptions column={1}>
+                <Descriptions.Item label="Email">{service.vehicle.owner.email}</Descriptions.Item>
+                <Descriptions.Item label="Phone">{service.vehicle.owner.number}</Descriptions.Item>
+              </Descriptions>
+            </Card>
+          </Col>
+        </Row>
+      </Card>
+    </Layout>
+  );
+};
+
+export default ServiceReport;

services/web/src/components/shop/shop.tsx

@@ -107,7 +107,7 @@ const Shop: React.FC<ShopProps> = (props) => {
   } = props;
 
   return (
-    <Layout>
+    <Layout className="page-container">
       <PageHeader
         className="page-header"
         title="Shop"

services/web/src/components/vehicleServiceDashboard/vehicleServiceDashboard.tsx

@@ -14,7 +14,7 @@
  */
 
 import React from "react";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Layout } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 
 const { Meta } = Card;
@@ -46,7 +46,7 @@ const VehicleServiceDashboard: React.FC<VehicleServiceDashboardProps> = ({ servi
   const urlParams = new URLSearchParams(window.location.search);
   const VIN = urlParams.get("VIN");
   return (
-    <>
+    <Layout className="page-container">
       <PageHeader title={`Service History for VIN: ${VIN}`} />
       <Row gutter={[16, 24]}>
         {services.map((service: Service) => (
@@ -69,12 +69,12 @@ const VehicleServiceDashboard: React.FC<VehicleServiceDashboardProps> = ({ servi
               </p>
 
               {/* If status is completed, show report link */}
-              <a href={`/service-report?reportId=${service.id}`}>View Report</a>
+              <a href={`/service-report?id=${service.id}`}>View Report</a>
             </Card>
           </Col>
         ))}
       </Row>
-    </>
+    </Layout>
   );
 };
 

services/web/src/constants/APIConstant.ts

@@ -56,6 +56,7 @@ export const requestURLS: RequestURLSType = {
   GET_PRODUCTS: "api/shop/products",
   GET_MECHANIC_SERVICES: "api/mechanic/service_requests",
   GET_VEHICLE_SERVICES: "api/merchant/service_requests/<vehicleVIN>",
+  GET_SERVICE_REPORT: "api/mechanic/mechanic_report",
   BUY_PRODUCT: "api/shop/orders",
   GET_ORDERS: "api/shop/orders/all",
   GET_ORDER_BY_ID: "api/shop/orders/<orderId>",

services/web/src/constants/actionTypes.ts

@@ -34,6 +34,7 @@ const actionTypes = {
   INVALID_SESSION: "INVALID_SESSION",
   GET_MECHANIC_SERVICES: "GET_MECHANIC_SERVICES",
   GET_VEHICLE_SERVICES: "GET_VEHICLE_SERVICES",
+  GET_SERVICE_REPORT: "GET_SERVICE_REPORT",
   RESEND_MAIL: "RESEND_MAIL",
   VERIFY_VEHICLE: "VERIFY_VEHICLE",
   GET_VEHICLES: "GET_VEHICLES",

services/web/src/containers/mechanicDashboard/mechanicDashboard.tsx

@@ -68,7 +68,6 @@ const MechanicDashboardContainer: React.FC<PropsFromRedux> = ({ accessToken, get
     };
     getServices({ accessToken, callback });
   }, [accessToken, getServices]);
-  const typedServices: Service[] = services;
 
   return <MechanicDashboard services={services} />;
 };