{
- setLoading(true);
- setPendingCareerForModal(careerObj);
- }}
+ onCareerSelected={handleCareerFromSearch}
/>
diff --git a/src/components/CollegeProfileForm.js b/src/components/CollegeProfileForm.js
index 03d4095..18da6a7 100644
--- a/src/components/CollegeProfileForm.js
+++ b/src/components/CollegeProfileForm.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import apiFetch from '../auth/apiFetch.js';
import moment from 'moment/moment.js';
@@ -48,21 +48,24 @@ const toMySqlDate = iso => {
return iso.replace('T', ' ').slice(0, 19);
};
+
+
export default function CollegeProfileForm() {
const { careerId, id } = useParams(); // id optional
const nav = useNavigate();
- const [cipRows, setCipRows] = useState([]);
const [schoolSug, setSchoolSug] = useState([]);
const [progSug, setProgSug] = useState([]);
const [types, setTypes] = useState([]);
- const [ipeds, setIpeds] = useState([]);
const [schoolValid, setSchoolValid] = useState(true);
const [programValid, setProgramValid] = useState(true);
const [autoGradDate, setAutoGradDate] = useState('');
const [graduationTouched, setGraduationTouched] = useState(false);
const [programLengthTouched, setProgramLengthTouched] = useState(false);
-
- const schoolData = cipRows;
+ const [selectedUnitId, setSelectedUnitId] = useState(null);
+ const schoolPrevRef = useRef('');
+ const programPrevRef = useRef('');
+ const lastSchoolText = useRef('');
+
const [form, setForm] = useState({
career_profile_id : careerId,
@@ -81,6 +84,10 @@ export default function CollegeProfileForm() {
const [autoTuition, setAutoTuition] = useState(0);
+ const firstOfNextMonth = (d) => {
+ return moment(d).startOf('month').add(1, 'month').format('YYYY-MM-DD');
+};
+
// ---------- handlers (inside component) ----------
const handleFieldChange = (e) => {
const { name, value, type, checked } = e.target;
@@ -98,6 +105,11 @@ const handleFieldChange = (e) => {
) {
draft[name] = value === '' ? '' : parseFloat(value);
if (name === 'program_length') setProgramLengthTouched(true);
+ if (name === 'program_type') {
+ draft[name] = value;
+ draft.credit_hours_required = '';
+ setProgramLengthTouched(false);
+ }
} else {
draft[name] = value;
}
@@ -105,59 +117,95 @@ const handleFieldChange = (e) => {
});
};
-const onSchoolInput = (e) => {
- handleFieldChange(e);
- const v = e.target.value.toLowerCase();
- const suggestions = cipRows
- .filter((r) => r.INSTNM.toLowerCase().includes(v))
- .map((r) => r.INSTNM);
- setSchoolSug([...new Set(suggestions)].slice(0, 10));
-};
-
-const onProgramInput = (e) => {
- handleFieldChange(e);
- if (!form.selected_school) return;
- const v = e.target.value.toLowerCase();
- const sug = cipRows
- .filter(
- (r) =>
- r.INSTNM.toLowerCase() === form.selected_school.toLowerCase() &&
- r.CIPDESC.toLowerCase().includes(v)
- )
- .map((r) => r.CIPDESC);
- setProgSug([...new Set(sug)].slice(0, 10));
-};
-
-// Prefill school suggestions when form loads or school changes
-useEffect(() => {
- const v = (form.selected_school || '').toLowerCase().trim();
- if (!v || !cipRows.length) {
- setSchoolSug([]);
- return;
- }
- const suggestions = cipRows
- .filter(r => (r.INSTNM || '').toLowerCase().includes(v))
- .map(r => r.INSTNM);
- setSchoolSug([...new Set(suggestions)].slice(0, 10));
-}, [form.selected_school, cipRows]);
-
-// Prefill program suggestions when form loads or program/school changes
-useEffect(() => {
- const sch = (form.selected_school || '').toLowerCase().trim();
- const q = (form.selected_program || '').toLowerCase().trim();
- if (!sch || !q || !cipRows.length) {
+const onSchoolInput = async (e) => {
+ handleFieldChange(e);
+ const value = e.target.value || '';
+ // If school text changed at all, clear program suggestions and program/type selections
+ if (value !== lastSchoolText.current) {
setProgSug([]);
- return;
+ setTypes([]);
+ programPrevRef.current = '';
+ setForm(prev => ({
+ ...prev,
+ selected_program: value ? prev.selected_program : '', // clear if user erased school
+ program_type: ''
+ }));
+ lastSchoolText.current = value;
}
- const sug = cipRows
- .filter(r =>
- (r.INSTNM || '').toLowerCase() === sch &&
- (r.CIPDESC || '').toLowerCase().includes(q)
- )
- .map(r => r.CIPDESC);
- setProgSug([...new Set(sug)].slice(0, 10));
-}, [form.selected_school, form.selected_program, cipRows]);
+ if (!value.trim()) { setSchoolSug([]); schoolPrevRef.current = ''; return; }
+ const it = e?.nativeEvent?.inputType; // 'insertReplacementText' on datalist pick
+ const rep = it === 'insertReplacementText';
+ const big = Math.abs(value.length - (schoolPrevRef.current || '').length) > 1;
+ try {
+ const resp = await authFetch(`/api/schools/suggest?query=${encodeURIComponent(value)}&limit=10`);
+ const arr = resp.ok ? await resp.json() : [];
+ const opts = Array.isArray(arr) ? arr : [];
+ setSchoolSug(opts); // [{ name, unitId }]
+ const exact = opts.find(o => (o.name || '').toLowerCase() === value.toLowerCase());
+ if (exact && (rep || big)) {
+ setSelectedUnitId(exact.unitId ?? null);
+ setForm(prev => ({
+ ...prev,
+ selected_school : exact.name,
+ selected_program: '',
+ program_type : ''
+ }));
+ setProgSug([]); setTypes([]);
+ }
+ } catch { setSchoolSug([]); }
+ schoolPrevRef.current = value;
+ };
+const onProgramInput = async (e) => {
+ handleFieldChange(e);
+ const school = (form.selected_school || '').trim();
+ const value = e.target.value || '';
+ if (!school || !value) { setProgSug([]); programPrevRef.current = value; return; }
+
+ const it = e?.nativeEvent?.inputType; // 'insertReplacementText' when choosing from datalist
+ const rep = it === 'insertReplacementText';
+ const big = Math.abs(value.length - (programPrevRef.current || '').length) > 1;
+
+ try {
+ const resp = await authFetch(`/api/programs/suggest?school=${encodeURIComponent(school)}&query=${encodeURIComponent(value)}&limit=10`);
+ const arr = resp.ok ? await resp.json() : [];
+ const opts = Array.isArray(arr) ? arr : []; // [{ program }]
+ setProgSug(opts);
+
+ // Early commit if exact match was selected from the list (prevents double-pick annoyance)
+ const exact = opts.find(p => (p.program || '').toLowerCase() === value.toLowerCase());
+ if (exact && (rep || big)) {
+ setForm(prev => ({ ...prev, selected_program: exact.program }));
+ setTypes([]); // will refetch types below via effect/blur
+ }
+ } catch {
+ setProgSug([]);
+ }
+ programPrevRef.current = value;
+ };
+
+
+ // Prefill program suggestions once school+program exist (e.g., after API load)
+ useEffect(() => {
+ const school = (form.selected_school || '').trim();
+ const q = (form.selected_program || '').trim();
+ if (!school || !q) { setProgSug([]); return; }
+ (async () => {
+ try {
+ const resp = await authFetch(`/api/programs/suggest?school=${encodeURIComponent(school)}&query=${encodeURIComponent(q)}&limit=10`);
+ const arr = resp.ok ? await resp.json() : [];
+ setProgSug(Array.isArray(arr) ? arr : []);
+ } catch { setProgSug([]); }
+ })();
+ }, [form.selected_school, form.selected_program]);
+
+ // When selected_school changes (after commit/blur), reset program suggestions/types
+ useEffect(() => {
+ setProgSug([]);
+ setTypes([]);
+ setSelectedUnitId(null);
+ programPrevRef.current = '';
+ }, [form.selected_school]);
useEffect(() => {
if (id && id !== 'new') {
@@ -174,27 +222,60 @@ useEffect(() => {
is_online : !!raw.is_online,
loan_deferral_until_graduation : !!raw.loan_deferral_until_graduation,
};
- setForm(normalized);
- if (normalized.tuition !== undefined && normalized.tuition !== null) {
- setManualTuition(String(normalized.tuition));
- }
+ setForm(normalized);
+ // Show saved tuition immediately; estimator will overwrite when deps change
+ if (normalized.tuition != null) {
+ const n = Number(normalized.tuition);
+ setAutoTuition(Number.isFinite(n) ? n : 0);
+ }
+ if (normalized.unit_id) setSelectedUnitId(normalized.unit_id);
+ // If profile came with school+program, load types so Degree Type select is populated
+ if ((normalized.selected_school || '') && (normalized.selected_program || '')) {
+ try {
+ const resp = await authFetch(
+ `/api/programs/types?school=${encodeURIComponent(normalized.selected_school)}&program=${encodeURIComponent(normalized.selected_program)}`
+ );
+ const data = resp.ok ? await resp.json() : null;
+ setTypes(Array.isArray(data?.types) ? data.types : []);
+ } catch {}
+ }
}
})();
}
}, [careerId, id]);
-
-// 2) keep manualTuition aligned if form.tuition is updated elsewhere
-useEffect(() => {
- if (form.tuition !== undefined && form.tuition !== null) {
- if (manualTuition.trim() === '') {
- setManualTuition(String(form.tuition));
- }
- }
-}, [form.tuition]);
+
async function handleSave(){
try{
- const body = normalisePayload({ ...form, tuition: chosenTuition, career_profile_id: careerId });
+
+ // Compute chosen tuition exactly like Onboarding (manual override wins; blank => auto)
+ const chosenTuition =
+ (manualTuition.trim() === '')
+ ? autoTuition
+ : (Number.isFinite(parseFloat(manualTuition)) ? parseFloat(manualTuition) : autoTuition);
+
+ // Confirm user actually picked from list (one alert, on Save only)
+ const school = (form.selected_school || '').trim().toLowerCase();
+ const prog = (form.selected_program || '').trim().toLowerCase();
+ // validate against current server suggestions (not local files)
+ const exactSchool = school && schoolSug.find(o =>
+ (o.name || '').toLowerCase() === school
+ );
+
+ if (school && !exactSchool) {
+ setSchoolValid(false);
+ alert('Please pick a school from the list.');
+ return;
+ }
+ const exactProgram = prog && progSug.find(p =>
+ (p.program || '').toLowerCase() === prog
+ );
+ if (prog && !exactProgram) {
+ setProgramValid(false);
+ alert('Please pick a program from the list.');
+ return;
+ }
+ const body = normalisePayload({ ...form, tuition: chosenTuition, career_profile_id: careerId, unit_id: selectedUnitId ?? null });
const res = await authFetch('/api/premium/college-profile',{
method:'POST',
headers:{'Content-Type':'application/json'},
@@ -208,96 +289,79 @@ useEffect(() => {
}catch(err){ console.error(err); alert(err.message);}
}
-/* LOAD iPEDS ----------------------------- */
+
+ useEffect(() => {
+ const sch = (form.selected_school || '').trim();
+ const prog = (form.selected_program || '').trim();
+ if (!sch || !prog) { setTypes([]); return; }
+ (async () => {
+ try {
+ const resp = await authFetch(`/api/programs/types?school=${encodeURIComponent(sch)}&program=${encodeURIComponent(prog)}`);
+ const data = resp.ok ? await resp.json() : null;
+ const arr = Array.isArray(data?.types) ? data.types : [];
+ setTypes(arr);
+ } catch { setTypes([]); }
+ })();
+ }, [form.selected_school, form.selected_program]);
+
+ // Resolve UNITID from typed/loaded school name (profile doesn't store unit_id)
+ useEffect(() => {
+ const name = (form.selected_school || '').trim();
+ if (!name || selectedUnitId) return;
+ let cancelled = false;
+ (async () => {
+ try {
+ // try a wider net so exact always shows up
+ const resp = await authFetch(`/api/schools/suggest?query=${encodeURIComponent(name)}&limit=50`);
+ if (!resp.ok) return;
+ const arr = await resp.json();
+ const exact = Array.isArray(arr)
+ ? arr.find(o => (o.name || '').toLowerCase() === name.toLowerCase())
+ : null;
+ if (!cancelled && exact?.unitId) setSelectedUnitId(exact.unitId);
+ } catch {}
+ })();
+ return () => { cancelled = true; };
+ }, [form.selected_school, selectedUnitId]);
+
+
+ // Auto-calc Yearly Tuition via server (parity with Onboarding)
useEffect(() => {
- fetch('/ic2023_ay.csv', { credentials: 'omit' })
- .then(r => r.text())
- .then(text => {
- const rows = text.split('\n').map(l => l.split(','));
- const headers = rows[0];
- const parsed = rows.slice(1).map(r =>
- Object.fromEntries(r.map((v,i)=>[headers[i], v]))
- );
- setIpeds(parsed); // you already declared setIpeds
- })
- .catch(err => console.error('iPEDS load failed', err));
-}, []);
-
- useEffect(() => { fetch('/cip_institution_mapping_new.json', { credentials: 'omit' })
- .then(r=>r.text()).then(t => setCipRows(
- t.split('\n').map(l=>{try{return JSON.parse(l)}catch{ return null }})
- .filter(Boolean)
- ));
- fetch('/ic2023_ay.csv')
- .then(r=>r.text()).then(csv=>{/* identical to CollegeOnboarding */});
-},[]);
-
-useEffect(()=>{
- if(!form.selected_school || !form.selected_program) { setTypes([]); return; }
- const t = cipRows.filter(r =>
- r.INSTNM.toLowerCase()===form.selected_school.toLowerCase() &&
- r.CIPDESC===form.selected_program)
- .map(r=>r.CREDDESC);
- setTypes([...new Set(t)]);
-},[form.selected_school, form.selected_program, cipRows]);
-
-useEffect(() => {
- if (!ipeds.length) return;
- if (!form.selected_school ||
- !form.program_type ||
- !form.credit_hours_per_year) return;
-
- /* 1 ─ locate UNITID */
- const sch = cipRows.find(
- r => r.INSTNM.toLowerCase() === form.selected_school.toLowerCase()
- );
- if (!sch) return;
- const unitId = sch.UNITID;
- const row = ipeds.find(r => r.UNITID === unitId);
- if (!row) return;
-
- /* 2 ─ decide in‑state / district buckets */
- const grad = [
- "Master's Degree","Doctoral Degree",
- "Graduate/Professional Certificate","First Professional Degree"
- ].includes(form.program_type);
-
- const pick = (codeInDist, codeInState, codeOut) => {
- if (form.is_in_district) return row[codeInDist];
- else if (form.is_in_state) return row[codeInState];
- else return row[codeOut];
- };
-
- const partTime = grad
- ? pick('HRCHG5','HRCHG6','HRCHG7')
- : pick('HRCHG1','HRCHG2','HRCHG3');
-
- const fullTime = grad
- ? pick('TUITION5','TUITION6','TUITION7')
- : pick('TUITION1','TUITION2','TUITION3');
-
- const chpy = parseFloat(form.credit_hours_per_year) || 0;
- const est = chpy && chpy < 24
- ? parseFloat(partTime || 0) * chpy
- : parseFloat(fullTime || 0);
-
- setAutoTuition(Math.round(est));
+ (async () => {
+ const chpy = Number(form.credit_hours_per_year);
+ if (!selectedUnitId ||
+ !form.program_type ||
+ !Number.isFinite(chpy) ||
+ chpy <= 0) {
+ // keep previous autoTuition if user has manual override; otherwise show 0
+ if (manualTuition.trim() === '') setAutoTuition(0);
+ return;
+ }
+ try {
+ const qs = new URLSearchParams({
+ unitId: String(selectedUnitId),
+ programType: form.program_type,
+ inState: (form.is_in_state ? 1 : 0).toString(),
+ inDistrict: (form.is_in_district ? 1 : 0).toString(),
+ creditHoursPerYear: String(chpy),
+ }).toString();
+ const resp = await authFetch(`/api/tuition/estimate?${qs}`);
+ const data = resp.ok ? await resp.json() : {};
+ const est = Number.isFinite(data?.estimate) ? data.estimate : 0;
+ if (manualTuition.trim() === '') setAutoTuition(est); // don't clobber manual override
+ } catch {
+ if (manualTuition.trim() === '') setAutoTuition(0);
+ }
+ })();
}, [
- ipeds,
- cipRows,
- form.selected_school,
+ selectedUnitId,
form.program_type,
form.credit_hours_per_year,
form.is_in_state,
- form.is_in_district
+ form.is_in_district,
+ manualTuition // include so clearing manual → auto resumes immediately
]);
-const handleManualTuitionChange = e => setManualTuition(e.target.value);
-const chosenTuition = (() => {
- if (manualTuition.trim() === '') return autoTuition;
- const n = parseFloat(manualTuition);
- return Number.isFinite(n) ? n : autoTuition;
-})();
/* ────────────────────────────────────────────────────────────
Auto‑calculate PROGRAM LENGTH when the user hasn’t typed in
@@ -306,7 +370,7 @@ const chosenTuition = (() => {
useEffect(() => {
if (programLengthTouched) return; // user override
// if a program_length already exists (e.g., from API), don't overwrite it
- if (form.program_length !== '' && form.program_length != null) return; // user override
+ // user override
const chpy = parseFloat(form.credit_hours_per_year);
if (!chpy || chpy <= 0) return;
@@ -341,32 +405,40 @@ const chpy = parseFloat(form.credit_hours_per_year);
programLengthTouched
]);
- useEffect(() => {
+useEffect(() => {
if (graduationTouched) return;
const years = parseFloat(form.program_length);
if (!years || years <= 0) return;
- const start = form.enrollment_date
- ? moment(form.enrollment_date)
- : moment();
+// Mirror Onboarding’s start date selection
+ let start = null;
+ if (form.college_enrollment_status === 'prospective_student') {
+ if (!form.enrollment_date) return; // need user’s chosen start
+ start = moment(form.enrollment_date);
+ } else if (form.college_enrollment_status === 'currently_enrolled') {
+ start = moment().startOf('month').add(1, 'month'); // first of next month
+ } else {
+ // not in-school flows → do nothing
+ return;
+ }
+ const monthsToAdd = Math.round(years * 12);
+ const est = moment(start).add(monthsToAdd, 'months');
+ const iso = firstOfNextMonth(est);
- const iso = start.add(years, 'years')
- .startOf('month')
- .format('YYYY-MM-DD');
setAutoGradDate(iso);
setForm(prev => ({ ...prev, expected_graduation: iso }));
}, [
form.program_length,
form.credit_hours_required,
- form.credit_hours_per_year,
form.hours_completed,
form.credit_hours_per_year,
form.enrollment_date,
graduationTouched
]);
+const handleManualTuitionChange = e => setManualTuition(e.target.value);
return (
@@ -401,22 +473,27 @@ return (
name="selected_school"
value={form.selected_school}
onChange={onSchoolInput}
- onBlur={() => {
- const ok = cipRows.some(
- r => r.INSTNM.toLowerCase() === form.selected_school.toLowerCase()
- );
- setSchoolValid(ok);
- if (!ok) alert('Please pick a school from the list.');
+ onBlur={() => {
+ const trimmed = (form.selected_school || '').trim();
+ const exact = schoolSug.find(o => (o.name || '').toLowerCase() === trimmed.toLowerCase());
+ // Auto-commit exact typed value so downstream lookups work
+ if (exact) {
+ if (form.selected_school !== exact.name) {
+ setForm(prev => ({ ...prev, selected_school: exact.name }));
+ }
+ if (!selectedUnitId) setSelectedUnitId(exact.unitId ?? null);
+ }
+ // Valid if empty (still choosing) OR exact chosen
+ setSchoolValid(trimmed === '' || !!exact);
}}
list="school-suggestions"
+ className={`w-full border rounded p-2 ${
+ (form.selected_school || '').trim() !== '' && !schoolValid ? 'border-red-500' : ''}`}
placeholder="Start typing and choose…"
- className={`w-full border rounded p-2 ${schoolValid ? '' : 'border-red-500'}`}
required
/>
@@ -429,33 +506,40 @@ return (
name="selected_program"
value={form.selected_program}
onChange={onProgramInput}
- onBlur={() => {
- const ok =
- form.selected_school && // need a school first
- cipRows.some(
- r =>
- r.INSTNM.toLowerCase() === form.selected_school.toLowerCase() &&
- r.CIPDESC.toLowerCase() === form.selected_program.toLowerCase()
- );
- setProgramValid(ok);
- if (!ok) alert('Please pick a program from the list.');
- }}
- list="program-suggestions"
+ onBlur={() => {
+ const prog = (form.selected_program || '').trim().toLowerCase();
+ const exact = progSug.find(p => (p.program || '').toLowerCase() === prog);
+ // If user typed an exact program, ensure canonical casing is committed
+ if (exact && form.selected_program !== exact.program) {
+ setForm(prev => ({ ...prev, selected_program: exact.program }));
+ }
+ setProgramValid(prog === '' || !!exact);
+ }}
+ list="program-suggestions"
placeholder="Start typing and choose…"
- className={`w-full border rounded p-2 ${programValid ? '' : 'border-red-500'}`}
+ className={`w-full border rounded p-2 ${
+ (form.selected_program || '').trim() !== '' && !programValid ? 'border-red-500' : '' }`}
required
/>
-
+
{/* 4 │ Program‑type */}
- );
+ })()}
{/* 5 │ Academic calendar */}
diff --git a/src/components/PremiumOnboarding/CollegeOnboarding.js b/src/components/PremiumOnboarding/CollegeOnboarding.js
index b1fdecc..a673d28 100644
--- a/src/components/PremiumOnboarding/CollegeOnboarding.js
+++ b/src/components/PremiumOnboarding/CollegeOnboarding.js
@@ -12,8 +12,8 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData }) {
const schoolPrevRef = useRef('');
const [programSuggestions, setProgramSuggestions] = useState([]);
const [availableProgramTypes, setAvailableProgramTypes] = useState([]);
- const [schoolValid, setSchoolValid] = useState(false);
- const [programValid, setProgramValid] = useState(false);
+ const [schoolValid, setSchoolValid] = useState(true);
+ const [programValid, setProgramValid] = useState(true);
const [enrollmentDate, setEnrollmentDate] = useState(
data.enrollment_date || ''
);
@@ -465,6 +465,26 @@ useEffect(() => {
// final handleSubmit => we store chosen tuition + program_length, then move on
const handleSubmit = () => {
+ // enforce “picked from list” at submit time (no blur popups)
+ const schoolText = (selected_school || '').trim();
+ const programText = (selected_program || '').trim();
+ const exactSchool = schoolSuggestions.find(o =>
+ (o.name || '').toLowerCase() === schoolText.toLowerCase()
+ );
+ const exactProgram = programSuggestions.find(p =>
+ (p.program || '').toLowerCase() === programText.toLowerCase()
+ );
+ if (schoolText && !selectedUnitId && !exactSchool) {
+ setSchoolValid(false);
+ alert('Please pick a school from the list.');
+ return;
+ }
+ if (programText && !exactProgram && availableProgramTypes.length === 0) {
+ setProgramValid(false);
+ alert('Please pick a program from the list.');
+ return;
+ }
+
const chosenTuition = manualTuition.trim() === ''
? autoTuition
: parseFloat(manualTuition);
@@ -577,15 +597,19 @@ const ready =
name="selected_school"
value={selected_school}
onChange={handleSchoolChange}
- onBlur={() => {
- const exact = schoolSuggestions.find(o => (o.name || '').toLowerCase() === (selected_school || '').toLowerCase());
- if (exact) handleSchoolSelect(exact); // ensure UNITID is set
- const ok = !!exact || !!selected_school;
- setSchoolValid(ok);
- if (!ok) alert("Please pick a school from the list.");
- }}
+ onBlur={() => {
+ const trimmed = (selected_school || '').trim();
+ const exact = schoolSuggestions.find(o =>
+ (o.name || '').toLowerCase() === trimmed.toLowerCase()
+ );
+ // If exact text was typed, auto-commit so UNITID is set (covers nested/double-select cases)
+ if (exact && !selectedUnitId) handleSchoolSelect(exact);
+ // Valid while empty (still choosing) or when exact is chosen
+ setSchoolValid(trimmed === '' || !!exact);
+ }}
+
list="school-suggestions"
- className={`w-full border rounded p-2 ${schoolValid ? '' : 'border-red-500'}`}
+ className={`w-full border rounded p-2 ${ (selected_school || '').trim() !== '' && !schoolValid ? 'border-red-500' : ''}`}
placeholder="Start typing and choose…"
/>