Slicing UI/UX Wa

src/App.js

@@ -109,6 +109,31 @@ import {
 } from './screens/Wa/Manage';
 import { CreateSettings } from './screens/Wa/Manage/Content';
 
+import {
+  Settings as SettingsWa,
+  Summary as SummaryActivityWa,
+  Transaction as TransactionLogsWa,
+  Bulk as BulkWa
+} from './screens/Wa/Activity';
+
+import {
+  Authentication as WaSettingsAuth,
+  Message as WaSettingsMessage,
+  Transaction as WaSummaryTransaction,
+  Announcement as WaSummaryAnnouncement,
+  Conversation as WaSummaryConversation,
+  AuthLogs as WaTransactionAuth,
+  MessageLogs as WaTransactionMessage
+} from './screens/Wa/Activity/Section';
+
+import {
+  Inbox as InboxWa
+} from './screens/Wa/Inbox';
+
+import {
+  Block as BlockedWa
+} from './screens/Wa/Block';
+
 const App = () => {
   return (
     <Router>
@@ -220,6 +245,39 @@ const App = () => {
               <Route path="/wa-template" element={<TemplateWa />} />
               <Route path="/wa-integration" element={<IntegrationWa />} />
               <Route path="/wa-createSettings" element={<CreateSettings />} />
+
+              {/* WhatsApp - Activity (Settings) */}
+              <Route path="/wa-settings/*" element={<SettingsWa />}>
+                {/* Anak rute */}
+                <Route path="wa-settings-auth" element={<WaSettingsAuth />} />
+                <Route path="wa-settings-message" element={<WaSettingsMessage />} />
+                {/* Default route */}
+                <Route index element={<Navigate to="wa-settings-auth" />} />
+              </Route>
+              
+              {/* WhatsApp - Activity (Summary) */}
+              <Route path="/wa-summary/*" element={<SummaryActivityWa />}>
+                {/* Anak rute */}
+                <Route path="wa-summary-transaction" element={<WaSummaryTransaction />} />
+                <Route path="wa-summary-announcement" element={<WaSummaryAnnouncement />} />
+                <Route path="wa-summary-conversation" element={<WaSummaryConversation />} />
+                {/* Default route */}
+                <Route index element={<Navigate to="wa-summary-transaction" />} />
+              </Route>
+
+              {/* WhatsApp - Activity (Transaction) */}
+              <Route path="/wa-transaction/*" element={<TransactionLogsWa />}>
+                {/* Anak rute */}
+                <Route path="wa-transaction-auth" element={<WaTransactionAuth />} />
+                <Route path="wa-transaction-message" element={<WaTransactionMessage />} />
+                {/* Default route */}
+                <Route index element={<Navigate to="wa-transaction-auth" />} />
+              </Route>
+
+              <Route path="/wa-bulk" element={<BulkWa />} />
+
+              <Route path="/wa-inbox" element={<InboxWa />} />
+              <Route path="/wa-block" element={<BlockedWa />} />
               {/* <Route path="/sms-otp-settings" element={<SmsOtpSettings />} /> */}
               {/* Continue for each link */}
 

src/components/Sidebar/dataMenu.js

@@ -147,10 +147,10 @@ const dataMenu = [
                     name: 'WhatsApp Activity', // Changed the name
                     target: 'collapseActivity',
                     subMenus: [
-                        { name: 'Settings', link: '/wa-activity-settings'}, // Changed the name
+                        { name: 'Settings', link: '/wa-settings'}, // Changed the name
-                        { name: 'Activity Summary', link: '/wa-activity-summary'}, // Changed the name
+                        { name: 'Activity Summary', link: '/wa-summary'}, // Changed the name
-                        { name: 'Transaction Logs', link: '/wa-activity-transaction'},
+                        { name: 'Transaction Logs', link: '/wa-transaction'},
-                        { name: 'Bulk Sending', link: '/wa-activity-bulk'}, // Changed the name
+                        { name: 'Bulk Sending', link: '/wa-bulk'}, // Changed the name
                     ],
                 },
                 {

src/screens/Wa/Activity/Bulk.jsx

@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react'
+
+const Bulk = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.mobileContainer : styles.desktopContainer}>
+        <div style={styles.wrapper}>
+          <p style={styles.tips}>
+            Tips: Need Guidance to create template?{' '}
+            <a href="#" style={styles.link}>
+              Click here
+            </a>
+          </p>
+          <div style={styles.formGroup}>
+            <label style={styles.label}>Application ID</label>
+            <select style={styles.select}>
+              <option value="">Select Application ID</option>
+            </select>
+          </div>
+          <div style={styles.formGroup}>
+            <label style={styles.label}>Template Name</label>
+            <select style={styles.select}>
+              <option value="">Select Template Name</option>
+            </select>
+          </div>
+          <div style={styles.uploadBox}>
+            <p style={styles.uploadText}>Drag and Drop Here</p>
+            <p style={styles.orText}>OR</p>
+            <button style={styles.browseButton}>Browse</button>
+            <p style={styles.uploadInfo}>
+              Recommended size: 640 x 360px<br />
+              Max size: 5MB<br />
+              Supported file types: jpeg, png
+            </p>
+          </div>
+          <div style={styles.download}>
+            <a href="#" style={styles.downloadLink}>
+              Download Template
+            </a>
+          </div>
+          <button style={styles.demoButton}>Make SMS Demo</button>
+        </div>
+        <div style={styles.previewBox}>
+          <h3 style={styles.previewTitle}>Preview:</h3>
+          {/* Preview content */}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Bulk
+  
+const styles = {
+  container: {
+    padding: '1rem',
+    width: '100%',
+    margin: '0 auto',
+    boxSizing: 'border-box',
+  },
+  // Container styles for desktop and mobile
+  desktopContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: '1rem',
+  },
+  mobileContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+  },
+  wrapper: {
+    flex: 1,
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1.5rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    borderLeft: '5px solid #0542cc',
+  },
+  previewBox: {
+    flex: 1,
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1.5rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    borderLeft: '5px solid #0542cc',
+  },
+  tips: {
+    fontSize: '0.9rem',
+    marginBottom: '1rem',
+    color: '#555',
+  },
+  link: {
+    color: '#0542cc',
+    textDecoration: 'none',
+  },
+  formGroup: {
+    marginBottom: '1rem',
+  },
+  label: {
+    display: 'block',
+    marginBottom: '0.5rem',
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  select: {
+    width: '100%',
+    padding: '0.5rem',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    fontSize: '1rem',
+  },
+  uploadBox: {
+    textAlign: 'center',
+    padding: '2rem',
+    border: '2px dashed #ccc',
+    borderRadius: '8px',
+    backgroundColor: '#f9f9f9',
+    marginBottom: '1rem',
+  },
+  uploadText: {
+    fontSize: '1.2rem',
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  orText: {
+    margin: '0.5rem 0',
+    color: '#555',
+  },
+  browseButton: {
+    padding: '0.5rem 1rem',
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+  uploadInfo: {
+    fontSize: '0.8rem',
+    color: '#777',
+    marginTop: '1rem',
+  },
+  download: {
+    textAlign: 'right',
+    marginBottom: '1rem',
+  },
+  downloadLink: {
+    color: '#0542cc',
+    textDecoration: 'none',
+  },
+  demoButton: {
+    display: 'block',
+    width: '100%',
+    padding: '0.8rem',
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '1rem',
+    fontWeight: 'bold',
+  },
+  previewTitle: {
+    marginBottom: '1rem',
+    fontWeight: 'bold',
+    color: '#333',
+  },
+};
+  
+  

src/screens/Wa/Activity/Section/Announcement.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Extract,
+  Quality,
+  AsyncIcon,
+  QualityAsync,
+  Transaction as TransactionIcon,
+} from '../../../../assets/icon';
+
+const Announcement = () => {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [application, setApplication] = useState('');
+  const [isMobile, setIsMobile] = useState(false);
+
+  const menuData = [
+    { id: 1, value: '150', label: 'Total Transaction', icon: TransactionIcon },
+    { id: 2, value: '4', label: 'Total Extract', icon: Extract },
+    { id: 3, value: '65', label: 'Total Quality', icon: Quality },
+    { id: 6, value: '900', label: 'Total Extract Async', icon: AsyncIcon },
+    { id: 4, value: '22', label: 'Total Quality Async', icon: QualityAsync },
+  ];
+
+  const handleApply = () => {
+    console.log({ startDate, endDate, application });
+  };
+
+  const handleCancel = () => {
+    setStartDate('');
+    setEndDate('');
+    setApplication('');
+  };
+
+  // Detect if the device is mobile based on window width
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px
+    };
+
+    // Initialize on component mount
+    handleResize();
+
+    // Add event listener to update state on resize
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.filtersMobile : styles.filters}>
+        {/* Row 1: Start Date and End Date */}
+        <div style={styles.filterRow}>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            style={styles.filterInput}
+            placeholder="Start Date"
+          />
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            style={styles.filterInput}
+            placeholder="End Date"
+          />
+        </div>
+
+        {/* Row 2: Application Select */}
+        <div style={styles.filterRow}>
+          <select
+            value={application}
+            onChange={(e) => setApplication(e.target.value)}
+            style={styles.filterInput}
+          >
+            <option value="">Application</option>
+            <option value="App1">App1</option>
+            <option value="App2">App2</option>
+          </select>
+        </div>
+
+        {/* Row 3: Apply and Cancel Buttons */}
+        <div style={styles.filterRow}>
+          <button style={styles.applyButton} onClick={handleApply}>
+            Apply
+          </button>
+          <button style={styles.cancelButton} onClick={handleCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+
+      <div style={isMobile ? styles.summaryCardsMobile : styles.summaryCards}>
+        {menuData.map((item) => (
+          <div key={item.id} style={styles.card}>
+            <div style={styles.textContainer}>
+              <h2 style={styles.cardTitle}>{item.value}</h2>
+              <p style={styles.cardText}>{item.label}</p>
+            </div>
+            <div style={styles.iconContainer}>
+              <img src={item.icon} alt={item.label} style={styles.icon} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    margin: '3rem',
+  },
+  filters: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: '20px',
+    flexDirection: 'row', // Horizontal layout on desktop
+    gap: '10px',
+  },
+  filtersMobile: {
+    display: 'flex',
+    flexDirection: 'column', // Vertical layout on mobile
+    gap: '15px',
+  },
+  filterRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '10px',
+    width: '100%',
+  },
+  filterInput: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    fontSize: '16px',
+    width: '48%', // Adjust width to take up 48% of the row for input elements
+  },
+  applyButton: {
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },
+  cancelButton: {
+    backgroundColor: '#fff',
+    color: '#000',
+    padding: '10px 20px',
+    border: '1px solid gray',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },  
+  summaryCards: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop
+    gap: '20px',
+    marginTop: '20px',
+  },
+  summaryCardsMobile: {
+    display: 'grid',
+    gridTemplateColumns: '1fr', // 1 column on mobile (full width)
+    gap: '15px',
+    marginTop: '20px',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '15px', // Reduced padding for a more compact card
+    backgroundColor: 'white',
+    borderRadius: '8px', // Slightly smaller border-radius for a sharper look
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    textAlign: 'left',
+    minWidth: '200px', // Ensure minimum width for mobile responsiveness
+    maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide
+    width: '100%',
+    transition: 'transform 0.3s ease', // Smooth transition for hover effects
+  },
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom on hover for interactivity
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  icon: {
+    width: '36px', // Smaller icon size for a more compact card
+    height: '36px', // Matching height for the icon
+  },
+  cardTitle: {
+    fontSize: '18px', // Smaller font size for title to prevent overflow
+    margin: '0',
+    fontWeight: 'bold',
+  },
+  cardText: {
+    fontSize: '12px', // Smaller text size for description to keep it balanced
+    color: '#555',
+  },
+
+  // Optional: Hover effect for the cards to enhance interactivity
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom effect when hovering over card
+  },
+
+  // Media query for smaller screens (e.g., phones in portrait mode)
+  "@media (max-width: 768px)": {
+    summaryCards: {
+      gridTemplateColumns: '1fr', // 1 column on mobile screens
+    },
+    card: {
+      padding: '10px', // Smaller padding for smaller screens
+      minWidth: '180px', // Adjust min width for mobile devices
+      maxWidth: '250px', // Adjust max width for mobile devices
+    },
+    icon: {
+      width: '30px', // Slightly smaller icon size for mobile
+      height: '30px', // Matching height for mobile icon
+    },
+    cardTitle: {
+      fontSize: '16px', // Smaller font size for the card title
+    },
+    cardText: {
+      fontSize: '10px', // Smaller font size for card description
+    },
+  },
+};
+
+export default Announcement;

src/screens/Wa/Activity/Section/AuthLogs.jsx

@@ -0,0 +1,429 @@
+import React, { useState, useEffect } from 'react';
+import { FaChevronLeft, FaChevronRight, FaFastBackward, FaFastForward, FaSort, FaSortUp, FaSortDown } from 'react-icons/fa'; // Icons for sorting
+import { NoAvailable } from '../../../../assets/icon';
+
+// Pagination Component
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const handlePrev = () => {
+      if (currentPage > 1) {
+          onPageChange(currentPage - 1);
+      }
+  };
+
+  const handleNext = () => {
+      if (currentPage < totalPages) {
+          onPageChange(currentPage + 1);
+      }
+  };
+
+  const handleFirst = () => {
+      onPageChange(1); // Go to first page
+  };
+
+  const handleLast = () => {
+      onPageChange(totalPages); // Go to last page
+  };
+
+  // Logic to display only 3 pages in pagination
+  const getPaginationRange = () => {
+      const range = [];
+      const totalPagesCount = totalPages;
+
+      let start = currentPage - 1;
+      let end = currentPage + 1;
+
+      // Adjust start and end if near the boundaries
+      if (currentPage === 1) {
+          start = 1;
+          end = Math.min(3, totalPagesCount);
+      } else if (currentPage === totalPages) {
+          start = Math.max(totalPagesCount - 2, 1);
+          end = totalPagesCount;
+      }
+
+      for (let i = start; i <= end; i++) {
+          range.push(i);
+      }
+
+      return range;
+  };
+
+  const pageRange = getPaginationRange();
+
+  return (
+      <div className="pagination-container d-flex justify-content-end mt-4">
+          {/* First Page Button */}
+          <button
+              className="btn"
+              onClick={handleFirst}
+              disabled={currentPage === 1}
+          >
+              <FaFastBackward /> {/* Double Arrow Left */}
+          </button>
+
+          <button
+              className="btn"
+              onClick={handlePrev}
+              disabled={currentPage === 1}
+          >
+              <FaChevronLeft /> {/* Single Arrow Left */}
+          </button>
+
+          {/* Page Numbers */}
+          {pageRange.map((pageNum) => (
+              <button
+                  key={pageNum}
+                  className={`btn ${pageNum === currentPage ? 'btn-primary' : ''}`}
+                  onClick={() => onPageChange(pageNum)}
+              >
+                  {pageNum}
+              </button>
+          ))}
+
+          <button
+              className="btn"
+              onClick={handleNext}
+              disabled={currentPage === totalPages}
+          >
+              <FaChevronRight /> {/* Single Arrow Right */}
+          </button>
+
+          {/* Last Page Button */}
+          <button
+              className="btn"
+              onClick={handleLast}
+              disabled={currentPage === totalPages}
+          >
+              <FaFastForward /> {/* Double Arrow Right */}
+          </button>
+      </div>
+  );
+};
+
+const AuthLogs = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
+    const [transactionData, setTransactionData] = useState([]);
+    const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
+    const dataPerPage = 10; // Data per page (10 data per page)
+
+    const buttonData = [
+      { label: 'Copy', enabled: true },
+      { label: 'CSV', enabled: true },
+      { label: 'Excel', enabled: true },
+      { label: 'PDF', enabled: true },
+      { label: 'Print', enabled: true },
+      { label: 'Column Visibility', enabled: true },
+    ];
+  
+
+    // Generate 691 dummy transactions
+    const generateDummyData = (numOfItems) => {
+      const transactionData = [];
+      
+      for (let i = 1; i <= numOfItems; i++) {
+        transactionData.push({
+          transactionId: `TX${String(i).padStart(3, '0')}`, // Transaction ID
+          applicationName: `App ${Math.floor(Math.random() * 5) + 1}`, // Application Name
+          templateName: `Template ${Math.floor(Math.random() * 10) + 1}`, // Random Template Name
+          language: ['English', 'Indonesian', 'Spanish', 'French'][Math.floor(Math.random() * 4)], // Random Language
+          category: ['Marketing', 'Transaction', 'Alert', 'Notification'][Math.floor(Math.random() * 4)], // Random Category
+          dateSent: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random Date
+          destinationNumber: `+62${Math.floor(Math.random() * 900000000) + 800000000}`, // Random Destination Number
+          mode: Math.random() > 0.5 ? 'Online' : 'Offline', // Random Mode
+          status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], // Random Status
+        });    
+      }
+    
+      
+      return transactionData;
+    };
+
+
+    // Set the generated transaction data
+    useEffect(() => {
+        setTransactionData(generateDummyData(31)); // count data dummy transactions
+    }, []);
+
+    // Sorting function
+    const sortData = (data, config) => {
+      const { key, direction } = config;
+      return [...data].sort((a, b) => {
+          if (a[key] < b[key]) {
+              return direction === 'asc' ? -1 : 1;
+          }
+          if (a[key] > b[key]) {
+              return direction === 'asc' ? 1 : -1;
+          }
+          return 0;
+      });
+    };
+
+    // Handle column header sort click
+    const handleSort = (key) => {
+        let direction = 'asc';
+        if (sortConfig.key === key && sortConfig.direction === 'asc') {
+            direction = 'desc'; // Toggle direction if the same column is clicked
+        }
+        setSortConfig({ key, direction });
+    };
+
+    // Get the paginated data
+    const getPaginatedData = (data, page, perPage) => {
+        const sortedData = sortData(data, sortConfig);
+        const startIndex = (page - 1) * perPage;
+        const endIndex = startIndex + perPage;
+        return sortedData.slice(startIndex, endIndex);
+    };
+
+    // Handle page change
+    const handlePageChange = (page) => {
+        setCurrentPage(page);
+    };
+
+    // Calculate total pages based on the data and data per page
+    const totalPages = Math.ceil(transactionData.length / dataPerPage);
+
+    // Paginated data
+    const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
+
+    // Detect screen size and update isMobile state
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (
+      <div className="container">         
+        {/* Filter Form */}
+        <div className="row">
+            <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                <label>Start Date</label>
+                <input type="date" className="form-control" />
+            </div>
+            <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                <label>End Date</label>
+                <input type="date" className="form-control" />
+            </div>
+            <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                <label>Application</label>
+                <select className="form-control">
+                    <option>Select Application</option>
+                    <option>App 1</option>
+                    <option>App 2</option>
+                    <option>App 3</option>
+                    <option>App 4</option>
+                    <option>App 5</option>
+                </select>
+            </div>
+            <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                <label>Status</label>
+                <select className="form-control">
+                    <option>Select Status</option>
+                    <option>Pending</option>
+                    <option>Failed</option>
+                    <option>Success</option>
+                </select>
+            </div>
+            <div className={`col-12 ${isMobile ? 'd-flex justify-content-between' : 'col-md-2 d-flex align-items-end'}`} style={{ gap: '10px' }}>
+                <button className="btn btn-primary w-48">Apply</button>
+                <button className="btn btn-secondary w-48">Cancel</button>
+            </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="d-flex justify-content-between align-items-center my-3">
+            <div>
+                {buttonData.map((button, index) =>
+                  button.enabled ? (
+                      <button
+                          key={index}
+                          className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
+                          style={styles.actionButton}
+                      >
+                          {button.label}
+                      </button>
+                  ) : null
+                )}
+            </div>
+
+            {/* Search Bar with Icon */}
+            <div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+                <input
+                    type="text"
+                    placeholder="Search..."
+                    className="form-control"
+                />
+                <span className="input-group-text">
+                    <i className="fas fa-search"></i> {/* FontAwesome search icon */}
+                </span>
+            </div>
+        </div>
+
+        {/* Table */}
+        <div className="table-responsive">
+          <table className="table table-bordered" style={styles.tableContainer}>
+              <thead>
+                  <tr>
+                      <th>No.</th> {/* Kolom untuk Nomor Urut */}
+                      <th>
+                          <button className="btn" onClick={() => handleSort('transactionId')} style={styles.buttonStyle}>
+                              Transaction ID 
+                              {sortConfig.key === 'transactionId' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'transactionId' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('applicationName')} style={styles.buttonStyle}>
+                              Application Name 
+                              {sortConfig.key === 'applicationName' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'applicationName' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('templateName')} style={styles.buttonStyle}>
+                              Template Name
+                              {sortConfig.key === 'templateName' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'templateName' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('language')} style={styles.buttonStyle}>
+                              Language
+                              {sortConfig.key === 'language' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'language' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('category')} style={styles.buttonStyle}>
+                              Category
+                              {sortConfig.key === 'category' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'category' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('dateSent')} style={styles.buttonStyle}>
+                              Date Sent
+                              {sortConfig.key === 'dateSent' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'dateSent' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('destinationNumber')} style={styles.buttonStyle}>
+                              Destination Number
+                              {sortConfig.key === 'destinationNumber' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'destinationNumber' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('mode')} style={styles.buttonStyle}>
+                              Mode
+                              {sortConfig.key === 'mode' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'mode' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                      <th>
+                          <button className="btn" onClick={() => handleSort('status')} style={styles.buttonStyle}>
+                              Status
+                              {sortConfig.key === 'status' && 
+                                  (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                              }
+                              {sortConfig.key !== 'status' && <FaSort style={styles.iconMarginLeft} />}
+                          </button>
+                      </th>
+                  </tr>
+              </thead>
+
+              <tbody>
+                  {paginatedData.length > 0 ? (
+                      paginatedData.map((transaction, index) => (
+                          <tr key={index}>
+                              {/* Kolom Nomor Urut */}
+                              <td>{(currentPage - 1) * dataPerPage + index + 1}</td>
+                              <td>{transaction.transactionId}</td>
+                              <td>{transaction.applicationName}</td>
+                              <td>{transaction.templateName}</td>
+                              <td>{transaction.language}</td>
+                              <td>{transaction.category}</td>
+                              <td>{transaction.dateSent}</td>
+                              <td>{transaction.destinationNumber}</td>
+                              <td>{transaction.mode}</td>
+                              <td>{transaction.status}</td>
+                          </tr>
+                      ))
+                  ) : (
+                      <tr>
+                          <td colSpan="7" className="text-center">
+                              <div className="d-flex flex-column align-items-center mt-5">
+                                  <img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
+                                  <p>Data not available</p>
+                              </div>
+                          </td>
+                      </tr>
+                  )}
+              </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+        />
+      </div>
+    );
+};
+
+export default AuthLogs;
+
+const styles = {  
+  tableContainer: {
+      minHeight: '300px',
+      maxHeight: '1500px',
+      overflowY: 'auto',
+  },
+  iconStyle: {
+      width: '50px',
+      height: '50px',
+  },
+  // Add margin-left style for icons
+  iconMarginLeft: {
+    marginLeft: '0.5rem',
+    verticalAlign: 'middle', 
+  },
+  buttonStyle: {
+    display: 'inline-flex',         
+    justifyContent: 'flex-start',   
+    alignItems: 'center',           
+    padding: '0.5rem 1rem',          
+  },
+  actionButton: {
+    borderColor: '#000',
+    border: '1px solid black',
+    margin: '0 8px 8px 0', 
+    padding: '8px 16px', 
+  }
+};
+

src/screens/Wa/Activity/Section/Authentication.jsx

@@ -0,0 +1,126 @@
+import React from "react";
+
+const Authentication = () => {
+  
+  return (
+    <div style={styles.container}>
+      <div style={styles.row}>
+        {/* Kolom Pertama */}
+        <div style={styles.column}>
+          {/* Dropdown untuk Application Name */}
+          <div style={styles.formGroup}>
+            <select id="appName" style={styles.select}>
+              <option value="">App Name</option>
+              <option value="app1">App 1</option>
+              <option value="app2">App 2</option>
+            </select>
+          </div>
+
+          {/* Dropdown untuk Expiry Time */}
+          <div style={styles.formGroup}>
+            <select id="expiryTime" style={styles.select}>
+              <option value="">Expiry Time</option>
+              <option value="review1">Review 1</option>
+              <option value="review2">Review 2</option>
+            </select>
+          </div>
+
+          {/* Dropdown untuk Template Name */}
+          <div style={styles.formGroup}>
+            <select id="templateName" style={styles.select}>
+              <option value="">Template Name</option>
+              <option value="template1">Template 1</option>
+              <option value="template2">Template 2</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Kolom Kedua */}
+        <div style={styles.column}>
+          {/* Input untuk OTP Location */}
+          <div style={styles.formGroup}>
+            <input
+              type="text"
+              id="otpLocation"
+              placeholder="OTP Location"
+              style={styles.input}
+            />
+          </div>
+
+          {/* Input untuk OTP Length */}
+          <div style={styles.formGroup}>
+            <input
+              type="number"
+              id="otpLength"
+              placeholder="OTP Length"
+              style={styles.input}
+            />
+          </div>
+
+          {/* Input untuk Template Review */}
+          <div style={styles.formGroup}>
+            <input
+              type="text"
+              id="templateReview"
+              placeholder="Template Review"
+              style={styles.input}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Tombol Save */}
+      <button style={styles.button}>Save</button>
+    </div>
+  );
+};
+
+export default Authentication;
+
+// Definisi semua gaya
+const styles = {
+  container: {
+    padding: "20px",
+    fontFamily: "Arial, sans-serif",
+  },
+  row: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "20px",
+  },
+  column: {
+    flex: "1 1 calc(50% - 10px)",
+    minWidth: "300px",
+  },
+  formGroup: {
+    marginBottom: "20px",
+  },
+  input: {
+    width: "100%",
+    padding: "10px",
+    fontSize: "16px",
+    borderRadius: "4px",
+    border: "1px solid #ccc",
+    height: "40px",
+    boxSizing: "border-box",
+  },
+  select: {
+    width: "100%",
+    padding: "10px",
+    fontSize: "16px",
+    borderRadius: "4px",
+    border: "1px solid #ccc",
+    height: "40px",
+    boxSizing: "border-box",
+  },
+  button: {
+    padding: "10px 20px",
+    fontSize: "16px",
+    color: "#fff",
+    backgroundColor: "#1a73e8",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    marginTop: "20px",
+  },
+};

src/screens/Wa/Activity/Section/Conversation.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Extract,
+  Quality,
+  AsyncIcon,
+  QualityAsync,
+  Transaction as TransactionIcon,
+} from '../../../../assets/icon';
+
+const Conversation = () => {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [application, setApplication] = useState('');
+  const [isMobile, setIsMobile] = useState(false);
+
+  const menuData = [
+    { id: 1, value: '150', label: 'Total Transaction', icon: TransactionIcon },
+    { id: 2, value: '4', label: 'Total Extract', icon: Extract },
+    { id: 3, value: '65', label: 'Total Quality', icon: Quality },
+    { id: 6, value: '900', label: 'Total Extract Async', icon: AsyncIcon },
+    { id: 4, value: '22', label: 'Total Quality Async', icon: QualityAsync },
+  ];
+
+  const handleApply = () => {
+    console.log({ startDate, endDate, application });
+  };
+
+  const handleCancel = () => {
+    setStartDate('');
+    setEndDate('');
+    setApplication('');
+  };
+
+  // Detect if the device is mobile based on window width
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px
+    };
+
+    // Initialize on component mount
+    handleResize();
+
+    // Add event listener to update state on resize
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.filtersMobile : styles.filters}>
+        {/* Row 1: Start Date and End Date */}
+        <div style={styles.filterRow}>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            style={styles.filterInput}
+            placeholder="Start Date"
+          />
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            style={styles.filterInput}
+            placeholder="End Date"
+          />
+        </div>
+
+        {/* Row 2: Application Select */}
+        <div style={styles.filterRow}>
+          <select
+            value={application}
+            onChange={(e) => setApplication(e.target.value)}
+            style={styles.filterInput}
+          >
+            <option value="">Application</option>
+            <option value="App1">App1</option>
+            <option value="App2">App2</option>
+          </select>
+        </div>
+
+        {/* Row 3: Apply and Cancel Buttons */}
+        <div style={styles.filterRow}>
+          <button style={styles.applyButton} onClick={handleApply}>
+            Apply
+          </button>
+          <button style={styles.cancelButton} onClick={handleCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+
+      <div style={isMobile ? styles.summaryCardsMobile : styles.summaryCards}>
+        {menuData.map((item) => (
+          <div key={item.id} style={styles.card}>
+            <div style={styles.textContainer}>
+              <h2 style={styles.cardTitle}>{item.value}</h2>
+              <p style={styles.cardText}>{item.label}</p>
+            </div>
+            <div style={styles.iconContainer}>
+              <img src={item.icon} alt={item.label} style={styles.icon} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    margin: '3rem',
+  },
+  filters: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: '20px',
+    flexDirection: 'row', // Horizontal layout on desktop
+    gap: '10px',
+  },
+  filtersMobile: {
+    display: 'flex',
+    flexDirection: 'column', // Vertical layout on mobile
+    gap: '15px',
+  },
+  filterRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '10px',
+    width: '100%',
+  },
+  filterInput: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    fontSize: '16px',
+    width: '48%', // Adjust width to take up 48% of the row for input elements
+  },
+  applyButton: {
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },
+  cancelButton: {
+    backgroundColor: '#fff',
+    color: '#000',
+    padding: '10px 20px',
+    border: '1px solid gray',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },  
+  summaryCards: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop
+    gap: '20px',
+    marginTop: '20px',
+  },
+  summaryCardsMobile: {
+    display: 'grid',
+    gridTemplateColumns: '1fr', // 1 column on mobile (full width)
+    gap: '15px',
+    marginTop: '20px',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '15px', // Reduced padding for a more compact card
+    backgroundColor: 'white',
+    borderRadius: '8px', // Slightly smaller border-radius for a sharper look
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    textAlign: 'left',
+    minWidth: '200px', // Ensure minimum width for mobile responsiveness
+    maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide
+    width: '100%',
+    transition: 'transform 0.3s ease', // Smooth transition for hover effects
+  },
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom on hover for interactivity
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  icon: {
+    width: '36px', // Smaller icon size for a more compact card
+    height: '36px', // Matching height for the icon
+  },
+  cardTitle: {
+    fontSize: '18px', // Smaller font size for title to prevent overflow
+    margin: '0',
+    fontWeight: 'bold',
+  },
+  cardText: {
+    fontSize: '12px', // Smaller text size for description to keep it balanced
+    color: '#555',
+  },
+
+  // Optional: Hover effect for the cards to enhance interactivity
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom effect when hovering over card
+  },
+
+  // Media query for smaller screens (e.g., phones in portrait mode)
+  "@media (max-width: 768px)": {
+    summaryCards: {
+      gridTemplateColumns: '1fr', // 1 column on mobile screens
+    },
+    card: {
+      padding: '10px', // Smaller padding for smaller screens
+      minWidth: '180px', // Adjust min width for mobile devices
+      maxWidth: '250px', // Adjust max width for mobile devices
+    },
+    icon: {
+      width: '30px', // Slightly smaller icon size for mobile
+      height: '30px', // Matching height for mobile icon
+    },
+    cardTitle: {
+      fontSize: '16px', // Smaller font size for the card title
+    },
+    cardText: {
+      fontSize: '10px', // Smaller font size for card description
+    },
+  },
+};
+
+export default Conversation;

src/screens/Wa/Activity/Section/Message.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+const Message = () => {
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.row}>
+        {/* Kolom Pertama */}
+        <div style={styles.column}>
+          {/* Dropdown untuk Application Name */}
+          <div style={styles.formGroup}>
+            <select id="appID" style={styles.select}>
+              <option value="">Application ID</option>
+              <option value="app1">App 1</option>
+              <option value="app2">App 2</option>
+            </select>
+          </div>
+
+          {/* Dropdown untuk Template Name */}
+          <div style={styles.formGroup}>
+            <select id="templateName" style={styles.select}>
+              <option value="">Template Name</option>
+              <option value="template1">Template 1</option>
+              <option value="template2">Template 2</option>
+            </select>
+          </div>
+
+          {/* Input untuk Template Review */}
+          <div style={styles.formGroup}>
+            <input
+              type="text"
+              id="templateReview"
+              placeholder="Template Review"
+              style={styles.input}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Tombol Save */}
+      <button style={styles.button}>Save</button>
+    </div>
+  );
+};
+
+export default Message;
+
+const styles = {
+  container: {
+    padding: "20px",
+    fontFamily: "Arial, sans-serif",
+  },
+  row: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "20px",
+  },
+  column: {
+    flex: "1 1 calc(50% - 10px)",
+    minWidth: "300px",
+  },
+  formGroup: {
+    marginBottom: "20px",
+  },
+  input: {
+    width: "100%",
+    padding: "10px",
+    fontSize: "16px",
+    borderRadius: "4px",
+    border: "1px solid #ccc",
+    height: "40px",
+    boxSizing: "border-box",
+  },
+  select: {
+    width: "100%",
+    padding: "10px",
+    fontSize: "16px",
+    borderRadius: "4px",
+    border: "1px solid #ccc",
+    height: "40px",
+    boxSizing: "border-box",
+  },
+  button: {
+    padding: "10px 20px",
+    fontSize: "16px",
+    color: "#fff",
+    backgroundColor: "#1a73e8",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    marginTop: "20px",
+  },
+};

src/screens/Wa/Activity/Section/MessageLogs.jsx

@@ -0,0 +1,811 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FaChevronLeft, FaChevronRight, FaFastBackward, FaFastForward, FaSort, FaSortUp, FaSortDown } from 'react-icons/fa'; // Icons for sorting
+import { NoAvailable } from '../../../../assets/icon';
+
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const handlePrev = () => {
+      if (currentPage > 1) {
+          onPageChange(currentPage - 1);
+      }
+  };
+
+  const handleNext = () => {
+      if (currentPage < totalPages) {
+          onPageChange(currentPage + 1);
+      }
+  };
+
+  const handleFirst = () => {
+      onPageChange(1); // Go to first page
+  };
+
+  const handleLast = () => {
+      onPageChange(totalPages); // Go to last page
+  };
+
+  // Logic to display only 3 pages in pagination
+  const getPaginationRange = () => {
+      const range = [];
+      const totalPagesCount = totalPages;
+
+      let start = currentPage - 1;
+      let end = currentPage + 1;
+
+      // Adjust start and end if near the boundaries
+      if (currentPage === 1) {
+          start = 1;
+          end = Math.min(3, totalPagesCount);
+      } else if (currentPage === totalPages) {
+          start = Math.max(totalPagesCount - 2, 1);
+          end = totalPagesCount;
+      }
+
+      for (let i = start; i <= end; i++) {
+          range.push(i);
+      }
+
+      return range;
+  };
+
+  const pageRange = getPaginationRange();
+
+  return (
+      <div className="pagination-container d-flex justify-content-end mt-4">
+          {/* First Page Button */}
+          <button
+              className="btn"
+              onClick={handleFirst}
+              disabled={currentPage === 1}
+          >
+              <FaFastBackward /> {/* Double Arrow Left */}
+          </button>
+
+          <button
+              className="btn"
+              onClick={handlePrev}
+              disabled={currentPage === 1}
+          >
+              <FaChevronLeft /> {/* Single Arrow Left */}
+          </button>
+
+          {/* Page Numbers */}
+          {pageRange.map((pageNum) => (
+              <button
+                  key={pageNum}
+                  className={`btn ${pageNum === currentPage ? 'btn-primary' : ''}`}
+                  onClick={() => onPageChange(pageNum)}
+              >
+                  {pageNum}
+              </button>
+          ))}
+
+          <button
+              className="btn"
+              onClick={handleNext}
+              disabled={currentPage === totalPages}
+          >
+              <FaChevronRight /> {/* Single Arrow Right */}
+          </button>
+
+          {/* Last Page Button */}
+          <button
+              className="btn"
+              onClick={handleLast}
+              disabled={currentPage === totalPages}
+          >
+              <FaFastForward /> {/* Double Arrow Right */}
+          </button>
+      </div>
+  );
+};
+
+const SingleMessage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
+  const [transactionData, setTransactionData] = useState([]);
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
+  const dataPerPage = 10; // Data per page (10 data per page)
+
+  const buttonData = [
+    { label: 'Copy', enabled: true },
+    { label: 'CSV', enabled: true },
+    { label: 'Excel', enabled: true },
+    { label: 'PDF', enabled: true },
+    { label: 'Print', enabled: true },
+    { label: 'Column Visibility', enabled: true },
+  ];
+
+
+  // Generate 691 dummy transactions
+  const generateDummyData = (numOfItems) => {
+    const transactionData = [];
+    
+    for (let i = 1; i <= numOfItems; i++) {
+      transactionData.push({
+        transactionId: `TX${String(i).padStart(3, '0')}`, // Transaction ID
+        applicationName: `App ${Math.floor(Math.random() * 5) + 1}`, // Application Name
+        templateName: `Template ${Math.floor(Math.random() * 10) + 1}`, // Random Template Name
+        language: ['English', 'Indonesian', 'Spanish', 'French'][Math.floor(Math.random() * 4)], // Random Language
+        category: ['Marketing', 'Transaction', 'Alert', 'Notification'][Math.floor(Math.random() * 4)], // Random Category
+        dateSent: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random Date
+        destinationNumber: `+62${Math.floor(Math.random() * 900000000) + 800000000}`, // Random Destination Number
+        mode: Math.random() > 0.5 ? 'Online' : 'Offline', // Random Mode
+        status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], // Random Status
+      });    
+    }
+  
+    
+    return transactionData;
+  };
+
+
+  // Set the generated transaction data
+  useEffect(() => {
+      setTransactionData(generateDummyData(31)); // count data dummy transactions
+  }, []);
+
+  // Sorting function
+  const sortData = (data, config) => {
+    const { key, direction } = config;
+    return [...data].sort((a, b) => {
+        if (a[key] < b[key]) {
+            return direction === 'asc' ? -1 : 1;
+        }
+        if (a[key] > b[key]) {
+            return direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    });
+  };
+
+  // Handle column header sort click
+  const handleSort = (key) => {
+      let direction = 'asc';
+      if (sortConfig.key === key && sortConfig.direction === 'asc') {
+          direction = 'desc'; // Toggle direction if the same column is clicked
+      }
+      setSortConfig({ key, direction });
+  };
+
+  // Get the paginated data
+  const getPaginatedData = (data, page, perPage) => {
+      const sortedData = sortData(data, sortConfig);
+      const startIndex = (page - 1) * perPage;
+      const endIndex = startIndex + perPage;
+      return sortedData.slice(startIndex, endIndex);
+  };
+
+  // Handle page change
+  const handlePageChange = (page) => {
+      setCurrentPage(page);
+  };
+
+  // Calculate total pages based on the data and data per page
+  const totalPages = Math.ceil(transactionData.length / dataPerPage);
+
+  // Paginated data
+  const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
+
+  // Detect screen size and update isMobile state
+  useEffect(() => {
+      const handleResize = () => {
+          setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
+      };
+
+      handleResize();
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div className="container">         
+      {/* Filter Form */}
+      <div className="row">
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>Start Date</label>
+              <input type="date" className="form-control" />
+          </div>
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>End Date</label>
+              <input type="date" className="form-control" />
+          </div>
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>Application</label>
+              <select className="form-control">
+                  <option>Select Application</option>
+                  <option>App 1</option>
+                  <option>App 2</option>
+                  <option>App 3</option>
+                  <option>App 4</option>
+                  <option>App 5</option>
+              </select>
+          </div>
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>Status</label>
+              <select className="form-control">
+                  <option>Select Status</option>
+                  <option>Pending</option>
+                  <option>Failed</option>
+                  <option>Success</option>
+              </select>
+          </div>
+          <div className={`col-12 ${isMobile ? 'd-flex justify-content-between' : 'col-md-2 d-flex align-items-end'}`} style={{ gap: '10px' }}>
+              <button className="btn btn-primary w-48">Apply</button>
+              <button className="btn btn-secondary w-48">Cancel</button>
+          </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="d-flex justify-content-between align-items-center my-3">
+          <div>
+              {buttonData.map((button, index) =>
+                button.enabled ? (
+                    <button
+                        key={index}
+                        className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
+                        style={styles.actionButton}
+                    >
+                        {button.label}
+                    </button>
+                ) : null
+              )}
+          </div>
+
+          {/* Search Bar with Icon */}
+          <div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+              <input
+                  type="text"
+                  placeholder="Search..."
+                  className="form-control"
+              />
+              <span className="input-group-text">
+                  <i className="fas fa-search"></i> {/* FontAwesome search icon */}
+              </span>
+          </div>
+      </div>
+
+      {/* Table */}
+      <div className="table-responsive">
+        <table className="table table-bordered" style={styles.tableContainer}>
+            <thead>
+                <tr>
+                    <th>No.</th> {/* Kolom untuk Nomor Urut */}
+                    <th>
+                        <button className="btn" onClick={() => handleSort('transactionId')} style={styles.buttonStyle}>
+                            Transaction ID 
+                            {sortConfig.key === 'transactionId' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'transactionId' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('applicationName')} style={styles.buttonStyle}>
+                            Application Name 
+                            {sortConfig.key === 'applicationName' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'applicationName' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('templateName')} style={styles.buttonStyle}>
+                            Template Name
+                            {sortConfig.key === 'templateName' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'templateName' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('language')} style={styles.buttonStyle}>
+                            Language
+                            {sortConfig.key === 'language' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'language' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('category')} style={styles.buttonStyle}>
+                            Category
+                            {sortConfig.key === 'category' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'category' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('dateSent')} style={styles.buttonStyle}>
+                            Date Sent
+                            {sortConfig.key === 'dateSent' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'dateSent' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('destinationNumber')} style={styles.buttonStyle}>
+                            Destination Number
+                            {sortConfig.key === 'destinationNumber' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'destinationNumber' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('mode')} style={styles.buttonStyle}>
+                            Mode
+                            {sortConfig.key === 'mode' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'mode' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('status')} style={styles.buttonStyle}>
+                            Status
+                            {sortConfig.key === 'status' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'status' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {paginatedData.length > 0 ? (
+                    paginatedData.map((transaction, index) => (
+                        <tr key={index}>
+                            {/* Kolom Nomor Urut */}
+                            <td>{(currentPage - 1) * dataPerPage + index + 1}</td>
+                            <td>{transaction.transactionId}</td>
+                            <td>{transaction.applicationName}</td>
+                            <td>{transaction.templateName}</td>
+                            <td>{transaction.language}</td>
+                            <td>{transaction.category}</td>
+                            <td>{transaction.dateSent}</td>
+                            <td>{transaction.destinationNumber}</td>
+                            <td>{transaction.mode}</td>
+                            <td>{transaction.status}</td>
+                        </tr>
+                    ))
+                ) : (
+                    <tr>
+                        <td colSpan="7" className="text-center">
+                            <div className="d-flex flex-column align-items-center mt-5">
+                                <img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
+                                <p>Data not available</p>
+                            </div>
+                        </td>
+                    </tr>
+                )}
+            </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+      />
+    </div>
+  );
+};
+
+const BulkMessage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
+  const [transactionData, setTransactionData] = useState([]);
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
+  const dataPerPage = 10; // Data per page (10 data per page)
+
+  const buttonData = [
+    { label: 'Copy', enabled: true },
+    { label: 'CSV', enabled: true },
+    { label: 'Excel', enabled: true },
+    { label: 'PDF', enabled: true },
+    { label: 'Print', enabled: true },
+    { label: 'Column Visibility', enabled: true },
+  ];
+
+
+  // Generate 691 dummy transactions
+  const generateDummyData = (numOfItems) => {
+    const transactionData = [];
+    
+    for (let i = 1; i <= numOfItems; i++) {
+      transactionData.push({
+        transactionId: `TX${String(i).padStart(3, '0')}`, // Transaction ID
+        applicationName: `App ${Math.floor(Math.random() * 5) + 1}`, // Application Name
+        templateName: `Template ${Math.floor(Math.random() * 10) + 1}`, // Random Template Name
+        language: ['English', 'Indonesian', 'Spanish', 'French'][Math.floor(Math.random() * 4)], // Random Language
+        category: ['Marketing', 'Transaction', 'Alert', 'Notification'][Math.floor(Math.random() * 4)], // Random Category
+        dateSent: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random Date
+        destinationNumber: `+62${Math.floor(Math.random() * 900000000) + 800000000}`, // Random Destination Number
+        mode: Math.random() > 0.5 ? 'Online' : 'Offline', // Random Mode
+        status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], // Random Status
+      });    
+    }
+  
+    
+    return transactionData;
+  };
+
+
+  // Set the generated transaction data
+  useEffect(() => {
+      setTransactionData(generateDummyData(31)); // count data dummy transactions
+  }, []);
+
+  // Sorting function
+  const sortData = (data, config) => {
+    const { key, direction } = config;
+    return [...data].sort((a, b) => {
+        if (a[key] < b[key]) {
+            return direction === 'asc' ? -1 : 1;
+        }
+        if (a[key] > b[key]) {
+            return direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    });
+  };
+
+  // Handle column header sort click
+  const handleSort = (key) => {
+      let direction = 'asc';
+      if (sortConfig.key === key && sortConfig.direction === 'asc') {
+          direction = 'desc'; // Toggle direction if the same column is clicked
+      }
+      setSortConfig({ key, direction });
+  };
+
+  // Get the paginated data
+  const getPaginatedData = (data, page, perPage) => {
+      const sortedData = sortData(data, sortConfig);
+      const startIndex = (page - 1) * perPage;
+      const endIndex = startIndex + perPage;
+      return sortedData.slice(startIndex, endIndex);
+  };
+
+  // Handle page change
+  const handlePageChange = (page) => {
+      setCurrentPage(page);
+  };
+
+  // Calculate total pages based on the data and data per page
+  const totalPages = Math.ceil(transactionData.length / dataPerPage);
+
+  // Paginated data
+  const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
+
+  // Detect screen size and update isMobile state
+  useEffect(() => {
+      const handleResize = () => {
+          setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
+      };
+
+      handleResize();
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div className="container">         
+      {/* Filter Form */}
+      <div className="row">
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>Start Date</label>
+              <input type="date" className="form-control" />
+          </div>
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>End Date</label>
+              <input type="date" className="form-control" />
+          </div>
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>Application</label>
+              <select className="form-control">
+                  <option>Select Application</option>
+                  <option>App 1</option>
+                  <option>App 2</option>
+                  <option>App 3</option>
+                  <option>App 4</option>
+                  <option>App 5</option>
+              </select>
+          </div>
+          <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+              <label>Status</label>
+              <select className="form-control">
+                  <option>Select Status</option>
+                  <option>Pending</option>
+                  <option>Failed</option>
+                  <option>Success</option>
+              </select>
+          </div>
+          <div className={`col-12 ${isMobile ? 'd-flex justify-content-between' : 'col-md-2 d-flex align-items-end'}`} style={{ gap: '10px' }}>
+              <button className="btn btn-primary w-48">Apply</button>
+              <button className="btn btn-secondary w-48">Cancel</button>
+          </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="d-flex justify-content-between align-items-center my-3">
+          <div>
+              {buttonData.map((button, index) =>
+                button.enabled ? (
+                    <button
+                        key={index}
+                        className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
+                        style={styles.actionButton}
+                    >
+                        {button.label}
+                    </button>
+                ) : null
+              )}
+          </div>
+
+          {/* Search Bar with Icon */}
+          <div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+              <input
+                  type="text"
+                  placeholder="Search..."
+                  className="form-control"
+              />
+              <span className="input-group-text">
+                  <i className="fas fa-search"></i> {/* FontAwesome search icon */}
+              </span>
+          </div>
+      </div>
+
+      {/* Table */}
+      <div className="table-responsive">
+        <table className="table table-bordered" style={styles.tableContainer}>
+            <thead>
+                <tr>
+                    <th>No.</th> {/* Kolom untuk Nomor Urut */}
+                    <th>
+                        <button className="btn" onClick={() => handleSort('transactionId')} style={styles.buttonStyle}>
+                            Transaction ID 
+                            {sortConfig.key === 'transactionId' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'transactionId' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('applicationName')} style={styles.buttonStyle}>
+                            Application Name 
+                            {sortConfig.key === 'applicationName' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'applicationName' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('templateName')} style={styles.buttonStyle}>
+                            Template Name
+                            {sortConfig.key === 'templateName' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'templateName' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('language')} style={styles.buttonStyle}>
+                            Language
+                            {sortConfig.key === 'language' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'language' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('category')} style={styles.buttonStyle}>
+                            Category
+                            {sortConfig.key === 'category' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'category' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('dateSent')} style={styles.buttonStyle}>
+                            Date Sent
+                            {sortConfig.key === 'dateSent' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'dateSent' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('destinationNumber')} style={styles.buttonStyle}>
+                            Destination Number
+                            {sortConfig.key === 'destinationNumber' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'destinationNumber' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('mode')} style={styles.buttonStyle}>
+                            Mode
+                            {sortConfig.key === 'mode' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'mode' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                    <th>
+                        <button className="btn" onClick={() => handleSort('status')} style={styles.buttonStyle}>
+                            Status
+                            {sortConfig.key === 'status' && 
+                                (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                            }
+                            {sortConfig.key !== 'status' && <FaSort style={styles.iconMarginLeft} />}
+                        </button>
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {paginatedData.length > 0 ? (
+                    paginatedData.map((transaction, index) => (
+                        <tr key={index}>
+                            {/* Kolom Nomor Urut */}
+                            <td>{(currentPage - 1) * dataPerPage + index + 1}</td>
+                            <td>{transaction.transactionId}</td>
+                            <td>{transaction.applicationName}</td>
+                            <td>{transaction.templateName}</td>
+                            <td>{transaction.language}</td>
+                            <td>{transaction.category}</td>
+                            <td>{transaction.dateSent}</td>
+                            <td>{transaction.destinationNumber}</td>
+                            <td>{transaction.mode}</td>
+                            <td>{transaction.status}</td>
+                        </tr>
+                    ))
+                ) : (
+                    <tr>
+                        <td colSpan="7" className="text-center">
+                            <div className="d-flex flex-column align-items-center mt-5">
+                                <img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
+                                <p>Data not available</p>
+                            </div>
+                        </td>
+                    </tr>
+                )}
+            </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+      />
+    </div>
+  );
+};
+
+const MessageLogs = () => {
+    const [isSelectOpen, setIsSelectOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState('single');
+    const fileInputRef = useRef(null);
+
+    const handleFocus = () => {
+        setIsSelectOpen(true);
+    };
+
+    const handleBlur = () => {
+        setIsSelectOpen(false);
+    };
+
+    const handleClick = async () => {
+        console.log('Make SMS Demo');
+    };
+
+    const handleImageUpload = (event) => {
+      const file = event.target.files[0];
+      if (file && (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg')) {
+          console.log('File uploaded:', file.name); // Handle the file upload
+      } else {
+          alert('Please upload a valid image file (JPG, JPEG).');
+      }
+    };
+
+    return (
+        <div>
+            {/* Tab buttons */}
+            <div>
+                <button
+                    onClick={() => setActiveTab('single')}
+                    style={activeTab === 'single' ? styles.tabButton : styles.tabInactiveButton}
+                >
+                    Single Message
+                </button>
+                <button
+                    onClick={() => setActiveTab('bulk')}
+                    style={activeTab === 'bulk' ? styles.tabButton : styles.tabInactiveButton}
+                >
+                    Bulk Message
+                </button>
+            </div>
+
+            {/* Conditional content based on active tab */}
+            {activeTab === 'single' && <SingleMessage 
+                isSelectOpen={isSelectOpen} 
+                handleFocus={handleFocus} 
+                handleBlur={handleBlur} 
+                handleClick={handleClick} 
+            />}
+            {activeTab === 'bulk' && <BulkMessage 
+                isSelectOpen={isSelectOpen} 
+                handleFocus={handleFocus} 
+                handleBlur={handleBlur} 
+                handleClick={handleClick} 
+                handleImageUpload={handleImageUpload} 
+                fileInputRef={fileInputRef} 
+            />}
+        </div>
+    );
+};
+
+
+export default MessageLogs;
+
+const styles = {  
+  tabButton: {
+      display: 'inline-block',
+      padding: '10px 20px',
+      fontSize: '16px',
+      cursor: 'pointer',
+      backgroundColor: '#0542cc',
+      color: '#fff',
+      border: 'none',
+      marginRight: '10px',
+      borderRadius: '7px',
+      marginBottom: '12px'
+  },
+  tabInactiveButton: {
+      display: 'inline-block',
+      padding: '10px 20px',
+      fontSize: '16px',
+      cursor: 'pointer',
+      backgroundColor: '#fff',
+      color: '#0542cc',
+      border: '1px solid #0542cc',
+      marginRight: '10px',
+      borderRadius: '7px',
+      marginBottom: '12px'
+  },
+  tableContainer: {
+    minHeight: '300px',
+    maxHeight: '1500px',
+    overflowY: 'auto',
+  },
+  iconStyle: {
+      width: '50px',
+      height: '50px',
+  },
+  // Add margin-left style for icons
+  iconMarginLeft: {
+    marginLeft: '0.5rem',
+    verticalAlign: 'middle', 
+  },
+  buttonStyle: {
+    display: 'inline-flex',         
+    justifyContent: 'flex-start',   
+    alignItems: 'center',           
+    padding: '0.5rem 1rem',          
+  },
+  actionButton: {
+    borderColor: '#000',
+    border: '1px solid black',
+    margin: '0 8px 8px 0', 
+    padding: '8px 16px', 
+  }
+};

src/screens/Wa/Activity/Section/Transaction.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Extract,
+  Quality,
+  AsyncIcon,
+  QualityAsync,
+  Transaction as TransactionIcon,
+} from '../../../../assets/icon';
+
+const Transaction = () => {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [application, setApplication] = useState('');
+  const [isMobile, setIsMobile] = useState(false);
+
+  const menuData = [
+    { id: 1, value: '150', label: 'Total Transaction', icon: TransactionIcon },
+    { id: 2, value: '4', label: 'Total Extract', icon: Extract },
+    { id: 3, value: '65', label: 'Total Quality', icon: Quality },
+    { id: 6, value: '900', label: 'Total Extract Async', icon: AsyncIcon },
+    { id: 4, value: '22', label: 'Total Quality Async', icon: QualityAsync },
+  ];
+
+  const handleApply = () => {
+    console.log({ startDate, endDate, application });
+  };
+
+  const handleCancel = () => {
+    setStartDate('');
+    setEndDate('');
+    setApplication('');
+  };
+
+  // Detect if the device is mobile based on window width
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px
+    };
+
+    // Initialize on component mount
+    handleResize();
+
+    // Add event listener to update state on resize
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.filtersMobile : styles.filters}>
+        {/* Row 1: Start Date and End Date */}
+        <div style={styles.filterRow}>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            style={styles.filterInput}
+            placeholder="Start Date"
+          />
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            style={styles.filterInput}
+            placeholder="End Date"
+          />
+        </div>
+
+        {/* Row 2: Application Select */}
+        <div style={styles.filterRow}>
+          <select
+            value={application}
+            onChange={(e) => setApplication(e.target.value)}
+            style={styles.filterInput}
+          >
+            <option value="">Application</option>
+            <option value="App1">App1</option>
+            <option value="App2">App2</option>
+          </select>
+        </div>
+
+        {/* Row 3: Apply and Cancel Buttons */}
+        <div style={styles.filterRow}>
+          <button style={styles.applyButton} onClick={handleApply}>
+            Apply
+          </button>
+          <button style={styles.cancelButton} onClick={handleCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+
+      <div style={isMobile ? styles.summaryCardsMobile : styles.summaryCards}>
+        {menuData.map((item) => (
+          <div key={item.id} style={styles.card}>
+            <div style={styles.textContainer}>
+              <h2 style={styles.cardTitle}>{item.value}</h2>
+              <p style={styles.cardText}>{item.label}</p>
+            </div>
+            <div style={styles.iconContainer}>
+              <img src={item.icon} alt={item.label} style={styles.icon} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    margin: '3rem',
+  },
+  filters: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: '20px',
+    flexDirection: 'row', // Horizontal layout on desktop
+    gap: '10px',
+  },
+  filtersMobile: {
+    display: 'flex',
+    flexDirection: 'column', // Vertical layout on mobile
+    gap: '15px',
+  },
+  filterRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '10px',
+    width: '100%',
+  },
+  filterInput: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    fontSize: '16px',
+    width: '48%', // Adjust width to take up 48% of the row for input elements
+  },
+  applyButton: {
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },
+  cancelButton: {
+    backgroundColor: '#fff',
+    color: '#000',
+    padding: '10px 20px',
+    border: '1px solid gray',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },  
+  summaryCards: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop
+    gap: '20px',
+    marginTop: '20px',
+  },
+  summaryCardsMobile: {
+    display: 'grid',
+    gridTemplateColumns: '1fr', // 1 column on mobile (full width)
+    gap: '15px',
+    marginTop: '20px',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '15px', // Reduced padding for a more compact card
+    backgroundColor: 'white',
+    borderRadius: '8px', // Slightly smaller border-radius for a sharper look
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    textAlign: 'left',
+    minWidth: '200px', // Ensure minimum width for mobile responsiveness
+    maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide
+    width: '100%',
+    transition: 'transform 0.3s ease', // Smooth transition for hover effects
+  },
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom on hover for interactivity
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  icon: {
+    width: '36px', // Smaller icon size for a more compact card
+    height: '36px', // Matching height for the icon
+  },
+  cardTitle: {
+    fontSize: '18px', // Smaller font size for title to prevent overflow
+    margin: '0',
+    fontWeight: 'bold',
+  },
+  cardText: {
+    fontSize: '12px', // Smaller text size for description to keep it balanced
+    color: '#555',
+  },
+
+  // Optional: Hover effect for the cards to enhance interactivity
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom effect when hovering over card
+  },
+
+  // Media query for smaller screens (e.g., phones in portrait mode)
+  "@media (max-width: 768px)": {
+    summaryCards: {
+      gridTemplateColumns: '1fr', // 1 column on mobile screens
+    },
+    card: {
+      padding: '10px', // Smaller padding for smaller screens
+      minWidth: '180px', // Adjust min width for mobile devices
+      maxWidth: '250px', // Adjust max width for mobile devices
+    },
+    icon: {
+      width: '30px', // Slightly smaller icon size for mobile
+      height: '30px', // Matching height for mobile icon
+    },
+    cardTitle: {
+      fontSize: '16px', // Smaller font size for the card title
+    },
+    cardText: {
+      fontSize: '10px', // Smaller font size for card description
+    },
+  },
+};
+
+export default Transaction;

src/screens/Wa/Activity/Section/index.js

@@ -0,0 +1,17 @@
+import Authentication from './Authentication';
+import Message from './Message';
+import Transaction from './Transaction';
+import Announcement from './Announcement';
+import Conversation from './Conversation';
+import AuthLogs from './AuthLogs';
+import MessageLogs from './MessageLogs';
+
+export {
+    Authentication,
+    Message,
+    Transaction,
+    Announcement,
+    Conversation,
+    AuthLogs,
+    MessageLogs
+}

src/screens/Wa/Activity/Settings.jsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate, Link, Routes, Route } from 'react-router-dom';
+import {
+  Authentication,
+  Message
+} from './Section';
+
+const Breadcrumb = ({ path }) => {
+  const location = useLocation();
+  return (
+    <nav style={styles.breadcrumb}>
+      {path.map((item, index) => (
+        <span key={index}>
+          {index > 0 && ' > '}
+          <a
+            href={item.link}
+            style={{
+              ...styles.breadcrumbLink,
+              fontWeight: location.pathname === item.link ? 'bold' : 'normal',
+            }}
+          >
+            {item.name}
+          </a>
+        </span>
+      ))}
+    </nav>
+  );
+};
+
+const Settings = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (window.location.pathname === '/wa-settings') {
+      navigate('wa-settings-auth', { replace: true });
+    }
+  }, [navigate]);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const breadcrumbPath = [
+    { name: 'Activity', link: '/wa-settings' },
+    { name: 'Setting', link: '/wa-settings' },
+  ];
+
+  const settingsTabs = [
+    { name: 'Authentication', link: 'wa-settings-auth' },
+    { name: 'Message', link: 'wa-settings-message' }
+  ];
+  
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.wrapperMobile : styles.wrapper}>
+        <Breadcrumb path={breadcrumbPath} />
+        <div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
+          <div className="d-flex flex-wrap">
+            {settingsTabs.map((tab) => (
+              <Link
+                key={tab.link}
+                to={tab.link}
+                className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
+                style={styles.tabLink}
+              >
+                {tab.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Dynamic Tab Content */}
+        <div className="tab-content">
+          <Routes>
+            <Route path="wa-settings-auth" element={<Authentication />} />
+            <Route path="wa-settings-message" element={<Message />} />
+          </Routes>
+        </div>        
+      </div>
+    </div>
+  );
+};
+
+export default Settings;
+
+const styles = {
+  container: {
+    padding: '1rem',
+    width: '100%',
+    margin: '0 auto',
+    boxSizing: 'border-box',
+  },
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1.5rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    borderLeft: '5px solid #0542cc',
+  },
+  wrapperMobile: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    borderLeft: '5px solid #0542cc',
+  },
+  breadcrumb: {
+    marginBottom: '1rem',
+    fontSize: '0.9rem',
+  },
+  breadcrumbLink: {
+    textDecoration: 'none',
+    color: '#0542cc',
+  },
+  tabLink: {
+    padding: '10px 20px',
+  },
+};

src/screens/Wa/Activity/Summary.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate, Link, Routes, Route } from 'react-router-dom';
+import {
+  Transaction,
+  Announcement,
+  Conversation
+} from './Section';
+
+const Summary = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (window.location.pathname === '/wa-summary') {
+      navigate('wa-summary-transaction', { replace: true });
+    }
+  }, [navigate]);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const settingsTabs = [
+    { name: 'Transaction', link: 'wa-summary-transaction' },
+    { name: 'Announcement', link: 'wa-summary-announcement' },
+    { name: 'Conversation Reports', link: 'wa-summary-conversation' }
+  ];
+  
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.wrapperMobile : styles.wrapper}>
+        <div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
+          <div className="d-flex flex-wrap">
+            {settingsTabs.map((tab) => (
+              <Link
+                key={tab.link}
+                to={tab.link}
+                className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
+                style={styles.tabLink}
+              >
+                {tab.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Dynamic Tab Content */}
+        <div className="tab-content">
+          <Routes>
+            <Route path="wa-summary-transaction" element={<Transaction />} />
+            <Route path="wa-summary-announcement" element={<Announcement />} />
+            <Route path="wa-summary-conversation" element={<Conversation />} />
+          </Routes>
+        </div>        
+      </div>
+    </div>
+  );
+};
+
+export default Summary;
+
+const styles = {
+  container: {
+    padding: '1rem',
+    width: '100%',
+    margin: '0 auto',
+    boxSizing: 'border-box',
+  },
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1.5rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    borderLeft: '5px solid #0542cc',
+  },
+  wrapperMobile: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    borderLeft: '5px solid #0542cc',
+  },
+  breadcrumb: {
+    marginBottom: '1rem',
+    fontSize: '0.9rem',
+  },
+  breadcrumbLink: {
+    textDecoration: 'none',
+    color: '#0542cc',
+  },
+  tabLink: {
+    padding: '10px 20px',
+  },
+};

src/screens/Wa/Activity/Transaction.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate, Link, Routes, Route } from 'react-router-dom';
+import {
+  AuthLogs,
+  MessageLogs
+} from './Section';
+
+const Transaction = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (window.location.pathname === '/wa-transaction') {
+      navigate('wa-transaction-auth', { replace: true });
+    }
+  }, [navigate]);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const settingsTabs = [
+    { name: 'Authentication', link: 'wa-transaction-auth' },
+    { name: 'Message', link: 'wa-transaction-message' }
+  ];
+  
+
+  return (
+    <div style={styles.container}>
+      <div style={isMobile ? styles.wrapperMobile : styles.wrapper}>
+        <div className={`d-flex ${isMobile ? 'flex-column' : 'flex-row'} justify-content-between align-items-center mb-3`}>
+          <div className="d-flex flex-wrap">
+            {settingsTabs.map((tab) => (
+              <Link
+                key={tab.link}
+                to={tab.link}
+                className={`btn ${window.location.pathname.includes(tab.link) ? 'btn-primary' : 'btn-light'} me-2 mb-2`}
+                style={styles.tabLink}
+              >
+                {tab.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Dynamic Tab Content */}
+        <div className="tab-content">
+          <Routes>
+            <Route path="wa-transaction-auth" element={<AuthLogs />} />
+            <Route path="wa-transaction-message" element={<MessageLogs />} />
+          </Routes>
+        </div>        
+      </div>
+    </div>
+  );
+};
+
+export default Transaction;
+
+const styles = {
+  container: {
+    padding: '1rem',
+    width: '100%',
+    margin: '0 auto',
+    boxSizing: 'border-box',
+  },
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1.5rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    borderLeft: '5px solid #0542cc',
+  },
+  wrapperMobile: {
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '1rem',
+    boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+    backgroundColor: '#fff',
+    borderLeft: '5px solid #0542cc',
+  },
+  breadcrumb: {
+    marginBottom: '1rem',
+    fontSize: '0.9rem',
+  },
+  breadcrumbLink: {
+    textDecoration: 'none',
+    color: '#0542cc',
+  },
+  tabLink: {
+    padding: '10px 20px',
+  },
+};

src/screens/Wa/Activity/index.js

@@ -0,0 +1,12 @@
+import Settings from './Settings';
+import Summary from './Summary';
+import Transaction from './Transaction';
+import Bulk from './Bulk';
+
+
+export {
+    Settings,
+    Summary,
+    Transaction,
+    Bulk
+}

src/screens/Wa/Block/Block.jsx

@@ -0,0 +1,460 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  FaChevronLeft, 
+  FaChevronRight, 
+  FaFastBackward, 
+  FaFastForward, 
+  FaSort, 
+  FaSortUp, 
+  FaSortDown,  
+  FaEdit, 
+  FaEye, 
+  FaTrash 
+} from 'react-icons/fa'; // Icons for sorting
+import { NoAvailable } from '../../../assets/icon';
+import { Link } from 'react-router-dom';
+
+// Pagination Component
+const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+  const handlePrev = () => {
+      if (currentPage > 1) {
+          onPageChange(currentPage - 1);
+      }
+  };
+
+  const handleNext = () => {
+      if (currentPage < totalPages) {
+          onPageChange(currentPage + 1);
+      }
+  };
+
+  const handleFirst = () => {
+      onPageChange(1); // Go to first page
+  };
+
+  const handleLast = () => {
+      onPageChange(totalPages); // Go to last page
+  };
+
+  // Logic to display only 3 pages in pagination
+  const getPaginationRange = () => {
+      const range = [];
+      const totalPagesCount = totalPages;
+
+      let start = currentPage - 1;
+      let end = currentPage + 1;
+
+      // Adjust start and end if near the boundaries
+      if (currentPage === 1) {
+          start = 1;
+          end = Math.min(3, totalPagesCount);
+      } else if (currentPage === totalPages) {
+          start = Math.max(totalPagesCount - 2, 1);
+          end = totalPagesCount;
+      }
+
+      for (let i = start; i <= end; i++) {
+          range.push(i);
+      }
+
+      return range;
+  };
+
+  const pageRange = getPaginationRange();
+
+  return (
+      <div className="pagination-container d-flex justify-content-end mt-4">
+          {/* First Page Button */}
+          <button
+              className="btn"
+              onClick={handleFirst}
+              disabled={currentPage === 1}
+          >
+              <FaFastBackward /> {/* Double Arrow Left */}
+          </button>
+
+          <button
+              className="btn"
+              onClick={handlePrev}
+              disabled={currentPage === 1}
+          >
+              <FaChevronLeft /> {/* Single Arrow Left */}
+          </button>
+
+          {/* Page Numbers */}
+          {pageRange.map((pageNum) => (
+              <button
+                  key={pageNum}
+                  className={`btn ${pageNum === currentPage ? 'btn-primary' : ''}`}
+                  onClick={() => onPageChange(pageNum)}
+              >
+                  {pageNum}
+              </button>
+          ))}
+
+          <button
+              className="btn"
+              onClick={handleNext}
+              disabled={currentPage === totalPages}
+          >
+              <FaChevronRight /> {/* Single Arrow Right */}
+          </button>
+
+          {/* Last Page Button */}
+          <button
+              className="btn"
+              onClick={handleLast}
+              disabled={currentPage === totalPages}
+          >
+              <FaFastForward /> {/* Double Arrow Right */}
+          </button>
+      </div>
+  );
+};
+
+const Block = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [isMobile, setIsMobile] = useState(false); // State to detect mobile view
+    const [transactionData, setTransactionData] = useState([]);
+    const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' }); // Sorting state
+    const dataPerPage = 10; // Data per page (10 data per page)
+
+    const buttonData = [
+      { label: 'Copy', enabled: true },
+      { label: 'CSV', enabled: true },
+      { label: 'Excel', enabled: true },
+      { label: 'PDF', enabled: true },
+      { label: 'Print', enabled: true },
+      { label: 'Column Visibility', enabled: true },
+    ];
+  
+
+    // Generate 691 dummy transactions
+    const generateDummyData = (numOfItems) => {
+      const transactionData = [];
+      
+      for (let i = 1; i <= numOfItems; i++) {
+        transactionData.push({
+          transactionId: `TX${String(i).padStart(4, '0')}`, // Transaction ID (e.g., TX0001, TX0002, ...)
+          applicationName: `Application ${Math.floor(Math.random() * 5) + 1}`, // Random application name (e.g., Application 1, Application 2, ...)
+          phoneNumber: `+1${Math.floor(Math.random() * 1000000000)}`, // Random phone number (e.g., +1234567890)
+          description: `Description ${Math.floor(Math.random() * 100) + 1}`, // Random description (e.g., Description 1, Description 2, ...)
+        });             
+      }
+      
+      return transactionData;
+    };
+
+
+    // Set the generated transaction data
+    useEffect(() => {
+        setTransactionData(generateDummyData(52)); // count data dummy transactions
+    }, []);
+
+    // Sorting function
+    const sortData = (data, config) => {
+      const { key, direction } = config;
+      return [...data].sort((a, b) => {
+          if (a[key] < b[key]) {
+              return direction === 'asc' ? -1 : 1;
+          }
+          if (a[key] > b[key]) {
+              return direction === 'asc' ? 1 : -1;
+          }
+          return 0;
+      });
+    };
+
+    // Handle column header sort click
+    const handleSort = (key) => {
+        let direction = 'asc';
+        if (sortConfig.key === key && sortConfig.direction === 'asc') {
+            direction = 'desc'; // Toggle direction if the same column is clicked
+        }
+        setSortConfig({ key, direction });
+    };
+
+    // Get the paginated data
+    const getPaginatedData = (data, page, perPage) => {
+        const sortedData = sortData(data, sortConfig);
+        const startIndex = (page - 1) * perPage;
+        const endIndex = startIndex + perPage;
+        return sortedData.slice(startIndex, endIndex);
+    };
+
+    // Handle page change
+    const handlePageChange = (page) => {
+        setCurrentPage(page);
+    };
+
+    // Calculate total pages based on the data and data per page
+    const totalPages = Math.ceil(transactionData.length / dataPerPage);
+
+    // Paginated data
+    const paginatedData = getPaginatedData(transactionData, currentPage, dataPerPage);
+
+    // Detect screen size and update isMobile state
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth <= 768); // Change 768 to your breakpoint
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // Define your handle functions
+    const handleEdit = (transactionId) => {
+      console.log(`Edit transaction with ID: ${transactionId}`);
+      // Add your edit logic here
+    };
+
+    const handleShow = (transactionId) => {
+        console.log(`Show transaction with ID: ${transactionId}`);
+        // Add your show logic here
+    };
+
+    const handleDelete = (transactionId) => {
+        console.log(`Delete transaction with ID: ${transactionId}`);
+        // Add your delete logic here
+    };
+
+    return (
+        <div className="container mt-5">
+            {/* Welcome Message */}
+            <div className="row-card border-left border-primary shadow mb-4" style={{ backgroundColor: '#E2FBEA' }}>
+                <div className="d-flex flex-column justify-content-start align-items-start p-4">
+                    <div>
+                        <h4 className="mb-3 text-start">
+                            <i className="fas fa-warning fa-bold me-3"></i>Alert
+                        </h4>
+                        <p className="mb-0 text-start">
+                            Get started now by creating an Application ID and explore all the demo services available on the dashboard.
+                            Experience the ease and flexibility of trying out all our features firsthand.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div style={styles.contentContainer}>
+                {/* Filter Form */}
+                <div className="card p-3 mb-4">
+                  <div className="row d-flex justify-content-around">  {/* Using Flexbox */}
+                    
+                    {/* Dropdown: Business Account */}
+                    <div className={`col-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                      <select className="form-control">
+                        <option>Select Application</option>
+                        <option>App 1</option>
+                        <option>App 2</option>
+                        <option>App 3</option>
+                        <option>App 4</option>
+                        <option>App 5</option>
+                      </select>
+                    </div>
+
+                    {/* Dropdown: Status */}
+                    <div className={`col-sm-12 ${isMobile ? 'mb-2' : 'col-md-2'}`}>
+                      <select className="form-control">
+                        <option>Select Status</option>
+                        <option>Status 1</option>
+                        <option>Status 2</option>
+                        <option>Status 3</option>
+                        <option>Status 4</option>
+                        <option>Status 5</option>
+                      </select>
+                    </div>
+
+                    {/* Apply and Cancel Buttons */}
+                    <div className={`col-12 ${isMobile ? 'd-flex justify-content-between' : 'col-md-2 d-flex align-items-end'}`} style={{ gap: '10px' }}>
+                      <button className="btn btn-primary w-48">Apply</button>
+                      <button className="btn btn-secondary w-48">Cancel</button>
+                    </div>
+
+                    {/* Create Settings Button with Icon */}
+                    <div className={`col-12 ${isMobile ? 'd-flex justify-content-end' : 'col-md-2 d-flex justify-content-end align-items-end'}`} style={{ gap: '10px' }}>                      
+                      <Link to="/wa-createSettings" style={{ textDecoration: 'none' }}>
+                        <button className="btn btn-primary">
+                          <i className="fas fa-cogs me-2"></i>  {/* Font Awesome icon */}
+                          Create Settings
+                        </button>
+                      </Link>
+                    </div>
+                  </div>                  
+                </div>
+
+                {/* Action Buttons */}
+                <div className="d-flex justify-content-between align-items-center my-3">
+                    <div>
+                        {buttonData.map((button, index) =>
+                            button.enabled ? (
+                                <button
+                                    key={index}
+                                    className={`btn btn-light ${isMobile ? 'mb-2' : ''}`} // Add margin on mobile
+                                    style={styles.actionButton}
+                                >
+                                    {button.label}
+                                </button>
+                            ) : null
+                        )}
+                    </div>
+
+                    {/* Search Bar with Icon */}
+                    <div className="input-group" style={{ width: '250px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+                        <input
+                            type="text"
+                            placeholder="Search..."
+                            className="form-control"
+                        />
+                        <span className="input-group-text">
+                            <i className="fas fa-search"></i> {/* FontAwesome search icon */}
+                        </span>
+                    </div>
+                </div>
+
+                {/* Table */}
+                <div className="table-responsive">
+                  <table className="table table-bordered" style={styles.tableContainer}>
+                      <thead>
+                          <tr>
+                              <th>No.</th> 
+                              <th>
+                                  <button className="btn" onClick={() => handleSort('transactionId')} style={styles.buttonStyle}>
+                                      Transaction ID
+                                      {sortConfig.key === 'transactionId' && 
+                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                                      }
+                                      {sortConfig.key !== 'transactionId' && <FaSort style={styles.iconMarginLeft} />}
+                                  </button>
+                              </th>
+                              <th>
+                                  <button className="btn" onClick={() => handleSort('applicationName')} style={styles.buttonStyle}>
+                                      Application Name
+                                      {sortConfig.key === 'applicationName' && 
+                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                                      }
+                                      {sortConfig.key !== 'applicationName' && <FaSort style={styles.iconMarginLeft} />}
+                                  </button>
+                              </th>
+                              <th>
+                                  <button className="btn" onClick={() => handleSort('phoneNumber')} style={styles.buttonStyle}>
+                                      Phone Number
+                                      {sortConfig.key === 'phoneNumber' && 
+                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                                      }
+                                      {sortConfig.key !== 'phoneNumber' && <FaSort style={styles.iconMarginLeft} />}
+                                  </button>
+                              </th>
+                              <th>
+                                  <button className="btn" onClick={() => handleSort('description')} style={styles.buttonStyle}>
+                                      Description
+                                      {sortConfig.key === 'description' && 
+                                          (sortConfig.direction === 'asc' ? <FaSortUp style={styles.iconMarginLeft} /> : <FaSortDown style={styles.iconMarginLeft} />)
+                                      }
+                                      {sortConfig.key !== 'description' && <FaSort style={styles.iconMarginLeft} />}
+                                  </button>
+                              </th>
+                              <th style={{ textAlign: 'center', verticalAlign: 'middle' }}>Action</th>
+                          </tr>
+                      </thead>
+
+                      <tbody>
+                          {paginatedData.length > 0 ? (
+                              paginatedData.map((transaction, index) => (
+                                  <tr key={index}>
+                                      {/* Kolom Nomor Urut */}
+                                      <td>{(currentPage - 1) * dataPerPage + index + 1}</td> {/* Nomor urut berdasarkan halaman dan index */}
+                                      <td>{transaction.transactionId}</td>
+                                      <td>{transaction.applicationName}</td>
+                                      <td>{transaction.phoneNumber}</td>
+                                      <td>{transaction.description}</td>
+                                      <td style={{ textAlign: 'center' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
+                                            <button
+                                                className="btn btn-warning"
+                                                style={{ display: 'flex', alignItems: 'center' }}
+                                                onClick={() => handleEdit(transaction.transactionId)}
+                                            >
+                                                <FaEdit style={{ marginRight: '5px' }} />
+                                                Edit
+                                            </button>
+
+                                            <button
+                                                className="btn btn-success"
+                                                style={{ display: 'flex', alignItems: 'center' }}
+                                                onClick={() => handleShow(transaction.transactionId)}
+                                            >
+                                                <FaEye style={{ marginRight: '5px' }} />
+                                                Show
+                                            </button>
+
+                                            <button
+                                                className="btn btn-danger"
+                                                style={{ display: 'flex', alignItems: 'center' }}
+                                                onClick={() => handleDelete(transaction.transactionId)}
+                                            >
+                                                <FaTrash style={{ marginRight: '5px' }} />
+                                                Delete
+                                            </button>
+                                        </div>
+                                      </td>
+                                  </tr>
+                              ))
+                          ) : (
+                              <tr>
+                                  <td colSpan="7" className="text-center">
+                                      <div className="d-flex flex-column align-items-center mt-5">
+                                          <img src={NoAvailable} alt="No Data Available" className="mb-3" style={styles.iconStyle} />
+                                          <p>Data not available</p>
+                                      </div>
+                                  </td>
+                              </tr>
+                          )}
+                      </tbody>
+                  </table>
+                </div>
+
+                {/* Pagination */}
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    onPageChange={handlePageChange}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Block;
+
+const styles = {
+  contentContainer: {
+      padding: '20px',
+      border: '0.1px solid rgba(0, 0, 0, 0.2)',
+      borderLeft: '4px solid #0542cc',
+      borderRadius: '10px',
+      width: '100%',
+  },
+  tableContainer: {
+      minHeight: '300px',
+      maxHeight: '1500px',
+      overflowY: 'auto',
+  },
+  iconStyle: {
+      width: '50px',
+      height: '50px',
+  },
+  // Add margin-left style for icons
+  iconMarginLeft: {
+    marginLeft: '0.5rem',
+    verticalAlign: 'middle', 
+  },
+  buttonStyle: {
+    display: 'inline-flex',         
+    justifyContent: 'flex-start',   
+    alignItems: 'center',           
+    padding: '0.5rem 1rem',          
+  },
+};
+

src/screens/Wa/Block/index.js

@@ -0,0 +1,5 @@
+import Block from './Block';
+
+export {
+    Block
+}

src/screens/Wa/Inbox/Inbox.jsx

@@ -0,0 +1,107 @@
+import { height } from '@fortawesome/free-solid-svg-icons/fa0';
+import React from 'react';
+
+const Inbox = () => {
+  return (
+    <div style={styles.overlay}>
+      <div style={styles.modal}>
+        <div style={styles.header}>
+          <span style={styles.icon}>💬</span>
+          <h2 style={styles.title}>Activate Inbox</h2>
+        </div>
+        <p style={styles.description}>
+          Inbox allows seamless two-way communication with your end-users. By activating this feature, you agree
+          to a processing fee for each message sent and received.
+        </p>
+        <div style={styles.terms}>
+          <input type="checkbox" id="agree" style={styles.checkbox} />
+          <label htmlFor="agree" style={styles.label}>
+            I agree with <a href="#" style={styles.link}>WhatsApp's Terms of Service</a>
+          </label>
+        </div>
+        <div style={styles.actions}>
+          <button style={styles.cancelButton}>Cancel</button>
+          <button style={styles.activateButton}>Activate Now</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  overlay: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  modal: {
+    width: '43%',
+    height: '33%',
+    padding: '20px',
+    backgroundColor: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.2)',
+    textAlign: 'center',
+    borderLeft: '5px solid #0542cc',
+  },
+  header: {
+    marginBottom: '16px',
+  },
+  icon: {
+    fontSize: '2rem',
+    color: '#0542cc',
+  },
+  title: {
+    margin: '8px 0 0',
+    fontSize: '1.5rem',
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  description: {
+    fontSize: '1rem',
+    color: '#555',
+    marginBottom: '20px',
+  },
+  terms: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '20px',
+  },
+  checkbox: {
+    marginRight: '10px',
+  },
+  label: {
+    fontSize: '0.9rem',
+    color: '#555',
+  },
+  link: {
+    color: '#0542cc',
+    textDecoration: 'none',
+  },
+  actions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: '10px',
+  },
+  cancelButton: {
+    padding: '10px 20px',
+    backgroundColor: '#fff',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    color: '#555',
+    cursor: 'pointer',
+  },
+  activateButton: {
+    padding: '10px 20px',
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+};
+
+export default Inbox;

src/screens/Wa/Inbox/index.js

@@ -0,0 +1,5 @@
+import Inbox from "./Inbox";
+
+export {
+    Inbox
+}

src/screens/Wa/Manage/Content/CreateSettings.jsx

@@ -126,6 +126,7 @@ const styles = {
     backgroundColor: '#fff',
     maxWidth: '1200px',
     margin: '0 auto',
+    borderLeft: '5px solid #0542cc',
   },
   wrapperMobile: {
     display: 'flex',
@@ -135,6 +136,7 @@ const styles = {
     padding: '1rem',
     boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
     backgroundColor: '#fff',
+    borderLeft: '5px solid #0542cc',
   },
   breadcrumb: {
     marginBottom: '1rem',