Users-Wrench/src/components/MyActiveJobs/ActiveJobs.jsx

import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import ModalCom from "../Helpers/ModalCom";
import Layout from "../Partials/Layout";
import { useLocation, useNavigate } from "react-router-dom";
import ActiveJobMessage from "./ActiveJobMessage";

function ActiveJobs() {
  let { userDetails } = useSelector((state) => state.userDetails);
  let navigate = useNavigate()
  let {state} = useLocation()

  let [details, setDetails] = useState({})

  // console.log(state, userDetails);

  useEffect(()=>{
    if(!state){
      navigate('/my-active-jobs', {replace: true})
    }
    setDetails(state)
  },[])
  return (
    <Layout>
      {/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}

        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
          <div className="w-full lg:w-1/2">
            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
              {/* back btn and title */}
              <div className="w-full flex justify-start space-x-3 items-center">
                <button
                  type="button"
                  className="text-[#374557] border border-sky-blue p-1 rounded-full"
                  onClick={() => navigate('/my-active-jobs', {replace: true})}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="35"
                    height="35"
                    viewBox="0 0 24 24"
                    fill="skyblue"
                  >
                    <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
                  </svg>
                </button>
                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
                  {details.title && details.title}
                </h1>
              </div>
              {/* END of back btn and title */}

              <div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
                <div className="my-2 lg:my-0">
                  <p className="text-base text-slate-700 dark:text-black">
                    {details.contract && details.contract}
                  </p>
                  <p className="text-base text-slate-700 dark:text-black">
                    <span className="font-semibold">Description: </span>
                    {details.description && details.description}
                  </p>
                  <p className="text-base text-sky-blue">Delivery Detail</p>
                </div>
                <div className="">
                  <p className="text-base text-sky-blue">
                    {userDetails.firstname && userDetails.firstname}
                  </p>
                  <p className="text-base text-slate-700 dark:text-black">
                    <span className="font-semibold">Due: </span>
                    {details.delivery_date &&
                      details.delivery_date.split(" ")[0]}
                  </p>
                  <p className="text-base text-slate-700 dark:text-black">
                    {details.delivery_date &&
                      details.delivery_date.split(" ")[1]}
                  </p>
                  <p className="text-base text-slate-700 dark:text-black">
                    {details.timeline_days && details.timeline_days} day(s)
                  </p>
                </div>
              </div>
            </div>

            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
              <div className="">
              <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
                <textarea
                  className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
                  rows="10"
                  style={{ resize: "none" }}
                />
              </div>

              {/* Buttons Sections */}
              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
                <div className="w-full sm:w-3/4 mb-5 sm:mb-0">
                  <button
                    onClick={()=> console.log('working')}
                    type="button"
                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
                      <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
                    </svg>

                    <span className="text-white">Upload Files</span>
                  </button>
                </div>

                <div className="w-full sm:w-1/4 flex justify-between items-center space-x-2">
                  <button
                      type="button"
                      className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
                  >
                      <span className="text-white">Clear</span>
                  </button>
                  <button
                      type="button"
                      className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
                  >
                      <span className="text-white">Send</span>
                  </button>
                </div>

              </div>
              {/* end of Buttons Sections  */}
            </div>
          </div>

          {/* ACTION SECTION */}
          <div className="w-full lg:w-1/2 h-full">
            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>

              <p className="my-3 py-1 text-base">
                Waiting for the completion message from the client before you can approve.
              </p>
            </div>

            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
              <div className="">
                <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
                <ActiveJobMessage />
              </div>
            </div>

          </div>
        </div>

      {/* </div> */}
    </Layout>
  );
}

export default ActiveJobs;