FrontEnd Code For Damage Detection

DamageDetect/AdminHome.jsx

+import { useState } from "react";
+import Sidepanel from "../../components/sidepanel";
+import bg from "../../images/mainbg1.jpg";
+import axios from "axios";
+import QRCode from "qrcode.react";
+
+function AdminHome() {
+  const [formData, setFormData] = useState({
+    senderName: "",
+    senderContact: "",
+    img1: null,
+    img2: null,
+    img1Base64: "",
+    img2Base64: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [showQRCode, setShowQRCode] = useState(false);
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleFileChange = async (event) => {
+    const { name, files } = event.target;
+    const selectedFile = files[0];
+
+    if (selectedFile) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const base64Data = e.target.result;
+        setFormData({
+          ...formData,
+          [name]: selectedFile,
+          [`${name}Base64`]: base64Data,
+        });
+      };
+
+      reader.readAsDataURL(selectedFile);
+    }
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    try {
+      setIsLoading(true);
+      const requestData = {
+        senderName: formData.senderName,
+        senderContact: formData.senderContact,
+        img1: formData.img1Base64,
+        img2: formData.img2Base64,
+      };
+
+      console.log("Final Dataset:", requestData);
+      await axios.post(
+        "https://lime-plain-bullfrog.cyclic.app/api/saveFormData",
+        requestData
+      );
+
+      // setFormData({
+      //   senderName: "",
+      //   senderContact: "",
+      //   img1: "",
+      //   img2: "",
+      //   img1Base64: "",
+      //   img2Base64: "",
+      // });
+      setIsLoading(false);
+      setShowQRCode(true);
+      alert("Data saved successfully");
+    } catch (error) {
+      console.error(error);
+      alert("An error occurred while saving data");
+      setIsLoading(false);
+    }
+  };
+
+  const handlePrint = () => {
+    console.log("Print QR");
+  };
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <img
+        src={bg}
+        alt=""
+        srcset=""
+        className="object-cover w-[100%] h-[100%] fixed"
+      />
+      <div className="main-body-container w-full flex flex-row absolute">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-col p-5 mx-auto items-center justify-center bg-white rounded-lg shadow-md shadow-slate-300">
+              <form onSubmit={handleSubmit} className="flex flex-col w-full">
+                <label
+                  htmlFor="sendername"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Sender Name
+                </label>
+                <input
+                  type="text"
+                  id="sendername"
+                  name="senderName"
+                  required
+                  value={formData.senderName}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="senderContact"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Sender Contact
+                </label>
+                <input
+                  type="number"
+                  maxLength="10"
+                  id="senderContact"
+                  name="senderContact"
+                  required
+                  value={formData.senderContact}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="image01"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Upload Image 01
+                </label>
+                <input
+                  type="file"
+                  id="image01"
+                  name="img1"
+                  className="mb-4 py-2 pl-5 file:rounded-lg rounded-lg border border-gray-300"
+                  accept="image/*"
+                  required
+                  onChange={handleFileChange}
+                />
+                {formData.img1Base64 && (
+                  <img
+                    width={200}
+                    style={{ height: "250px" }}
+                    src={formData.img1Base64}
+                    alt="Image 01"
+                    className="mb-4 max-w-[300px]"
+                  />
+                )}
+
+                <label
+                  htmlFor="image02"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Upload Image 02
+                </label>
+                <input
+                  type="file"
+                  id="image02"
+                  name="img2"
+                  className="mb-4 py-2 pl-5 file:rounded-lg rounded-lg border border-gray-300"
+                  accept="image/*"
+                  required
+                  onChange={handleFileChange}
+                />
+                {formData.img2Base64 && (
+                  <img
+                    width={200}
+                    style={{ height: "250px" }}
+                    src={formData.img2Base64}
+                    alt="Image 02"
+                    className="mb-4 max-w-[300px]"
+                  />
+                )}
+
+                <div className="flex flex-row space-x-3 w-full">
+                  <div className="flex items-center justify-between z-10">
+                    <button
+                      className="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full bg-gradient-to-r from-red-500 to-red-700 z-10"
+                      type="submit"
+                      disabled={isLoading}
+                    >
+                      {isLoading ? "Saving..." : "Save"}{" "}
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+
+            {showQRCode && (
+              <div className="bg-white p-4 mt-4 rounded-lg shadow-md">
+                <QRCode value={formData.senderContact} />
+                <button
+                  onClick={handlePrint}
+                  className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+                >
+                  Print QR Code
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminHome;

DamageDetect/AdminPackaging.jsx

+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import bg from "../../images/mainbg1.jpg";
+
+function AdminHome() {
+  const [formData, setFormData] = useState({
+    senderName: "",
+    receiverName: "",
+    packageId: "",
+  });
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setFormData((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+  function handleImageUpload(event) {
+    const selectedFiles = event.target.files;
+    const fileCount = selectedFiles.length;
+
+    if (fileCount < 1 || fileCount > 5) {
+      console.log("Please select between 1 and 5 images.");
+      return;
+    }
+  }
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <img
+        src={bg}
+        alt=""
+        srcset=""
+        className="object-cover w-[100%] h-[100%] fixed"
+      />
+      <div className="main-body-container w-full flex flex-row absolute">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-col p-5 mx-auto items-center justify-center bg-white rounded-lg shadow-md shadow-slate-300">
+              <form onSubmit={handleSubmit} className="flex flex-col w-full">
+                <label
+                  htmlFor="sendername"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Sender Name
+                </label>
+                <input
+                  type="text"
+                  id="sendername"
+                  name="senderName"
+                  required
+                  value={formData.senderName}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="recievername"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Receiver Name
+                </label>
+                <input
+                  type="text"
+                  id="recievername"
+                  required
+                  name="receiverName"
+                  value={formData.receiverName}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="pid"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package ID
+                </label>
+                <input
+                  type="text"
+                  id="pid"
+                  required
+                  name="packageId"
+                  value={formData.packageId}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="dd"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Driver Details
+                </label>
+                <input
+                  type="text"
+                  id="dd"
+                  required
+                  name="driverDetails"
+                  value={formData.driverDetails}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="date"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Date
+                </label>
+                <input
+                  type="date"
+                  id="date"
+                  required
+                  name="date"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="time"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Time
+                </label>
+                <input
+                  type="time"
+                  id="time"
+                  required
+                  name="time"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                />
+
+                <label
+                  htmlFor="pd"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package Description
+                </label>
+                <input
+                  type="textarea"
+                  id="pd"
+                  required
+                  name="packageDescription"
+                  value={formData.packageDescription}
+                  onChange={handleInputChange}
+                  className="mb-4 p-2 rounded-lg border border-gray-300 h-24"
+                />
+                <label
+                  htmlFor="images"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Upload Image
+                </label>
+                <input
+                  type="file"
+                  id="images"
+                  name="images"
+                  className="mb-4 py-2 pl-5 file:rounded-lg rounded-lg border border-gray-300"
+                  accept="image/*"
+                  multiple
+                  onChange={handleImageUpload}
+                  required
+                />
+                <div className="flex flex-row space-x-3 w-full">
+                  {/* <Link
+                    to={{
+                      pathname: "/PackageDispatch",
+                      state: { formData }
+                    }}
+                    className="w-full"
+                  > */}
+                  {/* <a href="/PackageDispatch">
+                    <button
+                      type="submit"
+                      className="py-2 px-4 bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-lg w-52 ml-auto mt-8"
+                    >
+                      Generate QR
+                    </button>
+                    </a> */}
+                  <div className="flex items-center justify-between z-10">
+                    <button
+                      className="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full bg-gradient-to-r from-red-500 to-red-700 z-10"
+                      type="submit"
+                    >
+                      <a href="/PackageDispatch">Generate QR</a>
+                    </button>
+                  </div>
+                  {/* </Link> */}
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminHome;

DamageDetect/AdminSidepanel.jsx

+import {useState} from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBox, faUser, faBoxesPacking, faStreetView, faHeadset, faChainBroken, faHome } from '@fortawesome/free-solid-svg-icons'
+
+function AdminSidepanel()
+{
+
+   
+
+    return(
+
+            <div className="w-[300px] side-panel p-5 flex flex-col items-center bg-[#d7002a] ">
+
+                <div className="sidepalen-body h-2/3 p-3 w-full justify-center">
+                    <div className="user-profile flex flex-row items-center space-x-5">
+                        <label className="text-[28px]">
+                            <FontAwesomeIcon icon={faUser} color="white" />
+                        </label>
+                        <span className="user-name text-[22px] text-white">User Name</span>
+                    </div>
+
+
+                    <div className="nav-body w-full flex-col justify-center space-y-5 mt-10">
+                            <ul className="space-y-5">
+                                <Link to="/Dashboard"><li className="p-2 w-full bg-white rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faHome} className="mr-5"/>Dashboard</li></Link>
+                                <Link to="/AdminHome"><li className="p-2 w-full bg-white rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faBox} className="mr-5"/>Home</li></Link>
+
+                                {/* <Link to="/PackageDispatch"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faBoxesPacking} className="mr-5"/>Package Dispatch</li></Link> */}
+
+                                
+                               
+                            </ul>
+                    </div>
+
+
+                </div>
+               
+
+            </div>
+            
+
+    );
+}
+
+
+export default AdminSidepanel;
\ No newline at end of file

DamageDetect/CustomerHome.jsx

+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import qr from './images/qr.jpg';
+import inq from './images/inq.jpg';
+import bg from '../../images/mainbg1.jpg';
+
+function CustomerHome() {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <img src={bg} alt="" srcset="" className="object-cover w-[100%] h-[100%] fixed" />
+      <div className="main-body-container h-screen w-full flex flex-row absolute">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-row p-5 mx-auto items-center justify-center space-x-5">
+              
+              <a href="/ScanQR"><div className="option-card p-5 w-[420px] border-[1px] border-gray-200 text-center rounded-md bg-white shadow-md shadow-slate-300">
+                  <div className="card-body ">
+                      <div className="img-box">
+                        <img src={qr} alt="" srcset="" className="object-cover w-full h-full"/>
+                      </div>
+                      <div className="title p-3">
+                            <h2 className="fonr-semibold text-gray-900">Scan QR now</h2>
+                      </div>
+                  </div>
+              </div></a>
+
+
+              <a href="/Inquiry"><div className="option-card p-5 w-[420px] border-[1px] border-gray-200 text-center rounded-md bg-white shadow-md shadow-slate-300">
+                  <div className="card-body ">
+                      <div className="img-box">
+                        <img src={inq} alt="" srcset="" className="object-cover w-full h-full"/>
+                      </div>
+                      <div className="title p-3">
+                            <h2 className="fonr-semibold text-gray-900">Inquiry</h2>
+                      </div>
+                  </div>
+              </div></a>
+
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CustomerHome;

DamageDetect/InquiryStatus.jsx

+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import axios from "axios";
+
+function InquiryStatus() {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+
+  const [images, setImages] = useState([]);
+
+  useEffect(() => {
+  
+    axios.get("api-endpoint")
+      .then(response => {
+        
+        setImages(response.data);
+      })
+      .catch(error => {
+        console.log("Error fetching image data:", error);
+      });
+  }, []);
+
+
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <div className="main-body-container h-screen w-full flex flex-row">
+        <Sidepanel />
+        <div className="w-5/6 side-panel bg-slate-100 p-5">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-col p-5 mx-auto items-center justify-center bg-white rounded-lg shadow-md shadow-slate-300">
+              <form onSubmit={handleSubmit} className="flex flex-col w-full">
+                <label
+                  htmlFor="orderId"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package Before Delivery
+                </label>
+                <div className="image-holder flex">
+                  {images.map((image, index) => (
+                    <img
+                      key={index}
+                      src={image.url}
+                      alt={`Image ${index + 1}`}
+                      className="image-box w-[200px] mr-[10px]"
+                    />
+                  ))}
+                </div>
+
+                <label
+                  htmlFor="orderId"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package After Delivery
+                </label>
+                <div className="image-holder flex">
+                  {images.map((image, index) => (
+                    <img
+                      key={index}
+                      src={image.url}
+                      alt={`Image ${index + 1}`}
+                      className="image-box w-[200px] mr-[10px]"
+                    />
+                  ))}
+                </div>
+
+                <span>Package Status</span>
+
+                <div className="w-full text-right ">
+                  <Link to="/CustomerHome"><input
+                    type="button"
+                    value="Next"
+                    className="py-2 px-4 bg-blue-500 text-white rounded-lg w-1/4 "
+                  /></Link>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default InquiryStatus;

DamageDetect/PackageDispatch.jsx

+import { useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import QRCode from "qrcode.react";
+import bg from '../../images/mainbg1.jpg';
+
+function PackageDispatch() {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const senderName = searchParams.get("sender");
+  const receiverName = searchParams.get("receiver");
+  const packageId = searchParams.get("packageId");
+  
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    
+  };
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <img src={bg} alt="" srcset="" className="object-cover w-[100%] h-[100%] fixed" />
+      <div className="main-body-container w-full flex flex-row absolute">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-col p-5 mx-auto items-center justify-center bg-white rounded-lg shadow-md shadow-slate-300">
+              <form onSubmit={handleSubmit} className="flex flex-col w-full text-center">
+                <div className="QR text-center justify-center items-center w-full p-5 flex flex-row">
+                  <QRCode
+                    value={`Sender: ${senderName}\nReceiver: ${receiverName}\nPackage ID: ${packageId}`}
+                    size={200}
+                    className="mx-auto"
+                  />
+                  
+                </div>
+
+                <div className="flex flex-row space-x-3 w-full">
+                  <Link to="/AdminHome" className="w-full">
+                    <button
+                      type="submit"
+                      className="py-2 px-4 bg-blue-500 text-white rounded-lg w-full"
+                    >
+                      Submit
+                    </button>
+                  </Link>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PackageDispatch;

DamageDetect/PackageStatus.jsx

+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+
+function PackageStatus() {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  function handleImageUpload(event) {
+    const selectedFiles = event.target.files;
+    const fileCount = selectedFiles.length;
+
+    if (fileCount < 1 || fileCount > 5) {
+      // Display an error message or handle the validation error accordingly
+      console.log("Please select between 1 and 5 images.");
+      return;
+    }
+  }
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <div className="main-body-container h-screen w-full flex flex-row">
+        <Sidepanel />
+        <div className="w-5/6 side-panel bg-slate-100 p-5">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-col p-5 mx-auto items-center justify-center bg-white rounded-lg shadow-md shadow-slate-300">
+              <form onSubmit={handleSubmit} className="flex flex-col w-full">
+                <label
+                  htmlFor="orderId"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Send From
+                </label>
+                <input
+                  type="text"
+                  id="orderId"
+                  name="orderId"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  required
+                />
+
+                <label
+                  htmlFor="pickup"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Send to
+                </label>
+                <input
+                  type="text"
+                  id="pickup"
+                  name="pickup"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  required
+                />
+
+                <label
+                  htmlFor="destination"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package Description
+                </label>
+                <input
+                  type="text"
+                  id="destination"
+                  name="destination"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  required
+                />
+
+                <label
+                  htmlFor="images"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Upload Images (1-5)
+                </label>
+                <input
+                  type="file"
+                  id="images"
+                  name="images"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  accept="image/*"
+                  multiple
+                  required
+                  onChange={handleImageUpload}
+                />
+
+                <div className="flex flex-row space-x-3 w-full">
+                  <Link to="/CustomerHome" className="w-full"><button
+                    type="submit"
+                    className="py-2 px-4 bg-blue-500 text-white rounded-lg w-full"
+                  >
+                    Approve
+                  </button></Link>
+                  <Link to="/Inquiry" className="w-full"><button
+                    type="submit"
+                    className="py-2 px-4 border-[1px] border-blue-500 text-gray-900 rounded-lg w-full"
+                  >
+                    Send for Inquiry
+                  </button></Link>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PackageStatus;

DamageDetect/ScanQR.jsx

+import { useState, useRef, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import qr from './images/qr.jpg';
+import inq from './images/inq.jpg';
+import bg from '../../images/mainbg1.jpg';
+
+function ScanQR() {
+  const [stream, setStream] = useState(null);
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    navigator.mediaDevices.getUserMedia({ video: true })
+      .then((mediaStream) => {
+        setStream(mediaStream);
+        if (videoRef.current) {
+          videoRef.current.srcObject = mediaStream;
+        }
+      })
+      .catch((error) => {
+        console.log("Error accessing camera:", error);
+      });
+
+    return () => {
+      if (stream) {
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+      }
+    };
+  }, []);
+
+
+
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+       <img src={bg} alt="" srcset="" className="object-cover w-[100%] h-[100%] fixed" />
+      <div className="main-body-container h-screen w-full flex flex-row">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] flex flex-row p-5 mx-auto items-center justify-center space-x-5">
+              <div className="relative">
+                <video
+                  ref={videoRef}
+                  autoPlay
+                  muted
+                  className="w-full h-auto"
+                ></video>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ScanQR;

DamageDetect/ViewPackage.jsx

+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import bg from "../../images/mainbg1.jpg";
+import axios from "axios";
+function ViewPack() {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(
+          "https://lime-plain-bullfrog.cyclic.app/api/getData"
+        );
+
+        const responseData = response.data;
+        setData(responseData);
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+  const renderImages = (base64Data) => {
+    return (
+      <img
+        src={base64Data}
+        alt="Image"
+        style={{ width: "100%", height: "100px" }}
+      />
+    );
+  };
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <img
+        src={bg}
+        alt=""
+        srcSet=""
+        className="object-cover w-[100%] h-[100%] fixed"
+      />
+      <div className="main-body-container w-full flex flex-row absolute">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center justify-center">
+            <div className="form-body w-[80%] p-5 mx-auto bg-white rounded-lg shadow-md shadow-slate-300">
+              <h2>Package Data Table</h2>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100vh",
+                }}
+              >
+                {loading ? (
+                  <p>Loading...</p>
+                ) : (
+                  <table
+                    style={{
+                      border: "1px solid #ddd",
+                      borderCollapse: "collapse",
+                    }}
+                  >
+                    <thead>
+                      <tr>
+                        <th
+                          style={{ border: "1px solid #ddd", padding: "8px" }}
+                        >
+                          Sender Name
+                        </th>
+                        <th
+                          style={{ border: "1px solid #ddd", padding: "8px" }}
+                        >
+                          Sender Contact
+                        </th>
+                        <th
+                          style={{ border: "1px solid #ddd", padding: "8px" }}
+                        >
+                          Image 1
+                        </th>
+                        <th
+                          style={{ border: "1px solid #ddd", padding: "8px" }}
+                        >
+                          Image 2
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.map((item) => (
+                        <tr key={item._id}>
+                          <td
+                            style={{ border: "1px solid #ddd", padding: "8px" }}
+                          >
+                            {item.senderName}
+                          </td>
+                          <td
+                            style={{ border: "1px solid #ddd", padding: "8px" }}
+                          >
+                            {item.senderContact}
+                          </td>
+                          <td
+                            style={{ border: "1px solid #ddd", padding: "8px" }}
+                          >
+                            {item.img1 && renderImages(item.img1)}
+                          </td>
+                          <td
+                            style={{ border: "1px solid #ddd", padding: "8px" }}
+                          >
+                            {item.img2 && renderImages(item.img2)}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ViewPack;

DamageDetect/inquiry.jsx

+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faStarHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import Sidepanel from "../../components/sidepanel";
+import bg from '../../images/mainbg1.jpg';
+
+function Inquiry() {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  function handleImageUpload(event) {
+    const selectedFiles = event.target.files;
+    const fileCount = selectedFiles.length;
+
+    if (fileCount < 1 || fileCount > 5) {
+      // Display an error message or handle the validation error accordingly
+      console.log("Please select between 1 and 5 images.");
+      return;
+    }
+  }
+
+  return (
+    <div className="main-body h-screen w-full bg-slate-100">
+      <img src={bg} alt="" srcset="" className="object-cover w-[100%] h-[100%] fixed" />
+      <div className="main-body-container w-full flex flex-row absolute">
+        <Sidepanel />
+        <div className="w-5/6 side-panel p-5 md:ml-[300px] ml-16">
+          <div className="common-body p-5 flex flex-col h-full items-center">
+            <div className="form-body md:w-[80%] w-full flex flex-col p-5 mx-auto items-center justify-center bg-white rounded-lg">
+              <form onSubmit={handleSubmit} className="flex flex-col w-full">
+                <label
+                  htmlFor="orderId"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package No
+                </label>
+                <input
+                  type="text"
+                  id="orderId"
+                  name="orderId"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  required
+                />
+
+                <label
+                  htmlFor="pickup"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Reciever 
+                </label>
+                <input
+                  type="text"
+                  id="pickup"
+                  name="pickup"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  required
+                />
+
+                <label
+                  htmlFor="destination"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Package Description
+                </label>
+                <input
+                  type="text"
+                  id="destination"
+                  name="destination"
+                  className="mb-4 p-2 rounded-lg border border-gray-300"
+                  required
+                />
+
+                <label
+                  htmlFor="images"
+                  className="mb-2 font-semibold text-gray-600"
+                >
+                  Upload Images (1-5)
+                </label>
+                <input
+                  type="file"
+                  id="images"
+                  name="images"
+                  className="mb-4 py-2 pl-5 file:rounded-lg rounded-lg border border-gray-300"
+                  accept="image/*"
+                  multiple
+                  onChange={handleImageUpload}
+                  required
+                />
+
+                <button
+                  type="submit"
+                  className="py-2 px-4 bg-blue-500 text-white rounded-lg w-52 ml-auto mt-8"
+                >
+                  Send for Inquiry
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Inquiry;

DamageDetect/sidepanel.jsx

+import {useState} from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBox, faHome, faUser, faBoxesPacking, faStreetView, faHeadset, faChainBroken } from '@fortawesome/free-solid-svg-icons'
+
+function Sidepanel()
+{
+
+   
+
+    return(
+
+            <div className="w-[300px] side-panel p-5 flex flex-col items-center bg-[#d7002a] ">
+
+                <div className="sidepalen-body h-2/3 p-3 w-full justify-center">
+                    <div className="user-profile flex flex-row items-center space-x-5">
+                        <label className="text-[28px]">
+                            <FontAwesomeIcon icon={faUser} color="white" />
+                        </label>
+                        <span className="user-name text-[22px] text-white">User Name</span>
+                    </div>
+
+
+                    <div className="nav-body w-full flex-col justify-center space-y-5 mt-10">
+                            <ul className="space-y-5">
+                                <Link to="/Dashboard"><li className="p-2 w-full bg-white rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faHome} className="mr-5"/>Dashboard</li></Link>
+
+                                <Link to="/CustomerHome"><li className="p-2 w-full bg-white rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faBox} className="mr-5"/>Home</li></Link>
+
+                                <Link to="/ScanQR"><li className="p-2 w-full bg-white rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faBoxesPacking} className="mr-5"/>Scan QR</li></Link>
+
+                                <Link to="/Inquiry"><li className="p-2 w-full bg-white rounded-md mb-5">
+                                    <FontAwesomeIcon icon={faStreetView} className="mr-5"/>Inquiry</li></Link>
+                               
+                            </ul>
+                    </div>
+
+
+                </div>
+               
+
+            </div>
+            
+
+    );
+}
+
+
+export default Sidepanel;
\ No newline at end of file