import { useEffect, useState } from "react"; import Dashboard from "../../pages/Dashboard/Dashboard"; import Select from "react-select"; import { useLocation, useNavigate } from "react-router-dom"; import { customStylesAccUser, firstCharUpperCase, selectThemeUser, } from "../../Utils/common"; import { getMonthYearOptions, hotelTouristMonthlySection, parseJSONSafe, validateFormData, validateTableFields, } from "./visitorTrackingUtils"; import { editUserVistingTrackingData, getHotelDistrict, getStates, } from "../../services/api/user"; import { useLanguage } from "../LanguageProvider/LanguageProvider "; import { Message } from "../message"; import { getCountryOptions } from "../../Utils/locationOptions"; /* ================= UTILS ================= */ const sumColumn = (rows = [], key) => { if (!Array.isArray(rows)) return ""; let total = 0; let hasValue = false; rows.forEach((row) => { const val = Number(row?.[key]); if (!isNaN(val)) { total += val; hasValue = true; } }); return hasValue ? total : ""; }; const preventInvalidNumberKeys = (e) => { if (["-", "e", "E", "+"].includes(e.key)) { e.preventDefault(); } }; const parseMonthYear = (value) => { if (!value) return {}; const [month, year] = value.split(","); return { report_month: Number(month), report_year: Number(year), }; }; /* ================= COMPONENT ================= */ const EditVisitorTracking = () => { const { language } = useLanguage(); const navigate = useNavigate(); const { state } = useLocation(); const isEditMode = !!state?.rowData; const [formData, setFormData] = useState({}); const [errors, setErrors] = useState({}); const [districtId, setDistrictId] = useState(null); const [categoryId, setCategoryId] = useState(null); const [usedMonths, setUsedMonths] = useState([]); const [apiMessage, setApiMessage] = useState({ type: "", message: "" }); const [stateOptions, setStateOptions] = useState([]); const [countryOptions, setCountryOptions] = useState([]); /* ================= INIT ================= */ // EDIT MODE INIT useEffect(() => { if (!isEditMode) return; const indianRows = parseJSONSafe(state.rowData.indian_tourist_details); const foreignerRows = parseJSONSafe( state.rowData.foreigner_tourist_details ); setDistrictId(state.rowData.district_id); setCategoryId(state.rowData.category_id); setFormData({ ...state.rowData, report_month_year: `${state.rowData.report_month},${state.rowData.report_year}`, indian_tourist_details: indianRows, foreigner_tourist_details: foreignerRows, monthy_total_tourists_indian: sumColumn(indianRows, "number_of_tourists"), monthy_nghts_spent_indian: sumColumn(indianRows, "bed_nights_spent"), monthy_total_tourists_foreigner: sumColumn( foreignerRows, "number_of_tourists" ), monthy_nghts_spent_foreigner: sumColumn( foreignerRows, "bed_nights_spent" ), }); }, [isEditMode]); // CREATE MODE → FETCH DISTRICT useEffect(() => { if (isEditMode) return; const fetchDistrict = async () => { try { const res = await getHotelDistrict(); setDistrictId(res.data?.district_id || null); setCategoryId(res.data?.category_id || null); setUsedMonths(res.data?.used_months || []); } catch { setDistrictId(null); } }; fetchDistrict(); }, [isEditMode]); useEffect(() => { const loadLocationData = async () => { try { /* INDIAN STATES */ const res = await getStates(); const states = res?.data?.map((s) => ({ label: language ? s.name_hi : s.name_en, value: s.name_en, })) || []; setStateOptions(states); /* COUNTRIES */ setCountryOptions(getCountryOptions(language)); } catch { setStateOptions([]); setCountryOptions([]); } }; loadLocationData(); }, [language]); /* ================= FORM HANDLERS ================= */ const handleChange = (e) => { const { name, value } = e.target; setFormData((p) => ({ ...p, [name]: value })); setErrors((p) => ({ ...p, [name]: null })); }; const handleInputChange = (tableName, rows, e, rowIndex, fieldName) => { const updatedRows = [...rows]; updatedRows[rowIndex] = { ...updatedRows[rowIndex], [fieldName]: e.target.value, }; handleTableChange(tableName, updatedRows, rowIndex, fieldName); }; const addRow = (tableName, rows, headers) => { const newRow = {}; headers.forEach((h) => (newRow[h.name] = "")); handleTableChange(tableName, [...rows, newRow], true); }; const removeRow = (tableName, rows, rowIndex) => { const updatedRows = rows.filter((_, i) => i !== rowIndex); handleTableChange(tableName, updatedRows); }; const handleTableChange = ( tableName, rows, changedRowIndex = null, changedField = null ) => { setFormData((prev) => { const updated = { ...prev, [tableName]: rows }; // Recalculate totals for Indian tourist details if (tableName === "indian_tourist_details") { updated.monthy_total_tourists_indian = sumColumn( rows, "number_of_tourists" ); updated.monthy_nghts_spent_indian = sumColumn(rows, "bed_nights_spent"); } // Recalculate totals for Foreigner tourist details if (tableName === "foreigner_tourist_details") { updated.monthy_total_tourists_foreigner = sumColumn( rows, "number_of_tourists" ); updated.monthy_nghts_spent_foreigner = sumColumn( rows, "bed_nights_spent" ); } return updated; }); setErrors((prevErrors) => { let updatedErrors = { ...prevErrors }; // Remove error for the changed field if (changedRowIndex !== null && changedField) { const key = `${tableName}.${changedRowIndex}.${changedField}`; if (updatedErrors[key]) delete updatedErrors[key]; } // Remove errors for totals if table changed if (tableName === "indian_tourist_details") { delete updatedErrors["monthy_total_tourists_indian"]; delete updatedErrors["monthy_nghts_spent_indian"]; } else if (tableName === "foreigner_tourist_details") { delete updatedErrors["monthy_total_tourists_foreigner"]; delete updatedErrors["monthy_nghts_spent_foreigner"]; } // Re-index errors if a row was removed if ( rows.length < Object.keys(prevErrors).filter((k) => k.startsWith(tableName)).length ) { const newErrors = {}; Object.keys(updatedErrors).forEach((errKey) => { const parts = errKey.split("."); if (parts[0] === tableName) { const rowIdx = parseInt(parts[1], 10); const field = parts[2]; if (rowIdx >= rows.length) return; // skip removed row newErrors[`${tableName}.${rowIdx}.${field}`] = updatedErrors[errKey]; } else { newErrors[errKey] = updatedErrors[errKey]; } }); updatedErrors = newErrors; } return updatedErrors; }); }; /* ================= SUBMIT ================= */ const handleSubmit = async () => { let newErrors = {}; // Check report month if (!formData.report_month_year) { newErrors.report_month_year = { hi: "रिपोर्ट माह आवश्यक है", en: "Report month is required", }; } const { errors: stepErrors } = validateFormData( hotelTouristMonthlySection, formData ); const { errors: tableErrors, isValid } = validateTableFields( hotelTouristMonthlySection, formData ); const allErrors = { ...newErrors, ...stepErrors, ...tableErrors }; setErrors(allErrors); if (Object.keys(allErrors).length || !isValid) return; const { report_month, report_year } = parseMonthYear( formData.report_month_year ); const payload = { category_id: categoryId, district_id: districtId, report_month, report_year, monthy_total_tourists_indian: formData.monthy_total_tourists_indian || 0, monthy_nghts_spent_indian: formData.monthy_nghts_spent_indian || 0, monthy_total_tourists_foreigner: formData.monthy_total_tourists_foreigner || 0, monthy_nghts_spent_foreigner: formData.monthy_nghts_spent_foreigner || 0, indian_tourist_details: JSON.stringify( formData.indian_tourist_details || [] ), foreigner_tourist_details: JSON.stringify( formData.foreigner_tourist_details || [] ), }; try { const response = await editUserVistingTrackingData(payload); if (response.status === 200) { navigate("/visitor-tracking", { state: { message: language ? "डेटा सफलतापूर्वक सहेजा गया" : "Data saved successfully", }, }); } else { setApiMessage({ type: "error", message: language ? "ट्रैकिंग सबमिट करने में असमर्थ, कृपया बाद में प्रयास करें" : "Unable to submit the tracking, please try later", }); } } catch (err) { setApiMessage({ type: "error", message: err?.message }); } }; const filteredMonthOptions = isEditMode ? getMonthYearOptions(language) : getMonthYearOptions(language).filter((opt) => !usedMonths.includes(opt.value)); const getFilteredOptions = (allOptions, rows, currentRowIndex, fieldName) => { // Collect all selected values except the current row const usedValues = rows .filter((_, i) => i !== currentRowIndex) .map((r) => r[fieldName]) .filter(Boolean); // remove empty/null // Mark already used options as disabled return allOptions.map((opt) => ({ ...opt, isDisabled: usedValues.includes(opt.value), })); }; return ( {apiMessage && ( )}
{language ? "विज़िटर ट्रैकिंग संपादित करें" : "Edit Visitor Tracking"}
{/* LABEL */} {/* SELECT */}
handleInputChange( tableName, rows, e, rowIndex, name ) } > {getFilteredOptions( options, rows, rowIndex, name ).map((opt, i) => ( ))} ) : ( handleInputChange( tableName, rows, e, rowIndex, name ) } /> )} {fieldError && (

{language ? fieldError.hi : fieldError.en}

)} ); })} {rows?.length > 1 && ( )} ))}
); } if (type === "select") { return ( ); } /* ================= NORMAL FIELD ================= */ return (
handleChange(e)} required={validation.required} disabled={true} /> {errors[field.inputProps.name] && (

{language ? errors[field.inputProps.name].hi : errors[field.inputProps.name].en}

)}
); })}
); })}
); }; export default EditVisitorTracking;