Ramsundar - Add mock week selector UI to PR Grading Dashboard

src/components/PRGradingDashboard/PRGradingDashboard.jsx

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import AddReviewerModal from './AddReviewerModal';
 import ConfirmationModal from './ConfirmationModal';
 import GradingTable from './GradingTable';
+import { MOCK_WEEK_METADATA, MOCK_WEEK_OPTIONS } from './mockWeeklyAuditData';
 import styles from './PRGradingDashboard.module.css';
 import { SelectionProvider } from './SelectionContext';
 import SummaryList from './SummaryList';
@@ -43,6 +44,7 @@ function PRGradingDashboard() {
   const [pendingPR, setPendingPR] = useState(null); // { reviewer, prNumbers, grade } or null
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [showAddReviewerModal, setShowAddReviewerModal] = useState(false);
+  const [selectedMockWeek, setSelectedMockWeek] = useState('Current Week');
 
   // Fetch data on mount
   useEffect(() => {
@@ -228,6 +230,7 @@ function PRGradingDashboard() {
     month: 'long',
     day: 'numeric',
   });
+  const selectedMockWeekMeta = MOCK_WEEK_METADATA[selectedMockWeek];
 
   if (loading) {
     return (
@@ -246,8 +249,30 @@ function PRGradingDashboard() {
         {/* Header */}
         <div className={styles.header}>
           <div className={styles.headerContent}>
-            <h1 className={styles.title}>{TEAM_NAME}</h1>
-            <p className={styles.date}>{currentDate}</p>
+            <div>
+              <h1 className={styles.title}>{TEAM_NAME}</h1>
+              <p className={styles.date}>{currentDate}</p>
+            </div>
+            <div className={styles.headerControls}>
+              <div className={styles.mockWeekControl}>
+                <label htmlFor="mock-week-selector" className={styles.mockWeekLabel}>
+                  Review Week
+                </label>
+                <select
+                  id="mock-week-selector"
+                  value={selectedMockWeek}
+                  onChange={e => setSelectedMockWeek(e.target.value)}
+                  className={styles.mockWeekSelect}
+                >
+                  {MOCK_WEEK_OPTIONS.map(option => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </select>
+                <p className={styles.mockWeekMeta}>{selectedMockWeekMeta.range}</p>
+              </div>
+            </div>
           </div>
         </div>
 

src/components/PRGradingDashboard/PRGradingDashboard.module.css

@@ -1,6 +1,7 @@
 * {
   min-width: 0;
 }
+
 .container {
   min-height: 100vh;
   background-color: #f9fafb;
@@ -15,7 +16,7 @@
 .header {
   background-color: white;
   border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
 }
@@ -24,6 +25,49 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 1rem;
+}
+
+.headerControls {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.mockWeekControl {
+  min-width: 220px;
+}
+
+.mockWeekLabel {
+  display: block;
+  margin-bottom: 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  font-family: inherit;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #4b5563;
+}
+
+.mockWeekSelect {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background-color: #fff;
+  color: #1f2937;
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.mockWeekMeta {
+  margin-top: 0.4rem;
+  margin-bottom: 0;
+  font-size: 0.8rem;
+  font-family: inherit;
+  color: #6b7280;
+  text-align: right;
 }
 
 .title {
@@ -40,7 +84,7 @@
 .section {
   background-color: white;
   border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   overflow-x: auto;
@@ -62,23 +106,23 @@
   border-radius: 0.375rem;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
 }
 
 .addReviewerButton:hover {
   background-color: #1d4ed8;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);
 }
 
 .addReviewerButton:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 50%), 0 0 0 4px rgb(37 99 235 / 10%);
 }
 
 .summarySection {
   background-color: white;
   border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
 }
@@ -109,18 +153,18 @@
   border: none;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
   min-width: 120px;
 }
 
 .saveButton:hover {
   background-color: #1d4ed8;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
 }
 
 .saveButton:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 50%), 0 1px 3px 0 rgb(0 0 0 / 10%);
 }
 
 .saveButton:disabled {
@@ -182,6 +226,20 @@
   color: #d1d5db;
 }
 
+:global(.dark-mode) .mockWeekLabel {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .mockWeekSelect {
+  background-color: #111827;
+  border-color: #374151;
+  color: #f9fafb;
+}
+
+:global(.dark-mode) .mockWeekMeta {
+  color: #9ca3af;
+}
+
 :global(.dark-mode) .loadingContainer {
   background-color: #111827;
 }
@@ -200,7 +258,7 @@
 }
 
 :global(.dark-mode) .addReviewerButton:focus {
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 50%), 0 0 0 4px rgb(37 99 235 / 10%);
 }
 
 :global(.dark-mode) .saveButton {
@@ -222,3 +280,21 @@
   border-top-color: transparent;
 }
 
+@media (width <= 768px) {
+  .headerContent {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .headerControls {
+    width: 100%;
+  }
+
+  .mockWeekControl {
+    width: 100%;
+  }
+
+  .mockWeekMeta {
+    text-align: left;
+  }
+}

src/components/PRGradingDashboard/mockWeeklyAuditData.js

@@ -0,0 +1,27 @@
+function getWeekRange(weeksAgo) {
+  const now = new Date();
+  const dayOfWeek = now.getDay();
+  const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+
+  const monday = new Date(now);
+  monday.setDate(now.getDate() + mondayOffset - weeksAgo * 7);
+
+  const sunday = new Date(monday);
+  sunday.setDate(monday.getDate() + 6);
+
+  const format = date => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
+  return `${format(monday)} - ${format(sunday)}`;
+}
+
+export const MOCK_WEEK_OPTIONS = [
+  'Current Week',
+  '1 Week Ago',
+  '2 Weeks Ago',
+  '3 Weeks Ago',
+  '4 Weeks Ago',
+];
+
+export const MOCK_WEEK_METADATA = Object.fromEntries(
+  MOCK_WEEK_OPTIONS.map((label, i) => [label, { range: getWeekRange(i) }]),
+);