+
+ );
+};
+
+export default Bulk;
+
+
+const styles = {
+ container: {
+ padding: '20px',
+ fontFamily: 'Arial, sans-serif',
+ },
+ containerMobile: {
+ padding: '10px',
+ fontFamily: 'Arial, sans-serif',
+ },
+ statusBox: {
+ padding: '20px',
+ border: '0.1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: '4px solid #0542cc',
+ borderRadius: '10px',
+ width: '100%',
+ marginBottom: '1rem',
+ },
+ iconStyle: {
+ width: '36px',
+ height: '36px',
+ },
+ buttonStyle: {
+ textDecoration: 'none',
+ border: 'none',
+ cursor: 'pointer',
+ transition: 'background-color 0.3s',
+ padding: '10px 15px',
+ borderRadius: '5px',
+ },
+ statusTitle: {
+ color: '#0066cc',
+ fontWeight: '600',
+ },
+ formContainer: {
+ padding: '20px',
+ border: '0.1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: '4px solid #0542cc',
+ borderRadius: '10px',
+ width: '100%',
+ marginBottom: '1rem',
+ },
+ formRow: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ flexWrap: 'wrap', // Allow wrapping for smaller screens
+ },
+ formColumn: {
+ flex: 1,
+ marginRight: '20px',
+ marginBottom: '20px', // Add spacing between rows in mobile
+ },
+ uploadBox: {
+ flex: 1,
+ textAlign: 'center',
+ padding: '20px',
+ marginBottom: '1rem',
+ },
+ label: {
+ fontWeight: 'bold',
+ display: 'block',
+ margin: '0.5rem 0',
+ },
+ select: {
+ width: '100%',
+ padding: '8px',
+ borderRadius: '4px',
+ border: '1px solid #ccc',
+ },
+ textarea: {
+ width: '100%',
+ padding: '8px',
+ borderRadius: '4px',
+ border: '1px solid #ccc',
+ marginTop: '10px',
+ height: '150px', // Adjust height for mobile
+ },
+ uploadArea: {
+ backgroundColor: '#e6f2ff',
+ cursor: 'pointer',
+ padding: '15px',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ border: '1px solid #ced4da',
+ borderRadius: '0.25rem',
+ height: 'auto', // Let content dictate height
+ minHeight: '200px',
+ },
+ uploadIcon: {
+ fontSize: '36px',
+ color: '#0542cc',
+ marginBottom: '7px',
+ },
+ uploadText: {
+ color: '#1f2d3d',
+ fontWeight: '400',
+ fontSize: '14px',
+ lineHeight: '13px',
+ textAlign: 'center',
+ },
+ browseButton: {
+ color: '#0066cc',
+ border: 'none',
+ background: 'none',
+ cursor: 'pointer',
+ marginTop: '5px',
+ },
+ charCounter: {
+ fontSize: '12px',
+ color: '#888',
+ marginTop: '5px',
+ },
+ sendButton: {
+ backgroundColor: '#0066cc',
+ color: 'white',
+ padding: '10px 20px',
+ border: 'none',
+ borderRadius: '4px',
+ cursor: 'pointer',
+ marginTop: '20px',
+ width: '100%', // Full width for mobile
+ maxWidth: '200px', // Limited width for larger screens
+ alignSelf: 'center',
+ },
+};
+
diff --git a/src/screens/Sms/Announcements/Section/Announcement.jsx b/src/screens/Sms/Announcements/Section/Announcement.jsx
new file mode 100644
index 0000000..e45bd0f
--- /dev/null
+++ b/src/screens/Sms/Announcements/Section/Announcement.jsx
@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from 'react';
+import {
+ Extract,
+ 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 },
+ ];
+
+ 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 (
+
+
+
+
+ 
+
+
+
+ Download Template
+
+
+
+ Check Our Service Status
++ Access pre-approved message templates designed for various purposes, including customer support, appointment reminders, order updates, and more. + Simplify your communication by using these ready-to-go formats. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Character: 0 (Max: 459), SMS Count: 0
+
+
+ Upload Template
+ document.getElementById('fileUpload').click()}
+ >
+
+
+
+ Drag and Drop Here
+Or
+ +Accepted file: .csv
Maximum file size: 5MB
+ {/* Welcome Message */}
+
+ );
+};
+
+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
+ },
+ summaryContainer: {
+ padding: '20px',
+ border: '0.1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: '4px solid #0542cc',
+ borderRadius: '10px',
+ width: '100%',
+ },
+ 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;
diff --git a/src/screens/Sms/Announcements/Section/Transaction.jsx b/src/screens/Sms/Announcements/Section/Transaction.jsx
new file mode 100644
index 0000000..6ea2e67
--- /dev/null
+++ b/src/screens/Sms/Announcements/Section/Transaction.jsx
@@ -0,0 +1,271 @@
+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 (
+
+
+
+
+
+
+
+ + Alert +
++ 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. +
+
+
+
+ {/* Row 1: Start Date and End Date */}
+
+
+
+ setStartDate(e.target.value)}
+ style={styles.filterInput}
+ placeholder="Start Date"
+ />
+ setEndDate(e.target.value)}
+ style={styles.filterInput}
+ placeholder="End Date"
+ />
+
+
+ {/* Row 2: Application Select */}
+
+
+
+
+ {/* Row 3: Apply and Cancel Buttons */}
+
+
+
+
+
+ {menuData.map((item) => (
+
+
+
+
+
+ ))}
+
+
+ {item.value}
+{item.label}
+
+ 
+
+
+ {/* Welcome Message */}
+
+ );
+};
+
+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
+ },
+ summaryContainer: {
+ padding: '20px',
+ border: '0.1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: '4px solid #0542cc',
+ borderRadius: '10px',
+ width: '100%',
+ },
+ 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;
diff --git a/src/screens/Sms/Announcements/Section/index.js b/src/screens/Sms/Announcements/Section/index.js
new file mode 100644
index 0000000..0245fef
--- /dev/null
+++ b/src/screens/Sms/Announcements/Section/index.js
@@ -0,0 +1,7 @@
+import Transaction from "./Transaction";
+import Announcement from "./Announcement";
+
+export {
+ Transaction,
+ Announcement
+}
\ No newline at end of file
diff --git a/src/screens/Sms/Announcements/Summary.jsx b/src/screens/Sms/Announcements/Summary.jsx
new file mode 100644
index 0000000..e7ec3f7
--- /dev/null
+++ b/src/screens/Sms/Announcements/Summary.jsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { Link, Routes, Route, useNavigate } from 'react-router-dom';
+import {
+ Transaction as SmsAnnouncementSummaryTransaction,
+ Announcement as SmsAnnouncementSummaryAnnouncement
+} from './Section';
+
+const Summary = () => {
+ const verifyTabs = [
+ { name: 'Transaction', link: 'sms-announcement-transaction' },
+ { name: 'Announcement', link: 'sms-announcement-announcement' },
+ ];
+
+ const [isMobile, setIsMobile] = useState(false);
+ const navigate = useNavigate();
+
+ // Redirect otomatis ke rute default saat akses ke /sms-announcement-transaction
+ useEffect(() => {
+ if (window.location.pathname === '/sms-announcement-summary') {
+ navigate('sms-announcement-transaction', { replace: true });
+ }
+ }, [navigate]);
+
+ // Update state isMobile berdasarkan ukuran layar
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ handleResize();
+ window.addEventListener('resize', handleResize);
+
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ + Alert +
++ 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. +
+
+
+
+ {/* Row 1: Start Date and End Date */}
+
+
+
+ setStartDate(e.target.value)}
+ style={styles.filterInput}
+ placeholder="Start Date"
+ />
+ setEndDate(e.target.value)}
+ style={styles.filterInput}
+ placeholder="End Date"
+ />
+
+
+ {/* Row 2: Application Select */}
+
+
+
+
+ {/* Row 3: Apply and Cancel Buttons */}
+
+
+
+
+
+ {menuData.map((item) => (
+
+
+
+
+
+ ))}
+
+
+ {item.value}
+{item.label}
+
+
+
+
+ {/* Static Content */}
+
+ );
+};
+
+export default Summary;
+
+const styles = {
+ container: {
+ marginTop: '3%',
+ padding: '0 15px',
+ },
+ welcomeCard: {
+ backgroundColor: '#E2FBEA',
+ borderLeft: '4px solid #0542CC',
+ borderRadius: '5px',
+ marginBottom: '20px',
+ },
+ createButton: {
+ backgroundColor: '#0542CC',
+ },
+ section: {
+ padding: '20px',
+ border: '0.1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: '4px solid #0542CC',
+ borderRadius: '10px',
+ width: '100%',
+ },
+ tabLink: {
+ padding: '10px 20px',
+ },
+};
diff --git a/src/screens/Sms/Announcements/Transaction.jsx b/src/screens/Sms/Announcements/Transaction.jsx
new file mode 100644
index 0000000..d489dcc
--- /dev/null
+++ b/src/screens/Sms/Announcements/Transaction.jsx
@@ -0,0 +1,454 @@
+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 (
+
+
+
+ {/* Tab Navigation */}
+
+
+ + Alert +
++ 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. +
+
+
+
+
+
+
+
+
+
+
+ {/* Dynamic Tab Content */}
+
+ {verifyTabs.map((tab) => (
+
+ {tab.name}
+
+ ))}
+
+
+
+
+
+
+ {/* First Page Button */}
+
+
+
+
+ {/* Page Numbers */}
+ {pageRange.map((pageNum) => (
+
+ ))}
+
+
+
+ {/* Last Page Button */}
+
+
+ );
+};
+
+const Transaction = () => {
+ 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
+ phoneNumber: `+62${Math.floor(Math.random() * 900000000) + 800000000}`, // Random phone number
+ operator: ['Telkomsel', 'Indosat', 'XL', 'Tri', 'Smartfren'][Math.floor(Math.random() * 5)], // Random operator
+ senderId: `SENDER${String(i).padStart(3, '0')}`, // Sender ID
+ segment: ['Retail', 'Finance', 'Health', 'Education', 'Technology'][Math.floor(Math.random() * 5)], // Random segment
+ dateSent: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random date
+ status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)], // Random status
+ mode: Math.random() > 0.5 ? 'Online' : 'Offline', // Random mode
+ });
+ }
+
+
+ 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 (
+
+ {/* Welcome Message */}
+
+ );
+};
+
+export default Transaction;
+
+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: {
+ marginRight: '-1rem', // Adjust as needed
+ },
+};
+
diff --git a/src/screens/Sms/Announcements/index.js b/src/screens/Sms/Announcements/index.js
new file mode 100644
index 0000000..14357e7
--- /dev/null
+++ b/src/screens/Sms/Announcements/index.js
@@ -0,0 +1,9 @@
+import BulkMessage from './Bulk';
+import Summary from './Summary';
+import Transaction from './Transaction';
+
+export {
+ BulkMessage,
+ Summary,
+ Transaction
+}
\ No newline at end of file
diff --git a/src/screens/Sms/AnomalyReport/Anomaly.jsx b/src/screens/Sms/AnomalyReport/Anomaly.jsx
new file mode 100644
index 0000000..bbbb11a
--- /dev/null
+++ b/src/screens/Sms/AnomalyReport/Anomaly.jsx
@@ -0,0 +1,565 @@
+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';
+import Select from 'react-select'
+import { ServerDownAnimation } from '../../../assets/images';
+
+
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+const API_KEY = process.env.REACT_APP_API_KEY;
+
+
+// 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 (
+
+
+
+
+
+
+
+ + Alert +
++ 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. +
+
+ {/* Filter Form */}
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Table */}
+
+ {buttonData.map((button, index) =>
+ button.enabled ? (
+
+ ) : null
+ )}
+
+
+ {/* Search Bar with Icon */}
+
+
+
+ {/* FontAwesome search icon */}
+
+
+
+
+
+
+
+
+ {/* Pagination */}
+ | No. | {/* Kolom untuk Nomor Urut */} ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | +
|---|---|---|---|---|---|---|---|---|---|
| {(currentPage - 1) * dataPerPage + index + 1} | +{transaction.transactionId} | +{transaction.applicationName} | +{transaction.phoneNumber} | +{transaction.operator} | +{transaction.senderId} | +{transaction.segment} | +{transaction.dateSent} | +{transaction.status} | +{transaction.mode} | +
|
+
+
+ Data not available + |
+ |||||||||
+ {/* First Page Button */}
+
+
+
+
+ {/* Page Numbers */}
+ {pageRange.map((pageNum) => (
+
+ ))}
+
+
+
+ {/* Last Page Button */}
+
+
+ );
+};
+
+const Anomaly = () => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [phoneNumber, setPhoneNumber] = useState('');
+ 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 [applicationId, setApplicationId] = useState('');
+ const [applicationIds, setApplicationIds] = useState([]);
+ const [inputValueApplication, setInputValueApplication] = useState('');
+
+ const [isLoading, setIsLoading] = useState(false);
+ const [isServer, setIsServer] = useState(true);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ const applicationOptions = applicationIds.map(app => ({
+ value: app.id, // This is what will be sent when an option is selected
+ label: app.name // This is what will be displayed in the dropdown
+ }));
+
+ // Validation state
+ const [validationErrors, setValidationErrors] = useState({
+ applicationId: '',
+ file: ''
+ });
+
+
+ const handleApplicationChange = (selectedOption) => {
+ const selectedId = selectedOption.value;
+ const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
+
+ setApplicationId(selectedOption ? selectedOption.value : '');
+ };
+
+ const handleInputChangeApplication = (inputValue) => {
+ setInputValueApplication(inputValue);
+ };
+
+ 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({
+ date: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(), // Random date
+ applicationId: `APP${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`, // Random Application ID
+ applicationName: `App ${Math.floor(Math.random() * 5) + 1}`, // Application Name
+ smsType: ['Promotional', 'Transactional'][Math.floor(Math.random() * 2)], // Random SMS Type
+ phoneNumber: `+62${Math.floor(Math.random() * 900000000) + 800000000}`, // Random phone number
+ tryCount: Math.floor(Math.random() * 5) + 1, // Random try count between 1 and 5
+ });
+ }
+
+
+ return transactionData;
+ };
+
+ useEffect(() => {
+ const fetchApplicationIds = async () => {
+ try {
+ setIsLoading(true);
+ const response = await fetch(`${BASE_URL}/application/list`, {
+ method: 'GET',
+ headers: {
+ 'accept': 'application/json',
+ 'x-api-key': API_KEY,
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch application IDs');
+ }
+
+ const data = await response.json();
+ console.log('Response Data:', data);
+
+ if (data.status_code === 200) {
+ setApplicationIds(data.details.data);
+ setIsServer(true);
+ } else {
+ setIsServer(false);
+ throw new Error(data.details.message || 'Failed to fetch application IDs');
+ }
+ } catch (error) {
+ setErrorMessage(error.message || 'Error fetching application IDs');
+ setIsServer(false);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchApplicationIds();
+
+ 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);
+ }, []);
+
+ if (!isServer) {
+ return (
+
+ 
+
+ );
+ }
+
+ return (
+ Server tidak dapat diakses
+{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}
+ +
+ {/* Inject keyframes for the spinner */}
+
+ {isLoading && (
+
+ );
+};
+
+export default Anomaly;
+
+const styles = {
+ contentContainer: {
+ padding: '20px',
+ border: '0.1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: '4px solid #0542cc',
+ borderRadius: '10px',
+ width: '100%',
+ },
+ selectWrapper: {
+ position: 'relative',
+ display: 'inline-block',
+ width: '100%',
+ },
+ tableContainer: {
+ minHeight: '300px',
+ maxHeight: '1500px',
+ overflowY: 'auto',
+ },
+ iconStyle: {
+ width: '50px',
+ height: '50px',
+ },
+ // Add margin-left style for icons
+ iconMarginLeft: {
+ marginLeft: '0.7rem', // Adjust as needed
+ },
+ loadingOverlay: {
+ position: 'fixed', // Gunakan fixed untuk overlay penuh layar
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0, // Pastikan menutupi seluruh layar
+ display: 'flex',
+ justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
+ alignItems: 'center', // Posisikan spinner di tengah secara vertikal
+ backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
+ color: 'white',
+ fontSize: '24px',
+ zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
+ },
+ spinner: {
+ border: '4px solid #f3f3f3', // Border gray untuk spinner
+ borderTop: '4px solid #3498db', // Border biru untuk spinner
+ borderRadius: '50%', // Membuat spinner bulat
+ width: '50px', // Ukuran spinner
+ height: '50px', // Ukuran spinner
+ animation: 'spin 2s linear infinite', // Menambahkan animasi spin
+ },
+ loadingText: {
+ marginLeft: '20px',
+ },
+};
+
diff --git a/src/screens/Sms/AnomalyReport/index.js b/src/screens/Sms/AnomalyReport/index.js
new file mode 100644
index 0000000..b970b13
--- /dev/null
+++ b/src/screens/Sms/AnomalyReport/index.js
@@ -0,0 +1,5 @@
+import Anomaly from "./Anomaly";
+
+export {
+ Anomaly
+}
\ No newline at end of file
diff --git a/src/screens/Sms/BlockedNumbers/BlockNumber.jsx b/src/screens/Sms/BlockedNumbers/BlockNumber.jsx
new file mode 100644
index 0000000..2df5cc5
--- /dev/null
+++ b/src/screens/Sms/BlockedNumbers/BlockNumber.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons';
+
+const BlockNumber = () => {
+
+ const [applicationId, setApplicationId] = useState('');
+ const [applicationIds, setApplicationIds] = useState([]);
+ const [isSelectOpen, setIsSelectOpen] = useState(false);
+ const [phoneId, setPhoneId] = useState('');
+ const [description, setDescription] = useState('');
+
+ const handleFocus = () => {
+ setIsSelectOpen(true);
+ };
+
+ const handleBlur = () => {
+ setIsSelectOpen(false);
+ };
+
+
+ const handleClick = async () => {
+ console.log('Make OTP Demo')
+ };
+
+ return (
+
+
+
+ )}
+
+ {/* Welcome Message */}
+ Loading...
+
+
+
+
+
+
+
+ + Alert +
++ 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. +
+
+ Please input the phone number first to show data
+
+
+
+
+
+
+
+
+ {validationErrors.applicationId && {validationErrors.applicationId}
} + +
+ {/* Filter Form */}
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Table */}
+
+ {buttonData.map((button, index) =>
+ button.enabled ? (
+
+ ) : null
+ )}
+
+
+ {/* Search Bar with Icon */}
+
+
+
+ {/* FontAwesome search icon */}
+
+
+
+
+
+
+
+
+ {/* Pagination */}
+ | No. | {/* Kolom untuk Nomor Urut */} ++ + | ++ + | ++ + | ++ + | ++ + | +|
|---|---|---|---|---|---|---|
| {(currentPage - 1) * dataPerPage + index + 1} | +{transaction.applicationId} | +{transaction.applicationName} | +{transaction.smsType} | +{transaction.phoneNumber} | +{transaction.tryCount} | +|
|
+
+
+ Data not available + |
+ ||||||
+
+
+ {/* Application ID Selection */}
+
+
+
+ {/* Phone Number Input */}
+
+
+
+
+
+
+ {/* Description Text Area */}
+
+
+ +62
+
+ setPhoneId(e.target.value)}
+ />
+
+
+