Updating name

tsk-10: View scheduled messages (#17 )
Closes #10 Reviewed-on: phoenix/textsender#17
2026-07-13 18:11:11 -04:00 · 2026-07-04 19:39:12 -04:00 · 2026-07-04 16:56:35 -04:00 · 2026-07-04 16:25:45 -04:00 · 2026-07-04 10:53:33 -04:00 · 2026-07-02 23:24:31 -04:00
41 changed files with 3912 additions and 2103 deletions
@@ -0,0 +1,2 @@
 VITE_AUTH_URL="http://localhost:9080"
 VITE_API_URL="http://localhost:9081"
@@ -0,0 +1,2 @@
 VITE_AUTH_URL="http://localhost:9080"
 VITE_API_URL="http://localhost:9081"
@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
 # Environment
 .env.production
 .env.development
@@ -1,15 +1,6 @@
-# React + Vite
+# schedtxt
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Frontend web app used to send messages
 Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 ## Expanding the ESLint configuration
 If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
 # Getting started
@@ -2,9 +2,8 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>schedtxt</title>
  </head>
  <body>
    <div id="root"></div>
@@ -1,7 +1,7 @@
 {
-  "name": "textsender",
+  "name": "schedtxt",
  "private": true,
-  "version": "0.0.3",
+  "version": "0.0.10",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -12,19 +12,20 @@
    "format:check": "npx prettier --check ."
  },
  "dependencies": {
-    "react": "^19.2.3",
+    "dotenv": "^17.4.2",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.7",
-    "react-router-dom": "^7.10.1"
+    "react-dom": "^19.2.7",
    "react-router-dom": "^7.18.0"
  },
  "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.39.4",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^9.30.1",
+    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^16.3.0",
+    "globals": "^17.5.0",
-    "vite": "^7.0.4"
+    "vite": "^8.1.0"
  }
 }
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -8,6 +8,7 @@ import {
 import Dashboard from './components/Dashboard';
 import Login from './components/Login';
 import Register from './components/Register';
 import ProfileForm from './components/ProfileForm';
 import './App.css';
@@ -19,6 +20,7 @@ function App() {
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/user/profile" element={<ProfileForm />} />
      </Routes>
    </Router>
  );
@@ -1,12 +1,21 @@
 import { API_BASE_URL } from '../constants/api';
 export class CreateContactRequest {
-  first_name = '';
+  firstname = '';
-  last_name = '';
+  lastname = '';
  nickname = '';
  phone_number = '';
  user_id = '';
 }
 export class UpdateContactNamesRequest {
  firstname = '';
  lastname = '';
  nickname = '';
  id = '';
  user_id = '';
 }
 export const contactApi = {
  getContactsWithUserId: async (userId, authBearerToken) => {
    console.log('Fetching contacts');
@@ -55,4 +64,22 @@ export const contactApi = {
      return response.json();
    }
  },
  updateContactNames: async (reqBody, authBearerToken) => {
    const response = await fetch(`${API_BASE_URL}/api/v1/contact/update`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        Authorization: authBearerToken,
      },
      body: JSON.stringify(reqBody),
    });
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      throw new Error(errorData.message || `Failed to update contact names.`);
    } else {
      return response.json();
    }
  },
 };
@@ -20,3 +20,50 @@ export const loginApi = {
    }
  },
 };
 export const userApi = {
  get_user_profile: async (userId) => {
    const reponse = await fetch(
      `${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`,
      {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },
      }
    );
    if (reponse.ok) {
      return reponse.json();
    } else {
      throw new Error('Error logging in');
    }
  },
  update_password: async (
    userId,
    currentPassword,
    updatedPassword,
    confirmedPassword
  ) => {
    const request = {
      user_id: userId,
      current_password: currentPassword,
      updated_password: updatedPassword,
      confirmed_password: confirmedPassword,
    };
    const reponse = await fetch(
      `${AUTH_API_BASE_URL}/api/v1/user/password/update`,
      {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(request),
      }
    );
    if (reponse.ok) {
      return reponse.json();
    } else {
      throw new Error('Error logging in');
    }
  },
 };
@@ -0,0 +1,63 @@
 import { API_BASE_URL } from '../constants/api';
 export const scheduleApi = {
  scheduleMessage: async (reqBody, authBearerToken) => {
    console.log('Scheduling message');
    const response = await fetch(`${API_BASE_URL}/api/v1/schedule/message`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: authBearerToken,
      },
      body: JSON.stringify(reqBody),
    });
    if (!response.ok) {
      throw new Error('Error scheduling message');
    } else {
      return response.json();
    }
  },
  getScheduledMessage: async (userId, authBearerToken) => {
    const response = await fetch(
      `${API_BASE_URL}/api/v1/schedule/message?user_id=${userId}`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: authBearerToken,
        },
      }
    );
    if (!response.ok) {
      throw new Error('Error getting scheduled message');
    } else {
      return response.json();
    }
  },
  prepareMessage: async (reqBody, authBearerToken) => {
    console.log('Preparing Scheduled message');
    const response = await fetch(
      `${API_BASE_URL}/api/v1/schedule/message/status/update`,
      {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          Authorization: authBearerToken,
        },
        body: JSON.stringify(reqBody),
      }
    );
    if (!response.ok) {
      throw new Error('Error updating status of scheduled message');
    } else {
      return response.json();
    }
  },
 };
@@ -0,0 +1,25 @@
 import { API_BASE_URL } from '../constants/api';
 export const scheduleEventApi = {
  scheduleMessageEvent: async (reqBody, authBearerToken) => {
    console.log('Scheduling message Event');
    const response = await fetch(
      `${API_BASE_URL}/api/v1/schedule/message/event`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: authBearerToken,
        },
        body: JSON.stringify(reqBody),
      }
    );
    if (!response.ok) {
      throw new Error('Error scheduling message event');
    } else {
      return response.json();
    }
  },
 };
@@ -11,6 +11,7 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
    phoneNumber: '',
    firstName: '',
    lastName: '',
    nickName: '',
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
@@ -66,8 +67,9 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
      const userId = tokenService.getUserId();
      let contact = new CreateContactRequest();
      contact.phone_number = formData.phoneNumber;
-      contact.first_name = formData.firstName;
+      contact.firstname = formData.firstName;
-      contact.last_name = formData.lastName;
+      contact.lastname = formData.lastName;
      contact.nickname = formData.nickName;
      contact.user_id = userId;
      const result = await contactApi.createContact(
        contact,
@@ -178,6 +180,23 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
              <span className="form-hint">Optional field</span>
            </div>
            <div className="form-group">
              <label htmlFor="nickName" className="form-label">
                Nick Name
              </label>
              <input
                id="nickName"
                name="nickName"
                type="text"
                className="form-input"
                value={formData.nickName}
                onChange={handleChange}
                placeholder="Enter nick name (optional)"
                disabled={isSubmitting}
              />
              <span className="form-hint">Optional field</span>
            </div>
            <div className="form-actions">
              <button
                type="button"
@@ -1,18 +1,22 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import AddContact from './AddContact';
 import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 import './Dashboard.css';
 import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
 import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
 import { APP_NAME } from '../constants/app';
 const Dashboard = () => {
  const navigate = useNavigate();
  const [activeView, setActiveView] = useState('dashboard');
  const [isWizardOpen, setIsWizardOpen] = useState(false);
  const [isViewContactWizardOpen, setIsViewContactWizardOpen] = useState(false);
  const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
  const [showContactForm, setShowContactForm] = useState(false);
  const [isPopupOpen, setIsPopupOpen] = useState(false);
  const handleAddContactClick = () => {
    setShowContactForm(true);
@@ -20,15 +24,9 @@ const Dashboard = () => {
  const handleContactSuccess = (contactData) => {
    console.log('Contact created successfully:', contactData);
    // You could:
    // 1. Refresh the contacts list if you have one
    // 2. Show a success notification
    // 3. Update local state with the new contact
  };
  const handleWizardComplete = () => {
    // Add your logic here for each button
    setIsWizardOpen(false);
  };
@@ -36,8 +34,20 @@ const Dashboard = () => {
    setIsWizardOpen(false);
  };
  const handleViewWizardComplete = () => {
    setIsViewContactWizardOpen(false);
  };
  const handleViewWizardClose = () => {
    setIsViewContactWizardOpen(false);
  };
  const handleNavClick = (view) => {
    if (view === 'profile') {
      navigate('/user/profile');
    } else {
      setActiveView(view);
    }
  };
  return (
@@ -45,7 +55,7 @@ const Dashboard = () => {
      {/* Navbar */}
      <nav className="dashboard-nav">
        <div className="nav-logo">
-          <span className="logo-text">Dashboard</span>
+          <span className="logo-text">{APP_NAME}</span>
        </div>
        <div className="nav-links">
          <button
@@ -54,12 +64,6 @@ const 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')}
@@ -121,7 +125,7 @@ const Dashboard = () => {
            <button
              className="dashboard-btn tertiary"
-              onClick={() => setIsPopupOpen(true)}
+              onClick={() => setIsViewContactWizardOpen(true)}
              style={{
                padding: '12px 24px',
                background: '#667eea',
@@ -136,9 +140,10 @@ const Dashboard = () => {
              <span className="btn-hint">View created contacts</span>
            </button>
-            <ViewContact
+            <ViewContactWizardModal
-              isOpen={isPopupOpen}
+              isOpen={isViewContactWizardOpen}
-              onClose={() => setIsPopupOpen(false)}
+              onClose={handleViewWizardClose}
              onComplete={handleViewWizardComplete}
              title="Item List"
            />
          </div>
@@ -150,11 +155,6 @@ const Dashboard = () => {
                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.
@@ -0,0 +1,95 @@
 .profile-form {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
 }
 .profile-form h2 {
  color: #333;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
 }
 .profile-form form {
  margin-bottom: 25px;
 }
 .profile-form div {
  margin-bottom: 20px;
 }
 .profile-form label {
  display: block;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
 }
 .profile-form input[type='text'],
 .profile-form input[type='tel'],
 .profile-form input[type='password'] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
 }
 .profile-form input[type='text']:focus,
 .profile-form input[type='tel']:focus,
 .profile-form input[type='password']:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 .profile-form input[readonly] {
  background-color: #f9fafb;
  cursor: not-allowed;
 }
 .profile-form button[type='submit'] {
  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;
 }
 .profile-form button[type='submit']:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
 }
 .profile-form button[type='button'] {
  width: 100%;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
 }
 .profile-form button[type='button']:hover {
  background: #e2e8f0;
 }
@@ -0,0 +1,252 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { tokenService } from '../services/TokenService';
 import { userApi } from '../api/loginApi';
 import { APP_NAME } from '../constants/app';
 import './ProfileForm.css';
 const ProfileForm = () => {
  const navigate = useNavigate();
  const [activeView, setActiveView] = useState('profile');
  const [subView, setSubView] = useState('details');
  const [formData, setFormData] = useState({
    firstname: '',
    lastname: '',
    phone: '',
    username: '',
    createdDate: new Date().toISOString().split('T')[0],
    lastLoginDate: new Date().toISOString().split('T')[0],
  });
  const [passwordData, setPasswordData] = useState({
    currentPassword: '',
    newPassword: '',
    confirmNewPassword: '',
  });
  useEffect(() => {
    const fetchData = async () => {
      const userId = tokenService.getUserId();
      const response = await userApi.get_user_profile(userId);
      if (response) {
        const userProfile = response.data[0];
        setFormData((prev) => ({
          ...prev,
          firstname: userProfile.firstname,
          lastname: userProfile.lastname,
          phone: userProfile.phone_number,
          username: userProfile.username,
          createdDate: userProfile.created,
          lastLoginDate: userProfile.last_login,
        }));
      } else {
        console.error('Error getting user profile');
      }
    };
    fetchData();
  }, []);
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };
  const handlePasswordChange = (e) => {
    const { name, value } = e.target;
    setPasswordData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };
  const handleNavClick = (view) => {
    if (view === 'profile') {
      navigate('/user/profile');
    } else {
      navigate(`/${view}`);
    }
  };
  const handlePasswordSubmit = async (e) => {
    e.preventDefault();
    try {
      const userId = tokenService.getUserId();
      const currentPassword = passwordData.currentPassword;
      const newPassword = passwordData.newPassword;
      const confirmNewPassword = passwordData.confirmNewPassword;
      const response = await userApi.update_password(
        userId,
        currentPassword,
        newPassword,
        confirmNewPassword
      );
      if (response) {
        console.log('Successfully updated password');
      } else {
        console.error('Error updating password');
      }
    } catch (error) {
      console.error('Login error:', error);
    } finally {
    }
  };
  const renderPasswordForm = () => (
    <div className="profile-form">
      <h2>Change Password</h2>
      <form onSubmit={handlePasswordSubmit}>
        <div>
          <label htmlFor="currentPassword">Current Password</label>
          <input
            type="password"
            id="currentPassword"
            name="currentPassword"
            value={passwordData.currentPassword}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <div>
          <label htmlFor="newPassword">New Password</label>
          <input
            type="password"
            id="newPassword"
            name="newPassword"
            value={passwordData.newPassword}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <div>
          <label htmlFor="confirmNewPassword">Confirm New Password</label>
          <input
            type="password"
            id="confirmNewPassword"
            name="confirmNewPassword"
            value={passwordData.confirmNewPassword}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <button type="submit">Update Password</button>
        <button type="button" onClick={() => setSubView('details')}>
          Back to Profile
        </button>
      </form>
    </div>
  );
  const renderProfileForm = () => (
    <div className="profile-form">
      <h2>User Profile</h2>
      <form>
        <div>
          <label htmlFor="firstname">First Name</label>
          <input
            type="text"
            id="firstname"
            name="firstname"
            value={formData.firstname}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="lastname">Last Name</label>
          <input
            type="text"
            id="lastname"
            name="lastname"
            value={formData.lastname}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="phone">Phone</label>
          <input
            type="tel"
            id="phone"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="username">Username</label>
          <input
            type="text"
            id="username"
            name="username"
            value={formData.username}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="createdDate">Created Date</label>
          <input
            type="text"
            id="createdDate"
            name="createdDate"
            value={formData.createdDate}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="lastLoginDate">Last Login Date</label>
          <input
            type="text"
            id="lastLoginDate"
            name="lastLoginDate"
            value={formData.lastLoginDate}
            readOnly
          />
        </div>
      </form>
      <div>
        <button type="button" onClick={() => setSubView('password')}>
          Change Password
        </button>
      </div>
    </div>
  );
  return (
    <div className="dashboard-container">
      {/* Navbar */}
      <nav className="dashboard-nav">
        <div className="nav-logo">
          <span className="logo-text">{APP_NAME}</span>
        </div>
        <div className="nav-links">
          <button
            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
            onClick={() => handleNavClick('dashboard')}
          >
            Dashboard
          </button>
          <button
            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
            onClick={() => handleNavClick('profile')}
          >
            Profile
          </button>
        </div>
      </nav>
      {/* Main Content */}
      {subView === 'details' ? renderProfileForm() : renderPasswordForm()}
    </div>
  );
 };
 export default ProfileForm;
@@ -5,6 +5,7 @@ function ConfirmationStep({
  selectedContacts,
  createdMessage,
  message,
  scheduledTime,
  isSubmitting,
 }) {
  // In a real app, you might fetch full contact details here
@@ -88,6 +89,12 @@ function ConfirmationStep({
          </div>
        </div>
        {/* Scheduled time Section */}
        <div>
          Scheduled time:{' '}
          {scheduledTime ? scheduledTime.toISOString() : 'No schedule date'}
        </div>
        {/* Summary Section */}
        <div className={styles.confirmationSection}>
          <div className={styles.sectionHeader}>
@@ -0,0 +1,89 @@
 import React, { useState } from 'react';
 function FutureTimeForm({ scheduledTime, setScheduledTime }) {
  const [selectedTime, setSelectedTime] = useState(new Date());
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const handleTimeChange = (e) => {
    setSelectedTime(e.target.value);
    setScheduledTime(new Date(e.target.value));
    setError('');
    setSuccess('');
  };
  const validateAndSubmit = (e) => {
    e.preventDefault();
    if (!selectedTime) {
      setError('Please select a date and time.');
      return;
    }
    const now = new Date();
    const inputDate = new Date(selectedTime);
    // Calculate the minimum allowed time (Now + 10 minutes)
    const minAllowedTime = new Date(now.getTime() + 10 * 60000);
    if (inputDate < minAllowedTime) {
      setError('The time must be at least 10 minutes in the future.');
      setSuccess('');
      setScheduledTime(null);
    } else {
      setError('');
      setSuccess('Time validated successfully!');
      setScheduledTime(inputDate);
    }
  };
  return (
    <div
      style={{ maxWidth: '400px', margin: '2rem auto', fontFamily: 'Arial' }}
    >
      <h2>Schedule Event</h2>
      <form onSubmit={validateAndSubmit}>
        <div style={{ marginBottom: '1rem' }}>
          <label
            htmlFor="future-time"
            style={{ display: 'block', marginBottom: '0.5rem' }}
          >
            Select Date and Time:
          </label>
          <input
            type="datetime-local"
            id="future-time"
            value={selectedTime}
            onChange={handleTimeChange}
            style={{
              padding: '8px',
              width: '100%',
              borderColor: error ? 'red' : '#ccc',
            }}
          />
        </div>
        {error && <p style={{ color: 'red', fontSize: '0.9rem' }}>{error}</p>}
        {success && (
          <p style={{ color: 'green', fontSize: '0.9rem' }}>{success}</p>
        )}
        <button
          type="submit"
          style={{
            padding: '10px 20px',
            backgroundColor: '#007BFF',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
 }
 export default FutureTimeForm;
@@ -3,9 +3,15 @@ import styles from './SendMessageWizard.module.css';
 import { tokenService } from '../../services/TokenService';
 import { messageApi, CreateMessageRequest } from '../../api/messageApi';
-function MessageForm({ message, onMessageChange, onMessageCreated }) {
+function MessageForm({
  message,
  onMessageChange,
  onMessageCreated,
  onToggleScheduled,
 }) {
  const [characterCount, setCharacterCount] = useState(message.length);
  const [isCreatingMessage, setIsCreatingMessage] = useState(false);
  const [isScheduledChecked, setIsScheduledChecked] = useState(false);
  const [createdMessage, setCreatedMessage] = useState(null);
  const handleMessageChange = (e) => {
@@ -14,6 +20,11 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
    setCharacterCount(newMessage.length);
  };
  const handleIsScheduledCheckbox = (event) => {
    setIsScheduledChecked(event.target.checked);
    onToggleScheduled(event.target.checked);
  };
  const createMessage = async () => {
    if (!message.trim()) {
      return;
@@ -38,10 +49,8 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
        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);
@@ -97,6 +106,17 @@ function MessageForm({ message, onMessageChange, onMessageCreated }) {
          <li>Check spelling and grammar</li>
        </ul>
      </div>
      <div>
        <label>
          <input
            type="checkbox"
            checked={isScheduledChecked}
            onChange={handleIsScheduledCheckbox}
            readOnly
          />
          Schedule Message
        </label>
      </div>
    </div>
  );
 }
@@ -1,5 +1,6 @@
 import React from 'react';
 import ContactSelection from './ContactSelection';
 import FutureTimeForm from './FutureTimeForm';
 import MessageForm from './MessageForm';
 import ConfirmationStep from './ConfirmationStep';
 import StepNavigation from './StepNavigation';
@@ -26,6 +27,14 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
            message={wizard.message}
            onMessageChange={wizard.setMessage}
            onMessageCreated={wizard.setCreatedMessage}
            onToggleScheduled={wizard.toggleScheduled}
          />
        );
      case 'schedule':
        return (
          <FutureTimeForm
            scheduledTime={wizard.scheduledTime}
            setScheduledTime={wizard.setScheduledTime}
          />
        );
      case 'confirm':
@@ -34,6 +43,7 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
            selectedContacts={wizard.selectedContacts}
            createdMessage={wizard.createdMessage}
            message={wizard.message}
            scheduledTime={wizard.scheduledTime}
            isSubmitting={wizard.isSubmitting}
          />
        );
@@ -74,6 +84,7 @@ function SendMessageWizardModal({ isOpen, onClose, onComplete }) {
  const stepTitles = {
    select: 'Select Contacts',
    message: 'Compose Message',
    schedule: 'Schedule message',
    confirm: 'Review & Send',
    result: 'Result',
  };
@@ -34,6 +34,25 @@ function StepNavigation({
            </button>
          </>
        );
      case 'schedule':
        return (
          <>
            <button
              onClick={onBack}
              disabled={!canGoBack}
              className={`${styles.navButton} ${styles.backButton}`}
            >
              Back
            </button>
            <button
              onClick={onNext}
              disabled={!canProceed}
              className={`${styles.navButton} ${styles.nextButton}`}
            >
              {currentStep === 'schedule' ? 'Next' : 'Review'}
            </button>
          </>
        );
      case 'confirm':
        return (
          <>
@@ -5,14 +5,18 @@ import {
  sendMessageApi,
  SendInstantMessageRequest,
 } from '../../api/sendMessageApi';
 import { scheduleApi } from '../../api/scheduleApi.js';
 import { scheduleEventApi } from '../../api/scheduleEventApi.js';
 const useSendMessageWizard = () => {
  const [state, setState] = useState({
    step: 'select',
    selectedContacts: [],
    scheduledTime: null,
    message: '',
    createdMessage: null,
    isSubmitting: false,
    isScheduled: false,
    submissionError: null,
  });
@@ -24,13 +28,38 @@ const useSendMessageWizard = () => {
      case 'select':
        return state.selectedContacts.length > 0;
      case 'message':
-        return state.message.trim().length > 0;
+        if (state.message.trim().length > 0) {
          if (state.createdMessage != null) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      case 'schedule':
        console.log('Checking to see if schedule can go to the next step');
        if (state.scheduledTime == null) {
          return false;
        }
        console.log('Scheduled time is not null');
        const result =
          state.scheduledTime instanceof Date &&
          isNaN(state.scheduledTime.getTime());
        return !result;
      case 'confirm':
        return true;
      default:
        return false;
    }
-  }, [state.step, state.selectedContacts.length, state.message]);
+  }, [
    state.step,
    state.selectedContacts.length,
    state.message,
    state.createdMessage,
    state.scheduledTime,
  ]);
  const canGoBack = state.step !== 'select';
@@ -44,6 +73,14 @@ const useSendMessageWizard = () => {
    }));
  };
  const toggleScheduled = (scheduled) => {
    console.log('Yup');
    setState((prev) => ({
      ...prev,
      isScheduled: scheduled,
    }));
  };
  const setMessage = (message) => {
    setState((prev) => ({ ...prev, message }));
  };
@@ -53,29 +90,67 @@ const useSendMessageWizard = () => {
    setState((prev) => ({ ...prev, createdMessage: message }));
  };
  const setScheduledTime = (selectedTime) => {
    console.log('Setting scheduled time');
    setState((prev) => ({ ...prev, scheduledTime: selectedTime }));
  };
  const nextStep = () => {
    if (!canProceedToNextStep()) return;
-    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
    const currentIndex = stepOrder.indexOf(state.step);
    if (currentIndex < stepOrder.length - 1) {
      if (state.step === 'message') {
        if (state.isScheduled) {
          setState((prev) => ({
            ...prev,
            step: stepOrder[currentIndex + 1],
            submissionError: null,
          }));
        } else {
          setState((prev) => ({
            ...prev,
            step: stepOrder[currentIndex + 2],
            submissionError: null,
          }));
        }
      } else {
        setState((prev) => ({
          ...prev,
          step: stepOrder[currentIndex + 1],
          submissionError: null,
        }));
      }
    }
  };
  const prevStep = () => {
-    const stepOrder = ['select', 'message', 'confirm', 'result'];
+    const stepOrder = ['select', 'message', 'schedule', 'confirm', 'result'];
    const currentIndex = stepOrder.indexOf(state.step);
    if (currentIndex > 0) {
      if (state.step === 'confirm') {
        if (state.isScheduled) {
          setState((prev) => ({
            ...prev,
            step: stepOrder[currentIndex - 1],
            submissionError: null,
          }));
        } else {
          setState((prev) => ({
            ...prev,
            step: stepOrder[currentIndex - 2],
            submissionError: null,
          }));
        }
      } else {
        setState((prev) => ({
          ...prev,
          step: stepOrder[currentIndex - 1],
          submissionError: null,
        }));
      }
    }
  };
@@ -91,6 +166,55 @@ const useSendMessageWizard = () => {
    }));
    try {
      if (state.scheduledTime != null) {
        console.log('Going to schedule message');
        const schMsgReq = {
          scheduled: state.scheduledTime.toISOString(),
          status: 'PENDING',
          user_id: tokenService.getUserId(),
        };
        const token = tokenService.bearerToken();
        const schMsgResponse = await scheduleApi.scheduleMessage(
          schMsgReq,
          token
        );
        if (schMsgResponse) {
          console.log('Message scheduled');
          const scheduledMessageId = schMsgResponse.data[0].id;
          for (let contact of state.selectedContacts) {
            let schMsgEvtReq = {
              contact_id: contact,
              message_id: state.createdMessage.id,
              scheduled_message_id: scheduledMessageId,
            };
            const schMsgEvtResponse =
              await scheduleEventApi.scheduleMessageEvent(schMsgEvtReq, token);
          }
          console.log('Updating message status');
          const req = {
            scheduled_message_id: scheduledMessageId,
            status: 'READY',
          };
          console.log(req);
          const response = await scheduleApi.prepareMessage(req, token);
          if (response) {
            console.log('Message scheduled');
            setState((prev) => ({
              ...prev,
              step: 'result',
              isSubmitting: false,
              isScheduled: false,
              scheduledTime: null,
            }));
          }
        }
      } else {
        console.log('Sending message');
        let reqBod = new SendInstantMessageRequest();
        reqBod.user_id = tokenService.getUserId();
@@ -109,8 +233,11 @@ const useSendMessageWizard = () => {
            ...prev,
            step: 'result',
            isSubmitting: false,
            isScheduled: false,
            scheduledTime: null,
          }));
        }
      }
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Submission was aborted');
@@ -121,6 +248,8 @@ const useSendMessageWizard = () => {
        ...prev,
        submissionError: error.message || 'Failed to send messages',
        isSubmitting: false,
        isScheduled: false,
        scheduledTime: null,
      }));
    }
  };
@@ -130,9 +259,11 @@ const useSendMessageWizard = () => {
    setState({
      step: 'select',
      selectedContacts: [],
      scheduledTime: null,
      message: '',
      createdMessage: null,
      isSubmitting: false,
      isScheduled: false,
      submissionError: null,
    });
  };
@@ -146,17 +277,21 @@ const useSendMessageWizard = () => {
    // Getters
    currentStep: state.step,
    selectedContacts: state.selectedContacts,
    scheduledTime: state.scheduledTime,
    message: state.message,
    createdMessage: state.createdMessage,
    isSubmitting: state.isSubmitting,
    isScheduled: state.isScheduled,
    submissionError: state.submissionError,
    canProceedToNextStep: canProceedToNextStep(),
    canGoBack,
    // Actions
    toggleContact,
    toggleScheduled,
    setMessage,
    setCreatedMessage,
    setScheduledTime,
    nextStep,
    prevStep,
    submit,
@@ -1,358 +0,0 @@
 /* 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;
 }
@@ -1,423 +0,0 @@
 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;
@@ -0,0 +1,82 @@
 import React from 'react';
 import styles from './ConfirmationStep.module.css';
 function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
  if (!selectedContact || !contactDetails) {
    return (
      <div className={styles.confirmationStep}>
        <div className={styles.noDataMessage}>
          <p>No contact selected or details available.</p>
          <p className={styles.hint}>
            Please go back and select a contact to modify.
          </p>
        </div>
      </div>
    );
  }
  return (
    <div className={styles.confirmationStep}>
      <h3 className={styles.sectionTitle}>Review Your Changes</h3>
      <div className={styles.reviewSection}>
        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>Contact Phone</span>
          <span className={styles.reviewValue}>
            {selectedContact.phone_number}
          </span>
        </div>
        <div className={styles.reviewDivider} />
        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>First Name</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
              {selectedContact.firstname || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
              {contactDetails.firstname || 'Not set'}
            </span>
          </div>
        </div>
        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>Last Name</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
              {selectedContact.lastname || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
              {contactDetails.lastname || 'Not set'}
            </span>
          </div>
        </div>
        <div className={styles.reviewItem}>
          <span className={styles.reviewLabel}>Nickname</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
              {selectedContact.nickname || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
              {contactDetails.nickname || 'Not set'}
            </span>
          </div>
        </div>
      </div>
      {isSubmitting && (
        <div className={styles.submittingMessage}>
          <div className={styles.spinner}></div>
          <p>Updating contact information...</p>
        </div>
      )}
    </div>
  );
 }
 export default ConfirmationStep;
@@ -0,0 +1,214 @@
 /* ConfirmationStep.module.css */
 .confirmationStep {
  padding: 32px;
  animation: fadeIn 0.3s ease-out;
 }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .sectionTitle {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
 }
 .sectionTitle::before {
  content: '✓';
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
 }
 .reviewSection {
  background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
 }
 .reviewItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.2s ease;
 }
 .reviewItem:hover {
  transform: translateX(5px);
 }
 .reviewItem:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
 }
 .reviewLabel {
  font-weight: 600;
  color: #475569;
  flex: 1;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
 }
 .reviewLabel::before {
  content: '•';
  color: #8b5cf6;
  font-size: 20px;
 }
 .reviewValue {
  flex: 2;
  text-align: right;
  color: #0f172a;
  font-weight: 500;
  font-size: 15px;
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 8px;
 }
 .reviewComparison {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
 }
 .oldValue {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: 14px;
  background: #f8fafc;
  padding: 6px 12px;
  border-radius: 6px;
  min-width: 100px;
  text-align: center;
 }
 .arrow {
  color: #8b5cf6;
  font-weight: bold;
  font-size: 20px;
  animation: pulse 2s infinite;
 }
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
 }
 .newValue {
  color: #059669;
  font-weight: 600;
  font-size: 15px;
  background: #d1fae5;
  padding: 8px 16px;
  border-radius: 8px;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.1);
 }
 .reviewDivider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  margin: 24px 0;
  opacity: 0.3;
 }
 .submittingMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border: 1px solid #bae6fd;
  animation: pulseBg 1.5s infinite;
 }
@keyframes pulseBg {
  0%,
  100% {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  }
  50% {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  }
 }
 .spinner {
  border: 3px solid rgba(139, 92, 246, 0.1);
  border-top: 3px solid #8b5cf6;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
 }
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
 }
 .submittingMessage p {
  color: #0369a1;
  font-weight: 500;
  font-size: 15px;
 }
 .noDataMessage {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
  font-size: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
 }
 .noDataMessage::before {
  content: '⚠️';
  font-size: 32px;
  display: block;
  margin-bottom: 16px;
 }
@@ -0,0 +1,119 @@
 import React, { useState, useEffect } from 'react';
 import styles from './ModifyForm.module.css';
 function ModifyForm({ contactDetails, setContactDetails }) {
  const [formData, setFormData] = useState({
    firstname: '',
    lastname: '',
    nickname: '',
  });
  // Initialize form with contactDetails when component mounts or contactDetails changes
  useEffect(() => {
    if (contactDetails) {
      setFormData({
        firstname: contactDetails.firstname || '',
        lastname: contactDetails.lastname || '',
        nickname: contactDetails.nickname || '',
      });
    }
  }, [contactDetails]);
  const handleChange = (e) => {
    const { name, value } = e.target;
    const updatedFormData = {
      ...formData,
      [name]: value,
    };
    setFormData(updatedFormData);
    // Update parent state with the updated form data
    setContactDetails(updatedFormData);
  };
  return (
    <div className={styles.modifyForm}>
      <h3 className={styles.sectionTitle}>Edit Contact Information</h3>
      <div className={styles.formGroup}>
        <label htmlFor="firstname" className={styles.formLabel}>
          First Name
          <span className={styles.requiredIndicator}>*</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
            id="firstname"
            name="firstname"
            value={formData.firstname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter contact's first name"
            required
            minLength="2"
          />
          <span className={styles.inputIcon}>👤</span>
        </div>
        <div className={styles.validationHint}>
          Required • Minimum 2 characters
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="lastname" className={styles.formLabel}>
          Last Name
          <span className={styles.requiredIndicator}>*</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
            id="lastname"
            name="lastname"
            value={formData.lastname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter contact's last name"
            required
            minLength="2"
          />
          <span className={styles.inputIcon}>📇</span>
        </div>
        <div className={styles.validationHint}>
          Required • Minimum 2 characters
        </div>
      </div>
      <div className={styles.formGroup}>
        <label htmlFor="nickname" className={styles.formLabel}>
          Nickname
          <span className={styles.optionalIndicator}>(Optional)</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
            id="nickname"
            name="nickname"
            value={formData.nickname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter a friendly nickname (optional)"
          />
          <span className={styles.inputIcon}>🌟</span>
        </div>
        <div className={styles.validationHint}>
          Optional • Leave empty if not needed
        </div>
      </div>
      <div className={styles.formInfo}>
        <p>
          Fields marked with <span className={styles.requiredIndicator}>*</span>{' '}
          are required. Nickname is optional and can be left blank.
        </p>
      </div>
    </div>
  );
 }
 export default ModifyForm;
@@ -0,0 +1,156 @@
 /* ModifyForm.module.css */
 .modifyForm {
  padding: 32px;
  animation: slideIn 0.3s ease-out;
 }
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
 }
 .sectionTitle {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .sectionTitle::before {
  content: '✏️';
  font-size: 24px;
 }
 .formGroup {
  margin-bottom: 24px;
 }
 .formLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #475569;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
 }
 .requiredIndicator {
  color: #ef4444;
  font-size: 18px;
  margin-left: 2px;
 }
 .optionalIndicator {
  color: #64748b;
  font-size: 12px;
  margin-left: 6px;
  font-weight: normal;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
 }
 .formInput {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #f8fafc;
  color: #1e293b;
  font-family: inherit;
 }
 .formInput:focus {
  outline: none;
  border-color: #8b5cf6;
  background: white;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
 }
 .formInput::placeholder {
  color: #94a3b8;
  font-size: 14px;
 }
 .formInput:valid:required {
  border-color: #10b981;
 }
 .formInput:invalid:required:not(:placeholder-shown) {
  border-color: #ef4444;
 }
 .inputContainer {
  position: relative;
 }
 .inputIcon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
 }
 .formInfo {
  margin-top: 32px;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 10px;
  font-size: 14px;
  color: #0369a1;
  border-left: 4px solid #3b82f6;
  display: flex;
  align-items: center;
  gap: 10px;
 }
 .formInfo::before {
  content: '💡';
  font-size: 18px;
 }
 .formInfo p {
  margin: 0;
  line-height: 1.5;
 }
 .validationHint {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
 }
 .validationHint::before {
  content: 'ⓘ';
  font-size: 12px;
 }
 /* Optional field styling */
 .formGroup:last-child .formInput {
  border-color: #cbd5e1;
 }
 .formGroup:last-child .formInput:focus {
  border-color: #8b5cf6;
 }
@@ -0,0 +1,93 @@
 import React from 'react';
 import styles from './StepNavigation.module.css';
 function StepNavigation({
  currentStep,
  onNext,
  onBack,
  onSubmit,
  onDone,
  canProceed,
  canGoBack,
  isSubmitting,
  submissionError,
 }) {
  const renderButtons = () => {
    switch (currentStep) {
      case 'select':
      case 'modify':
        return (
          <div className={styles.buttonGroup}>
            <button
              onClick={onBack}
              disabled={!canGoBack}
              className={`${styles.navButton} ${styles.backButton}`}
            >
              <span className={styles.buttonIcon}>←</span>
              Back
            </button>
            <button
              onClick={onNext}
              disabled={!canProceed}
              className={`${styles.navButton} ${styles.nextButton}`}
            >
              {currentStep === 'select' ? 'Next' : 'Review'}
              <span className={styles.buttonIcon}>→</span>
            </button>
          </div>
        );
      case 'confirm':
        return (
          <div className={styles.buttonGroup}>
            <button
              onClick={onBack}
              className={`${styles.navButton} ${styles.backButton}`}
            >
              <span className={styles.buttonIcon}>←</span>
              Back
            </button>
            <button
              onClick={onSubmit}
              disabled={isSubmitting}
              className={`${styles.navButton} ${styles.submitButton}`}
            >
              {isSubmitting ? (
                <>
                  <span className={styles.buttonIcon}>⏳</span>
                  Updating...
                </>
              ) : (
                <>
                  <span className={styles.buttonIcon}>✓</span>
                  Update Contact
                </>
              )}
            </button>
          </div>
        );
      case 'result':
        return (
          <button
            onClick={onDone}
            className={`${styles.navButton} ${styles.doneButton}`}
          >
            <span className={styles.buttonIcon}>🏁</span>
            Done
          </button>
        );
      default:
        return null;
    }
  };
  return (
    <div className={styles.navigation}>
      {renderButtons()}
      {submissionError && (
        <span className={styles.error}>{submissionError}</span>
      )}
    </div>
  );
 }
 export default StepNavigation;
@@ -0,0 +1,204 @@
 /* StepNavigation.module.css */
 .navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
 }
 .buttonGroup {
  display: flex;
  gap: 12px;
 }
 .navButton {
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
 }
 .navButton::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
 }
 .navButton:focus:not(:active)::after {
  animation: ripple 1s ease-out;
 }
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(40, 40);
    opacity: 0;
  }
 }
 .backButton {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border: 2px solid #cbd5e1;
 }
 .backButton:hover:not(:disabled) {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2);
 }
 .backButton:active:not(:disabled) {
  transform: translateY(0);
 }
 .backButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
 }
 .nextButton {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
 }
 .nextButton:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
 }
 .nextButton:active:not(:disabled) {
  transform: translateY(0);
 }
 .nextButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
 }
 .submitButton {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
 }
 .submitButton:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
 }
 .submitButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
 }
 .doneButton {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  margin-left: auto;
 }
 .doneButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
 }
 .error {
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
  background: #fef2f2;
  padding: 10px 16px;
  border-radius: 8px;
  border-left: 4px solid #dc2626;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: shake 0.5s ease-in-out;
 }
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
 }
 .error::before {
  content: '⚠️';
  font-size: 16px;
 }
 .buttonIcon {
  font-size: 16px;
 }
 /* Responsive adjustments */
@media (max-width: 640px) {
  .navigation {
    flex-direction: column;
    gap: 12px;
  }
  .buttonGroup {
    width: 100%;
    flex-direction: column;
  }
  .navButton {
    width: 100%;
  }
  .error {
    width: 100%;
    text-align: center;
  }
 }
@@ -0,0 +1,150 @@
 import { React, useState, useEffect } from 'react';
 import { tokenService } from '../../services/TokenService';
 import { contactApi } from '../../api/contactApi';
 import styles from './ViewContact.module.css';
 function ViewContact({ selectedContact, onSelectedContact }) {
  const [contacts, setContacts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  useEffect(() => {
    try {
      console.log('Going');
      fetchContacts();
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  }, []);
  const fetchContacts = async () => {
    try {
      setIsLoading(true);
      console.log('Loading contacts');
      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);
    }
  };
  const filteredContacts = contacts.filter(
    (contact) =>
      contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
      contact.firstname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      contact.lastname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      contact.nickname?.toLowerCase().includes(searchTerm.toLowerCase())
  );
  const formatContactDisplay = (contact) => {
    const phone = contact.phone_number || 'No phone';
    const name =
      [contact.firstname, contact.lastname].filter(Boolean).join(' ') ||
      'Unnamed';
    const nickname = contact.nickname ? `"${contact.nickname}"` : '';
    return `${phone} - ${name} ${nickname}`.trim();
  };
  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 by phone, name, or nickname..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className={styles.searchInput}
          />
        </div>
      </div>
      <div className={styles.contactsList}>
        {filteredContacts.length === 0 ? (
          <div className={styles.emptyState}>
            <div className={styles.emptyStateIcon}>👤</div>
            <p className={styles.emptyStateTitle}>No contacts found</p>
            <p className={styles.emptyStateDescription}>
              {searchTerm
                ? 'Try a different search term'
                : 'No contacts available'}
            </p>
          </div>
        ) : (
          filteredContacts.map((contact) => (
            <div
              key={contact.id}
              className={`${styles.contactItem} ${
                selectedContact?.id === contact.id ? styles.selected : ''
              }`}
              onClick={() => onSelectedContact(contact)}
            >
              <div className={styles.contactAvatar}>
                {contact.firstname?.[0]?.toUpperCase() || '?'}
              </div>
              <div className={styles.contactInfo}>
                <div className={styles.contactMainInfo}>
                  <span className={styles.contactPhone}>
                    {contact.phone_number}
                  </span>
                  {contact.nickname && (
                    <span className={styles.contactNickname}>
                      "{contact.nickname}"
                    </span>
                  )}
                </div>
                <div className={styles.contactName}>
                  {[contact.firstname, contact.lastname]
                    .filter(Boolean)
                    .join(' ') || 'Unnamed Contact'}
                </div>
                {selectedContact?.id === contact.id && (
                  <div className={styles.selectedIndicator}>✓ Selected</div>
                )}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
 }
 export default ViewContact;
@@ -0,0 +1,290 @@
 /* ViewContact.module.css */
 .contactSelection {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s ease-out;
 }
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 .selectionHeader {
  margin-bottom: 24px;
 }
 .searchBox {
  position: relative;
 }
 .searchInput {
  width: 100%;
  padding: 14px 48px 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  background: #f8fafc;
  color: #1e293b;
  transition: all 0.3s ease;
 }
 .searchInput:focus {
  outline: none;
  border-color: #8b5cf6;
  background: white;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
 }
 .searchInput::placeholder {
  color: #94a3b8;
 }
 .searchBox::after {
  content: '🔍';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #94a3b8;
 }
 .contactsList {
  flex: 1;
  overflow-y: auto;
  border-radius: 12px;
  background: white;
  border: 1px solid #e2e8f0;
 }
 .contactsList::-webkit-scrollbar {
  width: 6px;
 }
 .contactsList::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
 }
 .contactsList::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
 }
 .contactsList::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
 }
 .contactItem {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
 }
 .contactItem:hover {
  background: #f8fafc;
  transform: translateX(4px);
 }
 .contactItem.selected {
  background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 4px solid #3b82f6;
 }
 .contactItem:last-child {
  border-bottom: none;
 }
 .contactAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
 }
 .contactInfo {
  flex: 1;
  min-width: 0; /* Prevents overflow */
 }
 .contactMainInfo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
 }
 .contactPhone {
  font-weight: 600;
  color: #1e293b;
  font-size: 15px;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
 }
 .contactNickname {
  color: #7c3aed;
  font-size: 14px;
  font-style: italic;
  background: #f3f0ff;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
 }
 .contactName {
  color: #475569;
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .selectedIndicator {
  color: #3b82f6;
  font-size: 12px;
  font-weight: 500;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
  animation: fadeIn 0.3s ease;
 }
 /* Loading state */
 .loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
 }
 .spinner {
  border: 4px solid #f1f5f9;
  border-top: 4px solid #8b5cf6;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
 }
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
 }
 .loading p {
  color: #64748b;
  font-size: 16px;
 }
 /* Error state */
 .errorState {
  text-align: center;
  padding: 40px 20px;
  background: #fef2f2;
  border-radius: 12px;
  border: 1px solid #fecaca;
 }
 .errorState p {
  color: #dc2626;
  margin-bottom: 20px;
  font-size: 15px;
 }
 .errorState button {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
 }
 .errorState button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
 }
 /* Empty state */
 .emptyState {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
 }
 .emptyStateIcon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
 }
 .emptyStateTitle {
  font-size: 18px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 8px;
 }
 .emptyStateDescription {
  font-size: 14px;
  color: #94a3b8;
 }
 /* Responsive adjustments */
@media (max-width: 480px) {
  .contactSelection {
    padding: 16px;
  }
  .contactItem {
    padding: 14px 16px;
  }
  .contactMainInfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .contactAvatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
 }
@@ -0,0 +1,264 @@
 /* ViewContactWizard.module.css - Updated for aesthetics */
 .modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.9) 0%,
    rgba(30, 41, 59, 0.95) 100%
  );
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeInOverlay 0.3s ease-out;
 }
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
 }
 .modal {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 40px -10px rgba(139, 92, 246, 0.2);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
 }
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
 }
 .modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  position: relative;
  overflow: hidden;
 }
 .modalHeader::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
 }
 .modalHeader::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
 }
 .modalTitle {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .modalTitle::before {
  content: '📱';
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
 .closeButton {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
 }
 .closeButton:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
 }
 .closeButton:active {
  transform: rotate(90deg) scale(0.95);
 }
 .modalBody {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
 }
 .modalBody::-webkit-scrollbar {
  width: 6px;
 }
 .modalBody::-webkit-scrollbar-track {
  background: transparent;
 }
 .modalBody::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 10px;
 }
 .modalFooter {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid #e2e8f0;
  position: relative;
 }
 /* Step Indicator */
 .stepIndicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px 32px 0;
 }
 .stepDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s ease;
 }
 .stepDot.active {
  width: 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 12px;
 }
 .stepDot.completed {
  background: #10b981;
 }
 /* Responsive adjustments */
@media (max-width: 480px) {
  .modal {
    max-height: 90vh;
    border-radius: 20px;
  }
  .modalHeader {
    padding: 24px;
  }
  .modalTitle {
    font-size: 18px;
  }
  .closeButton {
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
 }
 /* Result Step specific styles */
 .resultStep {
  padding: 48px 32px;
  text-align: center;
  animation: fadeIn 0.6s ease-out;
 }
 .successIcon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 28px;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
 }
 .resultTitle {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
 }
 .resultMessage {
  color: #64748b;
  font-size: 16px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
  background: #f8fafc;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
 }
@@ -0,0 +1,125 @@
 import React from 'react';
 import ViewContact from './ViewContact';
 import ModifyForm from './ModifyForm';
 import ConfirmationStep from './ConfirmationStep';
 import StepNavigation from './StepNavigation';
 import useViewContactWizard from './useViewContactWizard';
 import styles from './ViewContactWizard.module.css';
 function ViewContactWizardModal({ isOpen, onClose, onComplete }) {
  const wizard = useViewContactWizard();
  if (!isOpen) return null;
  const renderStep = () => {
    switch (wizard.currentStep) {
      case 'select':
        return (
          <ViewContact
            selectedContact={wizard.selectedContact}
            onSelectedContact={wizard.onSelectedContact}
          />
        );
      case 'modify':
        return (
          <ModifyForm
            contactDetails={wizard.contactDetails}
            setContactDetails={wizard.setContactDetails}
          />
        );
      case 'confirm':
        return (
          <ConfirmationStep
            selectedContact={wizard.selectedContact}
            contactDetails={wizard.contactDetails}
            isSubmitting={wizard.isSubmitting}
          />
        );
      case 'result':
        return (
          <div className={styles.resultStep}>
            <div className={styles.successIcon}>✓</div>
            <h3 className={styles.resultTitle}>
              Contact Updated Successfully!
            </h3>
            <p className={styles.resultMessage}>
              The contact details have been updated and saved to your address
              book. You can now close this window.
            </p>
          </div>
        );
      default:
        return null;
    }
  };
  const handleClose = () => {
    wizard.reset();
    onClose();
  };
  const handleComplete = () => {
    wizard.reset();
    onComplete();
  };
  const stepTitles = {
    select: 'Select Contact',
    modify: 'Edit Contact Details',
    confirm: 'Review Changes',
    result: 'Update Complete',
  };
  const steps = ['select', 'modify', 'confirm', 'result'];
  const currentStepIndex = steps.indexOf(wizard.currentStep);
  return (
    <div className={styles.modalOverlay} onClick={handleClose}>
      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
        <div className={styles.modalHeader}>
          <h2 className={styles.modalTitle}>
            {stepTitles[wizard.currentStep]}
          </h2>
          <button
            onClick={handleClose}
            className={styles.closeButton}
            aria-label="Close"
          >
            ×
          </button>
        </div>
        <div className={styles.stepIndicator}>
          {steps.map((step, index) => (
            <div
              key={step}
              className={`${styles.stepDot} ${
                index < currentStepIndex ? styles.completed : ''
              } ${index === currentStepIndex ? styles.active : ''}`}
            />
          ))}
        </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 ViewContactWizardModal;
@@ -0,0 +1,212 @@
 import { useState, useCallback, useRef } from 'react';
 import { contactApi, UpdateContactNamesRequest } from '../../api/contactApi';
 import { tokenService } from '../../services/TokenService';
 const useViewContactWizard = () => {
  const [state, setState] = useState({
    step: 'select',
    selectedContact: null,
    contactDetails: null,
    isSubmitting: false,
    submissionError: null,
  });
  const abortControllerRef = useRef(null);
  const canProceedToNextStep = useCallback(() => {
    switch (state.step) {
      case 'select':
        return state.selectedContact != null;
      case 'modify':
        if (!state.contactDetails) return false;
        if (
          !state.contactDetails.firstname ||
          state.contactDetails.firstname.trim() === ''
        ) {
          return false;
        } else if (
          !state.contactDetails.lastname ||
          state.contactDetails.lastname.trim() === ''
        ) {
          return false;
        } else {
          return true;
        }
      // Nickname is optional, so we don't validate it
      case 'confirm':
        return true;
      default:
        return false;
    }
  }, [state.step, state.selectedContact, state.contactDetails]);
  const canGoBack = state.step !== 'select';
  const setContactDetails = (newDetails) => {
    console.log('Setting contact details:', newDetails);
    setState((prev) => ({
      ...prev,
      contactDetails: { ...prev.contactDetails, ...newDetails },
    }));
  };
  const onSelectedContact = (contact) => {
    const contactId = contact.id;
    setState((prev) => ({
      ...prev,
      selectedContact:
        prev.selectedContact?.id === contactId
          ? null
          : {
              id: contactId,
              firstname: contact.firstname,
              lastname: contact.lastname,
              phone_number: contact.phone_number,
              user_id: contact.user_id,
              nickname: contact.nickname || '',
            },
    }));
  };
  const nextStep = () => {
    if (!canProceedToNextStep()) return;
    const stepOrder = ['select', 'modify', 'confirm', 'result'];
    const currentIndex = stepOrder.indexOf(state.step);
    if (currentIndex < stepOrder.length - 1) {
      const nextStepValue = stepOrder[currentIndex + 1];
      // When moving from select to modify, initialize contactDetails with selected contact
      if (
        state.step === 'select' &&
        nextStepValue === 'modify' &&
        state.selectedContact
      ) {
        setState((prev) => ({
          ...prev,
          step: nextStepValue,
          submissionError: null,
          contactDetails: {
            firstname: prev.selectedContact.firstname || '',
            lastname: prev.selectedContact.lastname || '',
            nickname: prev.selectedContact.nickname || '',
            phone_number: prev.selectedContact.phone_number || '',
            id: prev.selectedContact.id,
            user_id: prev.selectedContact.user_id,
          },
        }));
        return;
      }
      setState((prev) => ({
        ...prev,
        step: nextStepValue,
        submissionError: null,
      }));
    }
  };
  const prevStep = () => {
    const stepOrder = ['select', 'modify', '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('Updating contact');
      const userId = tokenService.getUserId();
      console.log('Contact details to update: ', state.contactDetails);
      let reqBody = new UpdateContactNamesRequest();
      reqBody.firstname = state.contactDetails.firstname;
      reqBody.lastname = state.contactDetails.lastname;
      reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
      reqBody.id = state.selectedContact.id;
      reqBody.user_id = userId;
      const response = await contactApi.updateContactNames(
        reqBody,
        tokenService.bearerToken()
      );
      if (response) {
        setState((prev) => ({
          ...prev,
          step: 'result',
          isSubmitting: false,
        }));
      } else {
        throw new Error('Failed to update contact');
      }
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Submission was aborted');
        return;
      }
      setState((prev) => ({
        ...prev,
        submissionError: error.message || 'Failed to update contact',
        isSubmitting: false,
      }));
    }
  };
  const reset = () => {
    abortControllerRef.current?.abort();
    setState({
      step: 'select',
      selectedContact: null,
      contactDetails: null,
      isSubmitting: false,
      submissionError: null,
    });
  };
  const cleanup = () => {
    abortControllerRef.current?.abort();
  };
  return {
    // Getters
    currentStep: state.step,
    selectedContact: state.selectedContact,
    contactDetails: state.contactDetails,
    isSubmitting: state.isSubmitting,
    submissionError: state.submissionError,
    canProceedToNextStep: canProceedToNextStep(),
    canGoBack,
    // Actions
    setContactDetails,
    onSelectedContact,
    nextStep,
    prevStep,
    submit,
    reset,
    cleanup,
  };
 };
 export default useViewContactWizard;
@@ -355,3 +355,102 @@
 .view-sent-message-list-container::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
 }
 .view-sent-message-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
 }
 .tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.3s ease;
 }
 .tab-button.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
 }
 .tab-button:hover {
  color: #374151;
  background-color: #f9fafb;
 }
 .search-container {
  margin-bottom: 20px;
 }
 .search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
 }
 .search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
 }
 .section-header h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 600;
 }
 .last-updated {
  font-size: 12px;
  color: #6b7280;
 }
 .no-messages {
  text-align: center;
  padding: 40px;
  color: #6b7280;
  font-style: italic;
 }
 .status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
 }
 .status-processing {
  background-color: #fef3c7;
  color: #92400e;
 }
 .status-sent {
  background-color: #dcfce7;
  color: #166534;
 }
 .status-failed {
  background-color: #fee2e2;
  color: #991b1b;
 }
 .status-default {
  background-color: #f3f4f6;
  color: #374151;
 }
@@ -1,8 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { tokenService } from '../services/TokenService';
 import { messageEventResponseApi } from '../api/messageEventResponseApi';
-
+import { scheduleApi } from '../api/scheduleApi';
 import './ViewSentMessages.css';
 const ViewSentMessages = ({
@@ -11,10 +10,12 @@ const ViewSentMessages = ({
  title = 'View Sent Messages',
 }) => {
  const [sentMessages, setSentMessages] = useState([]);
  const [scheduledMessages, setScheduledMessages] = useState([]);
  const [lastUpdated, setLastUpdated] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [activeTab, setActiveTab] = useState('sent');
  // Fetch the sent messages or Message Event Responses
  const fetchSentMessages = useCallback(async () => {
@@ -33,7 +34,6 @@ const ViewSentMessages = ({
        setLastUpdated(new Date());
        setSentMessages(response.data);
      } else {
        setLoading(false);
        throw new Error(response.message || 'Failed to load sent messages');
      }
    } catch (err) {
@@ -44,8 +44,32 @@ const ViewSentMessages = ({
    }
  }, []);
  const fetchScheduledMessages = useCallback(async () => {
    try {
      const userId = tokenService.getUserId();
      const response = await scheduleApi.getScheduledMessage(
        userId,
        tokenService.bearerToken()
      );
      if (response) {
        const scheduledMessages = response.data;
        setScheduledMessages(scheduledMessages);
      } else {
        throw new Error(response.message || 'Failed to get scheduled messages');
      }
    } catch (err) {
      console.error('Failed to load scheduled messages:', err);
      setScheduledMessages([]);
    }
  }, []);
  const handleRefresh = () => {
    if (activeTab === 'sent') {
      fetchSentMessages();
    } else {
      fetchScheduledMessages();
    }
  };
  useEffect(() => {
@@ -55,6 +79,13 @@ const ViewSentMessages = ({
    }
  }, [isOpen, fetchSentMessages]);
  // Fetch scheduled messages when tab is switched
  useEffect(() => {
    if (activeTab === 'scheduled' && isOpen) {
      fetchScheduledMessages();
    }
  }, [activeTab, isOpen, fetchScheduledMessages]);
  const filteredSentMessages = sentMessages.filter((sentMessage) => {
    const searchLower = searchTerm.toLowerCase();
    return (
@@ -66,6 +97,15 @@ const ViewSentMessages = ({
    );
  });
  // Filter scheduled messages
  const filteredScheduledMessages = scheduledMessages.filter((message) => {
    const searchLower = searchTerm.toLowerCase();
    return (
      (message.status && message.status.toLowerCase().includes(searchLower)) ||
      (message.id && message.id.toString().includes(searchTerm))
    );
  });
  const formatLastUpdated = () => {
    if (!lastUpdated) return 'Never';
    return lastUpdated.toLocaleTimeString([], {
@@ -74,6 +114,25 @@ const ViewSentMessages = ({
    });
  };
  // Format date for scheduled messages
  const formatScheduledDate = (dateString) => {
    return new Date(dateString).toLocaleString();
  };
  // Get status badge styling
  const getStatusBadgeClass = (status) => {
    switch (status) {
      case 'PROCESSING':
        return 'status-processing';
      case 'SENT':
        return 'status-sent';
      case 'FAILED':
        return 'status-failed';
      default:
        return 'status-default';
    }
  };
  if (!isOpen) return null;
  return (
@@ -90,13 +149,40 @@ const ViewSentMessages = ({
            </button>
          </div>
          {/* Add tabs for navigation */}
          <div className="view-sent-message-tabs">
            <button
              className={`tab-button ${activeTab === 'sent' ? 'active' : ''}`}
              onClick={() => setActiveTab('sent')}
            >
              Sent Messages
            </button>
            <button
              className={`tab-button ${activeTab === 'scheduled' ? 'active' : ''}`}
              onClick={() => setActiveTab('scheduled')}
            >
              Scheduled Messages
            </button>
          </div>
          {/* Search input */}
          <div className="search-container">
            <input
              type="text"
              placeholder="Search messages..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="search-input"
            />
          </div>
          <div className="view-sent-message-form">
            {error && (
              <div className="submit-error">
                <div style={{ marginBottom: '8px' }}>{error}</div>
                <button
                  onClick={handleRefresh}
-                  onStype={{
+                  style={{
                    background: '#ef4444',
                    color: 'white',
                    border: 'none',
@@ -113,233 +199,101 @@ const ViewSentMessages = ({
            {loading ? (
              <div style={{ textAlign: 'center', padding: '40px' }}>
-                <div className="loafing-spinner" />
+                <div className="loading-spinner" />
-                <p style={{ marginTop: '20px', color: '#4b5563' }}>
+                <p>Loading messages...</p>
                  Loading sent messages
                </p>
              </div>
            ) : (
              <>
-                <div
+                {/* Sent Messages Tab Content */}
-                  style={{
+                {activeTab === 'sent' && (
-                    display: 'flex',
+                  <div className="messages-section">
-                    justifyContent: 'space-between',
+                    <div className="section-header">
-                    alignItems: 'center',
+                      <h3>Sent Messages</h3>
-                    marginBottom: '20px',
+                      <span className="last-updated">
-                    flexWrap: 'wrap',
+                        Last updated: {formatLastUpdated()}
                    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>
+
                    {filteredSentMessages.length > 0 ? (
                      <div className="view-sent-message-list-container">
                        <table className="view-sent-message-table">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Status</th>
                              <th>Sent Time</th>
                            </tr>
                          </thead>
                          <tbody>
                            {filteredSentMessages.map((message) => (
                              <tr key={message.id}>
                                <td>{message.id.substring(0, 8)}...</td>
                                <td>
                                  <span
                                    className={`status-badge ${getStatusBadgeClass(message.status)}`}
                                  >
                                    {message.status}
                                  </span>
                                </td>
                                <td>{message.sent || 'N/A'}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    ) : (
                      <div className="no-messages">No sent messages found.</div>
                    )}
                  </div>
                )}
                {/* Scheduled Messages Tab Content */}
                {activeTab === 'scheduled' && (
                  <div className="messages-section">
                    <div className="section-header">
                      <h3>Scheduled Messages</h3>
                    </div>
                    {filteredScheduledMessages.length > 0 ? (
                      <div className="view-sent-message-list-container">
                        <table className="view-sent-message-table">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Scheduled Time</th>
                              <th>Created Time</th>
                              <th>Status</th>
                            </tr>
                          </thead>
                          <tbody>
                            {filteredScheduledMessages.map((message) => (
                              <tr key={message.id}>
                                <td>{message.id.substring(0, 8)}...</td>
                                <td>
                                  {formatScheduledDate(message.scheduled)}
                                </td>
                                <td>{formatScheduledDate(message.created)}</td>
                                <td>
                                  <span
                                    className={`status-badge ${getStatusBadgeClass(message.status)}`}
                                  >
                                    {message.status}
                                  </span>
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    ) : (
                      <div className="no-messages">
                        No scheduled messages found.
                      </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>
@@ -1,2 +1,2 @@
-export const AUTH_API_BASE_URL = 'http://localhost:9080';
+export const AUTH_API_BASE_URL = import.meta.env.VITE_AUTH_URL;
-export const API_BASE_URL = 'http://localhost:8080';
+export const API_BASE_URL = import.meta.env.VITE_API_URL;
@@ -2,3 +2,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';
 export const APP_NAME = 'schedtxt';
Author	SHA1	Message	Date
phoenix	32f7569d71	Updating name	2026-07-13 18:11:11 -04:00
phoenix	291cd3c2b1	tsk-10: View scheduled messages (#17 ) Closes #10 Reviewed-on: phoenix/textsender#17	2026-07-04 19:39:12 -04:00
phoenix	07f9db2298	tsk-2: Blank screen bug fix (#16 ) Closes #2 Reviewed-on: phoenix/textsender#16	2026-07-04 16:56:35 -04:00
phoenix	7a357f6108	tsk-11: Make URLs more dynamic (#15 ) Closes #11 Reviewed-on: phoenix/textsender#15	2026-07-04 16:25:45 -04:00
phoenix	53b80e3d2c	tsk-4: Fix contacts not being saved (#14 ) Closes #4 Reviewed-on: phoenix/textsender#14	2026-07-04 10:53:33 -04:00
phoenix	cde21b09c8	tsk-6: Add feature to update password in profile (#13 ) Closes #6 Reviewed-on: phoenix/textsender#13	2026-07-02 23:24:31 -04:00
phoenix	be1238e24d	tsk-5: Add profile page (#12 ) Closes #5 Reviewed-on: phoenix/textsender#12	2026-07-01 23:56:22 -04:00
phoenix	f2bdb60d55	tsk-7: Schedule message (#8 ) Closes #7 Reviewed-on: phoenix/textsender#8	2026-06-30 12:13:52 -04:00
phoenix	833a044ff6	Updating packages (#1 ) Reviewed-on: phoenix/textsender#1	2026-06-28 21:52:54 -04:00
phoenixandphoenix	8a31918958	Update versions (#24 ) Reviewed-on: phoenix/textsender#24 Co-authored-by: phoenix <mail@kundeng.us> Co-committed-by: phoenix <mail@kundeng.us>	2026-04-12 18:54:20 -04:00
phoenixandphoenix	0202425a09	tsk-10: Edit Contact (#23 ) Closes #10 Reviewed-on: phoenix/textsender#23 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>	2026-01-29 22:20:28 +00:00
		`@@ -0,0 +1,2 @@`
							`VITE_AUTH_URL="http://localhost:9080"`
							`VITE_API_URL="http://localhost:9081"`
		`@@ -1 +0,0 @@`
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
`@@ -1,2 +1,2 @@`
	`export const AUTH_API_BASE_URL = 'http://localhost:9080';`	`export const AUTH_API_BASE_URL = import.meta.env.VITE_AUTH_URL;`
	`export const API_BASE_URL = 'http://localhost:8080';`	`export const API_BASE_URL = import.meta.env.VITE_API_URL;`