profile module | Jportal Docs | Tashif Ahmad Khan

Student record from w.get_personal_info(). Tabs over personal, academic, contact, family, addresses, qualifications.

Component architecture#

Component structure#

flowchart TD
  AA["AuthenticatedApp"] --> Pr["Profile.jsx"]
  Pr --> Tabs["ui/tabs"]
  Pr --> Photo["photo&signature base64"]
  Pr --> Rows["InfoRow fields"]

Prop	Role
`w`	portal
`profileData`	cache
`setProfileData`	setter

Data flow#

Data fetching flow diagram#

flowchart TD
  Mount["useEffect"] --> Hit{"profileData?"}
  Hit -->|yes| Done["loading false"]
  Hit -->|no| API["w.get_personal_info"]
  API --> Set["setProfileData"]

Errors log to console. Loading always clears.

Data structure#

Profile data schema#

flowchart TD
  Data["profileData"] --> GI["generalinformation"]
  Data --> Q["qualification[]"]
  Data --> PS["photo&signature.photo"]

Mock:

text

async get_personal_info() {
  return fakeData.profile;
}

UI layout and sections#

Section breakdown#

flowchart TD
  Tabs --> Personal
  Tabs --> Academic
  Tabs --> Contact
  Tabs --> Family
  Tabs --> Address
  Tabs --> Qual["Educational qualifications"]

Section	Fields
Personal	name, registration, DOB, gender, blood group, nationality, category
Academic	program, branch, section, batch, semester, institute, years
Contact	college email, personal email, mobile, telephone
Family	parent names and contacts
Addresses	current and permanent
Qualifications	board, year, marks, percentage, division, grade

InfoRow stacks on mobile, row on sm+. Missing values print N/A.

Navbar path /profile. Route:

text

<Route path="/profile" element={<Profile w={w} profileData={profileData} setProfileData={setProfileData} />} />