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) }]), +);