Skip to content

2
2023-221
Commit e6ec28bd authored by Jayawardena K R U S's avatar Jayawardena K R U S
Browse files
Options

Frontend_demo_have_to_update

parent 66d93ba6
Pipeline #6712 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 18807 additions and 0 deletions
      .gitignore 0 → 100644
      View file @ e6ec28bd
      node_modules
      package-lock.json 0 → 100644
      View file @ e6ec28bd
      This diff is collapsed.
      package.json 0 → 100644
      View file @ e6ec28bd
      {
      "name": "currierservice",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^6.4.0",
      "@fortawesome/free-solid-svg-icons": "^6.4.0",
      "@fortawesome/react-fontawesome": "^0.2.0",
      "@react-google-maps/api": "^2.18.1",
      "@testing-library/jest-dom": "^5.16.5",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "qrcode.react": "^3.1.0",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-scripts": "5.0.1",
      "recharts": "^2.7.2",
      "web-vitals": "^2.1.4"
      },
      "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
      },
      "eslintConfig": {
      "extends": [
      "react-app",
      "react-app/jest"
      ]
      },
      "browserslist": {
      "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
      ],
      "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
      ]
      },
      "devDependencies": {
      "react-router-dom": "^6.11.2",
      "tailwindcss": "^3.3.2"
      }
      }
      public/index.html 0 → 100644
      View file @ e6ec28bd
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta
      name="description"
      content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      -->
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
      -->
      <title>React App</title>
      </head>
      <body>
      <script src="../src/index.js"></script>
      <div id="root"></div>
      </body>
      </html>
      src/App.js 0 → 100644
      View file @ e6ec28bd
      import { BrowserRouter, Route, Routes } from "react-router-dom";
      import Login from "./routes/login";
      import Dashboard from "./routes/Admindash";
      import CreateDelivery from "./routes/DeliveryRoutes/createDelivery";
      import Orders from "./routes/DeliveryRoutes/orders";
      import RoutePlanning from "./routes/DeliveryRoutes/RoutePlanning";
      function App() {
      return (
      <div className="App">
      <BrowserRouter>
      <Routes>
      <Route index path="/" element={<Login/>}/>
      <Route path="Dashboard" element={<Dashboard/>}/>
      <Route path="CreateDelivery" element={<CreateDelivery/>}/>
      <Route path="Orders" element={<Orders/>}/>
      <Route path="RoutePlanning" element={<RoutePlanning/>}/>
      </Routes>
      </BrowserRouter>
      </div>
      );
      }
      export default App;
      src/components/Gmap.jsx 0 → 100644
      View file @ e6ec28bd
      import React, { useEffect, useState } from 'react';
      import { GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';
      const Gmap = () => {
      const [map, setMap] = useState(null);
      const [userLocation, setUserLocation] = useState(null);
      // Function to get the user's current location
      const getUserLocation = () => {
      if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
      (position) => {
      setUserLocation({
      lat: position.coords.latitude,
      lng: position.coords.longitude,
      });
      },
      (error) => {
      console.error(error);
      }
      );
      } else {
      console.error('Geolocation is not supported by this browser.');
      }
      };
      // Function to handle when the map is loaded
      const handleMapLoad = (map) => {
      setMap(map);
      };
      useEffect(() => {
      getUserLocation();
      }, []);
      return (
      <div className="map w-[60%]">
      <GoogleMap
      onLoad={handleMapLoad}
      center={userLocation}
      zoom={15}
      mapContainerStyle={{ width: '100%', height: '400px' }}
      >
      {userLocation && <Marker position={userLocation} />}
      </GoogleMap>
      </div>
      );
      };
      export default Gmap;
      src/components/chart.jsx 0 → 100644
      View file @ e6ec28bd
      import React from 'react';
      import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
      const data = [
      { name: 'Jan', value: 200 },
      { name: 'Feb', value: 350 },
      { name: 'Mar', value: 100 },
      // Add more data points as needed
      ];
      const MonthlyProgress = () => {
      return (
      <div className="h-full p-3 w-full justify-center text-center rounded-lg flex flex-col shadow-md shadow-slate-300 bg-white">
      <span className="font-semibold text-slate-900 text-[18px]">Monthly Progress</span>
      <div className="mt-3 flex flex-row justify-center items-center">
      <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
      </LineChart>
      </ResponsiveContainer>
      </div>
      </div>
      );
      };
      export default MonthlyProgress;
      src/components/sidepanel.jsx 0 → 100644
      View file @ e6ec28bd
      import {useState} from "react";
      import { Link } from "react-router-dom";
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
      import { faPlus, faStarHalfStroke, faUser, faMapLocation, faChartLine, faHeadset, faChainBroken } from '@fortawesome/free-solid-svg-icons'
      function Sidepanel()
      {
      return(
      <div className="w-[300px] side-panel p-5 flex flex-col justify-center items-center bg-gray-900">
      <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-3 mt-10">
      <ul className="space-y-5">
      <Link to="/CreateDelivery"><li className="p-2 w-full bg-slate-400 rounded-md ">
      <FontAwesomeIcon icon={faMapLocation} className="mr-5"/>Delivery Routing</li></Link>
      <li className="p-2 w-full bg-slate-400 rounded-md">
      <FontAwesomeIcon icon={faChartLine} className="mr-5"/>Performance Track</li>
      <li className="p-2 w-full bg-slate-400 rounded-md">
      <FontAwesomeIcon icon={faHeadset} className="mr-5"/>Customer Support</li>
      <li className="p-2 w-full bg-slate-400 rounded-md">
      <FontAwesomeIcon icon={faChainBroken} className="mr-5"/>Damage Ditection</li>
      </ul>
      </div>
      </div>
      </div>
      );
      }
      export default Sidepanel;
      \ No newline at end of file
      src/index.css 0 → 100644
      View file @ e6ec28bd
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
      body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      }
      code {
      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
      }
      src/index.js 0 → 100644
      View file @ e6ec28bd
      import React from 'react';
      import ReactDOM from 'react-dom/client';
      import './index.css';
      import App from './App';
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(
      <React.StrictMode>
      <App />
      </React.StrictMode>
      );
      src/routes/Admindash.jsx 0 → 100644
      View file @ e6ec28bd
      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 MonthlyProgress from "../components/chart";
      function Dashboard()
      {
      const [selectedImage, setSelectedImage] = useState(null);
      const handleImageChange = (event) => {
      const file = event.target.files[0];
      setSelectedImage(file);
      };
      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">
      <div className="indicators w-[80%] flex flex-row h-full mx-auto justify-between">
      <div className="bg-gradient-to-r from-sky-400 to-blue-500 h-[180px] p-3 w-[45%] justify-center text-center rounded-lg flex flex-col shadow-md shadow-slate-400">
      <span className="font-semibold text-white text-[18px]">Available Packages</span>
      <div className="mt-3 flex flex-row justify-center items-center">
      <span className="text-white text-[22px] mr-3">
      <FontAwesomeIcon icon={faPlus} />
      </span>
      <span className="text-white text-[36px] font-bold">106</span>
      </div>
      </div>
      <div className="bg-gradient-to-r from-indigo-300 to-purple-400 h-[180px] p-3 w-[45%] justify-center text-center rounded-lg flex flex-col shadow-md shadow-slate-400">
      <span className="font-semibold text-white text-[18px]">Track Info</span>
      <div className="mt-3 flex flex-row justify-center items-center">
      <span className="text-white text-[22px] mr-3">
      <FontAwesomeIcon icon={faPlus} />
      </span>
      <span className="text-white text-[36px] font-bold">58</span>
      </div>
      </div>
      </div>
      <div className="chart-indicators w-[80%] flex flex-row h-full mx-auto justify-between">
      <div className="h-full p-3 w-full justify-center text-center rounded-lg flex flex-col">
      <div className="mt-3 flex flex-row justify-center items-center">
      <MonthlyProgress/>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default Dashboard;
      \ No newline at end of file
      src/routes/DamageDetect/sidepanel.jsx 0 → 100644
      View file @ e6ec28bd
      import {useState} from "react";
      import { Link } from "react-router-dom";
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
      import { faBox, 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 justify-center items-center bg-gray-900 ">
      <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="/CreateDelivery"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
      <FontAwesomeIcon icon={faBox} className="mr-5"/>Create Delivery</li></Link>
      <Link to="/Orders"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
      <FontAwesomeIcon icon={faBoxesPacking} className="mr-5"/>Orders</li></Link>
      <Link to="/RoutePlanning"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
      <FontAwesomeIcon icon={faStreetView} className="mr-5"/>Route Planning</li></Link>
      </ul>
      </div> */}
      </div>
      </div>
      );
      }
      export default Sidepanel;
      \ No newline at end of file
      src/routes/DeliveryRoutes/RoutePlanning.jsx 0 → 100644
      View file @ e6ec28bd
      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 "./sidepanel";
      import Gmap from "../../components/Gmap";
      function RoutePlanning()
      {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      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-[90%] flex flex-row p-5 mx-auto items-center justify-center bg-white rounded-lg shadow-md shadow-slate-300">
      <div className="map w-[60%] p-2 h-full">
      <span>G-MAP will appear here</span>
      </div>
      <div className="order-details flex flex-col space-y-[20px]">
      <span>Order Id : #TJH097</span>
      <span>Pick Up</span>
      <span>Two more Steps</span>
      <span>Delivery</span>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default RoutePlanning;
      \ No newline at end of file
      src/routes/DeliveryRoutes/createDelivery.jsx 0 → 100644
      View file @ e6ec28bd
      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 "./sidepanel";
      function CreateDelivery()
      {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      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">
      Order ID
      </label>
      <input type="text" id="orderId" name="orderId" className="mb-4 p-2 rounded-lg border border-gray-300" />
      <label htmlFor="pickup" className="mb-2 font-semibold text-gray-600">
      Pickup
      </label>
      <input type="text" id="pickup" name="pickup" className="mb-4 p-2 rounded-lg border border-gray-300" />
      <label htmlFor="destination" className="mb-2 font-semibold text-gray-600">
      Destination
      </label>
      <input type="text" id="destination" name="destination" 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" name="date" className="mb-4 p-2 rounded-lg border border-gray-300" />
      <label htmlFor="vehicle" className="mb-2 font-semibold text-gray-600">
      Vehicle
      </label>
      <select id="vehicle" name="vehicle" className="mb-4 p-2 rounded-lg border border-gray-300">
      <option value="car">Car</option>
      <option value="bike">Bike</option>
      <option value="truck">Truck</option>
      </select>
      <button type="submit" className="py-2 px-4 bg-blue-500 text-white rounded-lg">
      Create Delivery
      </button>
      </form>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default CreateDelivery;
      \ No newline at end of file
      src/routes/DeliveryRoutes/orders.jsx 0 → 100644
      View file @ e6ec28bd
      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 "./sidepanel";
      function Orders()
      {
      const [selectedImage, setSelectedImage] = useState(null);
      const handleImageChange = (event) => {
      const file = event.target.files[0];
      setSelectedImage(file);
      };
      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">
      <div className="table-container w-[90%] flex flex-row h-full mx-auto justify-between">
      <div className="table-body w-full">
      <table className="w-full text-center">
      <th className="font-medium p-2 text-white bg-slate-500">Destination</th>
      <th className="font-medium p-2 text-white bg-slate-500">Order ID</th>
      <th className="font-medium p-2 text-white bg-slate-500">Vehicle</th>
      <th className="font-medium p-2 text-white bg-slate-500">Status</th>
      <th className="font-medium p-2 text-white bg-slate-500">Departure Date</th>
      <th className="font-medium p-2 text-white bg-slate-500">Estimated Date</th>
      <tbody className="bg-white">
      <tr className="leading-[25px] mt-[20px] border-b ">
      <td className="Destination p-2" >
      Colombo 10
      </td>
      <td className="Order-ID p-2" >
      #TH097J
      </td>
      <td className="Vehicle p-2" >
      Bike
      </td>
      <td className="Status p-2 text-red-600" >
      Delivered
      </td>
      <td className="Departure-Date p-2" >
      20/03/2023
      </td>
      <td className="Estimated-Date p-2" >
      10/05/2023
      </td>
      </tr>
      </tbody>
      </table>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default Orders;
      \ No newline at end of file
      src/routes/DeliveryRoutes/sidepanel.jsx 0 → 100644
      View file @ e6ec28bd
      import {useState} from "react";
      import { Link } from "react-router-dom";
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
      import { faBox, 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 justify-center items-center bg-gray-900 ">
      <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="/CreateDelivery"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
      <FontAwesomeIcon icon={faBox} className="mr-5"/>Create Delivery</li></Link>
      <Link to="/Orders"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
      <FontAwesomeIcon icon={faBoxesPacking} className="mr-5"/>Orders</li></Link>
      <Link to="/RoutePlanning"><li className="p-2 w-full bg-slate-400 rounded-md mb-5">
      <FontAwesomeIcon icon={faStreetView} className="mr-5"/>Route Planning</li></Link>
      </ul>
      </div>
      </div>
      </div>
      );
      }
      export default Sidepanel;
      \ No newline at end of file
      src/routes/login.jsx 0 → 100644
      View file @ e6ec28bd
      import {useState} from "react";
      import { Link } from "react-router-dom";
      function Login()
      {
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      function handleSubmit(event) {
      event.preventDefault();
      console.log("email: ", email);
      console.log("password: ", password);
      }
      const [showPassword, setShowPassword] = useState(false);
      const togglePasswordVisibility = () => setShowPassword(prevState => !prevState);
      return(
      <div className="main-body h-screen w-full bg-slate-100">
      <div className="main-body-container h-screen w-full">
      <form onSubmit={handleSubmit} className="bg-white mx-auto rounded px-8 pt-6 pb-8 mb-4 w-[400px] h-[423px] flex flex-col justify-center overflow-clip relative top-1/2 -translate-y-1/2 shadow-md shadow-slate-300 rounded-md">
      <h3 className="mb-6 text-center text-xl z-10">Log in to your account</h3>
      <div className="mb-8 z-10">
      <label className="block text-gray-700 font-bold mb-2 z-10" htmlFor="email">
      Email
      </label>
      <input
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="email"
      type="email"
      placeholder="Email address"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      />
      </div>
      <div className="mb-8 z-10">
      <label className="block text-gray-700 font-bold mb-2 z-10" htmlFor="password">
      Password
      </label>
      <div className="relative flex items-center">
      <input
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="password"
      type={showPassword ? 'text' : 'password'}
      placeholder="Password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      />
      <button
      type="button"
      className="absolute top-1/2 right-3 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none"
      onClick={togglePasswordVisibility}
      >
      {showPassword ? (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h.01M19 12h.01M12 4a8 8 0 018 8 8 8 0 01-8 8 8 8 0 01-8-8 8 8 0 018-8z" />
      </svg>
      ) : (
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7.94 7.94A5.002 5.002 0 0117 12a5.002 5.002 0 01-9.06 2.94M12 17.97V21M12 3v2.02" />
      </svg>
      )}
      </button>
      </div>
      </div>
      <Link to="/Dashboard"><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-sky-400 to-blue-500 z-10"
      type="submit"
      >
      LOGIN
      </button>
      </div></Link>
      <div className="text-center mt-5 z-10 ">
      <span>Don't have an account ? <Link to="/signup" className="text-blue-500 cursor-pointer"> Sign Up </Link></span>
      </div>
      </form>
      </div>
      </div>
      );
      }
      export default Login;
      \ No newline at end of file
      src/routes/qrgenerate.jsx 0 → 100644
      View file @ e6ec28bd
      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 QRCode from "qrcode.react";
      function QrGenerate()
      {
      const [qrData, setQRData] = useState("");
      const generateQRCode = () => {
      const randomData = Math.random().toString(36).substring(7);
      setQRData(randomData);
      };
      return(
      <div className="main-body h-screen w-full bg-slate-100">
      <div className="main-body-container h-screen w-full">
      <div className="bg-white mx-auto px-8 pt-6 pb-8 mb-4 w-[400px] flex flex-col justify-center overflow-clip relative top-1/2 -translate-y-1/2 shadow-md shadow-slate-300 rounded-md">
      <h3 className="mb-6 text-left text-xl z-10">Admin ID <span className="font-bold">#20CS</span> <br/></h3>
      <div className="dash-body flex flex-row w-full p-3 justify-between space-x-3" >
      <div className="upload-image text-center p-2 w-full ">
      <div className="upload border border-gray-300 p-10 rounded-md text-center justify-center items-center">
      {qrData ? <QRCode value={qrData} />:<p className="text-center mx-auto"></p>}
      </div>
      <button
      className="mt-3 bg-purple-300 p-2 w-[130px] rounded-full text-white font-semibold"
      onClick={generateQRCode}
      >
      Generate QR
      </button>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default QrGenerate;
      \ No newline at end of file
      src/routes/uploadDash.jsx 0 → 100644
      View file @ e6ec28bd
      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 BG from '../images/bg.jpg'
      function UploadDashboard()
      {
      const [selectedImage, setSelectedImage] = useState(null);
      const handleImageChange = (event) => {
      const file = event.target.files[0];
      setSelectedImage(file);
      };
      return(
      <div className="main-body h-screen w-full bg-slate-100">
      <div className="main-body-container h-screen w-full">
      <div className="bg-white mx-auto rounded px-8 pt-6 pb-8 mb-4 w-[600px] flex flex-col justify-center overflow-clip relative top-1/2 -translate-y-1/2 shadow-md shadow-slate-300 rounded-md">
      <h3 className="mb-6 text-left text-xl z-10">Hello! <span className="font-bold">Tom</span> <br/> Welcome to Dashboard</h3>
      <div className="dash-body flex flex-row w-full p-3 justify-between space-x-3" >
      <div className="upload-image text-center p-2 w-full flex felx-col">
      <div className="upload rounded-md flex flex-row justify-center items-center space-x-5 w-full">
      <div className="image-holder w-2/3">
      <img src={BG} alt="" srcset="" />
      </div>
      <div className="option-panel flex flex-col w-1/3 space-y-3 ">
      <button className="bg-sky-200 p-2 rounded-full hover:bg-sky-400">Upload an Image</button>
      <button className="bg-sky-200 p-2 rounded-full hover:bg-sky-400">Edit</button>
      <button className="bg-sky-200 p-2 rounded-full hover:bg-sky-400">Remove</button>
      <button className="bg-sky-200 p-2 rounded-full hover:bg-sky-400">Save for Inquiry</button>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default UploadDashboard;
      \ No newline at end of file
      src/routes/user.jsx 0 → 100644
      View file @ e6ec28bd
      import {useState} from "react";
      import { Link } from "react-router-dom";
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
      import { faPlus, faEye } from '@fortawesome/free-solid-svg-icons'
      function User()
      {
      const [selectedImage, setSelectedImage] = useState(null);
      const handleImageChange = (event) => {
      const file = event.target.files[0];
      setSelectedImage(file);
      };
      return(
      <div className="main-body h-screen w-full bg-slate-100">
      <div className="main-body-container h-screen w-full">
      <div className="bg-white mx-auto px-8 pt-6 pb-8 mb-4 w-[400px] flex flex-col justify-center overflow-clip relative top-1/2 -translate-y-1/2 shadow-md shadow-slate-300 rounded-md">
      <h3 className="mb-6 text-left text-xl z-10">Hello! <span className="font-bold">Tom</span> <br/> Welcome to Dashboard</h3>
      <div className="dash-body flex flex-row w-full p-3 justify-between space-x-3" >
      <div className="upload-image text-center p-2 w-full ">
      <div className="upload border border-gray-300 p-10 rounded-md">
      <input
      type="file"
      accept="image/*"
      onChange={handleImageChange}
      className="hidden"
      id="image-upload"
      />
      <label htmlFor="image-upload" className="block cursor-pointer text-[32pt]">
      <FontAwesomeIcon icon={faPlus} />
      </label>
      {selectedImage && (
      <p className="text-green-500">{selectedImage.name}</p>
      )}
      </div>
      <h4 className="mt-3">Upload defect Item Image</h4>
      </div>
      <div className="Get-review text-center p-2 w-full ">
      <div className="review border border-gray-300 p-10 rounded-md">
      <label htmlFor="" className="text-[32pt]"> <FontAwesomeIcon icon={faEye} /></label>
      </div>
      <h4 className="mt-3">Track Past Orders</h4>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default User;
      \ No newline at end of file
      tailwind.config.js 0 → 100644
      View file @ e6ec28bd
      /** @type {import('tailwindcss').Config} */
      module.exports = {
      content: ["./src/**/*.{js,jsx,ts,tsx}"],
      theme: {
      extend: {},
      },
      plugins: [],
      }
      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