tsk-6: Send Message (#22)

Closes #6

Reviewed-on: phoenix/textsender#22
Co-authored-by: phoenix <kundeng00@pm.me>
Co-committed-by: phoenix <kundeng00@pm.me>

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "textsender",
-  "version": "0.0.0",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "textsender",
-      "version": "0.0.0",
+      "version": "0.0.3",
       "dependencies": {
-        "react": "^19.1.0",
+        "react": "^19.2.3",
-        "react-dom": "^19.1.0",
+        "react-dom": "^19.2.3",
         "react-router-dom": "^7.10.1"
       },
       "devDependencies": {
@@ -870,9 +870,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.39.1",
+      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1766,9 +1766,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.1",
+      "version": "9.39.2",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
-      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -1779,7 +1779,7 @@
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.1",
+        "@eslint/js": "9.39.2",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -1840,9 +1840,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.24",
+      "version": "0.4.25",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.24.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.25.tgz",
-      "integrity": "sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==",
+      "integrity": "sha512-dRUD2LOdEqI4zXHqbQ442blQAzdSuShAaiSq5Vtyy6LT08YUf0oOjBDo4VPx0dCPgiPWh1WB4dtbLOd0kOlDPQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textsender",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "format:check": "npx prettier --check ."
   },
   "dependencies": {
-    "react": "^19.1.0",
+    "react": "^19.2.3",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.2.3",
     "react-router-dom": "^7.10.1"
   },
   "devDependencies": {

src/App.jsx

@@ -4,7 +4,11 @@ import {
   Route,
   Navigate,
 } from 'react-router-dom';
+
+import Dashboard from './components/Dashboard';
+import Login from './components/Login';
 import Register from './components/Register';
+
 import './App.css';
 
 function App() {
@@ -12,17 +16,9 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Navigate to="/register" replace />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
-        {/* Add other routes as needed */}
-        <Route
-          path="/login"
-          element={
-            <div className="login-placeholder">
-              <h1>Login Page</h1>
-              <p>This would be your login page</p>
-            </div>
-          }
-        />
       </Routes>
     </Router>
   );

src/api/contactApi.js

@@ -0,0 +1,58 @@
+import { API_BASE_URL } from '../constants/api';
+
+export class CreateContactRequest {
+  first_name = '';
+  last_name = '';
+  phone_number = '';
+  user_id = '';
+}
+
+export const contactApi = {
+  getContactsWithUserId: async (userId, authBearerToken) => {
+    console.log('Fetching contacts');
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/contact?user_id=${userId}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authBearerToken,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error('Session expired. Please log in again.');
+      } else if (response.status === 404) {
+        console.log('No contacts associated with user');
+        throw new Error('No contacts associated with user');
+      } else {
+        throw new Error(`Failed to fetch contacts: ${response.status}`);
+      }
+    } else {
+      return response.json();
+    }
+  },
+
+  createContact: async (contact, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/contact/new`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(contact),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(
+        errorData.message ||
+          `Failed to create contact. Status: ${response.status}`
+      );
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/loginApi.js

@@ -0,0 +1,22 @@
+import { AUTH_API_BASE_URL } from '../constants/api';
+
+export class LoginRequest {
+  username = '';
+  password = '';
+}
+
+export const loginApi = {
+  login: async (request) => {
+    const reponse = await fetch(`${AUTH_API_BASE_URL}/api/v1/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+};

src/api/messageApi.js

@@ -0,0 +1,29 @@
+import { API_BASE_URL } from '../constants/api';
+
+export class CreateMessageRequest {
+  content = '';
+  user_id = '';
+}
+
+export const messageApi = {
+  createMessage: async (requestBody, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/message/new`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      if (response.status === 500) {
+        throw new Error('Something went wrong with the system');
+      } else {
+        throw new Error('Failed to create message');
+      }
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/messageEventResponseApi.js

@@ -0,0 +1,30 @@
+import { API_BASE_URL } from '../constants/api';
+
+export const messageEventResponseApi = {
+  getMessageEventResponsesByUserId: async (userId, authBearerToken) => {
+    const response = await fetch(
+      `${API_BASE_URL}/api/v1/schedule/message/event/response?user_id=${userId}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authBearerToken,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error('Session expired. Please log in again.');
+      } else if (response.status === 404) {
+        console.log('No message event responses associated with user');
+        // setLoading(false);
+        return;
+      } else {
+        throw new Error(`Failed to fetch sent messages: ${response.status}`);
+      }
+    } else {
+      return response.json();
+    }
+  },
+};

src/api/registerApi.js

@@ -0,0 +1,24 @@
+import { AUTH_API_BASE_URL } from '../constants/api';
+
+export class RegisterRequest {
+  phone_number = '';
+  firstname = '';
+  password = '';
+}
+
+export const registerApi = {
+  registerUser: async (request) => {
+    const response = await fetch(`${AUTH_API_BASE_URL}/api/v1/register`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request),
+    });
+
+    if (response.ok) {
+      return response.json();
+    } else {
+      console.error('Error registering');
+      throw new Error('Registration failed');
+    }
+  },
+};

src/api/sendMessageApi.js

@@ -0,0 +1,26 @@
+import { API_BASE_URL } from '../constants/api';
+
+export class SendInstantMessageRequest {
+  contact_ids = [];
+  message_id = '';
+  user_id = '';
+}
+
+export const sendMessageApi = {
+  sendInstantMessage: async (requestBody, authBearerToken) => {
+    const response = await fetch(`${API_BASE_URL}/api/v1/instant/message`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: authBearerToken,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to send instant message');
+    } else {
+      return response.json();
+    }
+  },
+};

src/components/AddContact.css

@@ -0,0 +1,159 @@
+/* Contact Modal Styles */
+.contact-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.contact-modal {
+  background: transparent;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.contact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.contact-title {
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 32px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+}
+
+.close-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.contact-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+}
+
+.contact-form {
+  margin-bottom: 0;
+}
+
+.required {
+  color: #ef4444;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.cancel-btn {
+  flex: 1;
+  background: #f3f4f6;
+  color: #4b5563;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn:hover:not(:disabled) {
+  background: #e5e7eb;
+  transform: translateY(-1px);
+}
+
+.cancel-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.cancel-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  flex: 1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .contact-card {
+    padding: 30px 20px;
+  }
+
+  .contact-title {
+    font-size: 20px;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+}
+
+.submit-error {
+  background-color: #fee;
+  border: 1px solid #fcc;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #ef4444;
+  font-size: 14px;
+}

src/components/AddContact.jsx

@@ -0,0 +1,205 @@
+import { useState } from 'react';
+
+import { contactApi, CreateContactRequest } from '../api/contactApi';
+import { tokenService } from '../services/TokenService';
+import { DATA_KEY_ADDED_CONTACT_ID } from '../constants/app';
+
+import './AddContact.css';
+
+const AddContact = ({ isOpen, onClose, onSuccess }) => {
+  const [formData, setFormData] = useState({
+    phoneNumber: '',
+    firstName: '',
+    lastName: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+
+  if (!isOpen) return null;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+    // Clear submit error when user modifies form
+    if (submitError) {
+      setSubmitError('');
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    // Phone number is required
+    if (!formData.phoneNumber.trim()) {
+      newErrors.phoneNumber = 'Phone number is required';
+    } else if (!/^[\d\s\-\+\(\)]{10,}$/.test(formData.phoneNumber)) {
+      newErrors.phoneNumber = 'Please enter a valid phone number';
+    }
+
+    return newErrors;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const validationErrors = validateForm();
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    setIsSubmitting(true);
+    setSubmitError('');
+
+    try {
+      const userId = tokenService.getUserId();
+      let contact = new CreateContactRequest();
+      contact.phone_number = formData.phoneNumber;
+      contact.first_name = formData.firstName;
+      contact.last_name = formData.lastName;
+      contact.user_id = userId;
+      const result = await contactApi.createContact(
+        contact,
+        tokenService.bearerToken()
+      );
+      if (result.data.length > 0) {
+        console.log('Contact added');
+        const contactId = result.data[0].id;
+        localStorage.setItem(DATA_KEY_ADDED_CONTACT_ID, contactId);
+      }
+
+      // Reset form
+      setFormData({ phoneNumber: '', firstName: '', lastName: '' });
+
+      // Call onSuccess callback if provided
+      if (onSuccess) {
+        onSuccess(result);
+      }
+
+      // Close the modal
+      onClose();
+    } catch (error) {
+      console.error('Error submitting form:', error);
+      setSubmitError(
+        error.message || 'Failed to create contact. Please try again.'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setFormData({ phoneNumber: '', firstName: '', lastName: '' });
+    setErrors({});
+    setSubmitError('');
+    onClose();
+  };
+
+  return (
+    <div className="contact-modal-overlay">
+      <div className="contact-modal">
+        <div className="contact-header">
+          <h2 className="contact-title">Add New Contact</h2>
+          <button
+            className="close-btn"
+            onClick={handleCancel}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="contact-card">
+          {submitError && <div className="submit-error">{submitError}</div>}
+
+          <form className="contact-form" onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label htmlFor="phoneNumber" className="form-label">
+                Phone Number <span className="required">*</span>
+              </label>
+              <input
+                id="phoneNumber"
+                name="phoneNumber"
+                type="tel"
+                className={`form-input ${errors.phoneNumber ? 'error' : ''}`}
+                value={formData.phoneNumber}
+                onChange={handleChange}
+                placeholder="Enter phone number"
+                disabled={isSubmitting}
+                required
+              />
+              {errors.phoneNumber && (
+                <span className="error-message">{errors.phoneNumber}</span>
+              )}
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="firstName" className="form-label">
+                First Name
+              </label>
+              <input
+                id="firstName"
+                name="firstName"
+                type="text"
+                className="form-input"
+                value={formData.firstName}
+                onChange={handleChange}
+                placeholder="Enter first name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="lastName" className="form-label">
+                Last Name
+              </label>
+              <input
+                id="lastName"
+                name="lastName"
+                type="text"
+                className="form-input"
+                value={formData.lastName}
+                onChange={handleChange}
+                placeholder="Enter last name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
+            <div className="form-actions">
+              <button
+                type="button"
+                className="cancel-btn"
+                onClick={handleCancel}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="submit-btn"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? 'Creating...' : 'Create Contact'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddContact;

src/components/Dashboard.css

@@ -0,0 +1,238 @@
+.dashboard-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    sans-serif;
+}
+
+/* Navbar Styles */
+.dashboard-nav {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  padding: 16px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.nav-logo .logo-text {
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-links {
+  display: flex;
+  gap: 20px;
+}
+
+.nav-link {
+  background: none;
+  border: none;
+  color: #555;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-link:hover {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.1);
+}
+
+.nav-link.active {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.15);
+  font-weight: 600;
+}
+
+/* Main Content */
+.dashboard-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  min-height: calc(100vh - 72px); /* Subtract navbar height */
+}
+
+.dashboard-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+}
+
+.dashboard-title {
+  color: #333;
+  font-size: 32px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+/* Button Grid */
+.button-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.dashboard-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  border-radius: 12px;
+  padding: 30px 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
+}
+
+.dashboard-btn:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+.dashboard-btn:active {
+  transform: translateY(-2px);
+}
+
+.dashboard-btn.secondary {
+  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+  box-shadow: 0 10px 30px rgba(76, 175, 80, 0.2);
+}
+
+.dashboard-btn.secondary:hover {
+  box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);
+}
+
+.dashboard-btn.tertiary {
+  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+  box-shadow: 0 10px 30px rgba(255, 152, 0, 0.2);
+}
+
+.dashboard-btn.tertiary:hover {
+  box-shadow: 0 15px 40px rgba(255, 152, 0, 0.4);
+}
+
+.btn-text {
+  color: white;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.btn-hint {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+}
+
+/* View Content */
+.view-content {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 30px;
+  margin-top: 20px;
+}
+
+.view-text {
+  color: #555;
+  font-size: 16px;
+  line-height: 1.6;
+  margin: 0;
+  text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .dashboard-nav {
+    padding: 16px 20px;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .nav-links {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .dashboard-card {
+    padding: 30px 20px;
+  }
+
+  .dashboard-title {
+    font-size: 28px;
+  }
+
+  .button-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .nav-links {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .nav-link {
+    width: 100%;
+    text-align: center;
+  }
+
+  .dashboard-btn {
+    padding: 25px 15px;
+  }
+
+  .btn-text {
+    font-size: 18px;
+  }
+}
+
+/* Add Contact Button Styles */
+.add-contact-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 20px;
+}
+
+.add-contact-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.add-contact-btn:active {
+  transform: translateY(0);
+}
+
+/* Existing dashboard styles... */

src/components/Dashboard.jsx

@@ -0,0 +1,170 @@
+import { useState } from 'react';
+
+import AddContact from './AddContact';
+import ViewContact from './ViewContact';
+import ViewSentMessages from './ViewSentMessages';
+
+import './Dashboard.css';
+import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
+
+const Dashboard = () => {
+  const [activeView, setActiveView] = useState('dashboard');
+  const [isWizardOpen, setIsWizardOpen] = useState(false);
+  const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
+  const [showContactForm, setShowContactForm] = useState(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  const handleAddContactClick = () => {
+    setShowContactForm(true);
+  };
+
+  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);
+  };
+
+  const handleWizardClose = () => {
+    setIsWizardOpen(false);
+  };
+
+  const handleNavClick = (view) => {
+    setActiveView(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="dashboard-content">
+        <div className="dashboard-card">
+          <h1 className="dashboard-title">Dashboard</h1>
+
+          <div className="button-grid">
+            <button
+              className="dashboard-btn primary"
+              onClick={() => setIsWizardOpen(true)}
+            >
+              <span className="btn-text">Send Message</span>
+              <span className="btn-hint">Send a message</span>
+            </button>
+
+            <SendMessageWizardModal
+              isOpen={isWizardOpen}
+              onClose={handleWizardClose}
+              onComplete={handleWizardComplete}
+            />
+
+            <button
+              className="dashboard-btn primary"
+              onClick={() => setViewSentMessagesOpen(true)}
+            >
+              <span className="btn-text">Sent messages</span>
+              <span className="btn-hint">View sent messages</span>
+            </button>
+
+            <ViewSentMessages
+              isOpen={isViewSentMessagesOpen}
+              onClose={() => setViewSentMessagesOpen(false)}
+            />
+
+            <button
+              className="dashboard-btn secondary"
+              onClick={() => handleAddContactClick()}
+            >
+              <span className="btn-text">Add Contact</span>
+              <span className="btn-hint">
+                Create contacts to send text messages
+              </span>
+            </button>
+
+            {/* Contact Form Modal - Now self-contained */}
+            <AddContact
+              isOpen={showContactForm}
+              onClose={() => setShowContactForm(false)}
+              onSuccess={handleContactSuccess}
+            />
+
+            <button
+              className="dashboard-btn tertiary"
+              onClick={() => setIsPopupOpen(true)}
+              style={{
+                padding: '12px 24px',
+                background: '#667eea',
+                color: 'white',
+                border: 'none',
+                borderRadius: '6px',
+                cursor: 'pointer',
+                fontSize: '16px',
+              }}
+            >
+              <span className="btn-text">View Contact</span>
+              <span className="btn-hint">View created contacts</span>
+            </button>
+
+            <ViewContact
+              isOpen={isPopupOpen}
+              onClose={() => setIsPopupOpen(false)}
+              title="Item List"
+            />
+          </div>
+
+          {/* Content based on active view */}
+          <div className="view-content">
+            {activeView === 'dashboard' && (
+              <p className="view-text">
+                Dashboard view is active. Select one of the buttons above.
+              </p>
+            )}
+            {activeView === 'settings' && (
+              <p className="view-text">
+                Settings view - Configuration options will go here.
+              </p>
+            )}
+            {activeView === 'profile' && (
+              <p className="view-text">
+                Profile view - User information will go here.
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/components/Login.css

@@ -0,0 +1,150 @@
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.login-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+  max-width: 420px;
+}
+
+.login-title {
+  color: #333;
+  font-size: 28px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-form {
+  margin-bottom: 25px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: block;
+  color: #555;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.form-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-input.error {
+  border-color: #ef4444;
+}
+
+.form-input:disabled {
+  background-color: #f9fafb;
+  cursor: not-allowed;
+}
+
+.error-message {
+  color: #ef4444;
+  font-size: 13px;
+  margin-top: 5px;
+  display: block;
+}
+
+.submit-error {
+  background-color: #fee;
+  border: 1px solid #fcc;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.form-hint {
+  display: block;
+  color: #6b7280;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.submit-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.register-link {
+  text-align: center;
+  margin: 20px 0;
+  padding-top: 20px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.register-link p {
+  color: #6b7280;
+  margin: 0;
+}
+
+.link {
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .login-card {
+    padding: 30px 20px;
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+}

src/components/Login.jsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { tokenService } from '../services/TokenService';
+import { loginApi, LoginRequest } from '../api/loginApi';
+
+import './Login.css';
+
+const Login = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    // Clear error for this field when user starts typing
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: '',
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!formData.username.trim()) {
+      newErrors.username = 'Username is required';
+    }
+
+    if (!formData.password) {
+      newErrors.password = 'Password is required';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    return newErrors;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitError('');
+
+    const formErrors = validateForm();
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors);
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      let reqBod = new LoginRequest();
+      reqBod.username = formData.username;
+      reqBod.password = formData.password;
+      const response = await loginApi.login(reqBod);
+
+      if (response) {
+        const loginResult = response.data[0];
+        const token = loginResult.access_token;
+        tokenService.setToken(token);
+        tokenService.setUserId(loginResult.user_id);
+        alert(`Login successful! Welcome, ${formData.username}`);
+        navigate('/dashboard');
+      } else {
+        console.error('Error logging in');
+      }
+
+      // Reset form
+      setFormData({ username: '', password: '' });
+      setErrors({});
+    } catch (error) {
+      setSubmitError('Login failed. Please try again.');
+      console.error('Login error:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-card">
+        <h1 className="login-title">Login</h1>
+
+        {submitError && <div className="submit-error">{submitError}</div>}
+
+        <form className="login-form" onSubmit={handleSubmit} noValidate>
+          <div className="form-group">
+            <label htmlFor="username" className="form-label">
+              Username
+            </label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value={formData.username}
+              onChange={handleChange}
+              className={`form-input ${errors.username ? 'error' : ''}`}
+              placeholder="Enter your username"
+              disabled={isSubmitting}
+            />
+            {errors.username && (
+              <span className="error-message">{errors.username}</span>
+            )}
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password" className="form-label">
+              Password
+            </label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              className={`form-input ${errors.password ? 'error' : ''}`}
+              placeholder="Enter your password"
+              disabled={isSubmitting}
+            />
+            {errors.password && (
+              <span className="error-message">{errors.password}</span>
+            )}
+            <span className="form-hint">Must be at least 6 characters</span>
+          </div>
+
+          <button type="submit" className="submit-btn" disabled={isSubmitting}>
+            {isSubmitting ? 'Logging in...' : 'Login'}
+          </button>
+        </form>
+
+        <div className="register-link">
+          <p>
+            Don't have an account?{' '}
+            <a href="register" className="link">
+              Register here
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/components/PhoneVerification.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+
 import './Register.css';
 
 const PhoneVerification = ({ phoneNumber, onVerify, onResend }) => {

src/components/Register.jsx

@@ -1,5 +1,9 @@
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+
+import { DATA_KEY_REGISTERED_USER_ID } from '../constants/app';
+import { registerApi, RegisterRequest } from '../api/registerApi';
+
 import './Register.css';
 
 const Register = () => {
@@ -80,27 +84,16 @@ const Register = () => {
       // Prepare data for API call (remove confirmPassword)
       const { confirmPassword, ...userData } = formData;
 
-      // Simulate API call
+      let reqBod = new RegisterRequest();
-      console.log('Submitting registration data:', userData);
+      reqBod.phone_number = userData.phoneNumber;
+      reqBod.username = userData.username;
+      reqBod.password = userData.password;
 
-      // Mock API call delay
+      const response = await registerApi.registerUser(reqBod);
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-      const reqBod = {
-        phone_number: userData.phoneNumber,
-        username: userData.username,
-        password: userData.password,
-      };
 
-      const response = await fetch('http://localhost:9080/api/v1/register', {
+      if (response) {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(reqBod),
-      });
-
-      if (response.ok) {
         alert('Registration successful! Redirecting to login...');
-        const res = await response.json();
+        localStorage.setItem(DATA_KEY_REGISTERED_USER_ID, response.data[0].id);
-        console.log(res.message);
         navigate('/login');
       } else {
         console.error('Error registering');

src/components/SendMessageWizard/ConfirmationStep.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import styles from './SendMessageWizard.module.css';
+
+function ConfirmationStep({
+  selectedContacts,
+  createdMessage,
+  message,
+  isSubmitting,
+}) {
+  // In a real app, you might fetch full contact details here
+  // For now, we'll work with just the IDs
+
+  const contactsCount = selectedContacts.length;
+  const messagePreview =
+    message.length > 100 ? `${message.substring(0, 100)}...` : message;
+
+  const getContactListText = () => {
+    if (contactsCount === 0) return 'No contacts selected';
+    if (contactsCount === 1) return '1 contact selected';
+    return `${contactsCount} contacts selected`;
+  };
+
+  return (
+    <div className={styles.confirmationStep}>
+      <div className={styles.confirmationHeader}>
+        <h3>Ready to Send</h3>
+        <p className={styles.confirmationSubtitle}>
+          Review your message and recipients before sending
+        </p>
+      </div>
+
+      <div className={styles.confirmationSections}>
+        {/* Recipients Section */}
+        <div className={styles.confirmationSection}>
+          <div className={styles.sectionHeader}>
+            <span className={styles.sectionIcon}>👥</span>
+            <h4>Recipients</h4>
+          </div>
+          <div className={styles.sectionContent}>
+            <div className={styles.recipientsSummary}>
+              <span className={styles.recipientsCount}>
+                {getContactListText()}
+              </span>
+              {contactsCount > 0 && (
+                <div className={styles.recipientIds}>
+                  <strong>Contact IDs:</strong>
+                  <div className={styles.idList}>
+                    {selectedContacts.map((id, index) => (
+                      <span key={id} className={styles.idTag}>
+                        {id}
+                        {index < selectedContacts.length - 1 && ', '}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Message Section */}
+        <div className={styles.confirmationSection}>
+          <div className={styles.sectionHeader}>
+            <span className={styles.sectionIcon}>💬</span>
+            <h4>Message</h4>
+          </div>
+          <div className={styles.sectionContent}>
+            <div className={styles.messagePreviewContainer}>
+              <div className={styles.messagePreview}>
+                {message || (
+                  <em className={styles.noMessage}>No message entered</em>
+                )}
+              </div>
+              <div className={styles.messageStats}>
+                <div className={styles.statItem}>
+                  <span className={styles.statLabel}>Characters:</span>
+                  <span className={styles.statLabel}>
+                    {createdMessage.content.length}
+                  </span>
+                </div>
+                <div className={styles.statItem}>
+                  <span className={styles.statValue}>
+                    {message.trim() ? message.trim().split(/\s+/).length : 0}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Summary Section */}
+        <div className={styles.confirmationSection}>
+          <div className={styles.sectionHeader}>
+            <span className={styles.sectionIcon}>📊</span>
+            <h4>Summary</h4>
+          </div>
+          <div className={styles.sectionContent}>
+            <div className={styles.summaryStats}>
+              <div className={styles.summaryStat}>
+                <span className={styles.statNumber}>{contactsCount}</span>
+                <span className={styles.statLabel}>Recipients</span>
+              </div>
+              <div className={styles.summaryStat}>
+                <span className={styles.statNumber}>
+                  {message.split('.').length - 1}
+                </span>
+                <span className={styles.statLabel}>Sentences</span>
+              </div>
+              <div className={styles.summaryStat}>
+                <span className={styles.statNumber}>
+                  {Math.ceil(message.length / 160)}
+                </span>
+                <span className={styles.statLabel}>SMS Parts</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Warning/Info Section */}
+        <div className={styles.confirmationNotice}>
+          <div className={styles.noticeIcon}>⚠️</div>
+          <div className={styles.noticeContent}>
+            <strong>Important:</strong> Once sent, messages cannot be recalled.
+            Please double-check your recipients and message content.
+            {isSubmitting && (
+              <div className={styles.sendingNotice}>
+                <div className={styles.sendingSpinner}></div>
+                <span>Sending messages...</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmationStep;

src/components/SendMessageWizard/ConfirmationStep.module.css

@@ -0,0 +1,203 @@
+/* Confirmation Step Styles */
+.confirmationStep {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.confirmationHeader {
+  text-align: center;
+}
+
+.confirmationHeader h3 {
+  margin: 0 0 8px 0;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.confirmationSubtitle {
+  margin: 0;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.confirmationSections {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.confirmationSection {
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.sectionIcon {
+  font-size: 20px;
+}
+
+.sectionHeader h4 {
+  margin: 0;
+  color: #374151;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.sectionContent {
+  padding-left: 32px;
+}
+
+.recipientsSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recipientsCount {
+  font-weight: 500;
+  color: #111827;
+}
+
+.recipientIds {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.idList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-size: 13px;
+}
+
+.idTag {
+  background-color: #e5e7eb;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Consolas', monospace;
+}
+
+.messagePreviewContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.messagePreview {
+  background-color: white;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  min-height: 80px;
+}
+
+.noMessage {
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.messageStats {
+  display: flex;
+  gap: 16px;
+}
+
+.statItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.statLabel {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.statValue {
+  font-weight: 600;
+  color: #111827;
+}
+
+.summaryStats {
+  display: flex;
+  justify-content: space-around;
+  gap: 16px;
+}
+
+.summaryStat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.statNumber {
+  font-size: 24px;
+  font-weight: 700;
+  color: #3b82f6;
+}
+
+.statLabel {
+  font-size: 12px;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.confirmationNotice {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  background-color: #fff7ed;
+  border: 1px solid #fed7aa;
+  border-radius: 8px;
+  color: #9a3412;
+}
+
+.noticeIcon {
+  font-size: 20px;
+}
+
+.noticeContent {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.noticeContent strong {
+  color: #ea580c;
+}
+
+.sendingNotice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+}
+
+.sendingSpinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f97316;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}

src/components/SendMessageWizard/ContactSelection.jsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import styles from './SendMessageWizard.module.css';
+
+import { tokenService } from '../../services/TokenService';
+import { contactApi } from '../../api/contactApi';
+
+function ContactSelection({ selectedContacts, onToggleContact }) {
+  const [contacts, setContacts] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    const fetchContacts = async () => {
+      try {
+        setIsLoading(true);
+
+        const userId = tokenService.getUserId();
+        const response = await contactApi.getContactsWithUserId(
+          userId,
+          tokenService.bearerToken()
+        );
+        if (!response) {
+          throw new Error('Failed to fetch contacts');
+        } else {
+          const data = response.data;
+          setContacts(data);
+          setError(null);
+        }
+      } catch (err) {
+        setError(err.message);
+        console.error('Error fetching contacts:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchContacts();
+  }, []);
+
+  const filteredContacts = contacts.filter(
+    (contact) =>
+      contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.first_name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleSelectAll = () => {
+    const allContactIds = contacts.map((contact) => contact.id);
+    if (selectedContacts.length === contacts.length) {
+      // Deselect all
+      allContactIds.forEach((id) => {
+        if (selectedContacts.includes(id)) onToggleContact(id);
+      });
+    } else {
+      // Select all
+      allContactIds.forEach((id) => {
+        if (!selectedContacts.includes(id)) onToggleContact(id);
+      });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.loading}>
+        <div className={styles.spinner}></div>
+        <p>Loading contacts...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorState}>
+        <p>Error loading contacts: {error}</p>
+        <button onClick={() => window.location.reload()}>Retry</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.contactSelection}>
+      <div className={styles.selectionHeader}>
+        <div className={styles.searchBox}>
+          <input
+            type="text"
+            placeholder="Search contacts..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className={styles.searchInput}
+          />
+        </div>
+
+        <div className={styles.selectionControls}>
+          <button onClick={handleSelectAll} className={styles.selectAllButton}>
+            {selectedContacts.length === contacts.length
+              ? 'Deselect All'
+              : 'Select All'}
+          </button>
+          <span className={styles.selectionCount}>
+            {selectedContacts.length} of {contacts.length} selected
+          </span>
+        </div>
+      </div>
+
+      <div className={styles.contactsList}>
+        {filteredContacts.length === 0 ? (
+          <p className={styles.noResults}>No contacts found</p>
+        ) : (
+          filteredContacts.map((contact) => (
+            <div
+              key={contact.id}
+              className={`${styles.contactItem} ${
+                selectedContacts.includes(contact.id) ? styles.selected : ''
+              }`}
+              onClick={() => onToggleContact(contact.id)}
+            >
+              <div className={styles.contactCheckbox}>
+                <input
+                  type="checkbox"
+                  checked={selectedContacts.includes(contact.id)}
+                  onChange={() => {}}
+                  readOnly
+                />
+              </div>
+              <div className={styles.contactInfo}>
+                <span className={styles.contactName}>
+                  {contact.phone_number}
+                </span>
+                <span className={styles.contactEmail}>
+                  {contact.first_name}
+                </span>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ContactSelection;

src/components/SendMessageWizard/MessageForm.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import styles from './SendMessageWizard.module.css';
+import { tokenService } from '../../services/TokenService';
+import { messageApi, CreateMessageRequest } from '../../api/messageApi';
+
+function MessageForm({ message, onMessageChange, onMessageCreated }) {
+  const [characterCount, setCharacterCount] = useState(message.length);
+  const [isCreatingMessage, setIsCreatingMessage] = useState(false);
+  const [createdMessage, setCreatedMessage] = useState(null);
+
+  const handleMessageChange = (e) => {
+    const newMessage = e.target.value;
+    onMessageChange(newMessage);
+    setCharacterCount(newMessage.length);
+  };
+
+  const createMessage = async () => {
+    if (!message.trim()) {
+      return;
+    }
+
+    setIsCreatingMessage(true);
+    setCreatedMessage(null);
+
+    try {
+      const userId = tokenService.getUserId();
+      let reqBod = new CreateMessageRequest();
+      reqBod.user_id = userId;
+      reqBod.content = message;
+      const response = await messageApi.createMessage(
+        reqBod,
+        tokenService.bearerToken()
+      );
+
+      if (!response) {
+        throw new Error('Failed to create message');
+      } else {
+        const createdMessage = response.data[0];
+        setCreatedMessage(createdMessage);
+        if (onMessageCreated) {
+          console.log('Setting createdMessage');
+          onMessageCreated(createdMessage);
+        }
+        console.log('Created message: ', createdMessage);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsCreatingMessage(false);
+    }
+  };
+
+  return (
+    <div className={styles.messageForm}>
+      <div className={styles.formGroup}>
+        <label htmlFor="message" className={styles.formLabel}>
+          Your Message
+        </label>
+        <textarea
+          id="message"
+          value={message}
+          onChange={handleMessageChange}
+          placeholder="Type your message here..."
+          className={styles.messageTextarea}
+          rows={8}
+        />
+        <div className={styles.textareaFooter}>
+          <span className={styles.characterCount}>
+            {characterCount} characters
+          </span>
+          <button
+            type="button"
+            onClick={createMessage}
+            disabled={isCreatingMessage || !message.trim()}
+            className={styles.testButton}
+          >
+            {isCreatingMessage ? 'Creating message...' : 'Create message'}
+          </button>
+        </div>
+      </div>
+
+      {createdMessage && (
+        <div
+          className={`${styles.createdMessage} ${
+            createdMessage.content ? styles.success : styles.error
+          }`}
+        >
+          {createdMessage.content}
+        </div>
+      )}
+
+      <div className={styles.messageTips}>
+        <h4>Tips:</h4>
+        <ul>
+          <li>Keep messages clear and concise</li>
+          <li>Use [Name] placeholder for personalization</li>
+          <li>Check spelling and grammar</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default MessageForm;

src/components/SendMessageWizard/SendMessageWizard.module.css

@@ -0,0 +1,453 @@
+/* Modal Styles */
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modalHeader {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modalHeader h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 28px;
+  line-height: 1;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+}
+
+.closeButton:hover {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.modalBody {
+  padding: 24px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.modalFooter {
+  padding: 20px 24px;
+  border-top: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+/* Contact Selection Styles */
+.contactSelection {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.selectionHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.searchBox {
+  position: relative;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 10px 16px;
+  padding-left: 40px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.searchInput:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.searchBox::before {
+  content: '🔍';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+}
+
+.selectionControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.selectAllButton {
+  padding: 6px 12px;
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.selectAllButton:hover {
+  background-color: #e5e7eb;
+}
+
+.selectionCount {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.contactsList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.contactItem {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  gap: 12px;
+}
+
+.contactItem:hover {
+  border-color: #3b82f6;
+  background-color: #f8fafc;
+}
+
+.contactItem.selected {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.contactCheckbox {
+  display: flex;
+  align-items: center;
+}
+
+.contactCheckbox input[type='checkbox'] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: #3b82f6;
+}
+
+.contactInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.contactName {
+  font-weight: 500;
+  color: #111827;
+}
+
+.contactEmail {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.noResults {
+  text-align: center;
+  padding: 32px;
+  color: #6b7280;
+  font-style: italic;
+}
+
+/* Loading State */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  gap: 16px;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.errorState {
+  text-align: center;
+  padding: 32px;
+  color: #dc2626;
+}
+
+.errorState button {
+  margin-top: 12px;
+  padding: 8px 16px;
+  background-color: #dc2626;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+/* Message Form Styles */
+.messageForm {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.formLabel {
+  font-weight: 500;
+  color: #374151;
+}
+
+.messageTextarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.2s;
+}
+
+.messageTextarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.textareaFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.characterCount {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.testButton {
+  padding: 6px 12px;
+  background-color: #10b981;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.testButton:hover:not(:disabled) {
+  background-color: #059669;
+}
+
+.testButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.testResult {
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.testResult.success {
+  background-color: #d1fae5;
+  color: #065f46;
+  border: 1px solid #a7f3d0;
+}
+
+.testResult.error {
+  background-color: #fee2e2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+.messageTips {
+  background-color: #f8fafc;
+  padding: 16px;
+  border-radius: 8px;
+  border-left: 4px solid #3b82f6;
+}
+
+.messageTips h4 {
+  margin: 0 0 8px 0;
+  color: #374151;
+}
+
+.messageTips ul {
+  margin: 0;
+  padding-left: 20px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.messageTips li {
+  margin-bottom: 4px;
+}
+
+/* Step Navigation */
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navButton {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.navButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.backButton {
+  background-color: white;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.backButton:hover:not(:disabled) {
+  background-color: #f9fafb;
+}
+
+.nextButton {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.nextButton:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.submitButton {
+  background-color: #10b981;
+  color: white;
+}
+
+.submitButton:hover:not(:disabled) {
+  background-color: #059669;
+}
+
+.doneButton {
+  background-color: #8b5cf6;
+  color: white;
+}
+
+.doneButton:hover:not(:disabled) {
+  background-color: #7c3aed;
+}
+
+/* Result Step */
+.resultStep {
+  text-align: center;
+  padding: 32px;
+}
+
+.success {
+  color: #065f46;
+}
+
+.error {
+  color: #dc2626;
+}
+
+.error h3 {
+  margin-top: 0;
+}

src/components/SendMessageWizard/SendMessageWizardModal.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import ContactSelection from './ContactSelection';
+import MessageForm from './MessageForm';
+import ConfirmationStep from './ConfirmationStep';
+import StepNavigation from './StepNavigation';
+import useSendMessageWizard from './useSendMessageWizard';
+import styles from './SendMessageWizard.module.css';
+
+function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
+  const wizard = useSendMessageWizard();
+
+  if (!isOpen) return null;
+
+  const renderStep = () => {
+    switch (wizard.currentStep) {
+      case 'select':
+        return (
+          <ContactSelection
+            selectedContacts={wizard.selectedContacts}
+            onToggleContact={wizard.toggleContact}
+          />
+        );
+      case 'message':
+        return (
+          <MessageForm
+            message={wizard.message}
+            onMessageChange={wizard.setMessage}
+            onMessageCreated={wizard.setCreatedMessage}
+          />
+        );
+      case 'confirm':
+        return (
+          <ConfirmationStep
+            selectedContacts={wizard.selectedContacts}
+            createdMessage={wizard.createdMessage}
+            message={wizard.message}
+            isSubmitting={wizard.isSubmitting}
+          />
+        );
+      case 'result':
+        return (
+          <div className={styles.resultStep}>
+            {wizard.submissionError ? (
+              <div className={styles.error}>
+                <h3>Error Sending Messages</h3>
+                <p>{wizard.submissionError}</p>
+              </div>
+            ) : (
+              <div className={styles.success}>
+                <h3>Messages Sent Successfully!</h3>
+                <p>
+                  Your message has been sent to {wizard.selectedContacts.length}{' '}
+                  contacts.
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const handleClose = () => {
+    wizard.reset();
+    onClose();
+  };
+
+  const handleComplete = () => {
+    wizard.reset();
+    onComplete();
+  };
+
+  const stepTitles = {
+    select: 'Select Contacts',
+    message: 'Compose Message',
+    confirm: 'Review & Send',
+    result: 'Result',
+  };
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <div className={styles.modalHeader}>
+          <h2>{stepTitles[wizard.currentStep]}</h2>
+          <button
+            onClick={handleClose}
+            className={styles.closeButton}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className={styles.modalBody}>{renderStep()}</div>
+
+        <div className={styles.modalFooter}>
+          <StepNavigation
+            currentStep={wizard.currentStep}
+            onNext={wizard.nextStep}
+            onBack={wizard.prevStep}
+            onSubmit={wizard.submit}
+            onDone={handleComplete}
+            canProceed={wizard.canProceedToNextStep}
+            canGoBack={wizard.canGoBack}
+            isSubmitting={wizard.isSubmitting}
+            submissionError={wizard.submissionError}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SendMessageWizardModal;

src/components/SendMessageWizard/StepNavigation.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styles from './SendMessageWizard.module.css';
+
+function StepNavigation({
+  currentStep,
+  onNext,
+  onBack,
+  onSubmit,
+  onDone,
+  canProceed,
+  canGoBack,
+  isSubmitting,
+  submissionError,
+}) {
+  const renderButtons = () => {
+    switch (currentStep) {
+      case 'select':
+      case 'message':
+        return (
+          <>
+            <button
+              onClick={onBack}
+              disabled={!canGoBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              Back
+            </button>
+            <button
+              onClick={onNext}
+              disabled={!canProceed}
+              className={`${styles.navButton} ${styles.nextButton}`}
+            >
+              {currentStep === 'select' ? 'Next' : 'Review'}
+            </button>
+          </>
+        );
+      case 'confirm':
+        return (
+          <>
+            <button
+              onClick={onBack}
+              className={`${styles.navButton} ${styles.backButton}`}
+            >
+              Back
+            </button>
+            <button
+              onClick={onSubmit}
+              disabled={isSubmitting}
+              className={`${styles.navButton} ${styles.submitButton}`}
+            >
+              {isSubmitting ? 'Sending...' : 'Send Messages'}
+            </button>
+          </>
+        );
+      case 'result':
+        return (
+          <button
+            onClick={onDone}
+            className={`${styles.navButton} ${styles.doneButton}`}
+          >
+            Done
+          </button>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.navigation}>
+      {renderButtons()}
+      {submissionError && (
+        <span className={styles.error} style={{ color: '#dc2626' }}>
+          {submissionError}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default StepNavigation;

src/components/SendMessageWizard/useSendMessageWizard.js

@@ -0,0 +1,168 @@
+import { useState, useCallback, useRef } from 'react';
+
+import { tokenService } from '../../services/TokenService';
+import {
+  sendMessageApi,
+  SendInstantMessageRequest,
+} from '../../api/sendMessageApi';
+
+const useSendMessageWizard = () => {
+  const [state, setState] = useState({
+    step: 'select',
+    selectedContacts: [],
+    message: '',
+    createdMessage: null,
+    isSubmitting: false,
+    submissionError: null,
+  });
+
+  const abortControllerRef = useRef(null);
+
+  // Computed values
+  const canProceedToNextStep = useCallback(() => {
+    switch (state.step) {
+      case 'select':
+        return state.selectedContacts.length > 0;
+      case 'message':
+        return state.message.trim().length > 0;
+      case 'confirm':
+        return true;
+      default:
+        return false;
+    }
+  }, [state.step, state.selectedContacts.length, state.message]);
+
+  const canGoBack = state.step !== 'select';
+
+  // Actions
+  const toggleContact = (contactId) => {
+    setState((prev) => ({
+      ...prev,
+      selectedContacts: prev.selectedContacts.includes(contactId)
+        ? prev.selectedContacts.filter((id) => id !== contactId)
+        : [...prev.selectedContacts, contactId],
+    }));
+  };
+
+  const setMessage = (message) => {
+    setState((prev) => ({ ...prev, message }));
+  };
+
+  const setCreatedMessage = (message) => {
+    console.log('Setting created message');
+    setState((prev) => ({ ...prev, createdMessage: message }));
+  };
+
+  const nextStep = () => {
+    if (!canProceedToNextStep()) return;
+
+    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const currentIndex = stepOrder.indexOf(state.step);
+    if (currentIndex < stepOrder.length - 1) {
+      setState((prev) => ({
+        ...prev,
+        step: stepOrder[currentIndex + 1],
+        submissionError: null,
+      }));
+    }
+  };
+
+  const prevStep = () => {
+    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const currentIndex = stepOrder.indexOf(state.step);
+    if (currentIndex > 0) {
+      setState((prev) => ({
+        ...prev,
+        step: stepOrder[currentIndex - 1],
+        submissionError: null,
+      }));
+    }
+  };
+
+  const submit = async () => {
+    if (state.isSubmitting) return;
+
+    abortControllerRef.current = new AbortController();
+
+    setState((prev) => ({
+      ...prev,
+      isSubmitting: true,
+      submissionError: null,
+    }));
+
+    try {
+      console.log('Sending message');
+      let reqBod = new SendInstantMessageRequest();
+      reqBod.user_id = tokenService.getUserId();
+      reqBod.message_id = state.createdMessage.id;
+      state.selectedContacts.forEach((selectedContact) => {
+        reqBod.contact_ids.push(selectedContact);
+      });
+      const response = await sendMessageApi.sendInstantMessage(
+        reqBod,
+        tokenService.bearerToken()
+      );
+
+      if (response) {
+        // Success - move to result step
+        setState((prev) => ({
+          ...prev,
+          step: 'result',
+          isSubmitting: false,
+        }));
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        console.log('Submission was aborted');
+        return;
+      }
+
+      setState((prev) => ({
+        ...prev,
+        submissionError: error.message || 'Failed to send messages',
+        isSubmitting: false,
+      }));
+    }
+  };
+
+  const reset = () => {
+    abortControllerRef.current?.abort();
+    setState({
+      step: 'select',
+      selectedContacts: [],
+      message: '',
+      createdMessage: null,
+      isSubmitting: false,
+      submissionError: null,
+    });
+  };
+
+  // Cleanup
+  const cleanup = () => {
+    abortControllerRef.current?.abort();
+  };
+
+  return {
+    // Getters
+    currentStep: state.step,
+    selectedContacts: state.selectedContacts,
+    message: state.message,
+    createdMessage: state.createdMessage,
+    isSubmitting: state.isSubmitting,
+    submissionError: state.submissionError,
+    canProceedToNextStep: canProceedToNextStep(),
+    canGoBack,
+
+    // Actions
+    toggleContact,
+    setMessage,
+    setCreatedMessage,
+    nextStep,
+    prevStep,
+    submit,
+    reset,
+    cleanup,
+  };
+};
+
+export default useSendMessageWizard;

src/components/ViewContact.css

@@ -0,0 +1,358 @@
+/* ViewContact.css */
+/* Contact Modal Styles */
+.contact-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.contact-modal {
+  background: transparent;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.contact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.contact-title {
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 32px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+}
+
+.close-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.contact-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+}
+
+.contact-form {
+  margin-bottom: 0;
+}
+
+.required {
+  color: #ef4444;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.cancel-btn {
+  flex: 1;
+  background: #f3f4f6;
+  color: #4b5563;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn:hover:not(:disabled) {
+  background: #e5e7eb;
+  transform: translateY(-1px);
+}
+
+.cancel-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.cancel-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  flex: 1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-error {
+  background-color: #fee;
+  border: 1px solid #fcc;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #ef4444;
+  font-size: 14px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .contact-card {
+    padding: 30px 20px;
+  }
+
+  .contact-title {
+    font-size: 20px;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+}
+
+/* Loading animation */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Scrollbar styling */
+.contact-modal::-webkit-scrollbar {
+  width: 8px;
+}
+
+.contact-modal::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.contact-modal::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+.contact-modal::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* ViewContact.css */
+/* Add to existing ViewContact.css */
+
+/* Loading spinner */
+.loading-spinner {
+  border: 4px solid #f3f4f6;
+  border-top: 4px solid #667eea;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Table styles */
+.contact-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.contact-table th {
+  background: #f9fafb;
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 2px solid #e5e7eb;
+  color: #374151;
+  font-weight: 600;
+  font-size: 14px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.contact-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 14px;
+}
+
+.contact-table tr:last-child td {
+  border-bottom: none;
+}
+
+.contact-table tr:hover {
+  background-color: #f9fafb;
+}
+
+/* Contact item styles */
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.contact-item:last-child {
+  border-bottom: none;
+}
+
+.contact-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.contact-info {
+  flex: 1;
+}
+
+.contact-name {
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 4px;
+}
+
+.contact-phone {
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.contact-id {
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f3f4f6;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+/* Search input */
+.search-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.empty-state-description {
+  color: #6b7280;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+/* Scrollbar for contact list */
+.contact-list-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.contact-list-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.contact-list-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.contact-list-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.contact-list-container::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}

src/components/ViewContact.jsx

@@ -0,0 +1,423 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
+import { tokenService } from '../services/TokenService';
+import { contactApi } from '../api/contactApi';
+
+import './ViewContact.css';
+
+const ViewContact = ({ isOpen, onClose, title = 'View Contacts' }) => {
+  const [contacts, setContacts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [lastUpdated, setLastUpdated] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Fetch contacts when the popup opens
+  const fetchContacts = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
+      const userId = tokenService.getUserId();
+
+      if (!accessToken) {
+        throw new Error('Authentication required. Please log in again.');
+      }
+
+      const result = await contactApi.getContactsWithUserId(
+        userId,
+        tokenService.bearerToken()
+      );
+
+      if (result.data) {
+        setContacts(result.data);
+        setLastUpdated(new Date());
+      } else {
+        setLoading(false);
+        throw new Error(result.message || 'Failed to load contacts');
+      }
+    } catch (err) {
+      console.error('Error fetching contacts:', err);
+      setError(err.message || 'Failed to load contacts. Please try again.');
+      setContacts([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      console.log('This is when I would fetch contacts');
+      fetchContacts();
+    }
+  }, [isOpen, fetchContacts]);
+
+  // Handle refresh button click
+  const handleRefresh = () => {
+    fetchContacts();
+  };
+
+  // Filter contacts based on search term
+  const filteredContacts = contacts.filter((contact) => {
+    const searchLower = searchTerm.toLowerCase();
+    return (
+      (contact.phone_number &&
+        contact.phone_number.toLowerCase().includes(searchLower)) ||
+      (contact.first_name &&
+        contact.first_name.toLowerCase().includes(searchLower)) ||
+      (contact.last_name &&
+        contact.last_name.toLowerCase().includes(searchLower)) ||
+      (contact.id && contact.id.toString().includes(searchTerm))
+    );
+  });
+
+  // Format phone number for display
+  const formatPhoneNumber = (phone) => {
+    if (!phone) return 'N/A';
+    // Simple formatting - you can customize this
+    const cleaned = phone.replace(/\D/g, '');
+    if (cleaned.length === 10) {
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+    }
+    return phone;
+  };
+
+  // Format timestamp
+  const formatLastUpdated = () => {
+    if (!lastUpdated) return 'Never';
+    return lastUpdated.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="contact-modal-overlay" onClick={onClose}>
+      <div className="contact-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="contact-card">
+          <div className="contact-header">
+            <h2 className="contact-title">{title}</h2>
+            <button className="close-btn" onClick={onClose} aria-label="Close">
+              ×
+            </button>
+          </div>
+
+          <div className="contact-form">
+            {error && (
+              <div className="submit-error">
+                <div style={{ marginBottom: '8px' }}>{error}</div>
+                <button
+                  onClick={handleRefresh}
+                  style={{
+                    background: '#ef4444',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    padding: '6px 12px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                  }}
+                >
+                  Retry Now
+                </button>
+              </div>
+            )}
+
+            {loading ? (
+              <div style={{ textAlign: 'center', padding: '40px' }}>
+                <div className="loading-spinner" />
+                <p style={{ marginTop: '20px', color: '#4b5563' }}>
+                  Loading contacts...
+                </p>
+              </div>
+            ) : (
+              <>
+                {/* Controls */}
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '20px',
+                    flexWrap: 'wrap',
+                    gap: '10px',
+                  }}
+                >
+                  <button
+                    onClick={handleRefresh}
+                    style={{
+                      background: '#f3f4f6',
+                      color: '#4b5563',
+                      border: '1px solid #e5e7eb',
+                      borderRadius: '6px',
+                      padding: '8px 16px',
+                      cursor: 'pointer',
+                      fontSize: '14px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                    }}
+                  >
+                    <span>⟳</span> Refresh
+                  </button>
+
+                  {/* Search Input */}
+                  <input
+                    type="text"
+                    placeholder="Search contacts..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    style={{
+                      flex: 1,
+                      minWidth: '200px',
+                      maxWidth: '300px',
+                      padding: '8px 12px',
+                      border: '1px solid #e5e7eb',
+                      borderRadius: '6px',
+                      fontSize: '14px',
+                    }}
+                  />
+
+                  <div
+                    style={{
+                      fontSize: '12px',
+                      color: '#6b7280',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                    }}
+                  >
+                    <span>Updated: {formatLastUpdated()}</span>
+                    <span
+                      style={{
+                        display: 'inline-block',
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        background: lastUpdated ? '#10b981' : '#9ca3af',
+                      }}
+                    />
+                  </div>
+                </div>
+
+                {/* Contacts List */}
+                {filteredContacts.length === 0 ? (
+                  <div
+                    style={{
+                      textAlign: 'center',
+                      padding: '40px',
+                      color: '#4b5563',
+                    }}
+                  >
+                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>
+                      📭
+                    </div>
+                    <p
+                      style={{
+                        fontSize: '18px',
+                        fontWeight: '500',
+                        marginBottom: '8px',
+                      }}
+                    >
+                      {searchTerm
+                        ? 'No matching contacts found'
+                        : 'No contacts available'}
+                    </p>
+                    <p style={{ marginBottom: '20px' }}>
+                      {searchTerm
+                        ? 'Try a different search term'
+                        : 'Add your first contact to get started'}
+                    </p>
+                    {searchTerm && (
+                      <button
+                        onClick={() => setSearchTerm('')}
+                        style={{
+                          background: '#f3f4f6',
+                          color: '#4b5563',
+                          border: '1px solid #e5e7eb',
+                          borderRadius: '6px',
+                          padding: '8px 16px',
+                          cursor: 'pointer',
+                          fontSize: '14px',
+                          marginBottom: '10px',
+                        }}
+                      >
+                        Clear Search
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  <>
+                    <div
+                      style={{
+                        maxHeight: '400px',
+                        overflowY: 'auto',
+                        border: '1px solid #e5e7eb',
+                        borderRadius: '8px',
+                        background: '#fafafa',
+                      }}
+                    >
+                      <div style={{ padding: '4px' }}>
+                        {filteredContacts.map((contact, index) => (
+                          <div
+                            key={contact.id}
+                            style={{
+                              padding: '16px',
+                              borderBottom:
+                                index < filteredContacts.length - 1
+                                  ? '1px solid #e5e7eb'
+                                  : 'none',
+                              background: 'white',
+                              transition: 'all 0.2s',
+                            }}
+                          >
+                            <div
+                              style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                marginBottom: '8px',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '12px',
+                                }}
+                              >
+                                <span
+                                  style={{
+                                    background: '#667eea',
+                                    color: 'white',
+                                    width: '28px',
+                                    height: '28px',
+                                    borderRadius: '50%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '12px',
+                                    fontWeight: '600',
+                                  }}
+                                >
+                                  {index + 1}
+                                </span>
+                                <div>
+                                  <h4
+                                    style={{
+                                      margin: 0,
+                                      color: '#111827',
+                                      fontSize: '16px',
+                                      fontWeight: '600',
+                                    }}
+                                  >
+                                    {contact.first_name || contact.last_name
+                                      ? `${contact.first_name || ''} ${contact.last_name || ''}`.trim()
+                                      : 'Unnamed Contact'}
+                                  </h4>
+                                  <p
+                                    style={{
+                                      margin: '4px 0 0 0',
+                                      color: '#6b7280',
+                                      fontSize: '14px',
+                                    }}
+                                  >
+                                    📱 {formatPhoneNumber(contact.phone_number)}
+                                  </p>
+                                </div>
+                              </div>
+                              <span
+                                style={{
+                                  fontSize: '12px',
+                                  color: '#9ca3af',
+                                  background: '#f3f4f6',
+                                  padding: '2px 8px',
+                                  borderRadius: '4px',
+                                }}
+                              >
+                                ID: {contact.id}
+                              </span>
+                            </div>
+
+                            {/* Additional info */}
+                            <div
+                              style={{
+                                marginLeft: '40px',
+                                fontSize: '13px',
+                                color: '#6b7280',
+                              }}
+                            >
+                              {contact.created_at && (
+                                <div style={{ marginTop: '4px' }}>
+                                  Created:{' '}
+                                  {new Date(
+                                    contact.created_at
+                                  ).toLocaleDateString()}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Summary */}
+                    <div
+                      style={{
+                        marginTop: '20px',
+                        padding: '12px 16px',
+                        background: '#f0f9ff',
+                        borderRadius: '6px',
+                        border: '1px solid #bae6fd',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        fontSize: '14px',
+                      }}
+                    >
+                      <div style={{ color: '#0369a1' }}>
+                        <strong>{filteredContacts.length}</strong> contact
+                        {filteredContacts.length !== 1 ? 's' : ''}
+                        {searchTerm && ` (filtered from ${contacts.length})`}
+                      </div>
+                      <div style={{ color: '#0284c7', fontSize: '12px' }}>
+                        {searchTerm
+                          ? 'Showing search results'
+                          : 'All contacts loaded'}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+
+            <div className="form-actions">
+              <button
+                type="button"
+                className="cancel-btn"
+                onClick={onClose}
+                disabled={loading}
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                className="submit-btn"
+                onClick={handleRefresh}
+                disabled={loading}
+              >
+                {loading ? 'Refreshing...' : 'Refresh List'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewContact;

src/components/ViewSentMessages.css

@@ -0,0 +1,357 @@
+/* ViewSentMessages.css */
+.view-sent-message-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.view-sent-message-modal {
+  background: transparent;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.view-sent-message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.view-sent-message-title {
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 32px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+}
+
+.close-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.view-sent-message-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+}
+
+.view-sent-message-form {
+  margin-bottom: 0;
+}
+
+.required {
+  color: #ef4444;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.cancel-btn {
+  flex: 1;
+  background: #f3f4f6;
+  color: #4b5563;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn:hover:not(:disabled) {
+  background: #e5e7eb;
+  transform: translateY(-1px);
+}
+
+.cancel-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.cancel-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  flex: 1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-error {
+  background-color: #fee;
+  border: 1px solid #fcc;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #ef4444;
+  font-size: 14px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .view-sent-message-card {
+    padding: 30px 20px;
+  }
+
+  .view-sent-message-title {
+    font-size: 20px;
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+}
+
+/* Loading animation */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Scrollbar styling */
+.view-sent-message-modal::-webkit-scrollbar {
+  width: 8px;
+}
+
+.view-sent-message-modal::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.view-sent-message-modal::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+.view-sent-message-modal::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* ViewContact.css */
+/* Add to existing ViewContact.css */
+
+/* Loading spinner */
+.loading-spinner {
+  border: 4px solid #f3f4f6;
+  border-top: 4px solid #667eea;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Table styles */
+.view-sent-message-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.view-sent-message-table th {
+  background: #f9fafb;
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 2px solid #e5e7eb;
+  color: #374151;
+  font-weight: 600;
+  font-size: 14px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.view-sent-message-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 14px;
+}
+
+.view-sent-message-table tr:last-child td {
+  border-bottom: none;
+}
+
+.view-sent-message-table tr:hover {
+  background-color: #f9fafb;
+}
+
+/* Contact item styles */
+.view-sent-message-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.view-sent-message-item:last-child {
+  border-bottom: none;
+}
+
+.view-sent-message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.view-sent-message-info {
+  flex: 1;
+}
+
+.view-sent-message-name {
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 4px;
+}
+
+.view-sent-message-phone {
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.view-sent-message-id {
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f3f4f6;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+/* Search input */
+.search-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.empty-state-description {
+  color: #6b7280;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+/* Scrollbar for view-sent-message list */
+.view-sent-message-list-container {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.view-sent-message-list-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.view-sent-message-list-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.view-sent-message-list-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.view-sent-message-list-container::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}

src/components/ViewSentMessages.jsx

@@ -0,0 +1,350 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { tokenService } from '../services/TokenService';
+import { messageEventResponseApi } from '../api/messageEventResponseApi';
+
+import './ViewSentMessages.css';
+
+const ViewSentMessages = ({
+  isOpen,
+  onClose,
+  title = 'View Sent Messages ',
+}) => {
+  const [sentMessages, setSentMessages] = useState([]);
+  const [lastUpdated, setLastUpdated] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Fetch the sent messages or Message Event Responses
+  const fetchSentMessages = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const userId = tokenService.getUserId();
+      const response =
+        await messageEventResponseApi.getMessageEventResponsesByUserId(
+          userId,
+          tokenService.bearerToken()
+        );
+
+      if (response) {
+        setLastUpdated(new Date());
+        setSentMessages(response.data);
+      } else {
+        setLoading(false);
+        throw new Error(response.message || 'Failed to load sent messages');
+      }
+    } catch (err) {
+      setError(err.message || 'Failed to load sent messages.');
+      setSentMessages([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleRefresh = () => {
+    fetchSentMessages();
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      console.log('Fetching sent messages');
+      fetchSentMessages();
+    }
+  }, [isOpen, fetchSentMessages]);
+
+  const filteredSentMessages = sentMessages.filter((sentMessage) => {
+    const searchLower = searchTerm.toLowerCase();
+    return (
+      (sentMessage.status &&
+        sentMessage.status.toLowerCase().includes(searchLower)) ||
+      (sentMessage.sent &&
+        sentMessage.sent.toLowerCase().includes(searchLower)) ||
+      (sentMessage.id && sentMessage.id.toString().includes(searchTerm))
+    );
+  });
+
+  const formatLastUpdated = () => {
+    if (!lastUpdated) return 'Never';
+    return lastUpdated.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="view-sent-message-modal-overlay" onClick={onClose}>
+      <div
+        className="view-sent-message-modal"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="view-sent-message-card">
+          <div className="view-sent-message-header">
+            <h2 className="view-sent-message-title">{title}</h2>
+            <button className="close-btn" onClick={onClose} aria-label="Close">
+              ×
+            </button>
+          </div>
+
+          <div className="view-sent-message-form">
+            {error && (
+              <div className="submit-error">
+                <div style={{ marginBottom: '8px' }}>{error}</div>
+                <button
+                  onClick={handleRefresh}
+                  onStype={{
+                    background: '#ef4444',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    padding: '6px 12px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                  }}
+                >
+                  Retry Now
+                </button>
+              </div>
+            )}
+
+            {loading ? (
+              <div style={{ textAlign: 'center', padding: '40px' }}>
+                <div className="loafing-spinner" />
+                <p style={{ marginTop: '20px', color: '#4b5563' }}>
+                  Loading sent messages
+                </p>
+              </div>
+            ) : (
+              <>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '20px',
+                    flexWrap: 'wrap',
+                    gap: '10px',
+                  }}
+                >
+                  <button
+                    onClick={handleRefresh}
+                    style={{
+                      background: '#f3f4f6',
+                      color: '#4b5563',
+                      border: '1px solid #e5e7eb',
+                      borderRadius: '6px',
+                      padding: '8px 16px',
+                      cursor: 'pointer',
+                      fontSize: '14px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                    }}
+                  >
+                    <span></span> Refresh
+                  </button>
+
+                  <input
+                    type="text"
+                    placeholder="Search sent messages..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    style={{
+                      flex: 1,
+                      minWidth: '200px',
+                      maxWidth: '300px',
+                      padding: '8px 12px',
+                      border: '1px solid #e5e7eb',
+                      borderRadius: '6px',
+                      fontSize: '14px',
+                    }}
+                  />
+
+                  <div
+                    style={{
+                      fontSize: '12px',
+                      color: '#6b7280',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                    }}
+                  >
+                    <span>Updated: {formatLastUpdated()}</span>
+                    <span
+                      style={{
+                        display: 'inline-block',
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        background: lastUpdated ? '#10b981' : '#9ca3af',
+                      }}
+                    />
+                  </div>
+                </div>
+
+                {/* Sent Messages List */}
+                {filteredSentMessages.length === 0 ? (
+                  <div
+                    style={{
+                      textAlign: 'center',
+                      padding: '40px',
+                      color: '#4b5563',
+                    }}
+                  >
+                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>
+                      X
+                    </div>
+                    <p
+                      style={{
+                        fontSize: '18px',
+                        fontWeight: '500',
+                        marginBottom: '8px',
+                      }}
+                    >
+                      {searchTerm
+                        ? 'No matching sent messages found'
+                        : 'No sent messages available'}
+                    </p>
+                    <p style={{ marginBottom: '20px' }}>
+                      {searchTerm
+                        ? 'Try a different search term'
+                        : 'Create a contact and send a message to get started'}
+                    </p>
+                    {searchTerm && (
+                      <button
+                        onClick={() => setSearchTerm('')}
+                        style={{
+                          background: '#f3f4f6',
+                          color: '#4b5563',
+                          border: '1px solid #e5e7eb',
+                          borderRadius: '6px',
+                          padding: '8px 16px',
+                          cursor: 'pointer',
+                          fontSize: '14px',
+                          marginBottom: '10px',
+                        }}
+                      >
+                        Clear Search
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  <>
+                    <div
+                      style={{
+                        maxHeight: '400px',
+                        overflowY: 'auto',
+                        border: '1px solid #e5e7eb',
+                        borderRadius: '8px',
+                        background: '#fafafa',
+                      }}
+                    >
+                      <div style={{ padding: '4px' }}>
+                        {filteredSentMessages.map((sentMessage, index) => (
+                          <div
+                            key={sentMessage.id}
+                            style={{
+                              padding: '16px',
+                              borderBottom:
+                                index < filteredSentMessages.length - 1
+                                  ? '1px solid #e5e7eb'
+                                  : 'none',
+                              background: 'white',
+                              transition: 'all 0.2s',
+                            }}
+                          >
+                            <div
+                              style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                marginBottom: '8px',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '12px',
+                                }}
+                              >
+                                <span
+                                  style={{
+                                    background: '#667eea',
+                                    color: 'white',
+                                    width: '28px',
+                                    height: '28px',
+                                    borderRadius: '50%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '12px',
+                                    fontWeight: '600',
+                                  }}
+                                >
+                                  {index + 1}
+                                </span>
+                                <div>
+                                  <h4
+                                    style={{
+                                      margin: 0,
+                                      color: '#111827',
+                                      fontSize: '16px',
+                                      fontWeight: '600',
+                                    }}
+                                  >
+                                    {sentMessage.status}
+                                  </h4>
+                                  <h5>Sent: {sentMessage.sent}</h5>
+                                </div>
+                              </div>
+                              <span
+                                style={{
+                                  fontSize: '12px',
+                                  color: '#9ca3af',
+                                  background: '#f3f4f6',
+                                  padding: '2px 8px',
+                                  borderRadius: '4px',
+                                }}
+                              >
+                                Id: {sentMessage.id}
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+            <div className="form-actions">
+              <button
+                type="button"
+                className="cancel-btn"
+                onClick={onClose}
+                disabled={loading}
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                className="submit-btn"
+                onClick={handleRefresh}
+                disabled={loading}
+              >
+                {loading ? 'Refreshing...' : 'Refresh List'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewSentMessages;

src/constants/api.js

@@ -0,0 +1,2 @@
+export const AUTH_API_BASE_URL = 'http://localhost:9080';
+export const API_BASE_URL = 'http://localhost:8080';

src/constants/app.js

@@ -0,0 +1,4 @@
+export const DATA_KEY_ACCESS_TOKEN = 'access_token';
+export const DATA_KEY_REGISTERED_USER_ID = 'registered_user_id';
+export const DATA_KEY_USER_ID = 'user_id';
+export const DATA_KEY_ADDED_CONTACT_ID = 'added_contact_id';

src/services/TokenService.jsx

@@ -0,0 +1,25 @@
+import { DATA_KEY_ACCESS_TOKEN, DATA_KEY_USER_ID } from '../constants/app';
+
+class TokenService {
+  getToken() {
+    return localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
+  }
+
+  setToken(token) {
+    localStorage.setItem(DATA_KEY_ACCESS_TOKEN, token);
+  }
+
+  getUserId() {
+    return localStorage.getItem(DATA_KEY_USER_ID);
+  }
+
+  setUserId(userId) {
+    localStorage.setItem(DATA_KEY_USER_ID, userId);
+  }
+
+  bearerToken() {
+    return `Bearer ${this.getToken()}`;
+  }
+}
+
+export const tokenService = new TokenService();