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
26 changed files with 804 additions and 306 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.
-
-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.
+Frontend web app used to send messages

 # 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,13 +1,14 @@
 {
-  "name": "textsender",
-  "version": "0.0.6",
+  "name": "schedtxt",
+  "version": "0.0.10",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "textsender",
-      "version": "0.0.6",
+      "name": "schedtxt",
+      "version": "0.0.10",
      "dependencies": {
+        "dotenv": "^17.4.2",
        "react": "^19.2.7",
        "react-dom": "^19.2.7",
        "react-router-dom": "^7.18.0"
@@ -1219,6 +1220,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.380",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.380.tgz",
@@ -1,7 +1,7 @@
 {
-  "name": "textsender",
+  "name": "schedtxt",
  "private": true,
-  "version": "0.0.6",
+  "version": "0.0.10",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -12,6 +12,7 @@
    "format:check": "npx prettier --check ."
  },
  "dependencies": {
+    "dotenv": "^17.4.2",
    "react": "^19.2.7",
    "react-dom": "^19.2.7",
    "react-router-dom": "^7.18.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,17 +1,18 @@
 import { API_BASE_URL } from '../constants/api';

 export class CreateContactRequest {
-  first_name = '';
-  last_name = '';
+  firstname = '';
+  lastname = '';
+  nickname = '';
  phone_number = '';
  user_id = '';
 }

 export class UpdateContactNamesRequest {
-  first_name = '';
-  last_name = '';
+  firstname = '';
+  lastname = '';
  nickname = '';
-  contact_id = '';
+  id = '';
  user_id = '';
 }

@@ -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');
+    }
+  },
+};
@@ -20,6 +20,25 @@ export const scheduleApi = {
    }
  },

+  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');

@@ -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.last_name = formData.lastName;
+      contact.firstname = formData.firstName;
+      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,20 +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);
@@ -22,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);
  };

@@ -47,7 +43,11 @@ const Dashboard = () => {
  };

  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
      setActiveView(view);
+    }
  };

  return (
@@ -55,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
@@ -64,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')}
@@ -161,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;
@@ -28,7 +28,15 @@ 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) {
@@ -49,6 +57,7 @@ const useSendMessageWizard = () => {
    state.step,
    state.selectedContacts.length,
    state.message,
+    state.createdMessage,
    state.scheduledTime,
  ]);

@@ -33,11 +33,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
          <span className={styles.reviewLabel}>First Name</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
-              {selectedContact.first_name || 'Not set'}
+              {selectedContact.firstname || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
-              {contactDetails.first_name || 'Not set'}
+              {contactDetails.firstname || 'Not set'}
            </span>
          </div>
        </div>
@@ -46,11 +46,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
          <span className={styles.reviewLabel}>Last Name</span>
          <div className={styles.reviewComparison}>
            <span className={styles.oldValue}>
-              {selectedContact.last_name || 'Not set'}
+              {selectedContact.lastname || 'Not set'}
            </span>
            <span className={styles.arrow}>→</span>
            <span className={styles.newValue}>
-              {contactDetails.last_name || 'Not set'}
+              {contactDetails.lastname || 'Not set'}
            </span>
          </div>
        </div>
@@ -3,8 +3,8 @@ import styles from './ModifyForm.module.css';

 function ModifyForm({ contactDetails, setContactDetails }) {
  const [formData, setFormData] = useState({
-    first_name: '',
-    last_name: '',
+    firstname: '',
+    lastname: '',
    nickname: '',
  });

@@ -12,8 +12,8 @@ function ModifyForm({ contactDetails, setContactDetails }) {
  useEffect(() => {
    if (contactDetails) {
      setFormData({
-        first_name: contactDetails.first_name || '',
-        last_name: contactDetails.last_name || '',
+        firstname: contactDetails.firstname || '',
+        lastname: contactDetails.lastname || '',
        nickname: contactDetails.nickname || '',
      });
    }
@@ -37,16 +37,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
      <h3 className={styles.sectionTitle}>Edit Contact Information</h3>

      <div className={styles.formGroup}>
-        <label htmlFor="first_name" className={styles.formLabel}>
+        <label htmlFor="firstname" className={styles.formLabel}>
          First Name
          <span className={styles.requiredIndicator}>*</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
-            id="first_name"
-            name="first_name"
-            value={formData.first_name}
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter contact's first name"
@@ -61,16 +61,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
      </div>

      <div className={styles.formGroup}>
-        <label htmlFor="last_name" className={styles.formLabel}>
+        <label htmlFor="lastname" className={styles.formLabel}>
          Last Name
          <span className={styles.requiredIndicator}>*</span>
        </label>
        <div className={styles.inputContainer}>
          <input
            type="text"
-            id="last_name"
-            name="last_name"
-            value={formData.last_name}
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
            onChange={handleChange}
            className={styles.formInput}
            placeholder="Enter contact's last name"
@@ -49,15 +49,15 @@ function ViewContact({ selectedContact, onSelectedContact }) {
  const filteredContacts = contacts.filter(
    (contact) =>
      contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      contact.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      contact.last_name?.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.first_name, contact.last_name].filter(Boolean).join(' ') ||
+      [contact.firstname, contact.lastname].filter(Boolean).join(' ') ||
      'Unnamed';
    const nickname = contact.nickname ? `"${contact.nickname}"` : '';

@@ -117,7 +117,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
              onClick={() => onSelectedContact(contact)}
            >
              <div className={styles.contactAvatar}>
-                {contact.first_name?.[0]?.toUpperCase() || '?'}
+                {contact.firstname?.[0]?.toUpperCase() || '?'}
              </div>
              <div className={styles.contactInfo}>
                <div className={styles.contactMainInfo}>
@@ -131,7 +131,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
                  )}
                </div>
                <div className={styles.contactName}>
-                  {[contact.first_name, contact.last_name]
+                  {[contact.firstname, contact.lastname]
                    .filter(Boolean)
                    .join(' ') || 'Unnamed Contact'}
                </div>
@@ -21,13 +21,13 @@ const useViewContactWizard = () => {
      case 'modify':
        if (!state.contactDetails) return false;
        if (
-          !state.contactDetails.first_name ||
-          state.contactDetails.first_name.trim() === ''
+          !state.contactDetails.firstname ||
+          state.contactDetails.firstname.trim() === ''
        ) {
          return false;
        } else if (
-          !state.contactDetails.last_name ||
-          state.contactDetails.last_name.trim() === ''
+          !state.contactDetails.lastname ||
+          state.contactDetails.lastname.trim() === ''
        ) {
          return false;
        } else {
@@ -61,8 +61,8 @@ const useViewContactWizard = () => {
          ? null
          : {
              id: contactId,
-              first_name: contact.first_name,
-              last_name: contact.last_name,
+              firstname: contact.firstname,
+              lastname: contact.lastname,
              phone_number: contact.phone_number,
              user_id: contact.user_id,
              nickname: contact.nickname || '',
@@ -90,8 +90,8 @@ const useViewContactWizard = () => {
          step: nextStepValue,
          submissionError: null,
          contactDetails: {
-            first_name: prev.selectedContact.first_name || '',
-            last_name: prev.selectedContact.last_name || '',
+            firstname: prev.selectedContact.firstname || '',
+            lastname: prev.selectedContact.lastname || '',
            nickname: prev.selectedContact.nickname || '',
            phone_number: prev.selectedContact.phone_number || '',
            id: prev.selectedContact.id,
@@ -139,10 +139,10 @@ const useViewContactWizard = () => {
      console.log('Contact details to update: ', state.contactDetails);

      let reqBody = new UpdateContactNamesRequest();
-      reqBody.first_name = state.contactDetails.first_name;
-      reqBody.last_name = state.contactDetails.last_name;
+      reqBody.firstname = state.contactDetails.firstname;
+      reqBody.lastname = state.contactDetails.lastname;
      reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
-      reqBody.contact_id = state.selectedContact.id;
+      reqBody.id = state.selectedContact.id;
      reqBody.user_id = userId;

      const response = await contactApi.updateContactNames(
@@ -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" />
-                <p style={{ marginTop: '20px', color: '#4b5563' }}>
-                  Loading sent messages
-                </p>
+                <div className="loading-spinner" />
+                <p>Loading messages...</p>
              </div>
            ) : (
              <>
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '20px',
-                    flexWrap: 'wrap',
-                    gap: '10px',
-                  }}
-                >
-                  <button
-                    onClick={handleRefresh}
-                    style={{
-                      background: '#f3f4f6',
-                      color: '#4b5563',
-                      border: '1px solid #e5e7eb',
-                      borderRadius: '6px',
-                      padding: '8px 16px',
-                      cursor: 'pointer',
-                      fontSize: '14px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px',
-                    }}
-                  >
-                    <span></span> Refresh
-                  </button>
-
-                  <input
-                    type="text"
-                    placeholder="Search sent messages..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    style={{
-                      flex: 1,
-                      minWidth: '200px',
-                      maxWidth: '300px',
-                      padding: '8px 12px',
-                      border: '1px solid #e5e7eb',
-                      borderRadius: '6px',
-                      fontSize: '14px',
-                    }}
-                  />
-
-                  <div
-                    style={{
-                      fontSize: '12px',
-                      color: '#6b7280',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px',
-                    }}
-                  >
-                    <span>Updated: {formatLastUpdated()}</span>
-                    <span
-                      style={{
-                        display: 'inline-block',
-                        width: '8px',
-                        height: '8px',
-                        borderRadius: '50%',
-                        background: lastUpdated ? '#10b981' : '#9ca3af',
-                      }}
-                    />
-                  </div>
-                </div>
-
-                {/* Sent Messages List */}
-                {filteredSentMessages.length === 0 ? (
-                  <div
-                    style={{
-                      textAlign: 'center',
-                      padding: '40px',
-                      color: '#4b5563',
-                    }}
-                  >
-                    <div style={{ fontSize: '48px', marginBottom: '16px' }}>
-                      X
-                    </div>
-                    <p
-                      style={{
-                        fontSize: '18px',
-                        fontWeight: '500',
-                        marginBottom: '8px',
-                      }}
-                    >
-                      {searchTerm
-                        ? 'No matching sent messages found'
-                        : 'No sent messages available'}
-                    </p>
-                    <p style={{ marginBottom: '20px' }}>
-                      {searchTerm
-                        ? 'Try a different search term'
-                        : 'Create a contact and send a message to get started'}
-                    </p>
-                    {searchTerm && (
-                      <button
-                        onClick={() => setSearchTerm('')}
-                        style={{
-                          background: '#f3f4f6',
-                          color: '#4b5563',
-                          border: '1px solid #e5e7eb',
-                          borderRadius: '6px',
-                          padding: '8px 16px',
-                          cursor: 'pointer',
-                          fontSize: '14px',
-                          marginBottom: '10px',
-                        }}
-                      >
-                        Clear Search
-                      </button>
-                    )}
-                  </div>
-                ) : (
-                  <>
-                    <div
-                      style={{
-                        maxHeight: '400px',
-                        overflowY: 'auto',
-                        border: '1px solid #e5e7eb',
-                        borderRadius: '8px',
-                        background: '#fafafa',
-                      }}
-                    >
-                      <div style={{ padding: '4px' }}>
-                        {filteredSentMessages.map((sentMessage, index) => (
-                          <div
-                            key={sentMessage.id}
-                            style={{
-                              padding: '16px',
-                              borderBottom:
-                                index < filteredSentMessages.length - 1
-                                  ? '1px solid #e5e7eb'
-                                  : 'none',
-                              background: 'white',
-                              transition: 'all 0.2s',
-                            }}
-                          >
-                            <div
-                              style={{
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'flex-start',
-                                marginBottom: '8px',
-                              }}
-                            >
-                              <div
-                                style={{
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  gap: '12px',
-                                }}
-                              >
-                                <span
-                                  style={{
-                                    background: '#667eea',
-                                    color: 'white',
-                                    width: '28px',
-                                    height: '28px',
-                                    borderRadius: '50%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    fontSize: '12px',
-                                    fontWeight: '600',
-                                  }}
-                                >
-                                  {index + 1}
-                                </span>
-                                <div>
-                                  <h4
-                                    style={{
-                                      margin: 0,
-                                      color: '#111827',
-                                      fontSize: '16px',
-                                      fontWeight: '600',
-                                    }}
-                                  >
-                                    {sentMessage.status}
-                                  </h4>
-                                  <h5>Sent: {sentMessage.sent}</h5>
-                                </div>
-                              </div>
-                              <span
-                                style={{
-                                  fontSize: '12px',
-                                  color: '#9ca3af',
-                                  background: '#f3f4f6',
-                                  padding: '2px 8px',
-                                  borderRadius: '4px',
-                                }}
-                              >
-                                Id: {sentMessage.id}
+                {/* Sent Messages Tab Content */}
+                {activeTab === 'sent' && (
+                  <div className="messages-section">
+                    <div className="section-header">
+                      <h3>Sent Messages</h3>
+                      <span className="last-updated">
+                        Last updated: {formatLastUpdated()}
                      </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 API_BASE_URL = 'http://localhost:9081';
+export const AUTH_API_BASE_URL = import.meta.env.VITE_AUTH_URL;
+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
				`@@ -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>