r.id === showGradingModal)}
+ onGradeChange={handleGradeChange}
+ />
);
};
diff --git a/src/components/PRGradingScreen/PRGradingScreen.module.css b/src/components/PRGradingScreen/PRGradingScreen.module.css
index 0f844c9691..fa6831520e 100644
--- a/src/components/PRGradingScreen/PRGradingScreen.module.css
+++ b/src/components/PRGradingScreen/PRGradingScreen.module.css
@@ -1006,4 +1006,67 @@
.pr-grading-screen-no-results.dark-mode {
color: #9ab0cc;
+}
+
+/* Promotion Confirmation Modal Actions */
+.pr-promotion-footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+ padding: 18px 24px 24px !important;
+}
+
+.pr-promotion-btn-cancel {
+ padding: 9px 24px;
+ border-radius: 6px;
+ border: 1px solid #6c757d;
+ background-color: #6c757d;
+ color: #fff;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 14px;
+ transition: all 0.2s ease-in-out;
+ box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+}
+
+.pr-promotion-btn-cancel:hover {
+ background-color: #5a6268;
+ border-color: #545b62;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
+}
+
+.pr-promotion-btn-confirm {
+ padding: 9px 24px;
+ border-radius: 6px;
+ border: none;
+ background-color: #28a745;
+ color: #fff;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 14px;
+ transition: all 0.2s ease-in-out;
+ box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+}
+
+.pr-promotion-btn-confirm:hover {
+ background-color: #218838;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 10px rgb(40 167 69 / 40%);
+}
+
+/* Dark Mode Overrides */
+.dark-mode .pr-promotion-btn-cancel {
+ border-color: #5a6b88;
+ background-color: #475569;
+}
+
+.dark-mode .pr-promotion-btn-cancel:hover {
+ background-color: #5a6b88;
+ border-color: #8a9bb8;
+}
+
+.dark-mode .pr-promotion-btn-confirm:hover {
+ background-color: #1e7e34;
}
\ No newline at end of file
diff --git a/src/components/PRGradingScreen/PRGradingView.jsx b/src/components/PRGradingScreen/PRGradingView.jsx
new file mode 100644
index 0000000000..8fae4599b7
--- /dev/null
+++ b/src/components/PRGradingScreen/PRGradingView.jsx
@@ -0,0 +1,305 @@
+import PropTypes from 'prop-types';
+import { Button, Card, Col, Container, Row } from 'react-bootstrap';
+import styles from './PRGradingScreen.module.css';
+import PromotionConfirmationBox from './PromotionConfirmationBox';
+import ReviewerCell from './ReviewerCell';
+import React from 'react';
+
+const GRADE_OPTIONS = ['Exceptional', 'Okay', 'Unsatisfactory', 'Cannot find image'];
+
+const PRGradingView = ({
+ darkMode,
+ teamData,
+ isFinalized,
+ onFinalize,
+ searchTerm,
+ onSearchTermChange,
+ roleFilter,
+ onRoleFilterChange,
+ availableRoles,
+ onClearSearch,
+ filteredReviewers,
+ promotedReviewerIds,
+ onPromoteClick,
+ activeInput,
+ inputValue,
+ onInputValueChange,
+ onAddNewClick,
+ onInputSubmit,
+ onCancelInput,
+ onPRNumberClick,
+ promotingReviewer,
+ onConfirmPromotion,
+ onCancelPromotion,
+ showGradingModal,
+ onCloseGradingModal,
+ gradingReviewer,
+ onGradeChange,
+}) => {
+ const dm = darkMode ? styles['dark-mode'] : '';
+
+ return (
+
+
+
+
+
+
+
+
+ Weekly PR grading screen
+
+
+ {teamData.teamName} - {teamData.dateRange.start} to {teamData.dateRange.end}
+
+
+
+
+ onSearchTermChange(e.target.value)}
+ className={`${styles['pr-grading-screen-search-input']} ${dm}`}
+ />
+
+ {availableRoles.length > 0 && (
+
+ )}
+
+ {(searchTerm || roleFilter) && (
+
+ )}
+
+
+
+
+
+
+
+
+ {promotingReviewer && (
+ onConfirmPromotion(promotingReviewer.reviewerName, promotingReviewer.id)}
+ onCancel={onCancelPromotion}
+ darkMode={darkMode}
+ />
+ )}
+
+ {showGradingModal && gradingReviewer && (
+
+
+
Grade PRs for {gradingReviewer.name}
+
+
+
+
+
+
+
+ {/* Footer */}
{/* Footer */}
-
diff --git a/src/components/PRGradingScreen/ReviewerCell.jsx b/src/components/PRGradingScreen/ReviewerCell.jsx
new file mode 100644
index 0000000000..24069df947
--- /dev/null
+++ b/src/components/PRGradingScreen/ReviewerCell.jsx
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import styles from './PRGradingScreen.module.css';
+
+const ReviewerCell = ({ reviewer, isPromoted, promoted, onPromoteClick }) => {
+ // Compatibility fallback for promotion status props
+ const promotedState = isPromoted !== undefined ? isPromoted : promoted;
+
+ return (
+ /* Vertical container anchoring the reviewer name and action button */
+
+ {/* Display the reviewer name */}
+ {reviewer.reviewer}
+
+ {/* Render the Promote / Promoted button directly beneath the reviewer name */}
+
+
+ );
+};
+
+ReviewerCell.propTypes = {
+ reviewer: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ reviewer: PropTypes.string.isRequired,
+ }).isRequired,
+ isPromoted: PropTypes.bool,
+ promoted: PropTypes.bool,
+ onPromoteClick: PropTypes.func.isRequired,
+};
+
+export default ReviewerCell;
diff --git a/src/components/PRGradingScreen/usePRPromotion.js b/src/components/PRGradingScreen/usePRPromotion.js
new file mode 100644
index 0000000000..9bfd4aabdb
--- /dev/null
+++ b/src/components/PRGradingScreen/usePRPromotion.js
@@ -0,0 +1,60 @@
+import { useState, useCallback } from 'react';
+
+export const usePRPromotion = (defaultTeamName = 'PR Review Team') => {
+ // State to track the reviewer currently undergoing promotion confirmation
+ const [promotingReviewer, setPromotingReviewer] = useState(null);
+
+ // Set to track IDs of reviewers who have been successfully promoted
+ const [promotedReviewerIds, setPromotedReviewerIds] = useState(new Set());
+
+ // Handler triggered when the Promote button is clicked
+ const handlePromoteClick = useCallback(
+ reviewer => {
+ const currentCount = reviewer.gradedPrs
+ ? reviewer.gradedPrs.length
+ : reviewer.prsReviewed || 0;
+
+ setPromotingReviewer({
+ id: reviewer.id,
+ reviewerId: reviewer.id,
+ reviewerName: reviewer.reviewer,
+ teamCode: reviewer.teamCode || defaultTeamName,
+ teamReviewerName: reviewer.teamLeader || reviewer.teamReviewerName || 'Team Lead',
+ weeklyPRs: reviewer.weeklyPRs || [
+ { week: 'Week 1', count: currentCount },
+ { week: 'Week 2', count: Math.max(0, currentCount - 1) },
+ { week: 'Week 3', count: currentCount >= 8 ? 9 : 5 },
+ ],
+ });
+ },
+ [defaultTeamName],
+ );
+
+ // Handler triggered when the promotion is confirmed in the modal
+ const handleConfirmPromotion = useCallback(() => {
+ setPromotedReviewerIds(prev => {
+ const next = new Set(prev);
+ if (promotingReviewer) {
+ const targetId = promotingReviewer.reviewerId || promotingReviewer.id;
+ if (targetId) {
+ next.add(targetId);
+ }
+ }
+ return next;
+ });
+ setPromotingReviewer(null);
+ }, [promotingReviewer]);
+
+ // Handler triggered when the promotion confirmation is cancelled
+ const handleCancelPromotion = useCallback(() => {
+ setPromotingReviewer(null);
+ }, []);
+
+ return {
+ promotingReviewer,
+ promotedReviewerIds,
+ handlePromoteClick,
+ handleConfirmPromotion,
+ handleCancelPromotion,
+ };
+};
diff --git a/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.jsx b/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.jsx
index d9a4e9f732..49f557ea07 100644
--- a/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.jsx
+++ b/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.jsx
@@ -29,8 +29,10 @@ function MentorStatusPieChart({
legend: {
display: false,
},
+ // Value + percentage are already shown permanently via externalLabelGuides;
+ // the native hover tooltip only duplicates them and renders on top, overlapping.
tooltip: {
- enabled: true,
+ enabled: false,
},
externalLabelGuides: {
offset: 20,
diff --git a/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css b/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css
index 9a3280b6d1..f7e17275dd 100644
--- a/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css
+++ b/src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css
@@ -38,7 +38,10 @@
color: #828282;
letter-spacing: 0.5px;
text-transform: uppercase;
- transform: translateY(6px);
+
+ /* Spacing comes from the flex gap alone. A transform here would move the
+ painted text without reserving layout space, overlapping the count below. */
+ margin: 0;
width: 100%;
text-align: center;
@@ -56,7 +59,9 @@
color: #6c6c6c;
font-weight: 800;
line-height: 1.18;
- margin-top: -10px;
+
+ /* Zero margin so the flex gap, not a negative offset, sets the spacing. */
+ margin: 0;
/* Scale font-size based on chart container width (not viewport width) */
@@ -70,6 +75,9 @@
.mentorPercentageChange {
font-weight: 600;
+
+ /* Spacing is handled by the flex gap above. */
+ margin: 0;
}
.mentorStatusLabels {
diff --git a/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.jsx b/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.jsx
index 152ee0fe15..ab7dd9dc9c 100644
--- a/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.jsx
+++ b/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.jsx
@@ -32,8 +32,10 @@ function VolunteerStatusPieChart({
legend: {
display: false,
},
+ // Value + percentage are already shown permanently via externalLabelGuides;
+ // the native hover tooltip only duplicates them and renders on top, overlapping.
tooltip: {
- enabled: true,
+ enabled: false,
},
externalLabelGuides: {
offset: 20,
diff --git a/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.module.css b/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.module.css
index 021c846de6..fc15113d8c 100644
--- a/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.module.css
+++ b/src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.module.css
@@ -27,6 +27,13 @@
transform: translate(-50%, -50%);
text-align: center;
font-size: 14px;
+
+ /* Stack heading, count and comparison line with a real gap. Default margins
+ alone left 0px between them, so the lines ran into each other. */
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
}
.volunteerStatusHeading {
@@ -62,6 +69,9 @@
.volunteerStatusCenter > p {
font-weight: bold;
+
+ /* Spacing is handled by the flex gap above. */
+ margin: 0;
}
.volunteerStatusCenter div {
|