Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
944fd134f6 | ||
 ameye
|
a910ab177f | ||
|
victorAnumudu
|
4e741f587c | ||
 tokslaw
|
f779529cc6 |
@@ -89,9 +89,9 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
Currency
|
||||
<span>Currency</span>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.country}
|
||||
@@ -136,9 +136,9 @@ function AddJob({ popUpHandler, categories }) {
|
||||
{/* Price */}
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6 text-right"
|
||||
fieldClass="px-6 text-right flex"
|
||||
label="Price"
|
||||
labelClass="tracking-wide"
|
||||
labelClass=""
|
||||
type="number"
|
||||
name="price"
|
||||
placeholder="0"
|
||||
@@ -159,7 +159,7 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
labelClass="tracking-wide"
|
||||
labelClass=""
|
||||
type="text"
|
||||
name="title"
|
||||
value={props.values.title}
|
||||
@@ -178,7 +178,7 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Description"
|
||||
labelClass="tracking-wide"
|
||||
labelClass=""
|
||||
type="text"
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
@@ -197,7 +197,7 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
Job Delivery Details
|
||||
{props.errors.job_detail &&
|
||||
@@ -220,13 +220,13 @@ function AddJob({ popUpHandler, categories }) {
|
||||
</div>
|
||||
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<div
|
||||
<label
|
||||
htmlFor="Job Categories"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
className='job-label'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
</div>
|
||||
</label>
|
||||
<div
|
||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||
role="group"
|
||||
@@ -266,7 +266,7 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<div className="field w-full mb-[5px]">
|
||||
<div className={`flex items-center justify-between mb-2.5`}>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||
className="job-label"
|
||||
htmlFor="timeline_days"
|
||||
>
|
||||
Timeline
|
||||
@@ -328,10 +328,10 @@ function AddJob({ popUpHandler, categories }) {
|
||||
<div className="flex items-center space-x-4 mr-9">
|
||||
<button
|
||||
type="button"
|
||||
className="text-18 text-light-red tracking-wide "
|
||||
className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
|
||||
>
|
||||
<span
|
||||
className="border-b dark:border-[#5356fb29] border-light-red"
|
||||
className="px-2"
|
||||
onClick={popUpHandler}
|
||||
>
|
||||
{" "}
|
||||
|
||||
@@ -52,7 +52,13 @@ export default function FamilyActivities() {
|
||||
<span>Family</span>
|
||||
</Link>
|
||||
</div>
|
||||
<Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="bg-white">
|
||||
<LoadingSpinner color="sky-blue" size="16" height='h-[30rem]' />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<FamilyTableNew />
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { Suspense, useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import usersService from "../../../services/UsersService";
|
||||
@@ -23,7 +23,9 @@ const AssignTaskPopout = ({
|
||||
|
||||
}) => {
|
||||
const {parentAssignJobToKid} = SocketValues()
|
||||
|
||||
const apiCall = new usersService();
|
||||
|
||||
let { pathname, state } = useLocation();
|
||||
|
||||
const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
@@ -80,7 +82,7 @@ const AssignTaskPopout = ({
|
||||
setRequestStatus({ loading: true, status: false, message: "" });
|
||||
|
||||
if(!selectedFamilyUid){ // If no family found, throw error
|
||||
setRequestStatus({ loading: false, status: false, message: "Please Select Family Member" });
|
||||
setRequestStatus({ loading: false, status: false, message: "Please Select a Kid" });
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
@@ -219,7 +221,10 @@ const AssignTaskPopout = ({
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 5000);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
let imageSrc = (localStorage.getItem("session_token")
|
||||
? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
|
||||
|
||||
useEffect(()=>{ // effect to update family UID when components mounts
|
||||
if(familyDetailsData?.uid){
|
||||
@@ -231,12 +236,13 @@ const AssignTaskPopout = ({
|
||||
}
|
||||
},[])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalCom action={action} situation={situation}>
|
||||
<div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{details ? (
|
||||
` Assign ${details?.firstname}'s Task`
|
||||
) : familyDetailsData ? (
|
||||
@@ -244,11 +250,11 @@ const AssignTaskPopout = ({
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-black">Assign task to{" "}</span>
|
||||
<div className="w-[270px] h-[40px] flex items-center relative after:absolute after:content-['▼'] active:after:rotate-180 after:transition-all after:duration-300 after:z-20 after:right-2 after:top-1/2 after:-translate-y-1/2 after:text-white after:text-lg">
|
||||
<div className="w-[270px] h-[40px] flex items-center">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
className="relative z-10 appearance-none text-lg text-white px-2 tracking-wide font-semibold transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-full w-full h-full"
|
||||
className="text-lg text-black/80 px-2 tracking-wide font-semibold transition-all cursor-pointer bg-white focus:outline-none border border-gray-200 rounded-full w-full h-full"
|
||||
onChange={handleFamChange}
|
||||
value={selectedFamilyUid}
|
||||
>
|
||||
@@ -263,7 +269,7 @@ const AssignTaskPopout = ({
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#000] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={action}
|
||||
>
|
||||
<svg
|
||||
@@ -382,25 +388,37 @@ const AssignTaskPopout = ({
|
||||
value={activeTask?.data?.description}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Price
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{PriceFormatter(
|
||||
activeTask?.data?.price * 0.01,
|
||||
activeTask?.data?.currency,
|
||||
activeTask?.data?.curreny_code
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="w-full">
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Price
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">
|
||||
{PriceFormatter(
|
||||
activeTask?.data?.price * 0.01,
|
||||
activeTask?.data?.currency,
|
||||
activeTask?.data?.curreny_code
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Timeline
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
|
||||
<div className="my-3 w-full flex items-center gap-1">
|
||||
<label className="job-label">
|
||||
Timeline
|
||||
</label>
|
||||
<p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<div className="w-28 h-28 rounded-2xl flex items-center justify-center">
|
||||
<img
|
||||
className="w-full h-auto"
|
||||
loading="lazy"
|
||||
src={imageSrc}
|
||||
alt='job image'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -84,9 +84,9 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
|
||||
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[48rem] h-full lg:h-[627px] 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:p-6 px-[1.875rem] py-[1.4375rem] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[48rem] min-h-[500px] bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{isManageFamilyPage
|
||||
? `${state?.firstname}'s Suggested Task`
|
||||
: isActivitiesPage
|
||||
@@ -95,7 +95,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
@@ -179,10 +179,10 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-[.3125rem]">
|
||||
<div className="w-full mb-[.3125rem]">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className='input-label text-[#181c32] dark:text-white text-[1.125rem] leading-[1.3102rem] font-semibold flex items-center gap-1'
|
||||
className='job-label'
|
||||
>
|
||||
Description
|
||||
{props.errors.description &&
|
||||
|
||||
@@ -54,7 +54,7 @@ export default function InputCom({
|
||||
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
||||
{label && (
|
||||
<label
|
||||
className={`input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1 ${labalClass}`}
|
||||
className={`job-label ${error && 'job-label-flex'} ${labalClass}`}
|
||||
htmlFor={name}
|
||||
>
|
||||
{label}
|
||||
|
||||
@@ -64,13 +64,13 @@ function DeleteJobPopout({ details, onClose, situation }) {
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lg:w-[600px] 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="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
Delete Job
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
@@ -119,10 +119,10 @@ function DeleteJobPopout({ details, onClose, situation }) {
|
||||
{details.title}
|
||||
</p>
|
||||
<p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
|
||||
Price: {details.thePrice}
|
||||
<span className="job-label">Price: </span>{details.thePrice}
|
||||
</p>
|
||||
<p className="text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Duration: {details.timeline_days} day(s)
|
||||
<span className="job-label">Duration: </span>{details.timeline_days} day(s)
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2.5">
|
||||
|
||||
@@ -212,13 +212,13 @@ const EditJobPopOut = ({
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper w-11/12 lg:w-[600px] 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="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
Edit Job
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
@@ -328,8 +328,8 @@ const EditJobPopOut = ({
|
||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||
<div className="sm:w-[60%] w-full">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
htmlFor="job-label"
|
||||
className='job-label'
|
||||
>
|
||||
Job Delivery Details
|
||||
</label>
|
||||
@@ -352,7 +352,7 @@ const EditJobPopOut = ({
|
||||
<div className="sm:w-[35%] w-full">
|
||||
<div
|
||||
htmlFor="Job Categories"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
className='job-label'
|
||||
id="checked-group"
|
||||
>
|
||||
Categories
|
||||
@@ -422,7 +422,7 @@ const EditJobPopOut = ({
|
||||
<div className="field w-1/2">
|
||||
<div className={`flex items-center justify-between`}>
|
||||
<label
|
||||
className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
|
||||
className="job-label flex flex-col"
|
||||
htmlFor="timeline_days"
|
||||
>
|
||||
Timeline -
|
||||
|
||||
@@ -303,13 +303,13 @@ function JobListPopout({
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation} className="">
|
||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] 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:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{details.title}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
|
||||
@@ -135,13 +135,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] 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:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
Manage Pending Item
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
@@ -170,7 +170,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
|
||||
<p className="text-base font-semibold text-slate-900 dark:text-white tracking-wide">
|
||||
{details.title}
|
||||
</p>
|
||||
<div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
|
||||
<div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300 rounded-2xl">
|
||||
<span className="w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100">
|
||||
!
|
||||
</span>
|
||||
@@ -236,7 +236,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-full md:w-1/4 h-full">
|
||||
<p className="mb-6 text-sm dark:text-white">Actions</p>
|
||||
<p className="job-label mb-6 dark:text-white">Actions</p>
|
||||
|
||||
<div className="mb-3">
|
||||
<p className="px-2 py-1 text-sm bg-slate-100">
|
||||
|
||||
+16
-1
@@ -154,8 +154,23 @@
|
||||
|
||||
@layer components{
|
||||
.job-label{
|
||||
@apply text-slate-900 dark:text-white tracking-wide font-semibold
|
||||
@apply text-base text-slate-900 dark:text-white tracking-wide font-semibold
|
||||
}
|
||||
.job-label-flex{
|
||||
@apply flex items-center gap-2
|
||||
}
|
||||
|
||||
/* style for all modal header */
|
||||
.modal-header-con{
|
||||
@apply w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29] border-light-purple
|
||||
}
|
||||
.modal-title{
|
||||
@apply text-2xl leading-8 font-bold text-dark-gray dark:text-white tracking-wide flex items-center
|
||||
}
|
||||
.modal-close-btn{
|
||||
@apply text-[#000] dark:text-red-500
|
||||
}
|
||||
/* end of style for all modal header */
|
||||
}
|
||||
|
||||
/* ===================== EXTRA ===================== */
|
||||
|
||||
@@ -6,13 +6,13 @@ function AddJobPage({ action, situation, categories }) {
|
||||
return (
|
||||
<ModalCom action={action} situation={situation}>
|
||||
<div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
|
||||
<div className="heading flex justify-between items-center py-6 md:px-[30px] px-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
|
||||
<p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Create New Job
|
||||
</p>
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
New Job
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={action}
|
||||
>
|
||||
<svg
|
||||
|
||||
Reference in New Issue
Block a user