Added Profile Page UI and Trip History

[Prateekiiitg56]

This PR introduces the User Profile page and related infrastructure to the GoPredict frontend. It builds upon the existing authentication by providing a global authentication state, protected routing, and a dedicated page (/profile) where users can view/edit their details and manage their trip prediction history.

Related Issue: Closes #(issue_number) (If applicable)

Type of Change: (Check all that apply)

[x] ✨ New feature (non-breaking change which adds functionality)

[ ] 🐞 Bug fix (non-breaking change which fixes an issue)

[ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] 🧾 Documentation update

[x] 💅 Style enhancement (Consistent UI for Profile page)

[ ] ✅ Test addition or correction

[ ] 🔧 Refactoring (no functional changes)

[ ] 📦 Build related changes

[ ] ⚙️ CI related changes

[ ] ❓ Other

Key Changes Implemented

Global Authentication State (AuthContext.tsx):

Implemented a React Context (AuthProvider, useAuth) using Firebase's onAuthStateChanged listener. This provides user authentication status globally.

Updated main.tsx to wrap the application in AuthProvider.

Protected Routing (App.tsx, ProtectedRoute.tsx, PublicOnlyRoute.tsx):

Created ProtectedRoute.tsx to guard routes requiring login (like /profile).

Created PublicOnlyRoute.tsx to guard routes only for logged-out users (like /sign-in, /sign-up, ensuring logged-in users are redirected away).

Updated App.tsx to incorporate the /profile route and apply the protection logic using these components.

User Navigation (UserNav.tsx, Home.tsx Update):

Created a UserNav component displayed in the header for logged-in users. It includes:

User avatar/initials.

User email.

Link to the "Profile" page (/profile).

"Sign Out" functionality.

Updated the Home.tsx header to conditionally render UserNav (if logged in) instead of the previous simple "Sign Out" or "Sign In" button.

Profile Page (Profile.tsx):

Created the new /profile page component, styled consistently with the project theme (background, card layout, light/dark mode).

User Details Section:

Displays user's Email (read-only).

Allows viewing and editing of Display Name, Phone Number, and Location via "Edit", "Save Changes", and "Cancel" controls.

Includes loading/saving indicators and error handling.

Uses placeholder API functions (fetchProfile, saveProfile) for now.

Updates Firebase Auth displayName on successful save.

Trip History Section:

Implements the full UI for displaying trip history.

Uses a placeholder function (fetchTrips) to load mock data.

Includes client-side filtering controls (Date Range, City).

Implements client-side sorting on table headers with direction indicators (ArrowUp/ArrowDown).

Adds delete functionality (Trash2 icon) with confirmation, calling a placeholder function (deleteTripAPI).

Handles loading, error, and empty states gracefully.

Includes robust date handling (safeNewDate, isValid) for display and sorting.

Pathing Fixes:

Standardized all local imports across modified files (Profile.tsx, Home.tsx, route components, etc.) to use relative paths (../, ../../) to resolve persistent build issues encountered with path aliases.

How to Test

Global Auth & Routing:

Log in. Verify UserNav appears in the header on the Home page.

Try accessing /sign-in or /sign-up while logged in. Verify redirection to /.

Sign out. Verify "Sign In" button appears on Home page.

Try accessing /profile while logged out. Verify redirection to /sign-in.

Profile Page Access & UI:

Log in. Access /profile via the UserNav dropdown.

Verify the page loads with the correct header (UserNav present).

Verify placeholder profile data and trip history load correctly.

Profile Editing:

Click the "Edit" icon. Modify Name, Phone, Location. Click "Save Changes". Verify changes persist visually and edit mode closes (check console for placeholder log).

Edit again, then click "Cancel". Verify changes are discarded.

Trip History Interaction:

Test filters (City, Dates). Verify the table updates.

Test sorting by clicking headers ("Trip Date/Time", "Start Location", etc.). Verify icons change and data reorders.

Test delete: Click trash icon, click "No", click trash again, click "Yes". Verify row is removed (check console for placeholder log). Test error display (if enabled in placeholder).

Sign Out: Test the "Sign Out" button both in UserNav and on the Profile page (when not editing).

Screenshots (Optional)

(Add screenshots of the new Profile page showing both view/edit modes and the trip history table)

Checklist

[x] My code follows the style guidelines of this project.

[x] I have performed a self-review of my own code.

[ ] I have commented my code, particularly in hard-to-understand areas. (Review needed)

[ ] I have made corresponding changes to the documentation. (Backend schema docs pending)

[x] My changes generate no new warnings.

[ ] I have added tests that prove my fix is effective or that my feature works. _

gopredict.mp4

[netlify]

👷 Deploy request for gopredict pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	2f040b5

[netlify]

✅ Deploy Preview for storied-fudge-a7595c ready!

Name	Link
🔨 Latest commit	2f040b5
🔍 Latest deploy log	https://app.netlify.com/projects/storied-fudge-a7595c/deploys/69022dd75b266900087d38ac
😎 Deploy Preview	https://deploy-preview-51--storied-fudge-a7595c.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[harshitaphadtare]

@Prateekiiitg56 please have a look into the failed checks

[harshitaphadtare]

@Prateekiiitg56 they are still failing!

[harshitaphadtare]

hi @Prateekiiitg56 is there any update? since only 4 hours remain for this to be accepted under hacktoberfest..

[Prateekiiitg56]

Its almost done..I will raise pr again by 9pm tonight!!

[harshitaphadtare]

@Prateekiiitg56 Please dont raise another pr. Just make changes and commit to this pr itself.

[Prateekiiitg56]

#50 (comment) this is why checks are failing please look into it