Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
7ca8c23479 | ||
 ameye
|
688592e1a3 | ||
|
victorAnumudu
|
d12b949bcc | ||
 tokslaw
|
3a219a20bb | ||
|
victorAnumudu
|
e6bc184747 | ||
|
victorAnumudu
|
2a3edcf3be | ||
|
ameye
|
a1d96488bf |
@@ -88,7 +88,7 @@ export default function AddGroup({ action, situation, setUpdateList }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalCom action={action} situation={situation}>
|
<ModalCom action={action} situation={situation}>
|
||||||
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h1 className="modal-title">
|
<h1 className="modal-title">
|
||||||
Add Group
|
Add Group
|
||||||
@@ -135,28 +135,6 @@ export default function AddGroup({ action, situation, setUpdateList }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full flex justify-between items-center gap-4">
|
|
||||||
<button
|
|
||||||
onClick={action}
|
|
||||||
type="button"
|
|
||||||
className="w-[152px] h-[46px] flex justify-center items-center rounded-full text-base text-light-red tracking-wide border border-light-red"
|
|
||||||
>
|
|
||||||
<span className="">
|
|
||||||
Cancel
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => addGroup()}
|
|
||||||
type="button"
|
|
||||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
>
|
|
||||||
Add Group
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
{requestStatus.message != "" &&
|
{requestStatus.message != "" &&
|
||||||
@@ -177,6 +155,29 @@ export default function AddGroup({ action, situation, setUpdateList }) {
|
|||||||
))}
|
))}
|
||||||
{/* End of error or success display */}
|
{/* End of error or success display */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="modal-footer-wrapper">
|
||||||
|
<button
|
||||||
|
onClick={action}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn text-light-red border border-light-red"
|
||||||
|
>
|
||||||
|
<span className="">
|
||||||
|
Cancel
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{requestStatus.loading ? (
|
||||||
|
<LoadingSpinner size="8" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => addGroup()}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn btn-gradient text-white"
|
||||||
|
>
|
||||||
|
Add Group
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -20,14 +20,14 @@ export default function DeleteGroup({action, situation, details}) {
|
|||||||
action={action}
|
action={action}
|
||||||
situation={situation}
|
situation={situation}
|
||||||
>
|
>
|
||||||
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
|
<div className="modal-header-con">
|
||||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="modal-title">
|
||||||
Delete Group
|
Delete Group
|
||||||
</h1>
|
</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="modal-close-btn"
|
||||||
onClick={action}
|
onClick={action}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -76,26 +76,6 @@ export default function DeleteGroup({action, situation, details}) {
|
|||||||
Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
|
Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex space-x-2.5">
|
|
||||||
<button
|
|
||||||
onClick={action}
|
|
||||||
type="button"
|
|
||||||
className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Cancel</span>
|
|
||||||
</button>
|
|
||||||
{requestStatus.laoding ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => deleteGroup()}
|
|
||||||
type="button"
|
|
||||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
|
||||||
>
|
|
||||||
Confirm Delete
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
{requestStatus.message != "" &&
|
{requestStatus.message != "" &&
|
||||||
@@ -116,6 +96,26 @@ export default function DeleteGroup({action, situation, details}) {
|
|||||||
))}
|
))}
|
||||||
{/* End of error or success display */}
|
{/* End of error or success display */}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="modal-footer-wrapper">
|
||||||
|
<button
|
||||||
|
onClick={action}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn border-gradient"
|
||||||
|
>
|
||||||
|
<span className="text-gradient">Cancel</span>
|
||||||
|
</button>
|
||||||
|
{requestStatus.laoding ? (
|
||||||
|
<LoadingSpinner size="8" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => deleteGroup()}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn primary-gradient text-white"
|
||||||
|
>
|
||||||
|
Confirm Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ export default function DeleteMember({action, situation, details}) {
|
|||||||
action={action}
|
action={action}
|
||||||
situation={situation}
|
situation={situation}
|
||||||
>
|
>
|
||||||
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h1 className="modal-title">
|
<h1 className="modal-title">
|
||||||
Remove Member
|
Remove Member
|
||||||
@@ -76,26 +76,6 @@ export default function DeleteMember({action, situation, details}) {
|
|||||||
Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
|
Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex space-x-2.5">
|
|
||||||
<button
|
|
||||||
onClick={action}
|
|
||||||
type="button"
|
|
||||||
className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Cancel</span>
|
|
||||||
</button>
|
|
||||||
{requestStatus.laoding ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => deleteMember()}
|
|
||||||
type="button"
|
|
||||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
|
||||||
>
|
|
||||||
Remove
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
{requestStatus.message != "" &&
|
{requestStatus.message != "" &&
|
||||||
@@ -116,6 +96,26 @@ export default function DeleteMember({action, situation, details}) {
|
|||||||
))}
|
))}
|
||||||
{/* End of error or success display */}
|
{/* End of error or success display */}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="modal-footer-wrapper">
|
||||||
|
<button
|
||||||
|
onClick={action}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn border-gradient"
|
||||||
|
>
|
||||||
|
<span className="text-gradient">Cancel</span>
|
||||||
|
</button>
|
||||||
|
{requestStatus.laoding ? (
|
||||||
|
<LoadingSpinner size="8" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => deleteMember()}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn primary-gradient text-white"
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import IndexJobActions from "./JobActions/IndexJobActions";
|
|||||||
import usersService from "../../services/UsersService";
|
import usersService from "../../services/UsersService";
|
||||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||||
import { SocketValues } from "../Contexts/SocketIOContext";
|
import { SocketValues } from "../Contexts/SocketIOContext";
|
||||||
|
import TabButton from "../customTabs/TabButton";
|
||||||
|
|
||||||
function ActiveJobs(props) {
|
function ActiveJobs(props) {
|
||||||
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
|
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
|
||||||
@@ -29,7 +30,9 @@ function ActiveJobs(props) {
|
|||||||
|
|
||||||
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
|
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
|
||||||
|
|
||||||
const [tab, setTab] = useState("message");
|
// const [tab, setTab] = useState("message");
|
||||||
|
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
|
||||||
|
const [selectedTab, setSelectedTab] = useState(tabs[0]);
|
||||||
|
|
||||||
const [requestStatus, setRequestStatus] = useState({
|
const [requestStatus, setRequestStatus] = useState({
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -93,9 +96,9 @@ function ActiveJobs(props) {
|
|||||||
|
|
||||||
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
||||||
const handleClearAll = ({ target: { name } }) => {
|
const handleClearAll = ({ target: { name } }) => {
|
||||||
if (tab == "message") {
|
if (selectedTab == "Send Message") {
|
||||||
setMessageToSend("");
|
setMessageToSend("");
|
||||||
} else if (tab == "files") {
|
} else if (selectedTab == "Send Files") {
|
||||||
setFilesToSend([]);
|
setFilesToSend([]);
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
@@ -269,9 +272,9 @@ function ActiveJobs(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
|
<div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-8">
|
||||||
{/* job title */}
|
{/* job title */}
|
||||||
<div className="w-full md:w-8/12">
|
<div className="w-full">
|
||||||
<div className="w-full flex justify-start space-x-3 items-start">
|
<div className="w-full flex justify-start space-x-3 items-start">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -320,7 +323,7 @@ function ActiveJobs(props) {
|
|||||||
{/* end of job title */}
|
{/* end of job title */}
|
||||||
|
|
||||||
{/* job details */}
|
{/* job details */}
|
||||||
<div className="w-full md:w-4/12">
|
<div className="min-w-[150px]">
|
||||||
<p className="text-base text-sky-blue">Delivery Detail</p>
|
<p className="text-base text-sky-blue">Delivery Detail</p>
|
||||||
{passDue ? (
|
{passDue ? (
|
||||||
<div className="my-1">
|
<div className="my-1">
|
||||||
@@ -394,78 +397,119 @@ function ActiveJobs(props) {
|
|||||||
|
|
||||||
{/* TEXTAREA SECTION */}
|
{/* TEXTAREA SECTION */}
|
||||||
<div className="mt-5">
|
<div className="mt-5">
|
||||||
<div className="">
|
<div className="w-full">
|
||||||
<div
|
{/* switch button */}
|
||||||
className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
|
<div className="grid grid-cols-2">
|
||||||
// className='ml-7 flex justify-start items-center gap-3'
|
{tabs.map((item) => (
|
||||||
>
|
<TabButton
|
||||||
<button
|
key={item}
|
||||||
name="message"
|
item={item}
|
||||||
onClick={(e) => setTab(e.target.name)}
|
selectedTab={selectedTab}
|
||||||
className={`px-4 py-1 rounded-t-2xl ${
|
setSelectedTab={setSelectedTab}
|
||||||
tab == "message"
|
|
||||||
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
|
||||||
: "bg-white text-[#000] border-t-[2px]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
name="files"
|
|
||||||
onClick={(e) => setTab(e.target.name)}
|
|
||||||
className={`px-4 py-1 rounded-t-2xl ${
|
|
||||||
tab == "files"
|
|
||||||
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
|
||||||
: "bg-white text-[#000] border-t-[2px]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Send Files
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{tab == "message" ? (
|
|
||||||
<textarea
|
|
||||||
className="p-4 w-full h-[200px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
|
|
||||||
// rows="10"
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
name="message"
|
|
||||||
onChange={handleMessageChange}
|
|
||||||
value={messageToSend}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
|
|
||||||
<div className="files">
|
|
||||||
<label
|
|
||||||
htmlFor="file"
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
|
||||||
>
|
|
||||||
Select Files to Upload
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="file"
|
|
||||||
accept="image/*"
|
|
||||||
style={{ display: "none" }}
|
|
||||||
onChange={handleFileChange}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
))}
|
||||||
<div className="selected_file my-2">
|
</div>
|
||||||
{filesToSend.length > 0 &&
|
{/* switch button */}
|
||||||
filesToSend.map((item, index) => (
|
<div className="w-full bg-red-50 overflow-x-auto">
|
||||||
<p key={index} className="flex items-center space-x-2">
|
{selectedTab == "Send Message" ? (
|
||||||
<span>{item.name}</span>
|
<div className="p-2 w-full">
|
||||||
<button
|
<textarea
|
||||||
name="remove"
|
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
|
||||||
onClick={() => handleRemoveImage(item)}
|
// rows="10"
|
||||||
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
|
style={{ resize: "none" }}
|
||||||
>
|
name="message"
|
||||||
x
|
onChange={handleMessageChange}
|
||||||
</button>
|
value={messageToSend}
|
||||||
</p>
|
autoFocus
|
||||||
))}
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="p-2 w-full">
|
||||||
|
<div className="p-4 mb-2 h-[150px] text-base text-slate-600">
|
||||||
|
<div className="files flex">
|
||||||
|
<label
|
||||||
|
htmlFor="file"
|
||||||
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
|
>
|
||||||
|
Select Files to Upload
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="file"
|
||||||
|
accept="image/*"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="selected_file my-2 overflow-y-auto">
|
||||||
|
{filesToSend.length > 0 &&
|
||||||
|
filesToSend.map((item, index) => (
|
||||||
|
<p key={index} className="flex items-center space-x-2">
|
||||||
|
<span>{item.name}</span>
|
||||||
|
<button
|
||||||
|
name="remove"
|
||||||
|
onClick={() => handleRemoveImage(item)}
|
||||||
|
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Buttons Sections */}
|
||||||
|
<div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
|
||||||
|
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClearAll}
|
||||||
|
className="custom-btn border-gradient"
|
||||||
|
>
|
||||||
|
<span className="text-gradient">Clear</span>
|
||||||
|
</button>
|
||||||
|
{selectedTab == "Send Files" ? (
|
||||||
|
<button
|
||||||
|
onClick={sendFile}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn btn-gradient text-white"
|
||||||
|
>
|
||||||
|
{requestStatus.loading ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
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>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={sendTaskMessage}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn btn-gradient text-white"
|
||||||
|
>
|
||||||
|
{requestStatus.loading ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<span className="text-white">Send</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* end of Buttons Sections */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
@@ -489,57 +533,6 @@ function ActiveJobs(props) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{/* End of error or success display */}
|
{/* End of error or success display */}
|
||||||
|
|
||||||
{/* Buttons Sections */}
|
|
||||||
<div className="py-2 sm:flex sm:justify-end sm:items-center">
|
|
||||||
<div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleClearAll}
|
|
||||||
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Clear</span>
|
|
||||||
</button>
|
|
||||||
{tab == "files" ? (
|
|
||||||
<button
|
|
||||||
onClick={sendFile}
|
|
||||||
type="button"
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
|
|
||||||
>
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<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>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={sendTaskMessage}
|
|
||||||
type="button"
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
|
||||||
>
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<span className="text-white">Send</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* end of Buttons Sections */}
|
|
||||||
</div>
|
</div>
|
||||||
{/* END OF TEXTAREA */}
|
{/* END OF TEXTAREA */}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
|
|||||||
import usersService from "../../services/UsersService";
|
import usersService from "../../services/UsersService";
|
||||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||||
import { SocketValues } from "../Contexts/SocketIOContext";
|
import { SocketValues } from "../Contexts/SocketIOContext";
|
||||||
|
import TabButton from "../customTabs/TabButton";
|
||||||
|
|
||||||
function ActiveJobsMedia(props) {
|
function ActiveJobsMedia(props) {
|
||||||
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
|
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
|
||||||
@@ -32,7 +33,9 @@ function ActiveJobsMedia(props) {
|
|||||||
|
|
||||||
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
|
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
|
||||||
|
|
||||||
const [tab, setTab] = useState("message");
|
// const [tab, setTab] = useState("message");
|
||||||
|
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
|
||||||
|
const [selectedTab, setSelectedTab] = useState(tabs[0]);
|
||||||
|
|
||||||
const [requestStatus, setRequestStatus] = useState({
|
const [requestStatus, setRequestStatus] = useState({
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -96,9 +99,9 @@ function ActiveJobsMedia(props) {
|
|||||||
|
|
||||||
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
||||||
const handleClearAll = ({ target: { name } }) => {
|
const handleClearAll = ({ target: { name } }) => {
|
||||||
if (tab == "message") {
|
if (selectedTab == "Send Message") {
|
||||||
setMessageToSend("");
|
setMessageToSend("");
|
||||||
} else if (tab == "files") {
|
} else if (selectedTab == "Send Files") {
|
||||||
setFilesToSend([]);
|
setFilesToSend([]);
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
@@ -275,314 +278,288 @@ function ActiveJobsMedia(props) {
|
|||||||
backpath={props.details.pathname}
|
backpath={props.details.pathname}
|
||||||
title={props.details?.title ? props.details.title : ''}
|
title={props.details?.title ? props.details.title : ''}
|
||||||
>
|
>
|
||||||
{/* job title */}
|
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||||
{/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
|
<div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
|
||||||
<div className="w-full">
|
|
||||||
<div className="w-full flex justify-start space-x-3 items-start">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
|
||||||
onClick={() => {
|
|
||||||
if (props.details.pathname == "/manage-family") {
|
|
||||||
navigate(
|
|
||||||
props.details.pathname,
|
|
||||||
{ state: { ...props.details.accountDetails } },
|
|
||||||
{ replace: true }
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
navigate(props.details.pathname, { 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-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
|
|
||||||
{props.details?.title && props.details.title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
{/* end of job title */}
|
|
||||||
|
|
||||||
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
|
||||||
<div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
|
|
||||||
|
|
||||||
<div className="mb-4 w-full h-auto">
|
<div className="mb-4 w-full h-auto">
|
||||||
<VideoElement videoId={props?.details?.media_uid} />
|
<VideoElement videoId={props?.details?.media_uid} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
|
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md xl:flex xl:justify-between gap-4">
|
||||||
<div className="w-full flex flex-col justify-between">
|
<div className="w-full flex flex-col justify-between">
|
||||||
<div className="w-full">
|
{/* <p className="w-full text-base text-right text-sky-blue">
|
||||||
<p className="w-full text-base text-right text-sky-blue">
|
{props?.details && props.details.job_to}
|
||||||
{props?.details && props.details.job_to}
|
</p> */}
|
||||||
</p>
|
<div className="text-base tracking-wide">
|
||||||
<div className="text-base tracking-wide">
|
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
Description:{" "}
|
||||||
Description:{" "}
|
</p>
|
||||||
</p>
|
<p className="p-2 ml-8 border-b border-sky-blue">
|
||||||
<p className="p-2 ml-8 border-b border-sky-blue">
|
{props?.details && props.details.description}
|
||||||
{props?.details && props.details.description}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div className="mt-6 w-full">
|
||||||
<div className="mt-6 w-full lg:flex gap-8">
|
<div className="w-full text-base tracking-wide">
|
||||||
<div className="w-full text-base tracking-wide">
|
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
Delivery Detail:{" "}
|
||||||
Delivery Detail:{" "}
|
</p>
|
||||||
</p>
|
<p className="p-2 ml-8">
|
||||||
<p className="p-2 ml-8">
|
{props?.details && props.details.job_description}
|
||||||
{props?.details && props.details.job_description}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
{/* <div className="my-2 xl:my-0">
|
||||||
<div className="my-2 lg:my-0">
|
<IndexJobActions details={props.details} />
|
||||||
<IndexJobActions details={props.details} />
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* job details */}
|
<div className="flex justify-between items-center gap-1 xl:min-w-[350px]">
|
||||||
<div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
|
<div className="h-[150px] xl:h-full w-[150px] xl:min-w-[150px]">
|
||||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
<IndexJobActions details={props.details} />
|
||||||
{passDue ? (
|
</div>
|
||||||
<div className="my-1">
|
{/* job details */}
|
||||||
<p className="text-base text-slate-700">
|
<div className="min-w-[170px] flex flex-col justify-center gap-2">
|
||||||
<span className="font-semibold">Due: </span>
|
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||||
{props?.details && props.details.delivery_date.split(" ")[0]}
|
{passDue ? (
|
||||||
</p>
|
<div className="my-1">
|
||||||
{props?.delivery_date && (
|
<p className="text-base text-slate-700">
|
||||||
<p className="py-2 text-base text-slate-700">
|
<span className="font-semibold">Due: </span>
|
||||||
{props.details.delivery_date.split(" ")[1]}
|
{props?.details && props.details.delivery_date.split(" ")[0]}
|
||||||
</p>
|
</p>
|
||||||
)}
|
{props?.delivery_date && (
|
||||||
</div>
|
<p className="py-2 text-base text-slate-700">
|
||||||
) : (
|
{props.details.delivery_date.split(" ")[1]}
|
||||||
<div className="my-1 flex items-start gap-3">
|
</p>
|
||||||
<p className="font-semibold">Due: </p>
|
)}
|
||||||
<div className="flex flex-col justify-between">
|
</div>
|
||||||
<p className="text-base text-slate-700 tracking-wide">
|
) : (
|
||||||
<CountDown
|
<div className="my-1 flex items-start gap-3">
|
||||||
lastDate={props?.details && props.details.delivery_date}
|
<p className="font-semibold">Due: </p>
|
||||||
/>
|
<div className="flex flex-col justify-between">
|
||||||
</p>
|
<p className="text-base text-slate-700 tracking-wide">
|
||||||
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
<CountDown
|
||||||
<span>Hrs</span>
|
lastDate={props?.details && props.details.delivery_date}
|
||||||
<span>Min</span>
|
/>
|
||||||
<span>Sec</span>
|
</p>
|
||||||
</div>
|
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
||||||
</div>
|
<span>Hrs</span>
|
||||||
</div>
|
<span>Min</span>
|
||||||
)}
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
||||||
<span className="font-semibold text-black dark:text-white">
|
<span className="font-semibold text-black dark:text-white">
|
||||||
Reward:{" "}
|
Reward:{" "}
|
||||||
</span>
|
</span>
|
||||||
<span className="">{thePrice}</span>
|
<span className="">{thePrice}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
||||||
<span className="font-semibold text-black dark:text-white">
|
<span className="font-semibold text-black dark:text-white">
|
||||||
Duration:{" "}
|
Duration:{" "}
|
||||||
</span>
|
</span>
|
||||||
<span className="">
|
<span className="">
|
||||||
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
||||||
day(s)
|
day(s)
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
</div>
|
||||||
<span className="font-semibold text-black dark:text-white">
|
{/* end of job details */}
|
||||||
No:{" "}
|
|
||||||
</span>
|
|
||||||
<span className="">
|
|
||||||
{props.details?.contract && props.details.contract}
|
|
||||||
</span>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
{/* end of job details */}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||||
{/* TEXTAREA SECTION */}
|
{/* TEXTAREA SECTION */}
|
||||||
<div className="w-full mb-3">
|
<div className="w-full mb-3">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="pl-7 flex items-center gap-3">
|
{/* <div className="pl-7 flex items-center gap-3">
|
||||||
<button
|
<button
|
||||||
|
name="message"
|
||||||
|
onClick={(e) => setTab(e.target.name)}
|
||||||
|
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
|
||||||
|
tab == "message"
|
||||||
|
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
||||||
|
: "bg-white text-[#000] border-t-[2px]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
name="files"
|
||||||
|
onClick={(e) => setTab(e.target.name)}
|
||||||
|
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
|
||||||
|
tab == "files"
|
||||||
|
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
||||||
|
: "bg-white text-[#000] border-t-[2px]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Send Files
|
||||||
|
</button>
|
||||||
|
</div> */}
|
||||||
|
{/* switch button */}
|
||||||
|
<div className="grid grid-cols-2">
|
||||||
|
{tabs.map((item) => (
|
||||||
|
<TabButton
|
||||||
|
key={item}
|
||||||
|
item={item}
|
||||||
|
selectedTab={selectedTab}
|
||||||
|
setSelectedTab={setSelectedTab}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* switch button */}
|
||||||
|
<div className="w-full bg-red-50 overflow-x-auto">
|
||||||
|
{selectedTab == "Send Message" ? (
|
||||||
|
<div className="p-2 w-full">
|
||||||
|
<textarea
|
||||||
|
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
|
||||||
|
// rows="10"
|
||||||
|
style={{ resize: "none" }}
|
||||||
name="message"
|
name="message"
|
||||||
onClick={(e) => setTab(e.target.name)}
|
onChange={handleMessageChange}
|
||||||
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
|
value={messageToSend}
|
||||||
tab == "message"
|
autoFocus
|
||||||
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
|
||||||
: "bg-white text-[#000] border-t-[2px]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
name="files"
|
|
||||||
onClick={(e) => setTab(e.target.name)}
|
|
||||||
className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
|
|
||||||
tab == "files"
|
|
||||||
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
|
||||||
: "bg-white text-[#000] border-t-[2px]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Send Files
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{tab == "message" ? (
|
|
||||||
<textarea
|
|
||||||
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
|
|
||||||
// rows="10"
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
name="message"
|
|
||||||
onChange={handleMessageChange}
|
|
||||||
value={messageToSend}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
|
|
||||||
<div className="files flex">
|
|
||||||
<label
|
|
||||||
htmlFor="file"
|
|
||||||
className="custom-btn btn-gradient text-base text-white"
|
|
||||||
>
|
|
||||||
Select Files to Upload
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="file"
|
|
||||||
accept="image/*"
|
|
||||||
style={{ display: "none" }}
|
|
||||||
onChange={handleFileChange}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="selected_file my-2 overflow-y-auto">
|
) : (
|
||||||
{filesToSend.length > 0 &&
|
<div className="p-2 w-full">
|
||||||
filesToSend.map((item, index) => (
|
<div className="p-4 mb-2 h-[150px] text-base text-slate-600">
|
||||||
<p key={index} className="flex items-center space-x-2">
|
<div className="files flex">
|
||||||
<span>{item.name}</span>
|
<label
|
||||||
<button
|
htmlFor="file"
|
||||||
name="remove"
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
onClick={() => handleRemoveImage(item)}
|
>
|
||||||
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
|
Select Files to Upload
|
||||||
>
|
</label>
|
||||||
x
|
<input
|
||||||
</button>
|
type="file"
|
||||||
</p>
|
id="file"
|
||||||
))}
|
accept="image/*"
|
||||||
</div>
|
style={{ display: "none" }}
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="selected_file my-2 overflow-y-auto">
|
||||||
|
{filesToSend.length > 0 &&
|
||||||
|
filesToSend.map((item, index) => (
|
||||||
|
<p key={index} className="flex items-center space-x-2">
|
||||||
|
<span>{item.name}</span>
|
||||||
|
<button
|
||||||
|
name="remove"
|
||||||
|
onClick={() => handleRemoveImage(item)}
|
||||||
|
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
{/* Buttons Sections */}
|
||||||
|
<div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
|
||||||
<div className="w-full">
|
|
||||||
{/* error or success display */}
|
|
||||||
{requestStatus.message != "" &&
|
|
||||||
(!requestStatus.status ? (
|
|
||||||
<div
|
|
||||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
|
||||||
>
|
|
||||||
{requestStatus.message}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
requestStatus.status && (
|
|
||||||
<div
|
|
||||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
|
||||||
>
|
|
||||||
{requestStatus.message}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{/* End of error or success display */}
|
|
||||||
|
|
||||||
{/* Buttons Sections */}
|
|
||||||
<div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
|
|
||||||
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleClearAll}
|
|
||||||
className="custom-btn border-gradient"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Clear</span>
|
|
||||||
</button>
|
|
||||||
{tab == "files" ? (
|
|
||||||
<button
|
<button
|
||||||
onClick={sendFile}
|
type="button"
|
||||||
type="button"
|
onClick={handleClearAll}
|
||||||
className="custom-btn btn-gradient text-white"
|
className="custom-btn border-gradient"
|
||||||
>
|
>
|
||||||
{requestStatus.loading ? (
|
<span className="text-gradient">Clear</span>
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
</button>
|
||||||
) : (
|
{selectedTab == "Send Files" ? (
|
||||||
<>
|
<button
|
||||||
<svg
|
onClick={sendFile}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
type="button"
|
||||||
viewBox="0 0 24 24"
|
className="custom-btn btn-gradient text-white"
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
fill="white"
|
|
||||||
>
|
>
|
||||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
|
{requestStatus.loading ? (
|
||||||
</svg>
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
fill="white"
|
||||||
|
>
|
||||||
|
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
<span className="text-white">Upload Files</span>
|
<span className="text-white">Upload Files</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={sendTaskMessage}
|
|
||||||
type="button"
|
|
||||||
className="custom-btn btn-gradient text-white"
|
|
||||||
>
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
) : (
|
||||||
<span className="text-white">Send</span>
|
<button
|
||||||
|
onClick={sendTaskMessage}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn btn-gradient text-white"
|
||||||
|
>
|
||||||
|
{requestStatus.loading ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<span className="text-white">Send</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
)}
|
)}
|
||||||
</button>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/* end of Buttons Sections */}
|
||||||
{/* end of Buttons Sections */}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* END OF TEXTAREA */}
|
|
||||||
|
|
||||||
{/* MESSAGE SECTION */}
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
|
<div className="w-full">
|
||||||
<div className="flex justify-between items-center gap-5">
|
{/* error or success display */}
|
||||||
<p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between">
|
{requestStatus.message != "" &&
|
||||||
<span>Message</span>
|
(!requestStatus.status ? (
|
||||||
<button
|
<div
|
||||||
type="button"
|
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||||
onClick={popUpHandler}
|
>
|
||||||
className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
|
{requestStatus.message}
|
||||||
>
|
</div>
|
||||||
View all
|
) : (
|
||||||
</button>
|
requestStatus.status && (
|
||||||
</p>
|
<div
|
||||||
</div>
|
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||||
{props.activeJobMesList.loading ? (
|
>
|
||||||
<LoadingSpinner size="16" color="sky-blue" />
|
{requestStatus.message}
|
||||||
) : (
|
</div>
|
||||||
<ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
|
)
|
||||||
)}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{/* END OF MESSAGE */}
|
{/* End of error or success display */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/* END OF TEXTAREA */}
|
||||||
|
|
||||||
|
{/* MESSAGE SECTION */}
|
||||||
|
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
|
||||||
|
<div className="flex justify-between items-center gap-5">
|
||||||
|
<p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between">
|
||||||
|
<span>Message</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={popUpHandler}
|
||||||
|
className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
|
||||||
|
>
|
||||||
|
View all
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{props.activeJobMesList.loading ? (
|
||||||
|
<LoadingSpinner size="16" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* END OF MESSAGE */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* POPOUT SECTION */}
|
{/* POPOUT SECTION */}
|
||||||
{popUp && (
|
{popUp && (
|
||||||
|
|||||||
@@ -60,12 +60,12 @@ function CurrentTaskAction({jobDetails}) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='dark:bg-black'>
|
<div className='h-full dark:bg-black'>
|
||||||
|
|
||||||
<div className="w-full text-sm text-left text-gray-500">
|
<div className="h-full w-full text-sm text-left text-gray-500">
|
||||||
{jobDetails.job_type == 'MEDIA' ?
|
{jobDetails.job_type == 'MEDIA' ?
|
||||||
<div className="flex justify-center items-center">
|
<div className="h-full flex justify-center items-center">
|
||||||
<button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
|
<button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
|
||||||
I have completed this task
|
I have completed this task
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export default function Layout({ children }) {
|
|||||||
</div>
|
</div>
|
||||||
{logoutModal && (
|
{logoutModal && (
|
||||||
<ModalCom action={logoutModalHandler} situation={logoutModal}>
|
<ModalCom action={logoutModalHandler} situation={logoutModal}>
|
||||||
<div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
|
<div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h1 className="modal-title">
|
<h1 className="modal-title">
|
||||||
Confirm
|
Confirm
|
||||||
|
|||||||
@@ -53,22 +53,11 @@ export default function MediaLayout({backpath, title, children }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="nft-main-wrapper-layout media container mx-auto">
|
<div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
|
||||||
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
<div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
|
||||||
{/* sidebar */}
|
<div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
|
||||||
{/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
|
|
||||||
{/* <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
{/*{MobileSideBar && (*/}
|
|
||||||
{/* <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>*/}
|
|
||||||
{/*)}*/}
|
|
||||||
{/*<div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>*/}
|
|
||||||
{/* <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
{/* end sidebar */}
|
|
||||||
<div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px] h-full`}>
|
|
||||||
{/* header */}
|
{/* header */}
|
||||||
<div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
|
<div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0">
|
||||||
<MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
|
<MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
|
||||||
</div>
|
</div>
|
||||||
{/* container */}
|
{/* container */}
|
||||||
@@ -76,9 +65,6 @@ export default function MediaLayout({backpath, title, children }) {
|
|||||||
<div className="nft-main-container_media flex-[100%] w-full">
|
<div className="nft-main-container_media flex-[100%] w-full">
|
||||||
{children && children}
|
{children && children}
|
||||||
</div>
|
</div>
|
||||||
{/*<div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">*/}
|
|
||||||
{/* <RightSideBar myJobList={userJobList} />*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,12 +6,14 @@ export default function CustomTimer({className='text-emerald-500'}) {
|
|||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
const timer = setInterval(()=>{
|
const timer = setInterval(()=>{
|
||||||
setTime(prev => prev - 1)
|
if(time > 0 ){
|
||||||
|
setTime(prev => prev - 1)
|
||||||
|
}
|
||||||
},1000)
|
},1000)
|
||||||
return ()=>{
|
return ()=>{
|
||||||
clearInterval(timer)
|
clearInterval(timer)
|
||||||
}
|
}
|
||||||
},[])
|
},[time])
|
||||||
|
|
||||||
let minutes = time == 0 ? 0 : Math.floor(time/60)
|
let minutes = time == 0 ? 0 : Math.floor(time/60)
|
||||||
let seconds = time == 0 ? 0 :time - (minutes * 60)
|
let seconds = time == 0 ? 0 :time - (minutes * 60)
|
||||||
|
|||||||
Reference in New Issue
Block a user