[Frontend] Implement Authentication Flow & Protected Routes

Description:

Build the user interface for the authentication flow and ensure that business-related pages are only accessible after a successful login.

Tasks:

• Pages: Create the LoginPage.tsx and RegisterPage.tsx page components with forms.
  

• API Service: Create an auth.service.ts with functions to call the /api/auth/register and /api/auth/login endpoints.
  

• AuthContext: Create an AuthContext to manage the global authentication state. It should provide:
  

•     user (information about the logged-in user).
  

• token (the JWT).

•     isAuthenticated (a boolean).
  

•     login(credentials) and logout() functions.
  

• AuthProvider: Wrap the application (App.tsx) with the AuthProvider in main.tsx.
  

• ProtectedRoute: Create a ProtectedRoute component that checks isAuthenticated from the AuthContext. If false, it redirects to the login page.
  

• Routing: Update App.tsx to use ProtectedRoute for all business routes (/dashboard, /products, /sales, etc.). The /login and /register routes must be public.
  

• apiClient Interceptor: Modify the axios request interceptor (apiClient.ts) to add the Authorization: Bearer <token> header to all API calls, retrieving the token from the AuthContext or localStorage.
  

Acceptance Criteria:

• A new user can register and be redirected to the login page.
• A user can log in and be redirected to /dashboard. The token is stored.
• Attempting to access /products while unauthenticated redirects to /login.
• After login, API calls to protected endpoints succeed.
• Clicking "Logout" clears the authentication state and redirects to /login.

Start with the existing App.tsx, main.tsx, apiClient.ts, and business-route definitions, then inspect the /api/auth/register and /api/auth/login endpoints. Implement the listed login, registration, shared authentication state, protected routing, and token handling, and verify the acceptance criteria for redirects, protected API calls, and logout.