Got the code working

src/api/scheduleApi.js

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

src/components/ViewSentMessages.css

@@ -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;
+}

src/components/ViewSentMessages.jsx

@@ -1,20 +1,21 @@
 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 = ({
   isOpen,
   onClose,
-  title = 'View Sent Messages ',
+  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>