Aditya K - Add Remove Reviewer feature and fix Review Week dropdown in PR Grading

src/components/PRGradingDashboard/GradingTable.jsx

@@ -10,7 +10,10 @@ function GradingTable({
   onAddPRClick,
   openAddModal,
   onAddGradedPR,
+  onRemoveReviewer,
+  isCurrentWeek,
   darkMode,
+  canEdit,
 }) {
   return (
     // <div className={styles.tableWrapper}>
@@ -30,7 +33,10 @@ function GradingTable({
               grading={grading}
               onUpdatePRsReviewed={onUpdatePRsReviewed}
               onAddPRClick={onAddPRClick}
+              onRemoveReviewer={onRemoveReviewer}
+              isCurrentWeek={isCurrentWeek}
               darkMode={darkMode}
+              canEdit={canEdit}
             />
             {openAddModal === grading.reviewer && (
               <tr className={styles.modalRow}>
@@ -62,12 +68,17 @@ GradingTable.propTypes = {
   onAddPRClick: PropTypes.func.isRequired,
   openAddModal: PropTypes.string,
   onAddGradedPR: PropTypes.func.isRequired,
+  onRemoveReviewer: PropTypes.func.isRequired,
+  isCurrentWeek: PropTypes.bool,
   darkMode: PropTypes.bool,
+  canEdit: PropTypes.bool,
 };
 
 GradingTable.defaultProps = {
   openAddModal: null,
+  isCurrentWeek: true,
   darkMode: false,
+  canEdit: false,
 };
 
 export default GradingTable;

src/components/PRGradingDashboard/PRGradingDashboard.jsx

@@ -1,18 +1,57 @@
 import axios from 'axios';
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import AddReviewerModal from './AddReviewerModal';
 import ConfirmationModal from './ConfirmationModal';
 import GradingTable from './GradingTable';
+import RemoveReviewerModal from './RemoveReviewerModal';
 import { MOCK_WEEK_METADATA, MOCK_WEEK_OPTIONS } from './mockWeeklyAuditData';
 import styles from './PRGradingDashboard.module.css';
 import { SelectionProvider } from './SelectionContext';
 import SummaryList from './SummaryList';
+import hasPermission from '~/utils/permissions';
 
-const TEAM_CODE = 'TeamA';
 const TEAM_NAME = 'Team Alpha';
 
+const formatLocalDate = date => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+const getWeekStart = () => {
+  const now = new Date();
+  const day = now.getDay();
+  const monday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate() - day + (day === 0 ? -6 : 1),
+  );
+  return formatLocalDate(monday);
+};
+
+const WEEK_OPTION_OFFSETS = {
+  'Current Week': 0,
+  '1 Week Ago': 1,
+  '2 Weeks Ago': 2,
+  '3 Weeks Ago': 3,
+  '4 Weeks Ago': 4,
+};
+
+const getWeekStartByOffset = weeksAgo => {
+  const now = new Date();
+  const day = now.getDay();
+  const mondayOffset = day === 0 ? -6 : 1 - day;
+  const monday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate() + mondayOffset - weeksAgo * 7,
+  );
+  return formatLocalDate(monday);
+};
+
 // Mock data for fallback
 const mockData = [
   {
@@ -36,26 +75,33 @@
 ];
 
 function PRGradingDashboard() {
+  const dispatch = useDispatch();
   const darkMode = useSelector(state => state.theme.darkMode);
+  const authUser = useSelector(state => state.auth.user);
+  const canEdit = dispatch(hasPermission('accessPRTeamDashboard'));
   const [gradings, setGradings] = useState([]);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [openAddModal, setOpenAddModal] = useState(null); // reviewer name or null
   const [pendingPR, setPendingPR] = useState(null); // { reviewer, prNumbers, grade } or null
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showAddReviewerModal, setShowAddReviewerModal] = useState(false);
+  const [pendingRemoveReviewer, setPendingRemoveReviewer] = useState(null); // reviewer name or null
   const [selectedMockWeek, setSelectedMockWeek] = useState('Current Week');
+  const [selectedTeam, setSelectedTeam] = useState('TeamA');
 
-  // Fetch data on mount
+  // Fetch data on mount and whenever the selected week changes
   useEffect(() => {
-    fetchGradings();
-  }, []);
+    void fetchGradings(selectedMockWeek);
+  }, [selectedMockWeek]);
 
-  const fetchGradings = async () => {
+  const fetchGradings = async (weekLabel = 'Current Week') => {
+    const offset = WEEK_OPTION_OFFSETS[weekLabel] ?? 0;
+    const weekDate = getWeekStartByOffset(offset);
     try {
       setLoading(true);
       const response = await axios.get(
-        `${process.env.REACT_APP_APIENDPOINT}/weekly-grading?team=${TEAM_CODE}`,
+        `${process.env.REACT_APP_APIENDPOINT}/weekly-grading?team=${selectedTeam}&date=${weekDate}`,
       );
       if (response.data && Array.isArray(response.data)) {
         // Mark all existing PRs as not new
@@ -153,6 +199,39 @@
     toast.success(`Reviewer "${newReviewer.reviewer}" added successfully.`);
   };
 
+  // Request to remove a reviewer (shows confirmation modal)
+  const requestRemoveReviewer = reviewer => {
+    setPendingRemoveReviewer(reviewer);
+  };
+
+  // Actually remove the reviewer after confirmation
+  const confirmRemoveReviewer = async () => {
+    if (!pendingRemoveReviewer) return;
+    const offset = WEEK_OPTION_OFFSETS[selectedMockWeek] ?? 0;
+    const weekDate = getWeekStartByOffset(offset);
+    try {
+      await axios.delete(
+        `${
+          process.env.REACT_APP_APIENDPOINT
+        }/weekly-grading?team=${selectedTeam}&date=${weekDate}&reviewer=${encodeURIComponent(
+          pendingRemoveReviewer,
+        )}`,
+        { data: { requestor: { requestorId: authUser.userid } } },
+      );
+      setGradings(prev => prev.filter(g => g.reviewer !== pendingRemoveReviewer));
+      toast.success(`Reviewer "${pendingRemoveReviewer}" removed successfully.`);
+    } catch (error) {
+      toast.error('Failed to remove reviewer. Please try again.');
+    } finally {
+      setPendingRemoveReviewer(null);
+    }
+  };
+
+  // Cancel reviewer removal
+  const cancelRemoveReviewer = () => {
+    setPendingRemoveReviewer(null);
+  };
+
   // Remove a graded PR (only new ones)
   const removeGradedPR = (reviewer, prIndex) => {
     // Check if PR can be removed before updating state
@@ -191,12 +270,11 @@
   const handleSave = async () => {
     try {
       setSaving(true);
-      const currentDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
-
       // Remove isNew flag before sending to API
+      const offset = WEEK_OPTION_OFFSETS[selectedMockWeek] ?? 0;
       const payload = {
-        teamCode: TEAM_CODE,
-        date: currentDate,
+        teamCode: selectedTeam,
+        date: getWeekStartByOffset(offset),
         gradings: gradings.map(g => ({
           reviewer: g.reviewer,
           prsReviewed: g.prsReviewed,
@@ -225,6 +303,8 @@
     }
   };
 
+  const isCurrentWeek = (WEEK_OPTION_OFFSETS[selectedMockWeek] ?? 0) === 0;
+
   const currentDate = new Date().toLocaleDateString('en-US', {
     year: 'numeric',
     month: 'long',
@@ -279,22 +359,27 @@
         {/* Main Table */}
         <SelectionProvider>
           <div className={styles.section}>
-            <div className={styles.tableHeaderActions}>
-              <button
-                type="button"
-                onClick={() => setShowAddReviewerModal(true)}
-                className={styles.addReviewerButton}
-              >
-                + Add Reviewer
-              </button>
-            </div>
+            {isCurrentWeek && (
+              <div className={styles.tableHeaderActions}>
+                <button
+                  type="button"
+                  onClick={() => setShowAddReviewerModal(true)}
+                  className={styles.addReviewerButton}
+                >
+                  + Add Reviewer
+                </button>
+              </div>
+            )}
             <GradingTable
               gradings={gradings}
               onUpdatePRsReviewed={updatePRsReviewed}
               onAddPRClick={setOpenAddModal}
               openAddModal={openAddModal}
               onAddGradedPR={requestAddGradedPR}
+              onRemoveReviewer={requestRemoveReviewer}
+              isCurrentWeek={isCurrentWeek}
               darkMode={darkMode}
+              canEdit={canEdit}
             />
           </div>
 
@@ -311,16 +396,18 @@
 
         {/* Footer */}
 
-        <div className={styles.footerContent}>
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            type="button"
-            className={styles.saveButton}
-          >
-            {saving ? 'Saving...' : 'Save'}
-          </button>
-        </div>
+        {isCurrentWeek && (
+          <div className={styles.footerContent}>
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              type="button"
+              className={styles.saveButton}
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        )}
       </div>
 
       {/* Confirmation Modal */}
@@ -334,6 +421,15 @@
         />
       )}
 
+      {/* Remove Reviewer Modal */}
+      {pendingRemoveReviewer && (
+        <RemoveReviewerModal
+          reviewer={pendingRemoveReviewer}
+          onConfirm={confirmRemoveReviewer}
+          onCancel={cancelRemoveReviewer}
+        />
+      )}
+
       {/* Add Reviewer Modal */}
       {showAddReviewerModal && (
         <AddReviewerModal onAdd={addReviewer} onCancel={() => setShowAddReviewerModal(false)} />

src/components/PRGradingDashboard/RemoveReviewerModal.jsx

@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { Trash2, X } from 'lucide-react';
+import styles from './ConfirmationModal.module.css';
+
+function RemoveReviewerModal({ reviewer, onConfirm, onCancel }) {
+  useEffect(() => {
+    const handleEscape = e => {
+      if (e.key === 'Escape') onCancel();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [onCancel]);
+
+  const handleOverlayClick = e => {
+    if (e.target === e.currentTarget) onCancel();
+  };
+
+  const handleOverlayKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={handleOverlayClick}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close modal by clicking outside"
+    >
+      <div
+        className={styles.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="remove-reviewer-modal-title"
+      >
+        <div className={styles.modalHeader}>
+          <h3 id="remove-reviewer-modal-title" className={styles.modalTitle}>
+            Remove Reviewer
+          </h3>
+          <button
+            type="button"
+            onClick={onCancel}
+            className={styles.closeButton}
+            aria-label="Close"
+          >
+            <X className={styles.closeIcon} />
+          </button>
+        </div>
+        <div className={styles.modalBody}>
+          <div className={styles.confirmationIcon}>
+            <Trash2 className={styles.icon} />
+          </div>
+          <p className={styles.confirmationText}>
+            Remove reviewer <strong>{reviewer}</strong> from this week?
+          </p>
+          <p className={styles.noteText}>
+            Their past PR review history will remain visible in analytics.
+          </p>
+        </div>
+        <div className={styles.modalFooter}>
+          <button
+            type="button"
+            onClick={onCancel}
+            className={`${styles.button} ${styles.buttonCancel}`}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className={`${styles.button} ${styles.buttonConfirm}`}
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RemoveReviewerModal;