focalxaiinspection/src/lib/Components/CarDetails/CarDetails.js

Focalx AI Inspection

import React, {useState,useEffect} from 'react';
import GetInspectionReport from '../../services/Api/GetInspectionReport';
import './CarDetails.scss';

const CarDetails = () => {
  const [data, setData] = useState(null);
  //console.log(data);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    GetInspectionReport()
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.log("Error getting user profile:", error);
        setLoading(false);
      });
  }, []);

  const { inspection } = data || {};
  const { car_model } = inspection || {};
  const { make, model, year, id, created_on } = car_model || {};

  return(
  <>

{loading ? (
       <div className="lds-roller-overlay">
       <div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
       </div> 
    ) : (
      <>
        <div className="car-details-grid">
            <div className='items'>
                <div className="item">
                    <div className="custom-card">
                        <div className="para-wrap">
                            <figure>
                                <img src={require('../../Assets/images/model.svg').default} alt="" />
                            </figure>
                            <p className="title">{make}</p>
                            <p>Make</p>
                        </div>
                        <div className="para-wrap">
                            <p className="title">{model}</p>
                            <p>Model</p>
                        </div>
                        <div className="para-wrap">
                            <p className="title">{year}</p>
                            <p>Year</p>
                        </div>
                    </div>
                </div>
                <div className="item">
                <div className="custom-card">
                    <div className="para-wrap">                                        
                        <figure>
                            <img src={require('../../Assets/images/milage.svg').default} alt="" />
                        </figure>
                        <p className="title">{data.inspection.mileage}</p>
                        <p>Milage (km)</p>
                    </div>
                </div>
            </div>
            </div>
            <div className='items'>
            <div className="item">
              <div className="custom-card">
                  <div className="para-wrap">
                      <figure>
                          <img src={require('../../Assets/images/inspection.svg').default} alt="" />
                      </figure>
                      <p className="title">{id}</p>
                      <p>Inspection ID</p>
                  </div>
              </div>
          </div>
          <div className="item">
              <div className="custom-card">
                  <div className="para-wrap">                                        
                      <figure>
                          <img src={require('../../Assets/images/dashboard.svg').default} alt="" />
                      </figure>
                      <p className="title">{data.inspection.car.vin}</p>
                      <p>VIN</p>
                  </div>
              </div>
          </div>
          <div className="item">
              <div className="custom-card">
                  <div className="para-wrap">                                        
                      <figure>
                          <img src={require('../../Assets/images/calendar.svg').default} alt="" />
                      </figure>
                      <p className="title">{new Date(created_on).toLocaleDateString('en-GB', {day: '2-digit', month: 'short', year: 'numeric'}).toUpperCase()}</p>                      
                      <p>Created</p>
                  </div>
              </div>
          </div>
            </div>
      </div>        
      </>
      )}
  
  </>
);
}

export default CarDetails;