Update Session08 Frontend.md

updated the first parts

ProjectOrientedSessions/Session08/Session08 Frontend.md

@@ -1,17 +1,56 @@
-## ✅ Frontend Profile Page Implementation Checklist
+# ✅ Frontend Profile Page Implementation Checklist
 
-### ⚙️ Tooling & Fixes
+## ⚙️ Tooling & Fixes
 - [ ]  Install and configure `react-hook-form`
----
+```
-### 🔐 Account & Authentication
+npm install react-hook-form
-- [ ] Use Axios request interceptor to:
+```
-    - [ ]  Attach token to requests
+
-    - [ ] Handle logout logic
+## 🔐 Account & Authentication
----
+- [ ] Use Axios request interceptor to attach token to requests and handle logout logic
-### API
+```
+// add a request interceptor to include JWT token if available
+agent.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().token;
+  if (token) {
+    config.headers = config.headers || {};
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// add a response interceptor to handle 401 Unauthorized
+agent.interceptors.response.use(
+  (res) => res,
+  (error) => {
+    if (error.response?.status === 401) {
+      useAuthStore.getState().logout();
+      window.location.href = "/login"; // redirect to login
+    }
+    return Promise.reject(error);
+  }
+);
+```
+
+## API
 - [ ] Provide a method for each new endpoint implemented in backend
----
+```
-### 🗂️ Additional Profile Tabs (initial setup)
+const Profile = {
+  getProfile: () => request.get<ProfileDto>('/account/profile'),
+  editEmail: (data: EditEmailDto) => request.put<void>('/account/email', data),
+  editPassword: (data: EditPasswordDto) => request.put<void>('/account/password', data),
+  upsertAccountPerson: (data: PersonDto) => request.post<number>('/account/account-person', data),
+  upsertPerson: (data: PersonDto) => request.post<number>('/account/person', data),
+  upsertBankDetail: (data: UpsertBankAccountDetailDto) => request.post<void>('/account/bank-detail', data),
+  getMyPeople: () => request.get<PersonDto[]>('/account/my-people'),
+  getMyTravels: () => request.get<TicketOrderSummaryDto[]>('/account/my-travels'),
+  getMyTransactions: () => request.get<TransactionDto[]>('/account/my-transactions'), 
+  topUp: (data : topUpDto) => request.post<number>('/account/top-up', data)
+};
+
+```
+
+## 🗂️ Additional Profile Tabs (initial setup)
 
 - [ ]  Add empty pages/tabs for:
     - [ ] `ProfileSummary`
@@ -25,28 +64,26 @@
 - [ ] Define and adjust routes for profile and its tabs
 - [ ] Implement route-based tab handling inside `ProfilePage`
 
----
+## Profile Summary 
-### Profile Summary 
+### 📦 DTOs / Models
-#### 📦 DTOs / Models
 -  Add models for:
     - [ ]  `EditEmailDto`
     - [ ]  `EditPasswordDto`
     - [ ]  `PersonDto`
     - [ ]  `ProfileDto`
     - [ ] `UpsertBankAccountDetailDto`
+ 
  - [ ] Implement the process of showing and editing the data
----
+
-### 🧍 List of Travelers
+## 🧍 List of Travelers
 - [ ]  Implement `ListOfTravelers` page for showing, editing, and adding new people
 
----
+
-### 💳 Transactions Module
+## 💳 Transactions Module
 - [ ] Add `TransactionDto` model
 - [ ]  Implement `MyTransactions` page
----
+
-### 🚆 Travel Module
+## 🚆 Travel Module
 - [ ] Add `TicketOrderSummaryDto`, `TravelerTicketDto` models
 - [ ] Implement `MyTravels` page
 - [ ] Implement `TravelOrderDetailsPage`
-
----