// const [showFiterModel, setShowFilterModel] = useState(false)
    // const handleFilterModal = index => {
    //     var filter = data[index].taskData.sort(function (a, b) {
    //         return   - new Date(a.start_date);
    //     });
    //     const newItems = [...data];
    //     newItems[index].taskData = filter;
    //     setData(null);
    //     setData(newItems);
    // }

    // const handleShowFilterModal = () => {
    //     setShowFilterModel(false)
    // }



 <div className="form-group row">
                                        <div className="col-sm-6">
                                            <label className="col-form-label"><b>Start Date :</b></label>
                                            <input
                                                type="date"
                                                id="start_date"
                                                name={`${cur ? "start_date" : "start_date[]"}`}
                                                className="form-control form-control-sm"
                                                value={cur ? cur.start_date : null}
                                            />
                                        </div>
                                        <div className="col-sm-6">
                                            <label className="col-form-label"><b>End Date :</b></label>
                                            <input
                                                type="date"
                                                 name={`${cur ? "end_date" : "end_date[]"}`}
                                                className="form-control form-control-sm"
                                                value={cur ? cur.end_date : null}
                                            />
                                        </div>
                                    </div>


 f.taskData.forEach((cur) => {


  const date = new Date(startDate)
            const date1 = new Date(endDate)
            if (cc.start_date) {
                var filterdata = cc && (new Date(cc.start_date) < date)
            }
            if (cc.end_date) {
                var filterdata = cc && (new Date(cc.end_date) > date1)
            }
            //if filterPass comes back `false` the row is filtered out
            return filterdata
            console.log(filterdata)
            console.log(filterdata)



 // var a = JSON.stringify(Object.fromEntries(formData))
        // console.log(a)

 // const [checkBoxData, setCheckBoxData] = useState();
    // const handleCheckBoxData = (value) => {
    //     setCheckBoxData();
    //     setCheckBoxData(value);
    // }



  // const filterDates = (startDate, endDate) => {
        //     return mainData.filter((date) => {
        //         return startDate >= date.start_date && endDate <= date.end_Date;
        //     });
        // };
        // console.log(filterDates())

        // const filterBetweenDates = (mainData, startDate, endDate) => {
        //     try {
        //         var dd = mainData.filter(( date ) => date >= startDate && date <= endDate)
        //         console.log(dd)
        //     } catch (error) {
        //         console.log('error while filtering by dates', error.message);
        //     }
        // };
        // filterBetweenDates()
        if (checkBoxData === 'TO_DO') {
            console.log(temp[index].taskData)
            var filterData = temp[index].taskData.filter((el) => {
                return el.status === "TO_DO"
            })
            // const addTodo = filterData.map(object => {
            //     return {...object, isTodo: 'true'};
            //   });
            // console.log(addTodo)
            temp[index].taskData = filterData;
            setFilteredData(null);
            setFilteredData(filterData); 
        }
        if (checkBoxData === 'IN_PROGRESS') {
            console.log(temp[index].taskData)
            var filterData = temp[index].taskData.filter((el) => {
                return el.status === "IN_PROGRESS"
            })
            console.log(filterData)
            // temp[index].taskData = filterData;
            // setFilteredData(null);
            // setFilteredData(temp);
        }
        if (checkBoxData === 'COMPLETED') {
            console.log(temp[index].taskData)
            var filterData = temp[index].taskData.filter((el) => {
                return el.status === "COMPLETED"
            })
            console.log(filterData)
            // temp[index].taskData = filterData;
            // setFilteredData(null);
            // setFilteredData(temp);
        }
**********************************************************************************************
import React, { useEffect, useState, useRef } from 'react';
import { Modal, Table } from 'react-bootstrap';
import ErrorLogService from "../../../../services/ErrorLogService";
import { _attachmentUrl } from '../../../../settings/constants';
import { UserDropdown } from '../../../../screens/Masters/UserMaster/UserComponent';
import Select from 'react-select';
import { postTask, updateTask, getTaskUser } from '../../../../services/TicketService/TaskService';
import { getAttachment, deleteAttachment } from '../../../../services/OtherService/AttachmentService';
import Alert from "../../../../components/Common/Alert";
import UserService from "../../../../services/MastersService/UserService";


export default function TaskModal(props) {

  const [notify, setNotify] = useState();
  const priority = ["High", "Medium", "Low"];
  const [allTask, setAllTask] = useState();
  const [userData, setUserData] = useState();
  const [defaultUserData, setDefaultUserData] = useState();
  const [attachment, setAttachment] = useState([]);
  const [selectedFile, setSelectedFile] = useState([])
  const fileInputRef = useRef(null);

  const handleClose = () => {
    props.close();
    props.loadBucketData();
  }

  const loadData = async () => {
    setSelectedFile([]);
    const tempUserData = [];
    const tempDefaultUserData = [];

    await new UserService().getUser().then((res) => {
      if (res.status == 200) {
        const data = res.data.data;
        for (const key in data) {
          tempUserData.push({
            value: data[key].id,
            label: data[key].first_name + " " + data[key].last_name
          })

          if (props.data && props.data.assign_to_user) {
            if (props.data.assign_to_user.includes(data[key].id)) {

              tempDefaultUserData.push({
                value: data[key].id,
                label: data[key].first_name + " " + data[key].last_name
              })
            }
          }

        }
        setDefaultUserData(tempDefaultUserData)
        setUserData(tempUserData);
      }
    })

    const allTask = props.allTaskList.filter(task => task.value != props.data.id);
    setAllTask(allTask);
    loadAttachment();
  }

  const loadAttachment = async () => {
    setNotify(null);
    if (props.data.id) {
      await getAttachment(props.data.id, "TASK").then(res => {
        console.log(res);
        if (res.status === 200) {
          setAttachment(null);
          setAttachment(res.data.data);
        }
      })
    } else {
      setAttachment(null);
    }
  }

  const uploadAttachmentHandler = (e, type, id = null) => {
    if (type === "UPLOAD") {
      var tempSelectedFile = [];
      for (var i = 0; i < e.target.files.length; i++) {
        tempSelectedFile.push({ file: e.target.files[i], show_to_customer: 0, show_to_project_owner: 0 });
      }
      fileInputRef.current.value = "";
      setSelectedFile(tempSelectedFile);
    } else if (type === "DELETE") {
      let filteredFileArray = selectedFile.filter((item, index) => id !== index);
      setSelectedFile(filteredFileArray);
    } else if (type === "PROJECT_OWNER") {
      var file = selectedFile;
      file[id].show_to_project_owner = file[id].show_to_project_owner ? 0 : 1;
      setSelectedFile(file);
    } else if (type === "CUSTOMER") {
      var file = selectedFile;
      file[id].show_to_customer = file[id].show_to_customer ? 0 : 1;
      setSelectedFile(file);
    } else {
      alert("Invalid Option");
    }
  }

  const handleDeleteAttachment = (e, id) => {
    deleteAttachment(id).then(res => {
      loadAttachment();
    })
  }


  const handleForm = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    setNotify(null);
    //Appeding File in selected State
    formData.delete("attachment[]");
    formData.delete("show_to_customer[]");
    formData.delete("show_to_project_owner[]");
    if (selectedFile) {
      for (var i = 0; i < selectedFile.length; i++) {
        formData.append('attachment[]', selectedFile[i].file);
        formData.append('show_to_customer[]', selectedFile[i].show_to_customer);
        formData.append('show_to_project_owner[]', selectedFile[i].show_to_project_owner);
      }
    }
    var a = JSON.stringify(Object.fromEntries(formData))
    console.log(a)

    if (formData.get('id')) {
      await updateTask(formData.get("id"), formData).then(res => {
        if (res.status === 200) {
          if (res.data.status === 1) {
            props.loadBasket();
            setNotify({ type: 'success', message: res.data.message });
          } else {
            setNotify({ type: 'danger', message: res.data.message });
          }
        } else {
          setNotify({ type: 'danger', message: res.message });
          new ErrorLogService().sendErrorLog("Ticket", "Edit_Task", "INSERT", res.message);
        }
      }).catch(error => {
        const { response } = error;
        const { request, ...errorObject } = response;
        new ErrorLogService().sendErrorLog("Task", "Edit_Task", "INSERT", errorObject.data.message);
      });
    } else {
      await postTask(formData).then(res => {

        if (res.status === 200) {
          if (res.data.status === 1) {
            // setNotify({ type: 'success', message: res.message });
            props.loadBasket();
            handleClose();
          }
          else {
            setNotify({ type: 'danger', message: res.data.message });
          }
        } else {
          setNotify({ type: 'danger', message: res.data.message });
          new ErrorLogService().sendErrorLog("Ticket", "Edit_Task", "INSERT", res.message);
        }
      }).catch(error => {
        const { response } = error;
        const { request, ...errorObject } = response;
        new ErrorLogService().sendErrorLog("Task", "Create_Task", "INSERT", errorObject.data.message);
      });
    }
  }

  useEffect(() => {
    loadData();
  }, [])

  return (
    <>

      <Modal
        size="lg"
        show={props.show}
        onHide={handleClose}
        dialogClassName="modal-100w"
        aria-labelledby="example-custom-modal-styling-title"
      >

        <Modal.Header closeButton>
          <Modal.Title id="example-custom-modal-styling-title">
            <strong>Task Details</strong>
          </Modal.Title>
        </Modal.Header>
        {/* Ticket.{props.data.ticket_id}<br/>
          Basket.{props.data.ticket_basket_id}<br/>
          Task.{props.data.id}<br/>
        */}
        <form onSubmit={handleForm} method="post" encType='multipart/form-data'>
          <Modal.Body>
            {notify && <Alert alertData={notify} />}

            {props.data.id && <input type="hidden" className="form-control form-control-sm" name="id"
              defaultValue={props.data.id}
            />}
            <input type="hidden" className="form-control form-control-sm" name="ticket_id"
              defaultValue={(props.data && props.data.ticket_id) ? props.data.ticket_id : ""}
            />
            <input type="hidden" className="form-control form-control-sm" name="ticket_basket_id"
              defaultValue={(props.data && props.data.ticket_basket_id) ? props.data.ticket_basket_id : ""}
            />

            <div className="col-md-6">
              <div className="row">
                <div className="col-md-5">
                  <label className="form-label"><b>Select Task Type :</b></label>
                </div>
                <div className="col-md-7">
                  {props.data &&
                    <div className="row">
                      <div className="col-md-4">
                        <div className="form-check">
                          <input className="form-check-input" type="radio" name="type" id="task_type_type" value="TASK"
                            defaultChecked={props.data.type === "TASK" || !props.data.id}
                          />
                          <label className="form-check-label " htmlFor="status_type">
                            Task
                          </label>
                        </div>
                      </div>
                      <div className="col-md-8">
                        <div className="form-check">
                          <input className="form-check-input" type="radio" name="type" id="task_type_group_activity"
                            value="GROUP_ACTIVITY"
                            defaultChecked={props.data.type === "GROUP_ACTIVITY"}
                          />
                          <label className="form-check-label" htmlFor="status_group_activity">
                            Group Activity
                          </label>
                        </div>
                      </div>
                    </div>
                  }
                </div>
              </div>
            </div>

            <div className="row mt-2">
              <div className="col-md-12">
                <label className="form-label"><b>Task Name *: </b></label>
                <input type="text" className="form-control form-control-sm" name="task_name"
                  defaultValue={props.data.task_name}
                  required
                />
              </div>
            </div>

            {/* *****************START DATE, END DATE , TASK HOURS**************** */}
            <div className="row mt-3">
              <div className="col-md-4">
                <label className="form-label"><b>Start Date *:</b></label>
                <input type="date" className="form-control form-control-sm" name="start_date"
                  defaultValue={props.data.start_date}
                  required
                />
              </div>

              <div className="col-md-4">
                <label className="form-label"><b>End Date *:</b></label>
                <input type="date" className="form-control form-control-sm" name="end_date"
                  defaultValue={props.data.end_date}
                  required
                />
              </div>

              {props.moduleSetting && props.moduleSetting['RequiredHour'] == 1 &&
                <div className="col-md-4">
                  <label className="form-label"><b>Task Hours *:</b></label>
                  <input type="text" className="form-control form-control-sm" name="task_hours"
                    defaultValue={props.data.task_hours ? props.data.task_hours : '00:00'}
                    required
                  />
                </div>
              }

            </div>

            {/* ***************** PROPRITY AND STATUS**************** */}
            <div className="row mt-3">
              <div className="col-md-6">
                <label className="form-label"><b>Task Priority *:</b></label>
                <select className="form-select" id="priority" name="priority" required
                >
                  <option value="">Select Priority</option>
                  {priority.map((data) => {
                    if (props.data.priority && props.data.priority === data) {
                      return <option value={data} selected>{data}</option>
                    } else {
                      return <option value={data}>{data}</option>
                    }

                  })
                  }
                </select>
              </div>
              <div className="col-md-6">
                <label className="form-label"><b>Select Status :</b></label>
                <div className="row">
                  <div className="col-md-3">
                    <div className="form-check">
                      <input className="form-check-input" type="radio" name="status" id="status_to_do" value="TO_DO"
                        defaultChecked={props.data.status === "TO_DO"}
                      />
                      <label className="form-check-label " htmlFor="status_to_do">
                        TO DO
                      </label>
                    </div>
                  </div>

                  {props.data.id && <div className="col-md-5">
                    <div className="form-check">
                      <input className="form-check-input" type="radio" name="status" id="status_in_progress"
                        value="IN_PROGRESS"
                        defaultChecked={props.data.id && props.data.status === "IN_PROGRESS"}
                      />
                      <label className="form-check-label" htmlFor="status_in_progress">
                        IN PROGRESS
                      </label>
                    </div>
                  </div>
                  }

                  {props.data.id && <div className="col-md-4">
                    <div className="form-check">
                      <input className="form-check-input" type="radio" name="status" id="status_completed" value="COMPLETED"
                        defaultChecked={props.data.id && props.data.status === "COMPLETED"}
                      />
                      <label className="form-check-label" htmlFor="status_completed">
                        COMPLETED
                      </label>
                    </div>
                  </div>
                  }
                </div>
              </div>
            </div>

            {/* ***************** DESCRIPTION **************** */}
            <div className="row mt-3">
              <div className="col-md-12">
                <label className="form-label"><b>Description :</b></label>
                <textarea className="form-control" id="description" name="task_desc" rows={3}
                  defaultValue={props.data.task_desc}
                />
              </div>
            </div>

            {/* ***************** DEPENDENT TASK AND ASSIGNED USER **************** */}

            <div className="row mt-3">
              <div className="col-md-6">
                <label className="form-label"><b>Assign to user *:</b></label>
                {defaultUserData?.length > 0 && userData && <Select
                  defaultValue={defaultUserData}
                  isMulti
                  isSearchable={true}
                  name="assign_to_user[]"
                  className="basic-multi-select"
                  classNamePrefix="select"
                  options={userData}
                  required
                />
                }

                {defaultUserData?.length == 0 && userData && <Select
                  isMulti
                  isSearchable={true}
                  name="assign_to_user[]"
                  className="basic-multi-select"
                  classNamePrefix="select"
                  options={userData}
                  required
                  defaultValue={userData.map(d => ({ value: d.value, label: d.label })).filter(d => d.value == localStorage.getItem('id'))}
                  isClearable
                />
                }
              </div>

              <div className="col-md-6">
                <label className="form-label"><b>Dependent Task :</b></label>
                {allTask && <Select isMulti isSearchable={true}
                  name="dependent_task[]"
                  options={allTask}
                />}
              </div>
            </div>

            {/* ***************** ATTACHMENT **************** */}
            <div className="row mt-3">
              <div className="col-md-12 ml-0 pl-0">
                <label className="form-label"><b>Attachment : </b></label>
                <input type="file" className="form-control"
                  multiple ref={fileInputRef}
                  onChange={(e) => { uploadAttachmentHandler(e, "UPLOAD", '') }}
                />
              </div>
            </div>

            {selectedFile && selectedFile.length > 0 && <Table bordered size="sm">
              <thead>
                <tr className="p-1">
                  <th className="p-1 text-center">Name</th>
                  <th className="p-1 text-center">Show To Customer</th>
                  <th className="p-1 text-center">Show To Project Owner</th>
                  <th className="p-1 text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                {selectedFile.map((ele, i) => {
                  console.log(ele)
                  return <tr className="p-1">
                    <td className="p-1"><b>{i + 1}.</b> {ele.file.name}</td>
                    <td className="p-1 text-center">
                      <input type="checkbox" className="form-check-input"
                        onChange={(e) => { uploadAttachmentHandler(e, "CUSTOMER", i) }}
                      />
                    </td>
                    <td className="p-1 text-center">
                      <input type="checkbox" className="form-check-input"
                        onChange={(e) => { uploadAttachmentHandler(e, "PROJECT_OWNER", i) }}
                      />
                    </td>
                    <td className="p-1 text-center">
                      <button className='btn btn-danger text-white btn-sm p-0 px-1 mt-0' type="button"
                        onClick={(e) => { uploadAttachmentHandler(e, "DELETE", i) }}
                      >
                        <i className="icofont-ui-delete" style={{ fontSize: '12px' }}></i>
                      </button>
                    </td>
                  </tr>
                })
                }
              </tbody>
            </Table>
            }
            {/* <div className="d-flex justify-content-start mt-2" style={{ overflowX: 'auto' }}>
              {attachment && attachment.map((attach, index) => {
                console.log(attach);
                return <div className="justify-content-start"
                  style={{ marginRight: '5px', padding: '0px', width: '200px' }}>
                  <div className="card" style={{ backgroundColor: '#EBF5FB' }}>
                    <div className="card-header">
                      <p style={{ fontSize: '12px' }}>
                        <b>{attach.name}</b>
                      </p>
                      <div className="d-flex justify-content-end p-0">
                        <a href={`${_attachmentUrl + '/' + attach.path}`}
                          target='_blank'
                          className='btn btn-warning btn-sm p-0 px-1'>
                          <i className="icofont-download" style={{ fontSize: '12px', height: '15px' }}></i>
                        </a>
                        <button className='btn btn-danger text-white btn-sm p-0 px-1'
                          type="button"
                          onClick={e => { handleDeleteAttachment(e, attach.id) }}>
                          <i className="icofont-ui-delete" style={{ fontSize: '12px' }}></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              })}
            </div> */}

            {/* <div className="d-flex justify-content-start mt-2" style={{ overflowX: 'auto' }}>
              {attachment && attachment.length > 0 && <Table bordered size="sm">
                <thead>
                  <tr className="p-1">
                    <th className="p-1 text-center">Name</th>
                    <th className="p-1 text-center">Show To Customer</th>
                    <th className="p-1 text-center">Show To Project Owner</th>
                    <th className="p-1 text-center">Download</th>
                    <th className="p-1 text-center">Delete</th>
                  </tr>
                </thead>
                <tbody>
                  {attachment.map((ele, i) => {
                    console.log(ele);
                    return <tr className="p-1">
                      <td className="p-1"><b>{i + 1}.</b> {ele.name}</td>
                      <td className="p-1 text-center">
                        {
                          ele.show_to_customer ? <input type="checkbox" checked /> : <input type="checkbox" />
                        }

                      </td>
                      <td className="p-1 text-center">
                        {
                          ele.show_to_project_owner ? <input type="checkbox" checked /> : <input type="checkbox" />
                        }
                      </td>
                      <td className="p-1 text-center">
                        <a href={`${_attachmentUrl + '/' + ele.path}`}
                          target='_blank'
                          className='btn btn-warning btn-sm p-0 px-1'>
                          <i className="icofont-download" style={{ fontSize: '12px', height: '15px' }}></i>
                        </a>
                      </td>
                      <td className="p-1 text-center">
                        <button className='btn btn-danger text-white btn-sm p-0 px-1'
                          type="button"
                          onClick={e => { handleDeleteAttachment(e, ele.id) }}>
                          <i className="icofont-ui-delete" style={{ fontSize: '12px' }}></i>
                        </button>
                      </td>
                    </tr>
                  })
                  }
                </tbody>
              </Table>
              }
            </div> */}

          </Modal.Body>
          <Modal.Footer>
            <button type="submit" className="btn btn-sm btn-primary" style={{ backgroundColor: "#484C7F" }}>Submit</button>
            <button type="button" className="btn btn-sm btn-primary" style={{ backgroundColor: "#FFBA32" }}
              onClick={handleClose}>Close</button>
          </Modal.Footer>
        </form>
      </Modal>
    </>
  )
}