Able to view profile

src/api/loginApi.js

@@ -23,10 +23,13 @@ export const loginApi = {
 
 export const userApi = {
   get_user_profile: async (userId) => {
-    const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`, {
+    const reponse = await fetch(
+      `${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`,
+      {
         method: 'GET',
         headers: { 'Content-Type': 'application/json' },
-    });
+      }
+    );
 
     if (reponse.ok) {
       return reponse.json();

src/components/Dashboard.jsx

@@ -41,7 +41,6 @@ const Dashboard = () => {
   };
 
   const handleNavClick = (view) => {
-    console.log(view);
     if (view === 'profile') {
       navigate('/user/profile');
     } else {

src/components/ProfileForm.css

@@ -5,6 +5,7 @@
   border: 1px solid #ccc;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
 }
 
 .profile-form h2 {
@@ -27,8 +28,8 @@
   display: block;
 }
 
-.profile-form input[type="text"],
+.profile-form input[type='text'],
-.profile-form input[type="tel"] {
+.profile-form input[type='tel'] {
   width: 100%;
   padding: 8px;
   border: 1px solid #ccc;

src/components/ProfileForm.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { tokenService } from '../services/TokenService';
 import { userApi } from '../api/loginApi';
@@ -6,23 +7,23 @@ import { userApi } from '../api/loginApi';
 import './ProfileForm.css';
 
 const ProfileForm = () => {
+  const navigate = useNavigate();
+  const [activeView, setActiveView] = useState('profile');
   const [formData, setFormData] = useState({
     firstname: '',
     lastname: '',
     phone: '',
     username: '',
     createdDate: new Date().toISOString().split('T')[0],
-    lastLoginDate: new Date().toISOString().split('T')[0]
+    lastLoginDate: new Date().toISOString().split('T')[0],
   });
 
   useEffect(() => {
     const fetchData = async () => {
-      console.log('Getting data');
       const userId = tokenService.getUserId();
       const response = await userApi.get_user_profile(userId);
 
       if (response) {
-        console.log('Response is good');
         const userProfile = response.data[0];
         setFormData((prev) => ({
           ...prev,
@@ -31,15 +32,14 @@ const ProfileForm = () => {
           phone: userProfile.phone_number,
           username: userProfile.username,
           createdDate: userProfile.created,
-          lastLoginDate: userProfile.last_login
+          lastLoginDate: userProfile.last_login,
         }));
       } else {
-        console.error("Error getting user profile");
+        console.error('Error getting user profile');
       }
     };
 
     fetchData();
-
   }, []);
 
   const handleChange = (e) => {
@@ -47,9 +47,46 @@ const ProfileForm = () => {
     setFormData({ ...formData, [name]: value });
   };
 
+  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      navigate(`/${view}`);
+    }
+  };
+
   return (
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
+        </div>
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
+            onClick={() => handleNavClick('dashboard')}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
+            onClick={() => handleNavClick('settings')}
+          >
+            Settings
+          </button>
+          <button
+            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
+            onClick={() => handleNavClick('profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </nav>
+
+      {/* Main Content */}
       <div className="profile-form">
-      <h2>Profile Form</h2>
+        <h2>User Profile</h2>
         <form>
           <div>
             <label htmlFor="firstname">First Name:</label>
@@ -59,6 +96,7 @@ const ProfileForm = () => {
               name="firstname"
               value={formData.firstname}
               onChange={handleChange}
+              readOnly
             />
           </div>
           <div>
@@ -69,6 +107,7 @@ const ProfileForm = () => {
               name="lastname"
               value={formData.lastname}
               onChange={handleChange}
+              readOnly
             />
           </div>
           <div>
@@ -79,6 +118,7 @@ const ProfileForm = () => {
               name="phone"
               value={formData.phone}
               onChange={handleChange}
+              readOnly
             />
           </div>
           <div>
@@ -114,6 +154,7 @@ const ProfileForm = () => {
           </div>
         </form>
       </div>
+    </div>
   );
 };