720 lines
41 KiB
JavaScript
720 lines
41 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
|
|
export default function AdvancedSearch() {
|
|
let { t } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
return (
|
|
<div className="card" id="advancedsearch-card">
|
|
<div className="card-body">
|
|
<div class="govuk-body-m ">
|
|
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
|
|
<h3 class="govuk-heading-m">Advanced Search</h3>
|
|
</legend>
|
|
<div class="govuk-form-group">
|
|
<label class="govuk-label" for="address-line-1">
|
|
Appellant/Applicant{" "}
|
|
</label>
|
|
<input
|
|
class="govuk-input"
|
|
id="address-line-1"
|
|
name="address-line-1"
|
|
type="text"
|
|
autocomplete="address-line1"
|
|
/>
|
|
</div>
|
|
<div class="govuk-form-group">
|
|
<label class="govuk-label" for="address-town">
|
|
Other Party{" "}
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-!-width-two-thirds"
|
|
id="address-town"
|
|
name="address-town"
|
|
type="text"
|
|
autocomplete="address-level2"
|
|
/>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Hearing/Inquiry Date Calendar View{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
{" "}
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Hearing/Inquiry Date{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
{" "}
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Site Visit Date{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
{" "}
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Call-In Date{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
{" "}
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Date Received{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
{" "}
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Start Date{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group form-inline-label">
|
|
<fieldset
|
|
class="govuk-fieldset"
|
|
role="group"
|
|
aria-describedby="passport-issued-hint"
|
|
>
|
|
{" "}
|
|
<div className="inlineFieldset">
|
|
<legend class="govuk-fieldset__legend govuk-!-width-one-third">
|
|
Decision Date{" "}
|
|
</legend>
|
|
<div
|
|
class="govuk-date-input"
|
|
id="passport-issued"
|
|
>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-day"
|
|
>
|
|
Day
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-day"
|
|
name="passport-issued-day"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-month"
|
|
>
|
|
Month
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-2"
|
|
id="passport-issued-month"
|
|
name="passport-issued-month"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group">
|
|
<label
|
|
class="govuk-label govuk-date-input__label"
|
|
for="passport-issued-year"
|
|
>
|
|
Year
|
|
</label>
|
|
<input
|
|
class="govuk-input govuk-date-input__input govuk-input--width-4"
|
|
id="passport-issued-year"
|
|
name="passport-issued-year"
|
|
type="text"
|
|
pattern="[0-9]*"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="govuk-date-input__item">
|
|
<div class="govuk-form-group"></div>
|
|
|
|
<div class="govuk-checkboxes__item">
|
|
<input
|
|
class="govuk-checkboxes__input"
|
|
id="waste-3"
|
|
name="waste"
|
|
type="checkbox"
|
|
value="farm"
|
|
/>
|
|
<label
|
|
class="govuk-label govuk-checkboxes__label no__right_padding"
|
|
for="waste-3"
|
|
>
|
|
+/- 30 days
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="govuk-form-group ">
|
|
<label class="govuk-label" for="sort">
|
|
Procedure Type
|
|
</label>
|
|
<select class="govuk-select" id="sort" name="sort">
|
|
<option value="">-- Select --</option>
|
|
<option value="Hearing">Hearing</option>
|
|
<option value="Inquiry">Inquiry</option>
|
|
<option value="Written representations">
|
|
Written representations
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="govuk-form-group">
|
|
<label class="govuk-label" for="sort">
|
|
Status Type
|
|
</label>
|
|
<select class="govuk-select" id="sort" name="sort">
|
|
<option value="">-- Select --</option>
|
|
<option value="Any">Any</option>
|
|
<option value="In progress">In progress</option>
|
|
<option value="Complete">Complete</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|