FEATURE REQUEST: Connect Frontend With Backend User System

### Is your feature request related to a problem?

- [x] Yes, it is related to a problem

### Describe the feature you'd like

## 🌟 Feature Description
Our backend now includes a complete users table and several related entities, but the frontend still relies on mock user data. As a result, the Profile page does not display actual authenticated user information, and backend-linked records are reflected in the UI.

## 🔍 Problem Statement
The Profile page still uses mock data and does not display real user information. Additionally, both the frontend and backend independently connect to Supabase, causing duplication and inconsistent data handling. The frontend needs to stop using mock data and rely solely on backend-managed user data.

## 🎯 Expected Outcome
- Replace all mock data on the Profile page with real user data coming from backend API endpoints.
- Ensure proper linkage between the authenticated user and their backend-stored profile record.
- Implement clear loading, error, and empty UI states.
- Maintain full type safety through TypeScript interfaces consistent with the backend schema.

## 📷 Screenshots and Design Ideas

## 📋 Additional Context
I hoped to create endpoints in the backend and manage the supase stuff in the backend itself currently both front end and back end connects to supa base for fetching data and retrieving things. This is unnecessary and wasting resources.I thought we could migrate everything to the back end.

### Record

- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on implementing this feature