import { useEffect, useState, useRef} from "react";
import { ScaleLoader } from "react-spinners";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { useSession } from "next-auth/react";
import { CarrierTableAll } from "@/services/public";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth/next";
import ProtectedRoute from "@/ProtectedRoute";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import Layout from "@/components/layouts/Layout";
import Head from "next/head";
import Breadcrumb from "@/components/ui/pages/Breadcrumb";
import { getRateQuotess } from "@/services/rateQuotes";
import { useRouter } from "next/router";
import { Dropdown } from "primereact/dropdown";
import { InputText } from "primereact/inputtext";
import "primeicons/primeicons.css";
import { MultiSelect } from "primereact/multiselect";
import { Button } from "primereact/button";
import Link from "next/link";
import moment from "moment";
import { InputNumber, InputGroup, DateRangePicker, DatePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import { Paginator } from "primereact/paginator";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string, SchemaOf } from "yup";
import useAuthProvider from "@/useAuthProvider";
import { toCheckUserTypeSubscreption } from "../helpers/toCheckUserType";
import Image from "next/image";
import { useCollapsed } from "@/components/Context/CollapsedContext";
import star from "../public/images/star.svg";
import { Tooltip } from "primereact/tooltip";
import { ParsedUrlQuery } from "querystring";
import { Session } from "next-auth";
import styles from "@/styles/MultiSelect.module.css";
import PaginationTitle from "@/components/ui/pages/PaginationTitle";

interface Props {
  datalisting: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
}
function engagement(props: Props) {
  const { data } = useSession();
  const Router = useRouter();
  const { Permission: userData } = useAuthProvider();

  const formData = Router.query;

  const [isloading, setIsloading] = useState(true);
  const [totalRecords, setTotalRecords] = useState(0);
  const dt = useRef(null);
  const [startdate, setstartdate] = useState("");
  const [enddate, setenddate] = useState("");
  const [first, setFirst] = useState(0);
  const token = data?.user?.image;
  const [rateQuotesdata, setRateQuotesdata] = useState();
  const [dateRange, setDateRange] = useState(null, null);
  const [requestdateFiltervalue, setrequestdateFiltervalue] = useState(null);
  const [dispatcherFilterValue, setdispatcherFilterValue] = useState("");
  const [salesrepFilterValue, setsalesrepFilterValue] = useState("");

  const [EngagementFilterValue,setEngagementFilterValue] = useState("")
  const [equipmentFilterValue, setequipmentFilterValue] = useState("");
  const [quoteFilterValue, setquoteFilterValue] = useState("");
  const [customerLeadFilterValue, setcustomerLeadFilterValue] = useState("");
  const [StatusLeadFilterValue, setStatusLeadFilterValue] = useState("");

  const [typeFilterValue, settypeFilterValue] = useState("");
  const [sizeFilterValue, setsizeFilterValue] = useState("");
  const [portnameFilterValue, setportnameFilterValue] = useState(formData?.port);
  const [quickNote, setQuickNotes] = useState();
  const [origindestinationFilterValue, setorigindestinationFilterValue] =
    useState("");
  const [sortField, setSortField] = useState(null);
  const [sortOrder, setSortOrder] = useState(null);

  const [minValue, setMinValue] = useState(formData?.min);
  const [maxValue, setMaxValue] = useState(formData?.max);
  const [fscminValue, setfscminValue] = useState("");
  const [fscmaxValue, setfscmaxValue] = useState("");
  const [isFiltered, setIsFiltered] = useState(false);
  const [perPageDataShow, setPerPageDataShow] = useState(0);

  const schemaDFOD: SchemaOf<FormData> = object().shape({
    minValue: string().required("Min range is required"),
    maxValue: string().required("Max range is required"),
  });

  const schemaFSC: SchemaOf<FormData> = object().shape({
    fscminValue: string().required("Min range is required"),
    fscmaxValue: string().required("Max range is required"),
  });

  const {
    handleSubmit: handleSubmitDFOD,
    control: controlDFOD,
    setValue: setValueDFOD,
    formState: { errors: errorsDFOD },
  } = useForm<FormData>({
    resolver: yupResolver(schemaDFOD),
  });

  const {
    handleSubmit: handleSubmitFSC,
    control: controlFSC,
    setValue: setValueFSC,
    formState: { errors: errorsFSC },
  } = useForm<FormData>({
    resolver: yupResolver(schemaFSC),
  });

  const columns = [
    { field: "customer_lead", header: "Customer Lead" },

    { field: "status", header: "Status" },
    { field: "request_date", header: "Request Date" },
    { field: "sales_rep", header: "Requested By" },
    { field: "rate_count", header: "Engagement" },

    { field: "type", header: "Type" },
    { field: "size", header: "Size" },
    { field: "equipment", header: "Equipment" },
    { field: "port_name", header: "Market" },
    { field: "origin_destination", header: "Origin/Destination" },
    { field: "dispatcher", header: "Provided By" },
    {
      field: "distance_from_origin_destination",
      header: "Roundtrip Miles",
    },
    { field: "fsc_total", header: "Estimated Total" },
  ];
  const [visibleColumns, setVisibleColumns] = useState(columns);

  const [
    distanceorigindestinationFilterValue,
    setdistanceorigindestinationFilterValue,
  ] = useState("");
  const [fsctotalFilterValue, setfsctotalFilterValue] = useState("");

  let request_date_filter = request_date_filter_Mod(requestdateFiltervalue);

  const isDateDisabled = (date: number) => {
    return date > new Date();
  };

  const rateQuotesDataGet = rateQuotesDataGetnewFunction(setIsloading, formData, setIsFiltered, setQuickNotes, setTotalRecords, setRateQuotesdata, setPerPageDataShow);

  useEffectRateQoutesNewFn({ formData, setValueDFOD, setportnameFilterValue, settypeFilterValue, setsizeFilterValue, setequipmentFilterValue, minValue, maxValue, startdate, enddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, fscminValue, fscmaxValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue,EngagementFilterValue });

  const QuoteBodyTemplate: React.FC<any> = (rowData: string, index) => {
    const [hoveredQuoteId, setHoveredQuoteId] = useState<string | null>(null);

    const handleQuoteHover = (quoteId: string) => {
      setHoveredQuoteId(quoteId);
    };

    const handleQuoteLeave = () => {
      setHoveredQuoteId(null);
    };

    return (
      JSxSCopeIndex(rowData, data, handleQuoteHover, handleQuoteLeave, hoveredQuoteId, setModalStatus)
    );
  };

  const onColumnToggle = (event: { value: any; }) => {
    let selectedColumns = event.value;
    let orderedSelectedColumns = columns.filter((col) =>
      selectedColumns.some((sCol: { field: string; }) => sCol.field === col.field)
    );
    setVisibleColumns(orderedSelectedColumns);
  };

  const clearFilter = clearFilternewFunction({ formData, setcustomerLeadFilterValue, setrequestdateFiltervalue, setdispatcherFilterValue, setsalesrepFilterValue, setequipmentFilterValue, setquoteFilterValue, settypeFilterValue, setsizeFilterValue, setportnameFilterValue, setorigindestinationFilterValue, setfsctotalFilterValue, setdistanceorigindestinationFilterValue, setDateRange, setValueDFOD, setValueFSC, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setFirst, rateQuotesDataGet, token ,setStatusLeadFilterValue,setEngagementFilterValue});


  const handleDatePickerClose = handleDatePickerClosenewFunction(setValueFSC, setValueDFOD, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setFirst);

  const handleDateRangePickerClose = handleDateRangePickerClosenewFunction(setValueDFOD, setValueFSC, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setFirst);

  const handleDateRangeChange = handleDateRangeChangenewFunction({ setDateRange, setstartdate, setenddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, minValue, maxValue, fscminValue, fscmaxValue, dispatcherFilterValue, rateQuotesDataGet, token ,StatusLeadFilterValue,EngagementFilterValue});
  const handleKeyDown = handleKeyDownnewFunction();

  let quotesRateDetails: any = QuoteRateDetailsnewFunction(userData, quickNote);
  const [modalStatus, setModalStatus] = useState(false);
  const [hoveredPlan, setHoveredPlan] = useState(null);
  const handlePlanHover = (plan: SetStateAction<null>) => {
    setHoveredPlan(plan);
  };

  const handlePlanLeaveEvent = (e: any) => {
    setHoveredPlan(null);
  };

  const fallbackTableData = quickNote?.fallback_table_data;
  const fallbackMaxLinehaul = fallbackTableData?.base_linehaul_max;
  const quickNoteMaxRate = quickNote?.max_rate;


  let resultMaxRate: string = resultMaxRatenewFunction(isFiltered, fallbackTableData, fallbackMaxLinehaul, quickNoteMaxRate);




  let { resultAvgMin, resultChassis }: { resultAvgMin: string; resultChassis: string; } = resultChassisnewFunction(quickNote, quotesRateDetails, isFiltered);


  const header = headerNewFn({ modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter });

  const onPageChange = (event: any) => {
    let perpage = event.page + 1;
    setFirst(event.first);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, perpage, query);
  };

  const requestdatehandler = (date: string | number | ((prevState: null) => null) | Date | moment.Moment | (string | number)[] | moment.MomentInputObject | null | undefined) => {
    setrequestdateFiltervalue(date);
    let request_date = date ? moment(date)?.format("YYYY-MM-DD") : "";
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue,
      
    };
    rateQuotesDataGet(token, 1, query);
  };

  const spacehandler = (event: { which: number; target: { value: string; }; preventDefault: () => void; }) => {
    spacehandlerMod(event);
  };

  const euipmentLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setequipmentFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: e.target.value,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query);
  };

  const quoteLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setquoteFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: e.target.value,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query);
  };

  const customerLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setcustomerLeadFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: e.target.value,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };
    rateQuotesDataGet(token, 1, query);
  };
  const StatusLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setStatusLeadFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:e.target.value,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query);
  };
  const typeFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    settypeFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: e.target.value,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };
    rateQuotesDataGet(token, 1, query);
  };

  const sizeFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setsizeFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: e.target.value,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };
    rateQuotesDataGet(token, 1, query);
  };

  const portnameFilterChange = (e: { target: { value:any }; }) => {
    setportnameFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: e.target.value,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };
    rateQuotesDataGet(token, 1, query);
  };

  const origindestinationFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setorigindestinationFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: e.target.value,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };
    rateQuotesDataGet(token, 1, query);
  };

  const dispatcherFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setdispatcherFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      provided_by: dispatcherFilterValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };

    rateQuotesDataGet(token, 1, query);
  };

  const salesrepFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setsalesrepFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: e?.target?.value,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query);
  };
  const EngagementFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setEngagementFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      status:StatusLeadFilterValue,
      rate_count:e?.target?.value
    };
    rateQuotesDataGet(token, 1, query);
  };

  const customerLeadFilter = (
    <>
      <InputText
        keyfilter='alpha'
        className='form-control max-size '
        value={customerLeadFilterValue}
        onChange={customerLeadFilterChange}
        placeholder='Customer'
        onKeyDown={spacehandler}
      />
    </>
  );

  const typevsalue = [
    { name: "Select", value: "" },
    { name: "Rated", value: "Rated" },
    { name: "Open", value: "Open" },
  ];

  
  const statusFilter = (
    <>
    <Dropdown
     value={StatusLeadFilterValue}
     onChange={StatusLeadFilterChange}
      options={typevsalue}
      optionLabel='name'
       placeholder='Status'
      className='form-control max-size'
    />
     
    </>
  );
  const equipmentFilter = (
    <input
      type='text'
      className='form-control max-size'
      value={equipmentFilterValue}
      onChange={euipmentLeadFilterChange}
      placeholder='Equipment'
      onKeyDown={spacehandler}
    />
  );

  const quoteFilter = (
    <>
      <InputText
        keyfilter='int'
        className='form-control max-size1'
        value={quoteFilterValue}
        onChange={quoteLeadFilterChange}
        placeholder='Quote Id'
        onKeyDown={spacehandler}
      />
    </>
  );
  const typevalue = [
    { name: "Select", value: "" },
    { name: "Export", value: "export" },
    { name: "Import", value: "import" },
  ];

  const TypeFilter = (
    <Dropdown
      value={typeFilterValue}
      onChange={typeFilterChange}
      options={typevalue}
      optionLabel='name'
      placeholder='Type'
      className='form-control max-size'
    />
  );

  const SizeFilter = (
    <input
      type='text'
      className='form-control max-size1'
      value={sizeFilterValue}
      onChange={sizeFilterChange}
      placeholder='Size'
      onKeyDown={spacehandler}
    />
  );

  const portnameFilter = (
    <input
      type='text'
      className='form-control max-size '
      value={portnameFilterValue}
      onChange={portnameFilterChange}
      placeholder='Market'
      onKeyDown={spacehandler}
    />
  );
  const origindestinationFilter = (
    <input
      type='text'
      className='form-control max-size'
      value={origindestinationFilterValue}
      onChange={origindestinationFilterChange}
      placeholder='City'
      onKeyDown={spacehandler}
    />
  );

  const onSubmit = (formdata: any) => {
    setMinValue(formdata.minValue);
    setMaxValue(formdata.maxValue);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: formdata.minValue,
      miles_end_range: formdata.maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query);
  };

  const renderInputField = (name: string, placeholder: string | undefined, initialValue: string | number | string[] | null | undefined) => (
    <Controller
      name={name}
      control={controlDFOD}
      render={({ field }) => (
        <InputGroup>
          <InputNumber
          className="max-size"
            placeholder={placeholder}
            {...field}
            value={field.value}
            defaultValue={initialValue}
            onChange={(value) => field.onChange(value)}
          />
        </InputGroup>
      )}
    />
  );
  const RangeInputDFODfilterReset = () => {
    rateQuotesDataGet(token);
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setMinValue("");
    setMaxValue("");
    setFirst(1);
  };

  const RangeInputFSCfilterReset = () => {
    rateQuotesDataGet(token);
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
  };

  const distanceorigindestinationFilter = (
    <>
      <div style={{ display: "flex", gap: "5px" }}>
        <form onSubmit={handleSubmitDFOD(onSubmit)}>
          <div style={{ minWidth: "305px", display: "flex", gap: "5px" }}>
            {renderInputField("minValue", "Min Range", formData?.min)}
            <InputGroup.Addon>to</InputGroup.Addon>
            {renderInputField("maxValue", "Max Range", formData?.max)}

            <div className='minerror'>
              {errorsDFODMod(errorsDFOD)}
            </div>
            <div className='maxerror'>
              {errorsDFODMin(errorsDFOD)}
            </div>
            <button
              title='filter'
              className='filterbtn btn btn-primary btn-sm'
              type='submit'
            >
              <i className='pi pi-search'></i>
            </button>
          </div>
        </form>

        <button
          title='reset'
          onClick={RangeInputDFODfilterReset}
          className='filterbtn btn btn-primary btn-sm'
          type='submit'
        >
          <i className='pi pi- pi-sync'></i>
        </button>
      </div>
    </>
  );

  const onSubmitFSC = onSubmitFSCNew({ setfscminValue, setfscmaxValue, startdate, enddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue ,EngagementFilterValue});

  const fsctotalFilter = (
    <div style={{ display: "flex", gap: "5px" }}>
      <form onSubmit={handleSubmitFSC(onSubmitFSC)}>
        <div style={{ minWidth: "305px", display: "flex", gap: "5px" }}>
          <InputGroup>
            <Controller
              name='fscminValue'
              control={controlFSC}
              render={({ field }) => (
                <InputNumber
                  className="max-size"
                  placeholder='Min Range'
                  {...field}
                  value={field.value || ""}
                  onChange={(value) => field.onChange(value)}
                />
              )}
            />

            <InputGroup.Addon>to</InputGroup.Addon>

            <Controller
              name='fscmaxValue'
              control={controlFSC}
              render={({ field }) => (
                <InputNumber
                className="max-size"
                  placeholder='Max Range'
                  {...field}
                  value={field.value || ""}
                  onChange={(value) => field.onChange(value)}
                />
              )}
            />
          </InputGroup>
          <div className='minerror'>
            {errorsFSC.fscminValue && (
              <p style={{ fontSize: "12px", color: "red" }}>
                {errorsFSC.fscminValue.message}
              </p>
            )}
          </div>
          <div className='maxerror'>
            {errorsFSC.fscmaxValue && (
              <p style={{ fontSize: "12px", color: "red" }}>
                {errorsFSC.fscmaxValue.message}
              </p>
            )}
          </div>
          <button className='btn btn-primary btn-sm' type='submit'>
            <i
              className='pi pi-search
'
            ></i>
          </button>
        </div>
      </form>
      <button
        title='reset'
        onClick={RangeInputFSCfilterReset}
        className='filterbtn btn btn-primary btn-sm'
        type='submit'
      >
        <i className='pi pi- pi-sync'></i>
      </button>
    </div>
  );

  const dispatcherFilter = (
    <input
      type='text'
      className='form-control max-size'
      value={dispatcherFilterValue}
      onChange={dispatcherFilterChange}
      placeholder='Provided By'
      onKeyDown={spacehandler}
    />
  );

  const salesrepFilter = (
    <input
      type='text'
      className='form-control max-size'
      value={salesrepFilterValue}
      onChange={salesrepFilterChange}
      placeholder='Requested By'
      onKeyDown={spacehandler}
    />
  );
  const engagementtypevalue = [
    { name: "Select", value: "" },
    { name: " Low Engagement", value: "normal" },
    { name: "Moderate Engagement", value: "pro" },
    { name: "High Engagement", value: "premium" },
  ];


  const engagementsFilter = (
  
     <Dropdown
      value={EngagementFilterValue}
      onChange={EngagementFilterChange}
      options={engagementtypevalue}
      optionLabel='name'
      placeholder='Engagement'
      className='form-control max-size'
    />
  );
  const dateFilter = (
    <DatePicker
      format='MM-dd-yyyy'
      onClose={handleDatePickerClose}
      onKeyDown={handleKeyDown}
      onChange={requestdatehandler}
      value={requestdateFiltervalue}
      disabledDate={isDateDisabled}
       className='form-control-range max-size'
      placeholder='MM-DD-YYYY'
      
    />
  );

  const SalesRepBodyTemplate = (rowData: { sales_rep: any; is_gray: number; }) => {
    if (SalesRepBodyTemplateModData(rowData)) {
      return <p>N/A</p>;
    } else {
      return <p>

        {SalesRepBodyTemplateMod(rowData, data)}
      </p>;
    }
  };

  const TypeRepBodyTemplate = TypeRepBodyTemplateNewFn();

  const customerleadRepBodyTemplate = customerleadRepBodyTemplateNewFn(data);
  const statusTemplate = statusTempFun(data)
  const FscTotalBodyTemplate = FscTotalBodyTemplateNewFn(data);

  const RequestdateBodyTemplate = RequestdateBodyTemplateNewFn();
 const EngagementsBodyTemplate = EngagementsBodyTemplateNewFn()
  const Bodydistance_from_origin_destination = Bodydistance_from_origin_destinationNew();

  const DispatcherBodyTemplate = DispatcherBodyTemplateNew();
  const onSortChange = (e: any) => {
    onSortChangeScope(setSortField, e, setSortOrder, customSort);
  };

  const customSort = (field: any, order: any) => {
    customSortJsx(rateQuotesdata, order, field, setRateQuotesdata);
  };

  const rowClass = (userPremium: any) => {

    if (
      rowClassModClass(data)
    ) {
      return {
        "bg-danger4": userPremium.is_premium_quote === 1,
        "bg-gray4":
          gray4Mod(data, userPremium),
      };
    } else {
      return null;
    }
  };
  const { isCollapsed } = useCollapsed(); 

  return (
    <Layout>
      <Head>
        <title>Rate-Quotes - Draydex</title>
      </Head>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body rate_page'}`} >
        <div className='row page-titles mx-0'>
          <div className='col p-md-0'>
            <Breadcrumb breadcrumbs={props.breadcrumbs} />
          </div>
        </div>
        <div className='row'>
          <div className='col-12'>
            <>
              <div>
                <div className='userManaagementheader'>
                  <div className='form-group secDiv'>
                    {isloading && (
                      <div id='loader_table'>
                        <ScaleLoader color='#3180f3' className='table_loader' />
                      </div>
                    )}
                    <>
                      <div className='datatable-filter-demo'>
                        <div className='card table_height'>
                          <DataTable
                            rowClassName={rowClass}
                            lazy
                            filterDisplay='row'
                            ref={dt}
                            header={header}
                            value={rateQuotesdata}
                            paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport'
                            first={first}
                            rows={5}
                            sortField={sortField}
                            sortOrder={sortOrder}
                            onSort={onSortChange}
                            onPage={(e) => {
                              onPageChange(e);
                            }}
                            totalRecords={totalRecords}
                            className='p-datatable-customers'
                            emptyMessage='No record found.'
                          >
                            <Column
                              sortable
                              className='title_heading'
                              field='quote_id'
                              header='Quote#'
                              filter
                              filterElement={quoteFilter}
                              body={QuoteBodyTemplate}
                              filterPlaceholder='Search by Quote Id'
                            />
                            {visibleColumns.map((col) => {
                              const filterElementMap = {
                                customer_lead: customerLeadFilter,
                                status:statusFilter,
                                size: SizeFilter,
                                request_date: dateFilter,
                                type: TypeFilter,
                                equipment: equipmentFilter,
                                port_name: portnameFilter,
                                origin_destination: origindestinationFilter,
                                distance_from_origin_destination:
                                  distanceorigindestinationFilter,
                                fsc_total: fsctotalFilter,
                                dispatcher: dispatcherFilter,
                                sales_rep: salesrepFilter,
                                rate_count:engagementsFilter
                              };

                              const bodyTemplateMap = {
                                customer_lead: customerleadRepBodyTemplate,
                                status:statusTemplate,
                                type: TypeRepBodyTemplate,
                                sales_rep: SalesRepBodyTemplate,
                                dispatcher: DispatcherBodyTemplate,
                                fsc_total: FscTotalBodyTemplate,
                                request_date: RequestdateBodyTemplate,
                                rate_count:EngagementsBodyTemplate,
                                distance_from_origin_destination:
                                Bodydistance_from_origin_destination,
                              };

                              return (
                                <Column
                                  sortable
                                  key={col.field}
                                  field={col.field}
                                  header={col.header}
                                  filter
                                 
                                  filterElement={filterElementMap[col.field]}
                                  body={bodyTemplateMap[col.field]}
                                />
                              );
                            })}
                          </DataTable>

                          <Paginator
                            rows={10}
                            first={first}
                            totalRecords={totalRecords}
                            onPageChange={onPageChange}
                          />
                          <div className="pagination_footer">
                          <PaginationTitle first={first} totalRecords={totalRecords} perPageData={perPageDataShow}/>
                          <Paginator
                            rows={10}
                            first={first}
                            totalRecords={totalRecords}
                            onPageChange={onPageChange}
                          />
                        </div>
                        </div>
                      </div>
                    </>
                  </div>
                </div>
              </div>
            </>
          </div>
        </div>
      </div>
    </Layout>
  );
}
function gray4Mod(data: Session | null, userPremium: any) {
  return data?.user?.group_type === "carriers"
    ? userPremium.is_gray === 0 && data?.user?.is_premium === 0
    : "";
}

function rowClassModClass(data: Session | null) {
  return data?.user?.group_type === "super_admin" ||
    data?.user?.group_type === "carriers";
}

function SalesRepBodyTemplateModData(rowData: { sales_rep: any; is_gray: number; }) {
  return rowData.sales_rep === undefined || rowData.sales_rep === null;
}

function SalesRepBodyTemplateMod(rowData: { sales_rep: any; is_gray: number; }, data: Session | null) {
  return rowData?.is_gray === 0 && data?.user?.group_type === "carriers" && data?.user?.is_premium === 0 && rowData.sales_rep !== "N/A" ? rowData.sales_rep.charAt(0) + "*****" : rowData.sales_rep;
}

function errorsDFODMin(errorsDFOD) {
  return errorsDFOD.maxValue && (
    <p style={{ fontSize: "12px", color: "red" }}>
      {errorsDFOD.maxValue.message}
    </p>
  );
}

function errorsDFODMod(errorsDFOD) {
  return errorsDFOD.minValue && (
    <p style={{ fontSize: "12px", color: "red" }}>
      {errorsDFOD.minValue.message}
    </p>
  );
}

function spacehandlerMod(event: { which: number; target: { value: string; }; preventDefault: () => void; }) {
  if (event.which === 32 && event.target.value.trim() === "") {
    event.preventDefault();
  }
}

function resultChassisnewFunction(quickNote: undefined, quotesRateDetails: any, isFiltered: boolean) {
  let resultAvgMin: string = resultAvgMinnewFunction(quickNote, quotesRateDetails, isFiltered);



  // Get the fallback chasis per day if available
  const fallbackChasisPerDay = quickNote?.fallback_table_data?.chasis_per_day;

  // Get the average chasis rate from quotesRateDetails
  const avgChasis = quotesRateDetails?.avg_chasis;



  let resultChassis: string;

  // Check if filtering is applied
  if (isFiltered) {
    // Check if fallbackChasisPerDay has a valid value
    if (fallbackChasisPerDay !== undefined && fallbackChasisPerDay !== null) {
      resultChassis = `$${fallbackChasisPerDay}`;
    } else {
      // Check if avgChasis has a valid value
      if (avgChasis !== undefined && avgChasis !== null) {
        resultChassis = `$${avgChasis}`;
      } else {
        resultChassis = 'N/A';
      }
    }
  } else {
    resultChassis = 'N/A';
  }
  return { resultAvgMin, resultChassis };
}

function resultAvgMinnewFunction(quickNote: undefined, quotesRateDetails: any, isFiltered: boolean) {
  const fallbackData = quickNote?.fallback_table_data?.base_linehaul_min;
  const minRate = quotesRateDetails?.min_rate;

  let resultAvgMin: string;

  if (isFiltered) {
    if (fallbackData !== undefined && fallbackData !== null) {
      resultAvgMin = `$${fallbackData}`;
    } else if (minRate !== undefined && minRate !== null) {
      resultAvgMin = `$${minRate}`;
    } else {
      resultAvgMin = 'N/A';
    }
  } else {
    resultAvgMin = 'N/A';
  }
  return resultAvgMin;
}

function resultMaxRatenewFunction(isFiltered: boolean, fallbackTableData: any, fallbackMaxLinehaul: any, quickNoteMaxRate: any) {
  let resultMaxRate: string;

  // Check if the filtering condition is applied
  if (isFiltered) {
    // Check if fallbackTableData is available
    if (fallbackTableData) {
      // Check if fallbackMaxLinehaul has a valid value
      if (fallbackMaxLinehaul !== undefined && fallbackMaxLinehaul !== null) {
        resultMaxRate = `$${fallbackMaxLinehaul}`;
      } else {
        resultMaxRate = 'N/A';
      }
    } else {
      // Check if quickNoteMaxRate has a valid value
      if (quickNoteMaxRate !== undefined && quickNoteMaxRate !== null) {
        resultMaxRate = `$${quickNoteMaxRate}`;
      } else {
        resultMaxRate = 'N/A';
      }
    }
  } else {
    resultMaxRate = 'N/A';
  }
  return resultMaxRate;
}

function QuoteRateDetailsnewFunction(userData: undefined, quickNote: undefined) {
  let quotesRateDetails: any;
  if (userData?.ViewRateQuoteAverages) {
    quotesRateDetails = {
      avg_rate: quickNote?.avg_rate,
      max_rate: quickNote?.max_rate,
      min_rate: quickNote?.min_rate,
      avg_chasis: quickNote?.avg_chasis,
      max_chasis: quickNote?.max_chasis,
      min_chasis: quickNote?.min_chasis,
      min_assosorial: quickNote?.min_assosorial,
      max_assosorial: quickNote?.max_assosorial,
      avg_assosorial: quickNote?.avg_assosorial,
    };
  } else {
    quotesRateDetails = {
      avg_rate: 0,
      max_rate: 0,
      min_rate: 0,
      avg_chasis: 0,
      max_chasis: 0,
      min_chasis: 0,
      min_assosorial: 0,
      max_assosorial: 0,
      avg_assosorial: 0,
    };
  }
  return quotesRateDetails;
}

function handleKeyDownnewFunction() {
  return (e: { preventDefault: () => void; }) => {
    e.preventDefault();
  };
}

function handleDateRangeChangenewFunction({ setDateRange, setstartdate, setenddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, minValue, maxValue, fscminValue, fscmaxValue, dispatcherFilterValue, rateQuotesDataGet, token ,StatusLeadFilterValue,EngagementFilterValue}: { setDateRange: any; setstartdate: any; setenddate: any; equipmentFilterValue: string; quoteFilterValue: string; customerLeadFilterValue: string; request_date_filter: string; typeFilterValue: string; sizeFilterValue: string; portnameFilterValue: any; distanceorigindestinationFilterValue: string; fsctotalFilterValue: string; origindestinationFilterValue: string; minValue: any; maxValue: any; fscminValue: string; fscmaxValue: string; dispatcherFilterValue: string; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null) => void; token: any;StatusLeadFilterValue:any; EngagementFilterValue:any }) {
  return (value: moment.MomentInput[]) => {
    setDateRange(value);

    let start_date = value && value[0] ? moment(value[0])?.format("YYYY-MM-DD") : "";

    let end_date = value && value[1] ? moment(value[1])?.format("YYYY-MM-DD") : "";
    setstartdate(start_date);
    setenddate(end_date);

    const query = {
      start_date: start_date,
      end_date: end_date,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };

    rateQuotesDataGet(token, 1, query);
  };
}

function handleDateRangePickerClosenewFunction(setValueDFOD:any, setValueFSC:any, setMinValue:any, setMaxValue:any, setfscminValue: any, setfscmaxValue: any, setFirst:any) {
  return () => {
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setMinValue("");
    setMaxValue("");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
  };
}

function handleDatePickerClosenewFunction(setValueFSC, setValueDFOD, setMinValue: { (value: SetStateAction<string | string[] | undefined>): void; (arg0: string): void; }, setMaxValue: { (value: SetStateAction<string | string[] | undefined>): void; (arg0: string): void; }, setfscminValue: { (value: SetStateAction<string>): void; (arg0: string): void; }, setfscmaxValue: { (value: SetStateAction<string>): void; (arg0: string): void; }, setFirst: { (value: SetStateAction<number>): void; (arg0: number): void; }) {
  return () => {
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setMinValue("");
    setMaxValue("");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
  };
}

function clearFilternewFunction({ formData, setcustomerLeadFilterValue, setrequestdateFiltervalue, setdispatcherFilterValue, setsalesrepFilterValue, setequipmentFilterValue, setquoteFilterValue, settypeFilterValue, setsizeFilterValue, setportnameFilterValue, setorigindestinationFilterValue, setfsctotalFilterValue, setdistanceorigindestinationFilterValue, setDateRange, setValueDFOD, setValueFSC, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setFirst, rateQuotesDataGet, token,setStatusLeadFilterValue,setEngagementFilterValue }: { formData: ParsedUrlQuery; setcustomerLeadFilterValue: any; setrequestdateFiltervalue: any; setdispatcherFilterValue: any; setsalesrepFilterValue: any; setequipmentFilterValue: any; setquoteFilterValue: any; settypeFilterValue: any; setsizeFilterValue: any; setportnameFilterValue: any; setorigindestinationFilterValue: any; setfsctotalFilterValue: any; setdistanceorigindestinationFilterValue: any; setDateRange: any; setValueDFOD: any; setValueFSC: any; setMinValue: any; setMaxValue: any; setfscminValue: any; setfscmaxValue: any; setFirst: any; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null) => void; token: any;setStatusLeadFilterValue:any;setEngagementFilterValue:any }) {
  return () => {
    formData.original_val = '';
    setcustomerLeadFilterValue("");
    setEngagementFilterValue("");
    setrequestdateFiltervalue(null);
    setdispatcherFilterValue("");
    setsalesrepFilterValue("");
    setequipmentFilterValue("");
    setquoteFilterValue("");
    setcustomerLeadFilterValue("");
    settypeFilterValue("");
    setStatusLeadFilterValue("");
    setsizeFilterValue("");
    setportnameFilterValue("");
    setorigindestinationFilterValue("");
    setfsctotalFilterValue("");
    setdistanceorigindestinationFilterValue("");
    setDateRange(null);
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setMinValue("");
    setMaxValue("");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
    rateQuotesDataGet(token);
    formData.original_val = '';
  };
}


function useEffectRateQoutesNewFn({ formData, setValueDFOD, setportnameFilterValue, settypeFilterValue, setsizeFilterValue, setequipmentFilterValue, minValue, maxValue, startdate, enddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, fscminValue, fscmaxValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue,EngagementFilterValue }: { formData: ParsedUrlQuery; setValueDFOD: any; setportnameFilterValue: any; settypeFilterValue: any; setsizeFilterValue: any; setequipmentFilterValue: any; minValue: any; maxValue: any; startdate: string; enddate: string; equipmentFilterValue: string; quoteFilterValue: string; customerLeadFilterValue: string; request_date_filter: string; typeFilterValue: string; sizeFilterValue: string; portnameFilterValue: any; distanceorigindestinationFilterValue: string; fsctotalFilterValue: string; origindestinationFilterValue: string; fscminValue: string; fscmaxValue: string; salesrepFilterValue: string; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null) => void; token: string | null | undefined;StatusLeadFilterValue:any;EngagementFilterValue:any }) {
  useEffect(() => {
    if (formData?.min !== null &&
      formData?.max !== undefined &&
      formData?.port !== undefined) {
      setValueDFOD("minValue", formData?.min);
      setValueDFOD("maxValue", formData?.max);
      setportnameFilterValue(formData?.port);
      settypeFilterValue(formData?.type);
      setsizeFilterValue(formData?.size);
      setequipmentFilterValue(formData?.equipment);
      const query = {
        miles_start_range: minValue,
        miles_end_range: maxValue,
        start_date: startdate,
        end_date: enddate,
        equipment: equipmentFilterValue,
        quote: quoteFilterValue,
        customer_lead: customerLeadFilterValue,
        request_date: request_date_filter,
        type: typeFilterValue,
        size: sizeFilterValue,
        port: portnameFilterValue,
        distance_from_origin_destination: distanceorigindestinationFilterValue,
        linehaul_fsc_total: fsctotalFilterValue,
        city: origindestinationFilterValue,
        miles_start_range: minValue,
        miles_end_range: maxValue,
        linehaul_fsc_total_start_range: fscminValue,
        linehaul_fsc_total_end_range: fscmaxValue,
        sales_rep: salesrepFilterValue,
        status:StatusLeadFilterValue,
        rate_count:EngagementFilterValue

      };
      rateQuotesDataGet(token, 1, query);
    } else {
      const query = {
        equipment: formData.equipment,
        size: formData.size,
        port: formData.port,
        city: origindestinationFilterValue,
        type: typeFilterValue,
        status:StatusLeadFilterValue,
        rate_count:EngagementFilterValue
      };
      rateQuotesDataGet(token, 1, query);
    }
  }, [formData?.min, token]);
}

function rateQuotesDataGetnewFunction(setIsloading: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }, formData: ParsedUrlQuery, setIsFiltered: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }, setQuickNotes: { (value: SetStateAction<undefined>): void; (arg0: any): void; }, setTotalRecords: { (value: SetStateAction<number>): void; (arg0: any): void; }, setRateQuotesdata: { (value: SetStateAction<undefined>): void; (arg0: any): void; }, setPerPageDataShow: any) {
  return (
    access_token: string | null = null,
    pageno: any = null,
    query: any  = null
  ) => {
    setIsloading(true);
    let Original = formData?.original_val;
    const queryparamdata = {
      start_date: query?.start_date,
      end_date: query?.end_date,
      equipment: query?.equipment,
      size: query?.size,
      distance_from_origin_destination: query?.distance_from_origin_destination,
      linehaul_fsc_total: query?.linehaul_fsc_total,
      type: query?.type,
      customer_lead: query?.customer_lead,
      quote: query?.quote,
      port_name: query?.port,
      request_date: query?.request_date,
      origin_destination: query?.city,
      miles_start_range: query?.miles_start_range,
      miles_end_range: query?.miles_end_range,
      linehaul_fsc_total_start_range: query?.linehaul_fsc_total_start_range,
      linehaul_fsc_total_end_range: query?.linehaul_fsc_total_end_range,
      sales_rep: query?.sales_rep,
      provided_by: query?.query,
      original_val: Original,
      status:query?.status,
      rate_count:query?.rate_count
    };

    const queryparm = Object.entries(queryparamdata)
      .map(([key, value]) => `${key}=${value || ""}`)
      .join("&");

    function isAllEmptyOrUndefined(obj: { [s: string]: unknown; } | ArrayLike<unknown>) {
      const values = Object.values(obj);
      const allEmpty = values.every(value => value === '' || value === null || value === undefined);
      return !allEmpty;
    }

    setIsFiltered(isAllEmptyOrUndefined(queryparamdata));

    CarrierTableAll(access_token, pageno, queryparm).then((response) => {
      if (response?.status === "success") {
        setIsloading(false);
        setQuickNotes(response?.quick_qoutes);
        setTotalRecords(response?.meta?.total);
        setPerPageDataShow(response?.meta?.per_page);
        const filteredData = response?.data?.filter(
          (item: { is_deleted: number; }) => item.is_deleted === 0
        );
        setRateQuotesdata(filteredData);
      } else {
        setIsloading(false);
      }
    });
  };
}

function JSxSCopeIndex(rowData: string, data: Session | null, handleQuoteHover: (quoteId: string) => void, handleQuoteLeave: () => void, hoveredQuoteId: string | null, setModalStatus: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }) {
  return <>
    {rowData.is_gray === 0 && data?.user?.group_type === "carriers" && data?.user?.is_premium === 0 ? (
      <div
        onMouseOver={() => handleQuoteHover(rowData.quote_id)}
        onMouseLeave={handleQuoteLeave}
        style={{ display: "inline-flex", position: "relative" }}
      >
        <p>{rowData?.quote_id}</p>
        {hoveredQuoteId === rowData.quote_id && data?.user?.is_child !== 1 && (
          <div
            className='hover-box'
            className='dropdown-menu show dropdown-menu-light-check available'
          >
            <a
              href='#'
              className='dropdown-item'
              role='button'
              tabIndex={0}
              onClick={() => setModalStatus(true)}
            >
              Available in Draydex Premium
            </a>
          </div>
        )}
      </div>
    ) : (
      <Link href={`rate-quotes/${rowData.quote_id}`}>
        {rowData?.quote_id}
      </Link>
    )}
    {rowData?.is_star === 1 && (
      <Image
        style={{ height: "21px", width: "39px" }}
        src={star}
        alt='Star' />
    )}
  </>;
}

function headerNewFn({ modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter }: { modalStatus: boolean; setModalStatus: any; data: any; isFiltered: boolean; handlePlanLeaveEvent: (e: any) => void; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; resultChassis: string; quotesRateDetails: any; dateRange: null; handleDateRangePickerClose: () => void; isDateDisabled: (date: any) => boolean; handleKeyDown: (e: any) => void; handleDateRangeChange: (value: any) => void; columns: { field: string; header: string; }[]; onColumnToggle: (event: any) => void; visibleColumns: { field: string; header: string; }[]; clearFilter: () => void; }) {
  return headerNewFnInnerFunction({ modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter });
}

function headerNewFnInnerFunction({ modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter }: { modalStatus: boolean; setModalStatus: any; data: any; isFiltered: boolean; handlePlanLeaveEvent: (e: any) => void; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; resultChassis: string; quotesRateDetails: any; dateRange: null; handleDateRangePickerClose: () => void; isDateDisabled: (date: any) => boolean; handleKeyDown: (e: any) => void; handleDateRangeChange: (value: any) => void; columns: { field: string; header: string; }[]; onColumnToggle: (event: any) => void; visibleColumns: { field: string; header: string; }[]; clearFilter: () => void; }) {
  return <>
   <div className='table-header-Engagement'>
   <h3 className=''>Engagement</h3></div>
   <div className="clear-engage">

<div>   
  <MultiSelect
            maxSelectedLabels={0}
            optionLabel='header'
            options={columns}
            placeholder='Edit View'
            selectedItemsLabel='Edit View'
            onChange={onColumnToggle}
            value={visibleColumns}
            className={`${styles.MultiSelect} w-full sm:w-20rem divStylecss`} /></div>
            <div> <Button
          
          className="divStylecss-clear divStylecss-update"
           type='button'
           icon='pi pi-filter-slash'
           label='Clear'
           onClick={clearFilter} /></div>
   </div>
   

         
            
  </>;

  function HeaderThirdInnerNewFn() {
    return <div className='table-header'>
      <h3>ACTIVE / RECENT SPOT QUOTES</h3>
      <div className='d-flex justify-content-start'>
        <div className='recent_quote'>
          <span className='p-input-icon-left'>
            <i className='pi pi-search' />
            <div className='custom-calendar-container'>
              <DateRangePicker
                format='MM/dd/yyyy'
                value={dateRange}
                onClose={handleDateRangePickerClose}
                disabledDate={isDateDisabled}
                size='lg'
                placeholder='Select Date Range'
                onKeyDown={handleKeyDown}
                onChange={handleDateRangeChange}
                className='datepickermultiselect' />
            </div>
          </span>
          <MultiSelect
            maxSelectedLabels={1}
            optionLabel='header'
            options={columns}
            placeholder='Edit View'
            selectedItemsLabel='Edit View'
            onChange={onColumnToggle}
            value={visibleColumns}
            className='w-full sm:w-20rem divStylecss' />
          <Button
           className="divStylecss-clear divStylecss-update"
            type='button'
            icon='pi pi-filter-slash'
            label='Clear'
            onClick={clearFilter} />
        </div>
      </div>
    </div>;
  }
}

function SecondInnerNewFn() {
  return <div className="icon-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', position: "relative", height: '100%', margin: '30px', padding: '6px' }}>
    <span style={{ marginRight: '6px', color: 'orange', fontSize: '15px' }}>*The results will vary based on the applied filters.</span>
    <i className="bi bi-info-circle-fill"></i>
  </div>;
}

function newFunctionInnerhandled({ handlePlanLeaveEvent, data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, setModalStatus, resultChassis, quotesRateDetails }: { handlePlanLeaveEvent: (e: any) => void; data: any; isFiltered: boolean; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; setModalStatus: any; resultChassis: string; quotesRateDetails: any; }) {
  return <div onMouseLeave={() => handlePlanLeaveEvent()} className='border-box' style={{ justifyContent: 'space-between' }}>
    {ThirdInnerHandlednewFunction({ data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, handlePlanLeaveEvent, setModalStatus })}

    {SecondInnerHandledNewFn({ data, handlePlanHover, resultChassis, isFiltered, quotesRateDetails, hoveredPlan, handlePlanLeaveEvent, setModalStatus })}

    {FirstInnderHandledNewFn(handlePlanHover, data, isFiltered, quotesRateDetails, hoveredPlan, handlePlanLeaveEvent, setModalStatus)}
  </div>;
}

function ThirdInnerHandlednewFunction({ data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, handlePlanLeaveEvent, setModalStatus }: { data: any; isFiltered: boolean; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; handlePlanLeaveEvent: (e: any) => void; setModalStatus: any; }) {
  let tooltipText;

  if (isFiltered) {
    if (quickNote?.avgCostText === "[] / 0") {
      tooltipText = "Record not found";
    } else {
      tooltipText = quickNote?.avgCostText;
    }
  } else {
    tooltipText = "N/A";
  }
 return <div>
    <div style={{ display: "flex", gap: '20px' }}>
      <h2 className='box-heading'>Avg. Spot Carrier Rate w/Fuel</h2>

      {data?.user?.is_super_admin === 1 && (
        <i
          style={{
            fontSize: '15px',
            position: 'relative',
            top: '10px',
            cursor: 'pointer',
            color: 'black',
            textShadow: '0.5px 0.5px 0 rgba(0,0,0,0.3), -0.5px -0.5px 0 rgba(0,0,0,0.3), 0.5px -0.5px 0 rgba(0,0,0,0.3), -0.5px 0.5px 0 rgba(0,0,0,0.3)'
          }}
          className="bi bi-info-circle"
          data-pr-tooltip={tooltipText} 
                   />
      )}

      <div><Tooltip target=".bi" /></div>
    </div>

    <div
      className={ModClass(data)}
      onMouseOver={() => handlePlanHover("avg_rate")}
    >
      <div>
        <div>
          <p className='box-head'>{isFiltered && quickNote?.fallback_avg_rate ? `$${quickNote?.fallback_avg_rate}` : 'N/A'}</p>
          <div>
            <p className='box-paragraph'>
              Max: {resultMaxRate ?? 'N/A'}
            </p>
            <p className='box-paragraph'>
              Min: {resultAvgMin ?? 'N/A'}
            </p>
          </div>
        </div>
      </div>
    </div>
    {hoveredPlan === "avg_rate" &&
      toCheckUserTypeSubscreption(data) && data?.user?.is_child !== 1 &&
      "free" && (
        <div
          onMouseLeave={() => handlePlanLeaveEvent()}
          className='hover-box '
          style={{ top: "70px" }}
          onClick={() => setModalStatus(true)}
          x-placement='bottom-start'
          aria-labelledby='nav-dropdown'
          className='dropdown-menu show dropdown-menu-light'
          data-popper-reference-hidden='false'
          data-popper-escaped='false'
          data-popper-placement='bottom-start'
          bis_skin_checked='1'
        >
          <a
            data-rr-ui-dropdown-item=''
            class='dropdown-item'
            role='button'
            tabindex='0'
            href='#'
          >
            Available in Draydex Premium
          </a>
        </div>
      )}
  </div>;
}

function SecondInnerHandledNewFn({ data, handlePlanHover, resultChassis, isFiltered, quotesRateDetails, hoveredPlan, handlePlanLeaveEvent, setModalStatus }: { data: any; handlePlanHover: (plan: any) => void; resultChassis: string; isFiltered: boolean; quotesRateDetails: any; hoveredPlan: null; handlePlanLeaveEvent: (e: any) => void; setModalStatus: any; }) {
  return <div>
    <h2 className='box-heading'>Avg. Spot Carrier Chassis $/day</h2>
    <div
      className={`gapping user_subscreption_${toCheckUserTypeSubscreption(data) && "free"}`}
    >
      <div onMouseOver={() => handlePlanHover("avg_chassis")}>
        <p className='box-head'>{resultChassis ?? 'N/A'}</p>
        <div>
          <p className='box-paragraph'>
            Max : {isFiltered && quotesRateDetails?.max_chasis ? `$${quotesRateDetails?.max_chasis}` : 'N/A'}
          </p>
          <p className='box-paragraph'>
            Min : {isFiltered && quotesRateDetails?.min_chasis ? `$${quotesRateDetails?.min_chasis}` : 'N/A'}
          </p>
        </div>
      </div>
    </div>
    {hoveredPlan === "avg_chassis" &&
      toCheckUserTypeSubscreption(data) && data?.user?.is_child !== 1 &&
      "free" && (
        <div
          onMouseLeave={() => handlePlanLeaveEvent()}
          className='hover-box'
          style={{ top: "70px" }}
          onClick={() => setModalStatus(true)}
          x-placement='bottom-start'
          aria-labelledby='nav-dropdown'
          className='dropdown-menu show dropdown-menu-light'
          data-popper-reference-hidden='false'
          data-popper-escaped='false'
          data-popper-placement='bottom-start'
          bis_skin_checked='1'
        >
          <a
            data-rr-ui-dropdown-item=''
            class='dropdown-item'
            role='button'
            tabindex='0'
            href='#'
          >
            Available in Draydex Premium
          </a>
        </div>
      )}
  </div>;
}

function FirstInnderHandledNewFn(handlePlanHover: (plan: any) => void, data: any, isFiltered: boolean, quotesRateDetails: any, hoveredPlan: null, handlePlanLeaveEvent: (e: any) => void, setModalStatus: any) {
  return <div>
    <div className='right-column position-relative'>
      <h2 className='box-heading'>Common Accessorial Fee Averages</h2>

      <div
        onMouseOver={() => handlePlanHover("common_accessorial")}
        className={`box-heading user_subscreption_${toCheckUserTypeSubscreption(data) && "free"}`}
      >
        <p className='box-paragraph'>
          Detention/HR: {isFiltered && quotesRateDetails?.min_assessorial ? `$${quotesRateDetails?.min_assessorial}` : 'N/A'}
        </p>
        <p className='box-paragraph'>
          Overweight: {isFiltered && quotesRateDetails?.max_assessorial ? `$${quotesRateDetails?.max_assessorial}` : 'N/A'}
        </p>
        <p className='box-paragraph'>
          Yard Storage: {isFiltered && quotesRateDetails?.avg_assessorial ? `$${quotesRateDetails?.avg_assessorial}` : 'N/A'}
        </p>
      </div>
      {hoveredPlan === "common_accessorial" &&
        toCheckUserTypeSubscreption(data) && data?.user?.is_child !== 1 &&
        "free" && (
          <div onMouseLeave={() => handlePlanLeaveEvent()}>
            <div
              onMouseLeave={() => handlePlanLeaveEvent()}
              className='hover-box'
              style={{ position: "relative" }}
              onClick={() => setModalStatus(true)}
              x-placement='bottom-start'
              aria-labelledby='nav-dropdown'
              className='dropdown-menu show dropdown-menu-light'
              data-popper-reference-hidden='false'
              data-popper-escaped='false'
              data-popper-placement='bottom-start'
              bis_skin_checked='1'
            >
              <a
                data-rr-ui-dropdown-item=''
                class='dropdown-item'
                role='button'
                tabindex='0'
                href='#'
              >
                Available in Draydex Premium
              </a>
            </div>
          </div>
        )}
    </div>
  </div>;
}

function TypeRepBodyTemplateNewFn() {
  return (rowData: any) => {
    if (rowData.type === undefined || rowData.type === null) {
      return <p>N/A</p>;
    } else {
      return <p className='TypeRepBodyTemplateCss'>{rowData.type}</p>;
    }
  };
}

function customerleadRepBodyTemplateNewFn(data: Session | null) {
  return (rowData: { customer_lead: string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<AwaitedReactNode> | null | undefined; is_gray: number; }) => {
    if (rowData.customer_lead === undefined || rowData.customer_lead === null) {
      return <p>Admin</p>;
    } else {
      return (

        <p className='TypeRepBodyTemplateCss'>
          {rowData?.is_gray === 0 && data?.user?.group_type === "carriers" && data?.user?.is_premium === 0 && rowData?.customer_lead !== "N/A" ? rowData.customer_lead.charAt(0) + "*****" : rowData.customer_lead}
        </p>
      );

    }
  };
}
function statusTempFun(data) {
  return (rowData) => {
    if (rowData.status === undefined || rowData.status === null) {
      return <p>N/A</p>;
    } else {
      let statusClass = ""; 

      // Determine the status class
      if (rowData?.status === "Rated") {
        statusClass = "status-green";
      } else if (rowData?.status === "Open") {
        statusClass = "status-red";
      }

      return (
        <p className={`TypeRepBodyTemplateCss ${statusClass}`}>
          {rowData?.status}
        </p>
      );
    }
  };
}


function FscTotalBodyTemplateNewFn(data: Session | null) {
  return (rowData: { linehaul_fsc_total: string | null | undefined; is_gray: number; }) => {
    if (rowData?.linehaul_fsc_total === undefined ||
      rowData?.linehaul_fsc_total === null ||
      rowData?.linehaul_fsc_total === "N/A") {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      const fscTotal = parseFloat(rowData.linehaul_fsc_total).toFixed(2);
      return (
        <>
          <p>
            {rowData?.is_gray === 0 && data?.user?.group_type === "carriers" && fscTotal !== "N/A" && data?.user?.is_premium === 0
              ? "$" +

              fscTotal.replace(/\d/g, '*')
              : "$" + fscTotal}
          </p>
        </>
      );
    }

  };
}

function RequestdateBodyTemplateNewFn() {
  return (rowData: { request_date: moment.MomentInput; }) => {
    if (rowData?.request_date === undefined || rowData?.request_date === null) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      return (
        <>
          <p>
            {rowData ? moment(rowData?.request_date)?.format("MM-DD-YYYY") : ""}
          </p>
        </>
      );
    }
  };
}
function EngagementsBodyTemplateNewFn() {
  return (rowData: any) => {
    const rateCount = rowData?.rate_count;

    let colorClass = '';
    if (rateCount > 3) {
      colorClass = 'green';
    } else if (rateCount >= 2 && rateCount <= 3) {
      colorClass = 'yellow'; 
    } else if (rateCount < 2) {
      colorClass = 'red'; 
    }

    return (
      <p className={colorClass}>
        {rateCount !== undefined && rateCount !== null ? rateCount : 'N/A'}
      </p>
    );
  };
}


function Bodydistance_from_origin_destinationNew() {
  return (rowData: { distance_from_origin_destination: any; }) => {
    const distance = Number(rowData?.distance_from_origin_destination);

    if (isNaN(distance) || distance === null) {
      return <p>N/A</p>;
    } else {
      return <p>{distance.toFixed(2)}</p>;
    }
  };
}

function DispatcherBodyTemplateNew() {
  return (rowData: { dispatcher: string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<AwaitedReactNode> | null | undefined; }) => {
    if (rowData?.dispatcher === undefined || rowData?.dispatcher === null ) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      return (
        <>
          <p>{rowData?.dispatcher}</p>
        </>
      );
    }
  };
}

function onSubmitFSCNew({ setfscminValue, setfscmaxValue, startdate, enddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue,EngagementFilterValue }: { setfscminValue: any; setfscmaxValue: any; startdate: string; enddate: string; equipmentFilterValue: string; quoteFilterValue: string; customerLeadFilterValue: string; request_date_filter: string; typeFilterValue: string; sizeFilterValue: string; portnameFilterValue: any; distanceorigindestinationFilterValue: string; fsctotalFilterValue: string; origindestinationFilterValue: string; salesrepFilterValue: string; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null) => void; token: any; StatusLeadFilterValue:any,EngagementFilterValue:any}) {
  return (datapayload: any) => {
    setfscminValue(datapayload.fscminValue);
    setfscmaxValue(datapayload.fscmaxValue);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: datapayload.minValue,
      miles_end_range: datapayload.maxValue,
      linehaul_fsc_total_start_range: datapayload.fscminValue,
      linehaul_fsc_total_end_range: datapayload.fscmaxValue,
      sales_rep: salesrepFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue

    };
    rateQuotesDataGet(token, 1, query);
  };
}

function onSortChangeScope(setSortField: { (value: SetStateAction<null>): void; (arg0: any): void; }, e: any, setSortOrder: { (value: SetStateAction<null>): void; (arg0: any): void; }, customSort: (field: any, order: any) => void) {
  setSortField(e.sortField);
  setSortOrder(e.sortOrder);
  customSort(e.sortField, e.sortOrder);
}

function customSortJsx(rateQuotesdata: undefined, order: any, field: any, setRateQuotesdata: { (value: SetStateAction<undefined>): void; (arg0: any[]): void; }) {
  const sortedData = [...rateQuotesdata];
  sortedData.sort((a, b) => {
    if (order === 1) {      
      return a[field] > b[field] ? 1 : -1;
    } else {
      return b[field] > a[field] ? 1 : -1;
    }
  });
  
  setRateQuotesdata(sortedData);
}

function ModClass(data: any): string | undefined {
  return `gapping user_subscreption_${toCheckUserTypeSubscreption(data) && "free"}`;
}

function request_date_filter_Mod(requestdateFiltervalue: null) {
  return requestdateFiltervalue
    ? moment(requestdateFiltervalue)?.format("YYYY-MM-DD")
    : "";
}

export async function getServerSideProps(context: any) {
  const session = await getServerSession(context.req, context.res, authOptions);
  const [averagePortRamp] = await Promise.all([
    await getRateQuotess(session?.user?.image),
  ]);

  if (
    averagePortRamp.status === "error" ||
    averagePortRamp.status_code === 401
  ) {
    const { res } = context;
    res.writeHead(301, { Location: "/login" });
    res.end();
    return {
      props: {
        breadcrumbs: [],
        dataQuotes: [],
      },
    };
  }
  return {
    props: {
      breadcrumbs: [
       
      ],
      dataQuotes: averagePortRamp.data,
    },
  };
}

export default ProtectedRoute(engagement as any);