diff --git a/src/components/PRGradingDashboard/PRGradingDashboard.jsx b/src/components/PRGradingDashboard/PRGradingDashboard.jsx
index 96f55aaaa1..82e8a9afe3 100644
--- a/src/components/PRGradingDashboard/PRGradingDashboard.jsx
+++ b/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 */}
-
{TEAM_NAME}
-
{currentDate}
+
+
{TEAM_NAME}
+
{currentDate}
+
+
+
+
+
+
{selectedMockWeekMeta.range}
+
+
diff --git a/src/components/PRGradingDashboard/PRGradingDashboard.module.css b/src/components/PRGradingDashboard/PRGradingDashboard.module.css
index 4f0576594f..455b04b0c4 100644
--- a/src/components/PRGradingDashboard/PRGradingDashboard.module.css
+++ b/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;
+ }
+}
diff --git a/src/components/PRGradingDashboard/mockWeeklyAuditData.js b/src/components/PRGradingDashboard/mockWeeklyAuditData.js
new file mode 100644
index 0000000000..af8f41bad9
--- /dev/null
+++ b/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) }]),
+);