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 (
|
||||
<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">
|
||||
<h1 className="modal-title">
|
||||
Add Group
|
||||
@@ -135,28 +135,6 @@ export default function AddGroup({ action, situation, setUpdateList }) {
|
||||
/>
|
||||
</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 */}
|
||||
{requestStatus.message != "" &&
|
||||
@@ -177,6 +155,29 @@ export default function AddGroup({ action, situation, setUpdateList }) {
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
</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>
|
||||
</ModalCom>
|
||||
);
|
||||
|
||||
@@ -20,14 +20,14 @@ export default function DeleteGroup({action, situation, details}) {
|
||||
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-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] ">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<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">
|
||||
<h1 className="modal-title">
|
||||
Delete Group
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={action}
|
||||
>
|
||||
<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?
|
||||
</p>
|
||||
</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 */}
|
||||
{requestStatus.message != "" &&
|
||||
@@ -116,6 +96,26 @@ export default function DeleteGroup({action, situation, details}) {
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
</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>
|
||||
</ModalCom>
|
||||
)
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function DeleteMember({action, situation, details}) {
|
||||
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">
|
||||
<h1 className="modal-title">
|
||||
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>
|
||||
</p>
|
||||
</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 */}
|
||||
{requestStatus.message != "" &&
|
||||
@@ -115,7 +95,27 @@ export default function DeleteMember({action, situation, details}) {
|
||||
)
|
||||
))}
|
||||
{/* 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>
|
||||
</ModalCom>
|
||||
)
|
||||
|
||||
@@ -12,6 +12,7 @@ import IndexJobActions from "./JobActions/IndexJobActions";
|
||||
import usersService from "../../services/UsersService";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import { SocketValues } from "../Contexts/SocketIOContext";
|
||||
import TabButton from "../customTabs/TabButton";
|
||||
|
||||
function ActiveJobs(props) {
|
||||
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 [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({
|
||||
loading: false,
|
||||
@@ -93,9 +96,9 @@ function ActiveJobs(props) {
|
||||
|
||||
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
||||
const handleClearAll = ({ target: { name } }) => {
|
||||
if (tab == "message") {
|
||||
if (selectedTab == "Send Message") {
|
||||
setMessageToSend("");
|
||||
} else if (tab == "files") {
|
||||
} else if (selectedTab == "Send Files") {
|
||||
setFilesToSend([]);
|
||||
} else {
|
||||
return;
|
||||
@@ -269,9 +272,9 @@ function ActiveJobs(props) {
|
||||
|
||||
return (
|
||||
<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 */}
|
||||
<div className="w-full md:w-8/12">
|
||||
<div className="w-full">
|
||||
<div className="w-full flex justify-start space-x-3 items-start">
|
||||
<button
|
||||
type="button"
|
||||
@@ -320,7 +323,7 @@ function ActiveJobs(props) {
|
||||
{/* end of job title */}
|
||||
|
||||
{/* 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>
|
||||
{passDue ? (
|
||||
<div className="my-1">
|
||||
@@ -394,78 +397,119 @@ function ActiveJobs(props) {
|
||||
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="mt-5">
|
||||
<div className="">
|
||||
<div
|
||||
className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
|
||||
// className='ml-7 flex justify-start items-center gap-3'
|
||||
>
|
||||
<button
|
||||
name="message"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 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 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 className="w-full">
|
||||
{/* switch button */}
|
||||
<div className="grid grid-cols-2">
|
||||
{tabs.map((item) => (
|
||||
<TabButton
|
||||
key={item}
|
||||
item={item}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected_file my-2">
|
||||
{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>
|
||||
{/* 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"
|
||||
onChange={handleMessageChange}
|
||||
value={messageToSend}
|
||||
autoFocus
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
@@ -489,57 +533,6 @@ function ActiveJobs(props) {
|
||||
))}
|
||||
</div>
|
||||
{/* 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>
|
||||
{/* END OF TEXTAREA */}
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,7 @@ const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
|
||||
import usersService from "../../services/UsersService";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import { SocketValues } from "../Contexts/SocketIOContext";
|
||||
import TabButton from "../customTabs/TabButton";
|
||||
|
||||
function ActiveJobsMedia(props) {
|
||||
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 [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({
|
||||
loading: false,
|
||||
@@ -96,9 +99,9 @@ function ActiveJobsMedia(props) {
|
||||
|
||||
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
||||
const handleClearAll = ({ target: { name } }) => {
|
||||
if (tab == "message") {
|
||||
if (selectedTab == "Send Message") {
|
||||
setMessageToSend("");
|
||||
} else if (tab == "files") {
|
||||
} else if (selectedTab == "Send Files") {
|
||||
setFilesToSend([]);
|
||||
} else {
|
||||
return;
|
||||
@@ -275,314 +278,288 @@ function ActiveJobsMedia(props) {
|
||||
backpath={props.details.pathname}
|
||||
title={props.details?.title ? props.details.title : ''}
|
||||
>
|
||||
{/* job title */}
|
||||
{/* <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">
|
||||
<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="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">
|
||||
<VideoElement videoId={props?.details?.media_uid} />
|
||||
</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">
|
||||
<p className="w-full text-base text-right text-sky-blue">
|
||||
{props?.details && props.details.job_to}
|
||||
</p>
|
||||
<div className="text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8 border-b border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 w-full lg:flex gap-8">
|
||||
<div className="w-full text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Delivery Detail:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8">
|
||||
{props?.details && props.details.job_description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-2 lg:my-0">
|
||||
<IndexJobActions details={props.details} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <p className="w-full text-base text-right text-sky-blue">
|
||||
{props?.details && props.details.job_to}
|
||||
</p> */}
|
||||
<div className="text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8 border-b border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-6 w-full">
|
||||
<div className="w-full text-base tracking-wide">
|
||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||
Delivery Detail:{" "}
|
||||
</p>
|
||||
<p className="p-2 ml-8">
|
||||
{props?.details && props.details.job_description}
|
||||
</p>
|
||||
</div>
|
||||
{/* <div className="my-2 xl:my-0">
|
||||
<IndexJobActions details={props.details} />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* job details */}
|
||||
<div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
|
||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||
{passDue ? (
|
||||
<div className="my-1">
|
||||
<p className="text-base text-slate-700">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{props?.details && props.details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
{props?.delivery_date && (
|
||||
<p className="py-2 text-base text-slate-700">
|
||||
{props.details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="my-1 flex items-start gap-3">
|
||||
<p className="font-semibold">Due: </p>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-slate-700 tracking-wide">
|
||||
<CountDown
|
||||
lastDate={props?.details && props.details.delivery_date}
|
||||
/>
|
||||
</p>
|
||||
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center gap-1 xl:min-w-[350px]">
|
||||
<div className="h-[150px] xl:h-full w-[150px] xl:min-w-[150px]">
|
||||
<IndexJobActions details={props.details} />
|
||||
</div>
|
||||
{/* job details */}
|
||||
<div className="min-w-[170px] flex flex-col justify-center gap-2">
|
||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||
{passDue ? (
|
||||
<div className="my-1">
|
||||
<p className="text-base text-slate-700">
|
||||
<span className="font-semibold">Due: </span>
|
||||
{props?.details && props.details.delivery_date.split(" ")[0]}
|
||||
</p>
|
||||
{props?.delivery_date && (
|
||||
<p className="py-2 text-base text-slate-700">
|
||||
{props.details.delivery_date.split(" ")[1]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="my-1 flex items-start gap-3">
|
||||
<p className="font-semibold">Due: </p>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-slate-700 tracking-wide">
|
||||
<CountDown
|
||||
lastDate={props?.details && props.details.delivery_date}
|
||||
/>
|
||||
</p>
|
||||
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
||||
<span>Hrs</span>
|
||||
<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">
|
||||
<span className="font-semibold text-black dark:text-white">
|
||||
Reward:{" "}
|
||||
</span>
|
||||
<span className="">{thePrice}</span>
|
||||
</div>
|
||||
<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">
|
||||
Reward:{" "}
|
||||
</span>
|
||||
<span className="">{thePrice}</span>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Duration:{" "}
|
||||
</span>
|
||||
<span className="">
|
||||
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
||||
day(s)
|
||||
</span>
|
||||
</div>
|
||||
{/* <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">
|
||||
No:{" "}
|
||||
</span>
|
||||
<span className="">
|
||||
{props.details?.contract && props.details.contract}
|
||||
</span>
|
||||
</div> */}
|
||||
<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">
|
||||
Duration:{" "}
|
||||
</span>
|
||||
<span className="">
|
||||
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
||||
day(s)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* end of job details */}
|
||||
</div>
|
||||
{/* end of job details */}
|
||||
</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">
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="w-full mb-3">
|
||||
<div className="w-full">
|
||||
<div className="pl-7 flex items-center gap-3">
|
||||
<button
|
||||
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="w-full mb-3">
|
||||
<div className="w-full">
|
||||
{/* <div className="pl-7 flex items-center gap-3">
|
||||
<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"
|
||||
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>
|
||||
{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}
|
||||
onChange={handleMessageChange}
|
||||
value={messageToSend}
|
||||
autoFocus
|
||||
/>
|
||||
</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 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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<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" ? (
|
||||
{/* 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
|
||||
onClick={sendFile}
|
||||
type="button"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
type="button"
|
||||
onClick={handleClearAll}
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
{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"
|
||||
<span className="text-gradient">Clear</span>
|
||||
</button>
|
||||
{selectedTab == "Send Files" ? (
|
||||
<button
|
||||
onClick={sendFile}
|
||||
type="button"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
|
||||
</svg>
|
||||
{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">Upload Files</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<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>
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
{/* END OF TEXTAREA */}
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
<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 */}
|
||||
</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 */}
|
||||
{popUp && (
|
||||
|
||||
@@ -60,12 +60,12 @@ function CurrentTaskAction({jobDetails}) {
|
||||
}
|
||||
|
||||
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' ?
|
||||
<div className="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">
|
||||
<div className="h-full flex justify-center items-center">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -67,7 +67,7 @@ export default function Layout({ children }) {
|
||||
</div>
|
||||
{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">
|
||||
<h1 className="modal-title">
|
||||
Confirm
|
||||
|
||||
@@ -53,22 +53,11 @@ export default function MediaLayout({backpath, title, children }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="nft-main-wrapper-layout media container 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`}>
|
||||
{/* sidebar */}
|
||||
{/*<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`}>
|
||||
<div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
|
||||
<div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
|
||||
<div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
|
||||
{/* 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} />
|
||||
</div>
|
||||
{/* container */}
|
||||
@@ -76,9 +65,6 @@ export default function MediaLayout({backpath, title, children }) {
|
||||
<div className="nft-main-container_media flex-[100%] w-full">
|
||||
{children && children}
|
||||
</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>
|
||||
|
||||
@@ -6,12 +6,14 @@ export default function CustomTimer({className='text-emerald-500'}) {
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setInterval(()=>{
|
||||
setTime(prev => prev - 1)
|
||||
if(time > 0 ){
|
||||
setTime(prev => prev - 1)
|
||||
}
|
||||
},1000)
|
||||
return ()=>{
|
||||
clearInterval(timer)
|
||||
}
|
||||
},[])
|
||||
},[time])
|
||||
|
||||
let minutes = time == 0 ? 0 : Math.floor(time/60)
|
||||
let seconds = time == 0 ? 0 :time - (minutes * 60)
|
||||
|
||||
Reference in New Issue
Block a user