No data available to display
+ //No data available to display
+Loading weekly summaries...
No data available for this week
+- Hours logged: {hoursLogged.toFixed(2)} / {summary.promisedHoursByWeek[weekIndex]} + {/* Hours logged: {hoursLogged.toFixed(2)} / {summary.promisedHoursByWeek[weekIndex]} */} + Hours logged: {hoursLogged} / {promisedHours}
@@ -415,8 +454,8 @@ function WeeklySummaryMessage({ summary, weekIndex }) {
); } - - const summaryText = summary?.weeklySummaries[weekIndex]?.summary; + // Keeping this block commented intentionally for future reference — + // const summaryText = summary?.weeklySummaries[weekIndex]?.summary; let summaryDate = moment() .tz('America/Los_Angeles') .endOf('week') @@ -429,11 +468,13 @@ function WeeklySummaryMessage({ summary, weekIndex }) { color: textColors[summary?.weeklySummaryOption] || textColors.Default, }; - summaryDate = moment(summary.weeklySummaries[weekIndex]?.uploadDate) - .tz('America/Los_Angeles') - .format('MMM-DD-YY'); - summaryDateText = `Summary Submitted On (${summaryDate}):`; - + if (currentSummary?.uploadDate) { + // summaryDate = moment(summary.weeklySummaries[weekIndex]?.uploadDate) + summaryDate = moment(currentSummary.uploadDate) + .tz('America/Los_Angeles') + .format('MMM-DD-YY'); + summaryDateText = `Summary Submitted On (${summaryDate}):`; + } return ({summary.filterColor}
*/} + {(() => { + // eslint-disable-next-line no-console + // console.log( + // 'Rendering:', + // summary.name || summary._id, + // '→ filterColor:', + // summary.filterColor, + // ); + return null; + })()} + {colors.map(color => ( ))}@@ -998,42 +1114,88 @@ function Index({
)} - - {showStar(hoursLogged, summary.promisedHoursByWeek[weekIndex]) && ( - - weekIndex && + weekIndex !== null && + weekIndex !== undefined && + summary.promisedHoursByWeek[weekIndex] !== undefined && + showStar(hoursLogged, summary.promisedHoursByWeek[weekIndex]) && ( + - +{Math.round((hoursLogged / summary.promisedHoursByWeek[weekIndex] - 1) * 100)}% - - - )} + + +{Math.round((hoursLogged / summary.promisedHoursByWeek[weekIndex] - 1) * 100)}% + {/* +{Math.round((hoursLogged / promisedHoursByWeek[weekIndex] - 1) * 100)}% */} + + + )} ); } +// FormattedReport.propTypes = { +// // eslint-disable-next-line react/forbid-prop-types +// summaries: PropTypes.arrayOf(PropTypes.object).isRequired, +// weekIndex: PropTypes.number.isRequired, + +// // Adding these to clarify structure for Sonar: +// // summary: PropTypes.shape({ +// // _id: PropTypes.string, +// // filterColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), +// // promisedHoursByWeek: PropTypes.arrayOf(PropTypes.number), +// // weeklySummaries: PropTypes.arrayOf( +// // PropTypes.shape({ +// // summary: PropTypes.string, +// // }), +// // ), +// // }), +// }; + FormattedReport.propTypes = { - // eslint-disable-next-line react/forbid-prop-types - summaries: PropTypes.arrayOf(PropTypes.object).isRequired, + summaries: PropTypes.arrayOf( + PropTypes.shape({ + _id: PropTypes.string, + filterColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), + promisedHoursByWeek: PropTypes.arrayOf(PropTypes.number), + totalSeconds: PropTypes.number, + weeklySummaries: PropTypes.arrayOf( + PropTypes.shape({ + summary: PropTypes.string, + }), + ), + }), + ).isRequired, weekIndex: PropTypes.number.isRequired, + summary: PropTypes.shape({ + _id: PropTypes.string, + filterColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), + promisedHoursByWeek: PropTypes.arrayOf(PropTypes.number), + totalSeconds: PropTypes.number, + weeklySummaries: PropTypes.arrayOf( + PropTypes.shape({ + summary: PropTypes.string, + }), + ), + }), }; export default FormattedReport; diff --git a/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx b/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx index cbe3150cec..bf79d7f4bd 100644 --- a/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx +++ b/src/components/WeeklySummariesReport/WeeklySummariesReport.jsx @@ -1,3 +1,6 @@ +/* eslint-disable no-console */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/label-has-associated-control */ import { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; @@ -35,6 +38,12 @@ import { getAllUserTeams, getAllTeamCode } from '../../actions/allTeamsAction'; import TeamChart from './TeamChart'; import SkeletonLoading from '../common/SkeletonLoading'; import { getWeeklySummariesReport } from '../../actions/weeklySummariesReport'; +import { + updateOneSummaryReport, + updateSummaryReportFromServerAction, + updateSummaryReport, +} from '../../actions/weeklySummaries'; + import { getSavedFilters, createSavedFilter, @@ -43,6 +52,8 @@ import { updateSavedFiltersForTeamCodeChange, updateSavedFiltersForIndividualTeamCodeChange, } from '../../actions/savedFilterActions'; + +import 'react-toastify/dist/ReactToastify.css'; import WeeklySummaryRecipientsPopup from './WeeklySummaryRecepientsPopup'; import FormattedReport from './FormattedReport'; import GeneratePdfReport from './GeneratePdfReport'; @@ -59,6 +70,9 @@ import SelectFilterModal from './components/SelectFilterModal'; import styles from './WeeklySummariesReport.module.css'; import { setField, toggleField, removeItemFromField, setChildField } from '~/utils/stateHelper'; import WeeklySummariesToggleFilter from './components/WeeklySummariesToggleFilter'; +// Keeping this block commented intentionally for future reference — +import { SlideToggle } from './components'; +import cn from 'classnames'; import { useGetWeeklySummariesFiltersQuery, useDeleteWeeklySummariesFilterMutation, @@ -68,6 +82,7 @@ import { const navItems = ['This Week', 'Last Week', 'Week Before Last', 'Three Weeks Ago']; const fullCodeRegex = /^.{5,7}$/; + const getWeekDates = () => { return Array.from({ length: 4 }).map((_, index) => ({ fromDate: moment() @@ -126,6 +141,13 @@ const initialState = { membersFromUnselectedTeam: [], filterChoices: [], memberDict: {}, + bulkSelectedColors: { + purple: false, + green: false, + navy: false, + }, + // Saved filters functionality + saveFilterModalOpen: false, }; const intialPermissionState = { @@ -187,6 +209,95 @@ const CustomMenuList = props => { ); }; +// Helper: Process raw summaries into State Data (Team Codes, Colors, Tables) +// ----------------------------------------------------------------------------- +// const processDashboardData = summaries => { +// // 1. Sort Summaries (Alphabetical) +// const sortedSummaries = [...summaries].sort((a, b) => +// `${a.firstName} ${a.lastName}`.localeCompare(`${b.firstName} ${b.lastName}`), +// ); + +// // 2. Process Filters & Promises +// const processedSummaries = sortedSummaries.map(summary => { +// // Calculate Promised Hours +// const promisedHoursByWeek = getWeekDates().map(weekDate => +// getPromisedHours(weekDate.toDate, summary.weeklycommittedHoursHistory || []), +// ); + +// // Clean Filter Colors +// let filterColor = []; +// if (Array.isArray(summary.filterColor)) { +// filterColor = summary.filterColor +// .filter(c => typeof c === 'string') +// .map(c => c.toLowerCase()); +// } else if (typeof summary.filterColor === 'string') { +// try { +// const parsed = JSON.parse(summary.filterColor); +// if (Array.isArray(parsed)) { +// filterColor = parsed.filter(c => typeof c === 'string').map(c => c.toLowerCase()); +// } else { +// filterColor = [parsed.toLowerCase()]; +// } +// } catch { +// filterColor = [summary.filterColor.toLowerCase()]; +// } +// } + +// return { ...summary, promisedHoursByWeek, filterColor }; +// }); + +// // 3. Generate Team Codes & Table Data +// const teamCodeGroup = {}; +// const teamCodes = []; +// const colorOptionGroup = new Set(); +// const colorOptions = []; + +// processedSummaries.forEach(summary => { +// const code = summary.teamCode || 'noCodeLabel'; + +// // Group by Code +// if (!teamCodeGroup[code]) teamCodeGroup[code] = []; +// teamCodeGroup[code].push(summary); + +// // Collect Colors +// if (summary.weeklySummaryOption) colorOptionGroup.add(summary.weeklySummaryOption); +// }); + +// // 4. Build Team Code Options +// Object.keys(teamCodeGroup).forEach(code => { +// if (code !== 'noCodeLabel') { +// teamCodes.push({ +// value: code, +// label: `${code} (${teamCodeGroup[code].length})`, +// _ids: teamCodeGroup[code].map(item => item._id), +// }); +// } +// }); + +// // Add "No Code" Option +// const noCodeCount = teamCodeGroup.noCodeLabel?.length || 0; +// teamCodes.sort((a, b) => a.label.localeCompare(b.label)); + +// teamCodes.push({ +// value: '', +// label: `Select All With NO Code (${noCodeCount})`, +// _ids: teamCodeGroup.noCodeLabel?.map(item => item._id) || [], +// }); + +// // 5. Build Color Options +// colorOptionGroup.forEach(option => { +// colorOptions.push({ value: option, label: option }); +// }); +// colorOptions.sort((a, b) => a.label.localeCompare(b.label)); + +// return { +// summaries: processedSummaries, +// teamCodes, +// colorOptions, +// tableData: teamCodeGroup, +// }; +// }; + /* eslint-disable react/function-component-definition */ const WeeklySummariesReport = props => { const { loading, getInfoCollections } = props; @@ -237,7 +348,7 @@ const WeeklySummariesReport = props => { const alphabetize = summaries => { const temp = [...summaries]; return temp.sort((a, b) => - `${a.firstName} ${a.lastName}`.localeCompare(`${b.firstName} ${b.lastname}`), + `${a.firstName} ${a.lastName}`.localeCompare(`${b.firstName} ${b.lastName}`), ); }; @@ -341,6 +452,7 @@ const WeeklySummariesReport = props => { } }; + // keeping this block commented for future reference // const fetchFilters = async () => { // // Get all filters // let filterList = []; @@ -380,6 +492,46 @@ const WeeklySummariesReport = props => { // })); // }; + // const fetchFilters = async () => { + // // Get all filters + // let filterList = []; + + // try { + // const filterResponse = await axios.get(ENDPOINTS.WEEKLY_SUMMARIES_FILTERS); + // if (filterResponse.status < 200 || filterResponse.status >= 300) { + // toast.error(`API request to get filter list failed with status ${filterResponse.status}`); + // } else { + // filterList = filterResponse.data; + // } + // } catch (e) { + // toast.error(`API request to get filter list failed with error ${e}`); + // } + // const updatedFilterChoices = []; + + // filterList.forEach(filter => { + // updatedFilterChoices.push({ + // label: filter.filterName, + // value: filter._id, + // filterData: { + // filterName: filter.filterName, + // selectedCodes: new Set(filter.selectedCodes), + // selectedColors: new Set(filter.selectedColors), + // selectedExtraMembers: new Set(filter.selectedExtraMembers), + // selectedTrophies: filter.selectedTrophies, + // selectedSpecialColors: filter.selectedSpecialColors, + // selectedBioStatus: filter.selectedBioStatus, + // selectedOverTime: filter.selectedOverTime, + // }, + // }); + // }); + + // setState(prevState => ({ + // ...prevState, + // filterChoices: [...updatedFilterChoices], + // })); + // }; + + // Keeping this block commented intentionally for future reference — // Initial data loading const createIntialSummaries = async () => { try { @@ -394,6 +546,7 @@ const WeeklySummariesReport = props => { // Get the week index for the active tab const weekIndex = navItems.indexOf(activeTab); + // eslint-disable-next-line no-console // console.log(`Initial load: Fetching data for tab ${activeTab} with weekIndex ${weekIndex}`); // Set initial loading and active tab state @@ -425,6 +578,8 @@ const WeeklySummariesReport = props => { hasSeeBadgePermission: hasPermission('seeBadges') && badgeStatusCode === 200, })); + // const res = await getWeeklySummariesReport(weekIndex); // old working code + // const summaries = res?.data ?? []; // old working code // Fetch data for the active tab only with cache-busting const response = await axios.get(ENDPOINTS.WEEKLY_SUMMARIES_REPORT(), { params: { week: weekIndex, forceRefresh: true, _ts: Date.now() }, @@ -458,8 +613,43 @@ const WeeklySummariesReport = props => { const promisedHoursByWeek = weekDates.map(weekDate => getPromisedHours(weekDate.toDate, summary.weeklycommittedHoursHistory), ); - - const filterColor = summary.filterColor || null; + // // Keeping this block commented intentionally for future reference — + // let filterColor = []; + // // Keeping this block commented intentionally for future reference — + // // const filterColor = summary.filterColor || null; // old working code + // if (Array.isArray(summary.filterColor)) { + // filterColor = summary.filterColor; + // } else if (typeof summary.filterColor === 'string') { + // try { + // const parsed = JSON.parse(summary.filterColor); + // filterColor = Array.isArray(parsed) ? parsed : [summary.filterColor]; + // } catch { + // filterColor = [summary.filterColor]; + // } + // } + let filterColor = []; + if (Array.isArray(summary.filterColor)) { + // 1. Filter out junk data (like 'null') + // 2. Convert all strings to lowercase (good practice) + filterColor = summary.filterColor + .filter(c => typeof c === 'string') // Keep only strings + .map(c => c.toLowerCase()); // Ensure lowercase + } else if (typeof summary.filterColor === 'string') { + // Handles cases where DB stores '["purple"]' or just 'Purple' + try { + const parsed = JSON.parse(summary.filterColor); + if (Array.isArray(parsed)) { + // It was a stringified array, clean it + filterColor = parsed.filter(c => typeof c === 'string').map(c => c.toLowerCase()); + } else if (typeof parsed === 'string') { + // It was a single string like '"purple"' + filterColor = [parsed.toLowerCase()]; + } + } catch { + // It was just a plain string like 'Purple' + filterColor = [summary.filterColor.toLowerCase()]; + } + } return { ...summary, promisedHoursByWeek, filterColor }; }); @@ -533,18 +723,32 @@ const WeeklySummariesReport = props => { const chartData = []; + // Get all filters + fetchFilters(); + // eslint-disable-next-line no-console + // 🟢 NEW: Final debug log before setting state + // eslint-disable-next-line no-console + console.log('🏁 Final processed summaries with filterColors:'); + for (const summary of summariesCopy.slice(0, 3)) { + // eslint-disable-next-line no-console + console.log( + ` - ${summary.firstName} ${summary.lastName}: ${JSON.stringify(summary.filterColor)}`, + ); + } // Store the data in the tab-specific state setState(prevState => ({ ...prevState, loading: false, allRoleInfo: [], summaries: summariesCopy, + filteredSummaries: summariesCopy, loadedTabs: [activeTab], summariesByTab: { + ...prevState.summariesByTab, [activeTab]: summariesCopy, }, badges: props.allBadgeData || [], - filteredSummaries: summariesCopy, + // filteredSummaries: summariesCopy, tableData: teamCodeGroup, chartData, COLORS, @@ -558,6 +762,12 @@ const WeeklySummariesReport = props => { memberDict, })); + // eslint-disable-next-line no-console + console.log( + '🟡 Initial summaries loaded for a-BCC:', + summariesCopy.filter(s => s.teamCode === 'a-BCC'), + ); + // Now load info collections await intialInfoCollections(summariesCopy); @@ -700,6 +910,12 @@ const WeeklySummariesReport = props => { selectedExtraMembers, } = state; + // eslint-disable-next-line no-console + // console.log('🔍 filterWeeklySummaries called with:', { + // summariesLength: summaries?.length, + // selectedCodesLength: selectedCodes?.length, + // selectedSpecialColors, + // }); // console.log('filterWeeklySummaries state:', { // summariesLength: summaries?.length, // tableDataExists: !!tableData, @@ -725,7 +941,7 @@ const WeeklySummariesReport = props => { const { activeTab } = state; const hoursLogged = (summary.totalSeconds[navItems.indexOf(activeTab)] || 0) / 3600; - // 🛑 Add this block at the very top inside the filter + // 🛑 Adding this block at the very top inside the filter // if (summary?.isActive === false) { // const lastWeekStart = moment() // .tz('America/Los_Angeles') @@ -774,8 +990,16 @@ const WeeklySummariesReport = props => { showTrophyIcon(summarySubmissionDate, summary?.startDate?.split('T')[0]); // Add special color filter logic + // const matchesSpecialColor = + // activeFilterColors.length === 0 || activeFilterColors.includes(summary.filterColor); + // const matchesSpecialColor = + // // activeFilterColors.length === 0 || + // // activeFilterColors.some(color => summary.filterColor?.includes?.(color)); + // activeFilterColors.length === 0 || activeFilterColors.includes(summary.filterColor); // old one + const matchesSpecialColor = - activeFilterColors.length === 0 || activeFilterColors.includes(summary.filterColor); + activeFilterColors.length === 0 || + activeFilterColors.some(color => summary.filterColor?.includes(color)); // Filtered by Team Code and Extra Members const isInSelectedCode = selectedCodesArray.includes(summary.teamCode); @@ -928,7 +1152,17 @@ const WeeklySummariesReport = props => { chartData.sort(); temptotal = chartData.reduce((acc, entry) => acc + entry.value, 0); structuredTeamTableData.sort(); - + // const selectedTeamCodes = selectedCodes.map(e => e.value); + const selectedTeamCodes = Array.isArray(selectedCodes) + ? selectedCodes.map(e => e.value) + : selectedCodes + ? [selectedCodes.value] + : []; + if (selectedTeamCodes.includes('a-BCC')) { + const filtered = temp.filter(u => u.teamCode === 'a-BCC'); + // eslint-disable-next-line no-console + console.log(`✅ Filtered summaries for teamCode "a-BCC" (${filtered.length})`, filtered); + } setState(prev => ({ ...prev, total: temptotal, @@ -967,10 +1201,20 @@ const WeeklySummariesReport = props => { const promisedHoursByWeek = weekDates.map(weekDate => getPromisedHours(weekDate.toDate, summary.weeklycommittedHoursHistory || []), ); - - const filterColor = summary.filterColor || null; - - return { ...summary, promisedHoursByWeek, filterColor }; + // Keeping this block commented intentionally for future reference — + // const filterColor = summary.filterColor || null; + // return { ...summary, promisedHoursByWeek, filterColor }; // both lines old working code + let filterColor = []; + if (Array.isArray(summary.filterColor)) { + filterColor = summary.filterColor; + } else if (typeof summary.filterColor === 'string') { + filterColor = [summary.filterColor]; + } + return { + ...summary, + promisedHoursByWeek, + filterColor, + }; }); // Update state @@ -1043,8 +1287,20 @@ const WeeklySummariesReport = props => { const promisedHoursByWeek = weekDates.map(weekDate => getPromisedHours(weekDate.toDate, summary.weeklycommittedHoursHistory || []), ); - const filterColor = summary.filterColor || null; - return { ...summary, promisedHoursByWeek, filterColor }; + // Keeping this block commented intentionally for future reference — + // const filterColor = summary.filterColor || null; + // return { ...summary, promisedHoursByWeek, filterColor }; old working code + let filterColor = []; + if (Array.isArray(summary.filterColor)) { + filterColor = summary.filterColor; + } else if (typeof summary.filterColor === 'string') { + filterColor = [summary.filterColor]; + } + return { + ...summary, + promisedHoursByWeek, + filterColor, + }; }); setState(prevState => ({ @@ -1084,11 +1340,32 @@ const WeeklySummariesReport = props => { } } }; - + // Keeping this block commented intentionally for future reference — + // const handleSelectCodeChange = event => { + // setState(prev => ({ + // ...prev, + // selectedCodes: event, + // })); + // }; // old working code const handleSelectCodeChange = event => { + const selectedValues = event.map(e => e.value); + + // Keeping this block commented intentionally for future reference — + // Filter summaries based on selected codes + // const selectedSummaries = state.summaries.filter(summary => + // selectedValues.includes(summary.teamCode), + // ); + // Count how many users have each color selected + // const colorStates = ['purple', 'green', 'navy'].reduce((acc, color) => { + // const allHaveColor = + // selectedSummaries.length > 0 && + // selectedSummaries.every(summary => summary.filterColor?.includes?.(color)); + // acc[color] = allHaveColor; + // return acc; + // }, {}); + setState(prev => { - const selectedValues = event.map(e => e.value); - // Move selected codes to the front of the dropdown list // newly added + // Move selected codes to the front of the dropdown list const reorderedTeamCodes = [ ...prev.teamCodes.filter(code => selectedValues.includes(code.value)), // selected first ...prev.teamCodes.filter(code => !selectedValues.includes(code.value)), // then the rest @@ -1098,6 +1375,7 @@ const WeeklySummariesReport = props => { ...prev, selectedCodes: event, teamCodes: reorderedTeamCodes, + bulkSelectedColors: { purple: false, green: false, navy: false }, // always reset on team change }; }); @@ -1107,6 +1385,20 @@ const WeeklySummariesReport = props => { } }; + const handleOverHoursToggleChange = () => { + setState(prev => ({ + ...prev, + selectedOverTime: !prev.selectedOverTime, + })); + }; + + const handleBioStatusToggleChange = () => { + setState(prev => ({ + ...prev, + selectedBioStatus: !prev.selectedBioStatus, + })); + }; + const handleChartStatusToggleChange = () => { setState(prevState => ({ ...prevState, @@ -1228,53 +1520,33 @@ const WeeklySummariesReport = props => { // props.getSavedFilters(); // }, 1000); // } + // Update the big filters in the database that contains userId + if (oldTeamCode && newTeamCode && oldTeamCode !== newTeamCode) { + const res = await axios.post(ENDPOINTS.WEEKLY_SUMMARIES_FILTER_REPLACE_INDIVIDUAL_CODES, { + oldTeamCode, + newTeamCode, + userId: Object.keys(userIdObj)[0], + }); + await fetchFilters(); + } + // Update saved filters for team codes only in the database with the new team code + if (oldTeamCode && newTeamCode && oldTeamCode !== newTeamCode) { + // Get the user ID from the userIdObj + const userId = Object.keys(userIdObj)[0]; + props.updateSavedFiltersForIndividualTeamCodeChange(oldTeamCode, newTeamCode, userId); + + // Refresh saved filters after the update + setTimeout(() => { + props.getSavedFilters(); + }, 1000); + } return null; } catch (error) { return null; } }; - const handleSelectColorChange = event => { - setState(prevState => ({ - ...prevState, - selectedColors: event, - })); - }; - - const handleReplaceCode = e => { - try { - e.persist(); - setState(prevState => ({ ...prevState, replaceCode: e.target?.value })); - return e; - } catch (error) { - return null; - } - }; - - const handleSpecialColorDotClick = (userId, color) => { - setState(prevState => { - const updatedSummaries = prevState.summaries.map(summary => { - if (summary._id === userId) { - return { ...summary, filterColor: color }; - } - return summary; - }); - - // Also update the tab-specific cache - const updatedSummariesByTab = { - ...prevState.summariesByTab, - [prevState.activeTab]: updatedSummaries, - }; - - return { - ...prevState, - summaries: updatedSummaries, - summariesByTab: updatedSummariesByTab, - }; - }); - }; - const handleDeleteFilter = async filter => { try { const res = await deleteFilter({ @@ -1286,29 +1558,58 @@ const WeeklySummariesReport = props => { if (currentAppliedFilter && currentAppliedFilter._id === filter.value) { setCurrentAppliedFilter(null); } + // // Refresh the saved filters list + // props.getSavedFilters(); + // } } catch (error) { toast.error(`Failed to delete filter. Error: ${JSON.stringify(error)}`); } }; - const passwordInputModalToggle = () => { - try { - return ( -