Skip to content

Commit

Permalink
create quarter explainer table in Reports
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtimpe
jtimpe committed Oct 11, 2024
1 parent 7844b93 commit bcadb9c
Showing 1 changed file with 170 additions and 123 deletions.
293 changes: 170 additions & 123 deletions tdrs-frontend/src/components/Reports/Reports.jsx
View file
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

0 comments on commit bcadb9c

Please sign in to comment.