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}`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json' },
-    });
+    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="tel"] {
+.profile-form input[type='text'],
+.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,72 +47,113 @@ const ProfileForm = () => {
     setFormData({ ...formData, [name]: value });
   };
 
+  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      navigate(`/${view}`);
+    }
+  };
+
   return (
-    <div className="profile-form">
-      <h2>Profile Form</h2>
-      <form>
-        <div>
-          <label htmlFor="firstname">First Name:</label>
-          <input
-            type="text"
-            id="firstname"
-            name="firstname"
-            value={formData.firstname}
-            onChange={handleChange}
-          />
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
         </div>
-        <div>
-          <label htmlFor="lastname">Last Name:</label>
-          <input
-            type="text"
-            id="lastname"
-            name="lastname"
-            value={formData.lastname}
-            onChange={handleChange}
-          />
+        <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>
-        <div>
-          <label htmlFor="phone">Phone:</label>
-          <input
-            type="tel"
-            id="phone"
-            name="phone"
-            value={formData.phone}
-            onChange={handleChange}
-          />
-        </div>
-        <div>
-          <label htmlFor="username">Username:</label>
-          <input
-            type="text"
-            id="username"
-            name="username"
-            value={formData.username}
-            onChange={handleChange}
-            readOnly
-          />
-        </div>
-        <div>
-          <label htmlFor="createdDate">Created Date:</label>
-          <input
-            type="text"
-            id="createdDate"
-            name="createdDate"
-            value={formData.createdDate}
-            readOnly
-          />
-        </div>
-        <div>
-          <label htmlFor="lastLoginDate">Last Login Date:</label>
-          <input
-            type="text"
-            id="lastLoginDate"
-            name="lastLoginDate"
-            value={formData.lastLoginDate}
-            readOnly
-          />
-        </div>
-      </form>
+      </nav>
+
+      {/* Main Content */}
+      <div className="profile-form">
+        <h2>User Profile</h2>
+        <form>
+          <div>
+            <label htmlFor="firstname">First Name:</label>
+            <input
+              type="text"
+              id="firstname"
+              name="firstname"
+              value={formData.firstname}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="lastname">Last Name:</label>
+            <input
+              type="text"
+              id="lastname"
+              name="lastname"
+              value={formData.lastname}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="phone">Phone:</label>
+            <input
+              type="tel"
+              id="phone"
+              name="phone"
+              value={formData.phone}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="username">Username:</label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value={formData.username}
+              onChange={handleChange}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="createdDate">Created Date:</label>
+            <input
+              type="text"
+              id="createdDate"
+              name="createdDate"
+              value={formData.createdDate}
+              readOnly
+            />
+          </div>
+          <div>
+            <label htmlFor="lastLoginDate">Last Login Date:</label>
+            <input
+              type="text"
+              id="lastLoginDate"
+              name="lastLoginDate"
+              value={formData.lastLoginDate}
+              readOnly
+            />
+          </div>
+        </form>
+      </div>
     </div>
   );
 };