Skip to content

2
2023-221
Commit 886e8124 authored by pradeep walter's avatar pradeep walter
Browse files
Options

demo frontend have to update with css

parent 258abcf1
Pipeline #6715 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 32711 additions and 39 deletions
      README.md
      View file @ 886e8124
      # 2023-221
      # Island Ccourier: Customer Supportive Island-wide Courier Service Platform
      * Main objective:
      * The main objective is to develop a comprehensive and customer-friendly island-wide courier service platform that addresses the shortcomings of existing services in Sri Lanka
      *
      * Main Research questions:
      * What are the key technological and business model innovations that can be implemented to increase efficiency, reduce costs, and optimize revenue growth for a comprehensive courier service platform?​
      * How can feedback from customers and market analysis be used to continuously improve and update the platform to keep up with changing needs and trends?​
      * What are the major pain points and shortcomings of existing courier services in Sri Lanka, and how can they be addressed to provide a more customer-friendly and efficient service?​
      * How can partnerships with local courier services be established and managed to provide island-wide coverage and expand the reach of the platform to underserved areas?
      *
      * Individual research question:
      * IT20230524
      * How can we develop and implement an efficient delivery routing system for our courier service platform that optimizes our delivery routes, reduces operational costs, and ensures timely package delivery?​
      * IT20128654
      * How to track the performance of the courier service based on the delivery status?​
      * How to track the performance of the courier service based on the customer churning ?​
      * IT20075330
      * How to produce cost effective and accurate solution to resolve the customer support problems in domestic courier services?
      * IT20111588
      * How can we implement a safety secured packaging system for ensure that the package that has been delivered is in the best condition without any damage or without unwrapped?
      * How can we develop a system to check previous orders of the customers?
      * Individual Objectives:
      * IT20230524
      * The main objective of implementing an efficient delivery routing system in Sri Lanka's courier service industry is to improve operational efficiency, reduce delivery times and costs, and stay competitive in the market by automating and optimizing the delivery process​
      * IT20128654
      * Create a smart performance tracking system based on the delivery status and customer churning​
      * IT20075330
      * Implement a accurate solution to resolve the customer support problems in domestic courier services​
      * IT20111588
      *
      \ No newline at end of file
      # Courier_Service
      \ No newline at end of file
      __MACOSX/._src 0 → 100644
      View file @ 886e8124
      File added
      package-lock.json 0 → 100644
      View file @ 886e8124
      This diff is collapsed.
      package.json 0 → 100644
      View file @ 886e8124
      {
      "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",
      "admin-lte": "^3.2",
      "chart.js": "^4.3.0",
      "datatables.net-dt": "^1.13.5",
      "qrcode.react": "^3.1.0",
      "react": "^18.2.0",
      "react-chartjs-2": "^5.2.0",
      "react-dom": "^18.2.0",
      "react-scripts": "5.0.1",
      "react-table": "^7.8.0",
      "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 @ 886e8124
      <!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/.DS_Store 0 → 100644
      View file @ 886e8124
      File added
      src/App.js 0 → 100644
      View file @ 886e8124
      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";
      import PerformanceTrack from "./routes/DeliveryRoutes/performancetrack";
      import CreateOrder from "./routes/DeliveryRoutes/createOrder";
      import ChurnRank from "./routes/DeliveryRoutes/churnRank";
      import UpdateOrder from "./routes/DeliveryRoutes/updateOrder";
      import MoreInfo from "./routes/DeliveryRoutes/moreInfo";
      import Modal from "./routes/DeliveryRoutes/removePopup";
      import DeliveryRank from "./routes/DeliveryRoutes/deliveryRank";
      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="PerformanceTrack" element={<PerformanceTrack/>}/>
      <Route path="Orders" element={<Orders/>}/>
      <Route path="RoutePlanning" element={<RoutePlanning/>}/>
      <Route path="CreateOrder" element={<CreateOrder/>}/>
      <Route path="ChurnRank" element={<ChurnRank/>}/>
      <Route path="UpdateOrder/:slug" element={<UpdateOrder/>}/>
      <Route path="MoreInfo/:slug" element={<MoreInfo/>}/>
      <Route path="Modal" element={<Modal/>}/>
      <Route path="DeliveryRank" element={<DeliveryRank/>}/>
      </Routes>
      </BrowserRouter>
      </div>
      );
      }
      export default App;
      src/components/Chart2.jsx 0 → 100644
      View file @ 886e8124
      import React from 'react';
      import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
      const data = [
      { name: 'Jan', Month: 100 },
      { name: 'Feb', Month: 200 },
      { name: 'Mar', Month: 150 },
      { name: 'Apr', Month: 120 },
      { name: 'May', Month: 180 },
      { name: 'Jun', Month: 110 },
      { name: 'Jul', Month: 180 },
      { name: 'Aug', Month: 80 },
      { name: 'Sep', Month: 20 },
      { name: 'Oct', Month: 130 },
      { name: 'Nov', Month: 100 },
      { name: 'Dec', Month: 80 },
      ];
      const BarChartExample = () => {
      return (
      <BarChart width={700} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="Month" fill="#1565c0" />
      </BarChart>
      );
      };
      export default BarChartExample;
      src/components/DataTable.jsx 0 → 100644
      View file @ 886e8124
      import React, { useMemo } from 'react';
      import { useTable, useGlobalFilter } from 'react-table';
      const DataTable = ({ data }) => {
      // Define the table columns
      const columns = useMemo(
      () => [
      {
      Header: 'Customer ID',
      accessor: 'id',
      },
      {
      Header: 'Name',
      accessor: 'name',
      },
      {
      Header: 'Address',
      accessor: 'address',
      },
      {
      Header: 'Province',
      accessor: 'province',
      },
      {
      Header: 'Item Type',
      accessor: 'item',
      },
      {
      Header: 'Predetermines Days',
      accessor: 'days',
      },
      {
      Header: 'Other information ',
      accessor: 'other',
      Cell: ({ value }) => <div dangerouslySetInnerHTML={{ __html: value }} className="flex h-10 gap-3 text-xs" />,
      },
      // Add more columns as needed
      ],
      []
      );
      // Create an instance of the table
      const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
      state,
      setGlobalFilter,
      } = useTable({ columns, data }, useGlobalFilter);
      const { globalFilter } = state;
      return (
      <div className="p-10">
      <input
      type="text"
      value={globalFilter || ''}
      onChange={(e) => setGlobalFilter(e.target.value)}
      className="p-2"
      placeholder="Search..."
      />
      <div className="">
      <table {...getTableProps()} className="">
      <thead className=" align-top text-sm border-[1px] border-black/50 uppercase bg-black/20 text-gray-900" >
      {headerGroups.map((headerGroup) => (
      <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
      {headerGroup.headers.map((column) => (
      <th {...column.getHeaderProps()} className="px-10 pt-2 pb-2 pr-20 border-[1px] border-black/50" key={column.id}>
      {column.render('Header')}
      </th>
      ))}
      </tr>
      ))}
      </thead>
      <tbody {...getTableBodyProps()}>
      {rows.map((row) => {
      prepareRow(row);
      return (
      <tr {...row.getRowProps()} key={row.id}>
      {row.cells.map((cell) => {
      return (
      <td {...cell.getCellProps()} className="p-7 border-[1px] border-black/50 bg-gray-100 hover:bg-slate-300" key={cell.column.id}>
      {cell.render('Cell')}
      </td>
      );
      })}
      </tr>
      );
      })}
      </tbody>
      </table>
      </div>
      </div>
      );
      };
      export default DataTable;
      src/components/Gmap.jsx 0 → 100644
      View file @ 886e8124
      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 @ 886e8124
      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="flex flex-col justify-center w-full h-full p-3 text-center bg-white rounded-lg shadow-md shadow-slate-300">
      <span className="font-semibold text-slate-900 text-[18px]">Monthly Progress</span>
      <div className="flex flex-row items-center justify-center mt-3">
      <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 @ 886e8124
      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 Sidepanel1()
      {
      return(
      <div className="w-[300px] side-panel p-5 flex flex-col justify-center items-center from-gray-900 to-gray-600 bg-gradient-to-r">
      <div className="justify-center w-full p-3 sidepalen-body h-2/3">
      <div className="flex flex-row items-center space-x-5 user-profile">
      <label className="text-[28px]">
      <FontAwesomeIcon icon={faUser} color="white" />
      </label>
      <span className="user-name text-[22px] text-white">User Name</span>
      </div>
      <div className="flex-col justify-center w-full mt-10 space-y-3 nav-body">
      <ul className="space-y-5">
      <Link to="/CreateDelivery"><li className="w-full p-2 rounded-md bg-slate-400 ">
      <FontAwesomeIcon icon={faMapLocation} className="mr-5"/>Delivery Routing</li></Link>
      <Link to="/PerformanceTrack"><li className="w-full p-2 mt-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faChartLine} className="mr-5"/>Performance Track</li></Link>
      <li className="w-full p-2 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faHeadset} className="mr-5"/>Customer Support</li>
      <li className="w-full p-2 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faChainBroken} className="mr-5"/>Damage Ditection</li>
      </ul>
      </div>
      </div>
      </div>
      );
      }
      export default Sidepanel1;
      \ No newline at end of file
      src/index.css 0 → 100644
      View file @ 886e8124
      @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;
      }
      .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border: 1px solid black;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
      \ No newline at end of file
      src/index.js 0 → 100644
      View file @ 886e8124
      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 @ 886e8124
      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/DeliveryRoutes/RoutePlanning.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel1 from "./sidepanel1";
      import Gmap from "../../components/Gmap";
      function RoutePlanning()
      {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      return(
      <div className="w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row w-full h-screen main-body-container">
      <Sidepanel1/>
      <div className="w-5/6 p-5 side-panel bg-slate-100">
      <div className="flex flex-col items-center justify-center h-full p-5 common-body">
      <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/churnRank.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel2 from "./sidepanel2";
      import BarChart from "../../components/Chart2";
      function ChurnRank() {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      return (
      <div className="w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row w-full h-screen main-body-container">
      <Sidepanel2 />
      <div className="w-5/6 p-5 pt-10 side-panel bg-slate-100">
      <h1 className="flex items-center justify-center pb-5 text-xl uppercase">
      Churn Rank
      </h1>
      <div className="flex flex-col items-center justify-center h-full p-5 common-body">
      <div className="form-body w-[50%] 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="province" className="mb-2 font-semibold text-gray-600">
      Province
      </label>
      <select id="province" name="province" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="car">Central</option>
      <option value="bike">Eastern</option>
      <option value="truck">North Central</option>
      <option value="car">Northern</option>
      <option value="bike">North Western</option>
      <option value="truck">Sabaragamuwa</option>
      <option value="car">Southern</option>
      <option value="bike">Uva</option>
      <option value="truck">Western</option>
      </select>
      <label htmlFor="customertype" className="mb-2 font-semibold text-gray-600">
      Customer type
      </label>
      <select id="customertype" name="customertype" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="car">Normal</option>
      <option value="bike">Business</option>
      </select>
      <label htmlFor="year" className="mb-2 font-semibold text-gray-600">
      Year
      </label>
      <input type="text" id="year" name="year" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="province" className="mb-2 font-semibold text-gray-600">
      Month
      </label>
      <select id="month" name="month" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="january">January</option>
      <option value="february">February</option>
      <option value="march">March</option>
      <option value="april">April</option>
      <option value="may">May</option>
      <option value="june">June</option>
      <option value="july">July</option>
      <option value="august">August</option>
      <option value="september">September</option>
      <option value="october">October</option>
      <option value="november">November</option>
      <option value="december">December</option>
      </select>
      <div className="flex items-end justify-end ">
      <button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Search
      </button>
      </div>
      </form>
      </div>
      <div className="pt-10">
      <h1 className="pb-10"> Graph</h1>
      <BarChart key={1000} />
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default ChurnRank;
      \ No newline at end of file
      src/routes/DeliveryRoutes/createDelivery.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel1 from "./sidepanel1";
      function CreateDelivery()
      {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      return(
      <div className="w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row w-full h-screen main-body-container">
      <Sidepanel1/>
      <div className="w-5/6 p-5 side-panel bg-slate-100">
      <div className="flex flex-col items-center justify-center h-full p-5 common-body">
      <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="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="pickup" className="mb-2 font-semibold text-gray-600">
      Pickup
      </label>
      <input type="text" id="pickup" name="pickup" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="destination" className="mb-2 font-semibold text-gray-600">
      Destination
      </label>
      <input type="text" id="destination" name="destination" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="date" className="mb-2 font-semibold text-gray-600">
      Date
      </label>
      <input type="date" id="date" name="date" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="vehicle" className="mb-2 font-semibold text-gray-600">
      Vehicle
      </label>
      <select id="vehicle" name="vehicle" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="car">Car</option>
      <option value="bike">Bike</option>
      <option value="truck">Truck</option>
      </select>
      <button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded-lg">
      Create Delivery
      </button>
      </form>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default CreateDelivery;
      \ No newline at end of file
      src/routes/DeliveryRoutes/createOrder.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel2 from "./sidepanel2";
      function CreateOrder() {
      const [showAlert, setShowAlert] = useState(false);
      const handleSubmit = (event) => {
      event.preventDefault();
      setShowAlert(true);
      setTimeout(() => {
      setShowAlert(false);
      }, 3000);
      };
      return (
      <div className="w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row w-full main-body-container">
      <Sidepanel2 />
      <div className="w-5/6 p-5 side-panel bg-slate-100">
      <h1 className="flex items-center justify-center text-xl uppercase">
      Create order
      </h1>
      <div className="flex flex-col items-center justify-center h-full p-5 common-body">
      <div className="form-body w-[50%] 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="customername" className="mb-2 font-semibold text-gray-600">
      Customer name
      </label>
      <input type="text" id="customername" name="customername" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="customertype" className="mb-2 font-semibold text-gray-600">
      Customer type
      </label>
      <select id="customertype" name="customertype" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="car">Normal</option>
      <option value="bike">Business</option>
      </select>
      <label htmlFor="adress" className="mb-2 font-semibold text-gray-600">
      Adress
      </label>
      <input type="text" id="adress" name="adress" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="email" className="mb-2 font-semibold text-gray-600">
      Email
      </label>
      <input type="text" id="email" name="email" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="province" className="mb-2 font-semibold text-gray-600">
      Province
      </label>
      <select id="province" name="province" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="car">Central</option>
      <option value="bike">Eastern</option>
      <option value="truck">North Central</option>
      <option value="car">Northern</option>
      <option value="bike">North Western</option>
      <option value="truck">Sabaragamuwa</option>
      <option value="car">Southern</option>
      <option value="bike">Uva</option>
      <option value="truck">Western</option>
      </select>
      <label htmlFor="itemtype" className="mb-2 font-semibold text-gray-600">
      Item type
      </label>
      <select id="itemtype" name="itemtype" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="car">Food</option>
      <option value="bike">Electronic Item</option>
      <option value="truck">Apparel</option>
      <option value="car">Document</option>
      </select>
      <label htmlFor="pices" className="mb-2 font-semibold text-gray-600">
      No of Pices
      </label>
      <input type="text" id="pices" name="pices" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="date" className="mb-2 font-semibold text-gray-600">
      Date
      </label>
      <input type="date" id="date" name="date" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="predays" className="mb-2 font-semibold text-gray-600">
      Predetermines Days
      </label>
      <input type="text" id="predays" name="predays" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="phonenumber" className="mb-2 font-semibold text-gray-600">
      Phonenumber
      </label>
      <input type="text" id="phonenumber" name="phonenumber" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded-lg" onClick={handleSubmit}>
      Create
      </button>
      </form>
      </div>
      </div>
      </div>
      </div>
      {showAlert && (
      <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-opacity-50 bg-black/10">
      <div className="p-4 rounded-lg shadow-md bg-blue-500/60">
      <p className="text-white ">Successfully Added!</p>
      </div>
      </div>
      )}
      </div>
      );
      }
      export default CreateOrder;
      \ No newline at end of file
      src/routes/DeliveryRoutes/deliveryRank.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel2 from "./sidepanel2";
      import BarChart from "../../components/Chart2";
      function DeliveryRank() {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      return (
      <div className="w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row w-full h-screen main-body-container">
      <Sidepanel2 />
      <div className="w-5/6 p-5 pt-10 side-panel bg-slate-100">
      <h1 className="flex items-center justify-center text-xl uppercase">
      Delivery success rank
      </h1>
      <div className="flex flex-col items-center justify-center h-full p-5 common-body">
      <div className="form-body w-[50%] 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="province" className="mb-2 font-semibold text-gray-600">
      Province
      </label>
      <select id="province" name="province" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="">Central</option>
      <option value="">Eastern</option>
      <option value="">North Central</option>
      <option value="">Northern</option>
      <option value="">North Western</option>
      <option value="">Sabaragamuwa</option>
      <option value="">Southern</option>
      <option value="">Uva</option>
      <option value="">Western</option>
      </select>
      <label htmlFor="province" className="mb-2 font-semibold text-gray-600">
      Iten Type
      </label>
      <select id="province" name="province" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="">Food</option>
      <option value="">Electronic Item</option>
      <option value=""> Apparel</option>
      <option value="">Document</option>
      </select>
      <label htmlFor="year" className="mb-2 font-semibold text-gray-600">
      Year
      </label>
      <input type="text" id="year" name="year" className="p-2 mb-4 border border-gray-300 rounded-lg" />
      <label htmlFor="province" className="mb-2 font-semibold text-gray-600">
      Month
      </label>
      <select id="month" name="month" className="p-2 mb-4 border border-gray-300 rounded-lg">
      <option value="january">January</option>
      <option value="february">February</option>
      <option value="march">March</option>
      <option value="april">April</option>
      <option value="may">May</option>
      <option value="june">June</option>
      <option value="july">July</option>
      <option value="august">August</option>
      <option value="september">September</option>
      <option value="october">October</option>
      <option value="november">November</option>
      <option value="december">December</option>
      </select>
      <div className="flex items-end justify-end">
      <button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Search
      </button>
      </div>
      </form>
      </div>
      <div className="pt-10">
      <h1 className="pb-10"> Graph</h1>
      <BarChart key={1000} />
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default DeliveryRank;
      \ No newline at end of file
      src/routes/DeliveryRoutes/moreInfo.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel2 from "./sidepanel2";
      function MoreInfo() {
      const handleSubmit = (event) => {
      event.preventDefault();
      };
      return (
      <div className="flex w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row h-screen main-body-container">
      <Sidepanel2 />
      </div>
      <div className="flex flex-col items-center justify-center">
      <h1 className="pb-5 text-xl uppercase">
      Delivery Success Rank
      </h1>
      <div className="w-[550px] flex pt-40 pl-20">
      <div className="relative py-3 pl-16 sm:max-w-xl sm:mx-auto">
      <div className="relative px-4 w-[400px] py-10 mx-8 bg-white shadow md:mx-0 rounded-3xl sm:p-10">
      <div className="max-w-md mx-auto">
      <div className="flex items-center space-x-5">
      <div className="self-start block pl-2 text-xl font-semibold text-gray-700">
      <h2 className="leading-relaxed">Customer ID</h2>
      </div>
      </div>
      <div className="divide-y divide-gray-200">
      <div className="py-8 space-y-4 text-base leading-6 text-gray-700 sm:text-lg sm:leading-7">
      <div className="flex justify-between">
      <span className="font-semibold">Trafic Condition :</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between">
      <span className="font-semibold">Diliver Skill:</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between">
      <span className="font-semibold">Email:</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between pb-2">
      <span className="font-semibold">Mobile No:</span>
      <span>Test</span>
      </div>
      {/* Add more invoice details as needed */}
      </div>
      </div>
      </div>
      </div>
      </div>
      <div className="relative py-3 pl-16 sm:max-w-xl sm:mx-auto">
      <div className="relative px-4 py-10 mx-8 bg-white shadow w-[400px] md:mx-0 rounded-3xl sm:p-10">
      <div className="max-w-md mx-auto">
      <div className="flex items-center space-x-5">
      <div className="self-start block pl-2 text-xl font-semibold text-gray-700">
      <h2 className="leading-relaxed">Last curier Infomation</h2>
      </div>
      </div>
      <div className="divide-y divide-gray-200">
      <div className="py-8 space-y-4 text-base leading-6 text-gray-700 sm:text-lg sm:leading-7">
      <div className="flex justify-between">
      <span className="font-semibold">Item Type :</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between">
      <span className="font-semibold">Item Status :</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between">
      <span className="font-semibold">Ontime :</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between pb-2">
      <span className="font-semibold">Mobile No :</span>
      <span>Test</span>
      </div>
      {/* Add more invoice dsetails as needed */}
      </div>
      </div>
      </div>
      </div>
      </div>
      <div className="relative py-3 pl-16 sm:max-w-xl sm:mx-auto">
      <div className="relative px-4 py-10 mx-8 bg-white shadow w-[400px] md:mx-0 rounded-3xl sm:p-10">
      <div className="max-w-md mx-auto">
      <div className="flex items-center space-x-5">
      <div className="self-start block pl-2 text-xl font-semibold text-gray-700">
      <h2 className="leading-relaxed">Prediction</h2>
      </div>
      </div>
      <div className="divide-y divide-gray-200">
      <div className="py-8 space-y-4 text-base leading-6 text-gray-700 sm:text-lg sm:leading-7">
      <div className="flex justify-between">
      <span className="font-semibold">Delivery Success :</span>
      <span>Test</span>
      </div>
      <div className="flex justify-between pb-24">
      <span className="font-semibold">Customer Churn :</span>
      <span>Test</span>
      </div>
      {/* Add more invoice details as needed */}
      </div>
      </div>
      </div>
      </div>
      <div className="pt-40 pl-72 side-panel bg-slate-100">
      <a href='/PerformanceTrack'><button type="submit" className="px-10 py-2 text-white bg-blue-500 hover:bg-blue-700">
      Exit
      </button></a>
      </div>
      </div>
      </div>
      </div>
      </div>
      );
      }
      export default MoreInfo;
      src/routes/DeliveryRoutes/orders.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel1 from "./sidepanel1";
      function Orders()
      {
      const [selectedImage, setSelectedImage] = useState(null);
      const handleImageChange = (event) => {
      const file = event.target.files[0];
      setSelectedImage(file);
      };
      return(
      <div className="w-full h-screen main-body bg-slate-100">
      <div className="flex flex-row w-full h-screen main-body-container">
      <Sidepanel1/>
      <div className="w-5/6 p-5 side-panel bg-slate-100">
      <div className="flex flex-col h-full p-5 common-body">
      <div className="table-container w-[90%] flex flex-row h-full mx-auto justify-between">
      <div className="w-full table-body">
      <table className="w-full text-center">
      <th className="p-2 font-medium text-white bg-slate-500">Destination</th>
      <th className="p-2 font-medium text-white bg-slate-500">Order ID</th>
      <th className="p-2 font-medium text-white bg-slate-500">Vehicle</th>
      <th className="p-2 font-medium text-white bg-slate-500">Status</th>
      <th className="p-2 font-medium text-white bg-slate-500">Departure Date</th>
      <th className="p-2 font-medium text-white bg-slate-500">Estimated Date</th>
      <tbody className="bg-white">
      <tr className="leading-[25px] mt-[20px] border-b ">
      <td className="p-2 Destination" >
      Colombo 10
      </td>
      <td className="p-2 Order-ID" >
      #TH097J
      </td>
      <td className="p-2 Vehicle" >
      Bike
      </td>
      <td className="p-2 text-red-600 Status" >
      Delivered
      </td>
      <td className="p-2 Departure-Date" >
      20/03/2023
      </td>
      <td className="p-2 Estimated-Date" >
      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/performancetrack.jsx 0 → 100644
      View file @ 886e8124
      import { useState } from "react";
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
      import { faPlus, faStarHalfStroke } from '@fortawesome/free-solid-svg-icons'
      import DataTable from "../../components/DataTable";
      import Sidepanel2 from "./sidepanel2";
      import Modal from "./removePopup";
      function PerformanceTrack() {
      const [showPopup, setShowPopup] = useState(false);
      const handleRemoveButtonClick = () => {
      setShowPopup(true);
      };
      const data = [
      {
      id: 1,
      name: 'John Doe',
      email: 'john@example.com',
      address: "test",
      province: "test",
      item: "test",
      days: "test",
      other: "<a href='/UpdateOrder/1'><button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded'>Update</button ></a> <button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded' onclick=\"setShowPopup(true)\">Remove</button> <a href='/MoreInfo/1'><button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-10 rounded'>More_Info</button></a>"
      },
      {
      id: 2,
      name: 'Jane Smith',
      email: 'jane@example.com',
      address: "test2",
      province: "test2",
      item: "test2",
      days: "test2",
      other: "<a href='/UpdateOrder/2'><button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded'>Update</button ></a> <button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded' onclick=\"setShowPopup(true)\">Remove</button> <a href='/MoreInfo/2'><button class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-10 rounded'>More_Info</button></a>"
      },
      // Add more data as needed)
      ];
      return (
      <div className="flex h-screen max-w-screen-lg main-body ">
      <div className="flex flex-row w-full h-screen main-body-container">
      <Sidepanel2 />
      </div>
      <div>
      <div className="flex items-center justify-center pt-10 pb-5 text-xl uppercase">
      <h1 className="pb-5 text-xl uppercase">
      Orders
      </h1>
      </div>
      <DataTable data={data} />
      {showPopup && <Modal />} {/* Render the Modal component when showPopup state is true */}
      </div>
      </div>
      );
      }
      export default PerformanceTrack;
      \ No newline at end of file
      src/routes/DeliveryRoutes/removePopup.jsx 0 → 100644
      View file @ 886e8124
      import React from 'react';
      const Modal = () => {
      return (
      <>
      <button
      data-modal-target="popup-modal"
      data-modal-toggle="popup-modal"
      className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
      type="button"
      >
      Toggle modal
      </button>
      <div
      id="popup-modal"
      tabIndex="-1"
      className="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full"
      >
      <div className="relative w-full max-w-md max-h-full">
      <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
      <button
      type="button"
      className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
      data-modal-hide="popup-modal"
      >
      <svg
      className="w-3 h-3"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 14 14"
      >
      <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
      />
      </svg>
      <span className="sr-only">Close modal</span>
      </button>
      <div className="p-6 text-center">
      <svg
      className="w-12 h-12 mx-auto mb-4 text-gray-400 dark:text-gray-200"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 20 20"
      >
      <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
      />
      </svg>
      <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
      Are you sure you want to delete this product?
      </h3>
      <button
      data-modal-hide="popup-modal"
      type="button"
      className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
      >
      Yes, I'm sure
      </button>
      <button
      data-modal-hide="popup-modal"
      type="button"
      className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
      >
      No, cancel
      </button>
      </div>
      </div>
      </div>
      </div>
      </>
      );
      };
      export default Modal;
      src/routes/DeliveryRoutes/sidepanel1.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel1()
      {
      return(
      <div className="w-[300px] side-panel p-5 flex flex-col justify-center items-center bg-[conic-gradient(at_bottom_left,_var(--tw-gradient-stops))] from-gray-900 to-gray-600">
      <div className="justify-center w-full p-3 sidepalen-body h-2/3">
      <div className="flex flex-row items-center space-x-5 user-profile">
      <label className="text-[28px]">
      <FontAwesomeIcon icon={faUser} color="white" />
      </label>
      <span className="user-name text-[22px] text-white">User Name</span>
      </div>
      <div className="flex-col justify-center w-full mt-10 space-y-5 nav-body">
      <ul className="space-y-5">
      <Link to="/CreateDelivery"><li className="w-full p-2 mb-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faBox} className="mr-5"/>Create Delivery</li></Link>
      <Link to="/Orders"><li className="w-full p-2 mb-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faBoxesPacking} className="mr-5"/>Orders</li></Link>
      <Link to="/RoutePlanning"><li className="w-full p-2 mb-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faStreetView} className="mr-5"/>Route Planning</li></Link>
      </ul>
      </div>
      </div>
      </div>
      );
      }
      export default Sidepanel1;
      \ No newline at end of file
      src/routes/DeliveryRoutes/sidepanel2.jsx 0 → 100644
      View file @ 886e8124
      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 Sidepanel2() {
      return (
      <div className="w-[300px] side-panel p-5 flex flex-col justify-center items-center from-gray-900 to-gray-600 bg-gradient-to-r">
      <div className="justify-center w-full p-3 sidepalen-body h-2/3">
      <div className="flex flex-row items-center space-x-5 user-profile">
      <label className="text-[28px]">
      <FontAwesomeIcon icon={faUser} color="white" />
      </label>
      <span className="user-name text-[22px] text-white">User Name</span>
      </div>
      <div className="flex-col justify-center w-full mt-10 space-y-5 nav-body">
      <ul className="space-y-5">
      <Link to="/CreateOrder"><li className="w-full p-2 mb-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faBox} className="mr-5" />Create Order</li></Link>
      <Link to="/ChurnRank"><li className="w-full p-2 mb-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faBoxesPacking} className="mr-5" />Churn Rank</li></Link>
      <Link to="/DeliveryRank"><li className="w-full p-2 mb-5 rounded-md bg-slate-400">
      <FontAwesomeIcon icon={faStreetView} className="mr-5" />Delivery Success Rank</li></Link>
      </ul>
      </div>
      </div>
      </div>
      );
      }
      export default Sidepanel2;
      \ No newline at end of file
      src/routes/DeliveryRoutes/updateOrder.jsx 0 → 100644
      View file @ 886e8124
      This diff is collapsed.
      src/routes/login.jsx 0 → 100644
      View file @ 886e8124
      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 @ 886e8124
      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 @ 886e8124
      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="w-full h-screen main-body bg-slate-100">
      <div className="w-full h-screen main-body-container">
      <div className="bg-white mx-auto 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="z-10 mb-6 text-xl text-left">Hello! <span className="font-bold">Tom</span> <br/> Welcome to Dashboard</h3>
      <div className="flex flex-row justify-between w-full p-3 space-x-3 dash-body" >
      <div className="flex w-full p-2 text-center upload-image felx-col">
      <div className="flex flex-row items-center justify-center w-full space-x-5 rounded-md upload">
      <div className="w-2/3 image-holder">
      <img src={BG} alt="" srcset="" />
      </div>
      <div className="flex flex-col w-1/3 space-y-3 option-panel ">
      <button className="p-2 rounded-full bg-sky-200 hover:bg-sky-400">Upload an Image</button>
      <button className="p-2 rounded-full bg-sky-200 hover:bg-sky-400">Edit</button>
      <button className="p-2 rounded-full bg-sky-200 hover:bg-sky-400">Remove</button>
      <button className="p-2 rounded-full bg-sky-200 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 @ 886e8124
      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 @ 886e8124
      /** @type {import('tailwindcss').Config} */
      module.exports = {
      content: ["./src/**/*.{js,jsx,ts,tsx}"],
      theme: {
      extend: {},
      },
      plugins: [],
      }
      yarn.lock 0 → 100644
      View file @ 886e8124
      This diff is collapsed.
      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