Got it working

src/App.jsx

@@ -8,6 +8,7 @@ import {
 import Dashboard from './components/Dashboard';
 import Login from './components/Login';
 import Register from './components/Register';
+import ProfileForm from './components/ProfileForm';
 
 import './App.css';
 
@@ -19,6 +20,7 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/user/profile" element={<ProfileForm />} />
       </Routes>
     </Router>
   );

src/api/loginApi.js

@@ -20,3 +20,18 @@ 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' },
+    });
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+};

src/components/Dashboard.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import AddContact from './AddContact';
-// import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 
 import './Dashboard.css';
@@ -9,12 +9,12 @@ import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
 import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
 
 const Dashboard = () => {
+  const navigate = useNavigate();
   const [activeView, setActiveView] = useState('dashboard');
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [isViewContactWizardOpen, setIsViewContactWizardOpen] = useState(false);
   const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
   const [showContactForm, setShowContactForm] = useState(false);
-  // const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const handleAddContactClick = () => {
     setShowContactForm(true);
@@ -22,15 +22,9 @@ const Dashboard = () => {
 
   const handleContactSuccess = (contactData) => {
     console.log('Contact created successfully:', contactData);
-
-    // You could:
-    // 1. Refresh the contacts list if you have one
-    // 2. Show a success notification
-    // 3. Update local state with the new contact
   };
 
   const handleWizardComplete = () => {
-    // Add your logic here for each button
     setIsWizardOpen(false);
   };
 
@@ -47,7 +41,12 @@ const Dashboard = () => {
   };
 
   const handleNavClick = (view) => {
-    setActiveView(view);
+    console.log(view);
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      setActiveView(view);
+    }
   };
 
   return (

src/components/ProfileForm.css

@@ -0,0 +1,40 @@
+.profile-form {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.profile-form h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.profile-form form {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-form div {
+  margin-bottom: 15px;
+}
+
+.profile-form label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.profile-form input[type="text"],
+.profile-form input[type="tel"] {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.profile-form input[readonly] {
+  background-color: #f9f9f9;
+}

src/components/ProfileForm.jsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+
+import { tokenService } from '../services/TokenService';
+import { userApi } from '../api/loginApi';
+
+import './ProfileForm.css';
+
+const ProfileForm = () => {
+  const [formData, setFormData] = useState({
+    firstname: '',
+    lastname: '',
+    phone: '',
+    username: '',
+    createdDate: 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,
+          firstname: userProfile.firstname,
+          lastname: userProfile.lastname,
+          phone: userProfile.phone_number,
+          username: userProfile.username,
+          createdDate: userProfile.created,
+          lastLoginDate: userProfile.last_login
+        }));
+      } else {
+        console.error("Error getting user profile");
+      }
+    };
+
+    fetchData();
+
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  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>
+        <div>
+          <label htmlFor="lastname">Last Name:</label>
+          <input
+            type="text"
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
+            onChange={handleChange}
+          />
+        </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>
+    </div>
+  );
+};
+
+export default ProfileForm;