Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3109 - Quarter Explainer #3229

Merged
merged 6 commits into from
Oct 17, 2024
Merged

3109 - Quarter Explainer #3229

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bcadb9c
create quarter explainer table in Reports
jtimpe Oct 11, 2024
6f8ad20
table style
jtimpe Oct 11, 2024
16c854f
Merge branch 'develop' into 3109-quarter-explainer
ADPennington Oct 16, 2024
bd41db7
Merge branch 'develop' into 3109-quarter-explainer
ADPennington Oct 16, 2024
062b455
Merge branch 'develop' into 3109-quarter-explainer
jtimpe Oct 17, 2024
0b34231
fix whitespace
jtimpe Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
293 changes: 170 additions & 123 deletions tdrs-frontend/src/components/Reports/Reports.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,140 +244,187 @@ function Reports() {
</div>
)}
<form>
{(isOFAAdmin || isDIGITTeam || isSystemAdmin) && (
<div
className={classNames('usa-form-group maxw-mobile margin-top-4', {
'usa-form-group--error': formValidation.stt,
})}
>
<STTComboBox
selectedStt={sttInputValue}
selectStt={selectStt}
error={formValidation.stt}
/>
</div>
)}
{(stt?.ssp ? stt.ssp : false) && (
<div className="usa-form-group margin-top-4">
<fieldset className="usa-fieldset">
<legend className="usa-label text-bold">File Type</legend>
<div className="usa-radio">
<input
className="usa-radio__input"
id="tanf"
type="radio"
name="reportType"
value="tanf"
defaultChecked
onChange={() => setFileTypeInputValue('tanf')}
/>
<label className="usa-radio__label" htmlFor="tanf">
TANF
</label>
</div>
<div className="usa-radio">
<input
className="usa-radio__input"
id="ssp-moe"
type="radio"
name="reportType"
value="ssp-moe"
onChange={() => setFileTypeInputValue('ssp-moe')}
<div className="grid-row">
<div className="mobile:grid-container desktop:padding-0 desktop:grid-col-fill">
{(isOFAAdmin || isDIGITTeam || isSystemAdmin) && (
<div
className={classNames(
'usa-form-group maxw-mobile margin-top-4',
{
'usa-form-group--error': formValidation.stt,
}
)}
>
<STTComboBox
selectedStt={sttInputValue}
selectStt={selectStt}
error={formValidation.stt}
/>
<label className="usa-radio__label" htmlFor="ssp-moe">
SSP-MOE
</label>
</div>
</fieldset>
</div>
)}
<div
className={classNames('usa-form-group maxw-mobile margin-top-4', {
'usa-form-group--error': formValidation.year,
})}
>
<label
className="usa-label text-bold margin-top-4"
htmlFor="reportingYears"
>
Fiscal Year (October - September)
{formValidation.year && (
<div className="usa-error-message" id="years-error-alert">
A fiscal year is required
</div>
)}
{/* eslint-disable-next-line */}
<select
className={classNames('usa-select maxw-mobile', {
'usa-combo-box__input--error': formValidation.year,
})}
name="reportingYears"
id="reportingYears"
onChange={selectYear}
value={yearInputValue}
aria-describedby="years-error-alert"
>
<option value="" disabled hidden>
- Select Fiscal Year -
</option>
{constructYearOptions()}
</select>
</label>
</div>
<div
className={classNames('usa-form-group maxw-mobile margin-top-4', {
'usa-form-group--error': formValidation.quarter,
})}
>
<label
className="usa-label text-bold margin-top-4"
htmlFor="quarter"
>
Quarter
{formValidation.quarter && (
<div className="usa-error-message" id="quarter-error-alert">
A quarter is required
{(stt?.ssp ? stt.ssp : false) && (
<div className="usa-form-group margin-top-4">
<fieldset className="usa-fieldset">
<legend className="usa-label text-bold">File Type</legend>
<div className="usa-radio">
<input
className="usa-radio__input"
id="tanf"
type="radio"
name="reportType"
value="tanf"
defaultChecked
onChange={() => setFileTypeInputValue('tanf')}
/>
<label className="usa-radio__label" htmlFor="tanf">
TANF
</label>
</div>
<div className="usa-radio">
<input
className="usa-radio__input"
id="ssp-moe"
type="radio"
name="reportType"
value="ssp-moe"
onChange={() => setFileTypeInputValue('ssp-moe')}
/>
<label className="usa-radio__label" htmlFor="ssp-moe">
SSP-MOE
</label>
</div>
</fieldset>
</div>
)}
{/* eslint-disable-next-line */}
<select
className={classNames('usa-select maxw-mobile', {
'usa-combo-box__input--error': formValidation.quarter,
})}
name="quarter"
id="quarter"
onChange={selectQuarter}
value={quarterInputValue}
aria-describedby="quarter-error-alert"
</div>
</div>
<div className="grid-row">
<div className="mobile:grid-container desktop:padding-0 desktop:grid-col-fill">
<div
className={classNames(
'usa-form-group maxw-mobile margin-top-4',
{
'usa-form-group--error': formValidation.year,
}
)}
>
<option value="" disabled hidden>
- Select Quarter -
</option>
{Object.entries(quarters).map(
([quarter, quarterDescription]) => (
<option value={quarter} key={quarter}>
{quarterDescription}
<label
className="usa-label text-bold margin-top-4"
htmlFor="reportingYears"
>
Fiscal Year (October - September)
{formValidation.year && (
<div className="usa-error-message" id="years-error-alert">
A fiscal year is required
</div>
)}
{/* eslint-disable-next-line */}
<select
className={classNames('usa-select maxw-mobile', {
'usa-combo-box__input--error': formValidation.year,
})}
name="reportingYears"
id="reportingYears"
onChange={selectYear}
value={yearInputValue}
aria-describedby="years-error-alert"
>
<option value="" disabled hidden>
- Select Fiscal Year -
</option>
)
{constructYearOptions()}
</select>
</label>
</div>
<div
className={classNames(
'usa-form-group maxw-mobile margin-top-4',
{
'usa-form-group--error': formValidation.quarter,
}
)}
</select>
</label>
>
<label
className="usa-label text-bold margin-top-4"
htmlFor="quarter"
>
Quarter
{formValidation.quarter && (
<div className="usa-error-message" id="quarter-error-alert">
A quarter is required
</div>
)}
{/* eslint-disable-next-line */}
<select
className={classNames('usa-select maxw-mobile', {
'usa-combo-box__input--error': formValidation.quarter,
})}
name="quarter"
id="quarter"
onChange={selectQuarter}
value={quarterInputValue}
aria-describedby="quarter-error-alert"
>
<option value="" disabled hidden>
- Select Quarter -
</option>
{Object.entries(quarters).map(
([quarter, quarterDescription]) => (
<option value={quarter} key={quarter}>
{quarterDescription}
</option>
)
)}
</select>
</label>
</div>
<Button
className="margin-y-4"
type="button"
onClick={() => {
if (uploadedFiles && uploadedFiles.length > 0) {
setErrorModalVisible(true)
} else {
handleSearch()
}
}}
>
Search
</Button>
</div>
<div className="mobile:grid-container desktop:padding-0 desktop:grid-col-fill">
<table className="usa-table usa-table--striped">
<caption>Identifying the right Fiscal Year and Quarter</caption>
<thead>
<tr>
<th>Fiscal Quarter</th>
<th>Calendar Period</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quarter 1</td>
<td>Oct 1 - Dec 31</td>
</tr>
<tr>
<td>Quarter 2</td>
<td>Jan 1 - Mar 31</td>
</tr>
<tr>
<td>Quarter 3</td>
<td>Apr 1 - Jun 30</td>
</tr>
<tr>
<td>Quarter 4</td>
<td>Jul 1 - Sep 30</td>
</tr>
</tbody>
</table>
</div>
</div>
<Button
className="margin-y-4"
type="button"
onClick={() => {
if (uploadedFiles && uploadedFiles.length > 0) {
setErrorModalVisible(true)
} else {
handleSearch()
}
}}
>
Search
</Button>
</form>
</div>

{isUploadReportToggled && (
<>
<h2
Expand Down
Loading