[TSM.ID].[11031972] PXE : Platform X Ecosystem I [118 Module -LIVE-]
This commit is contained in:
TSM.ID
@@ -0,0 +1,125 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useI18n } from '../context/I18nContext';
|
||||
|
||||
export default function NotificationMatrix() {
|
||||
const { t } = useI18n();
|
||||
|
||||
const [channels, setChannels] = useState({
|
||||
whatsapp: true,
|
||||
telegram: true,
|
||||
signal: true,
|
||||
sms: true,
|
||||
email: true,
|
||||
postal: true
|
||||
});
|
||||
|
||||
const [warningMessage, setWarningMessage] = useState(null);
|
||||
|
||||
const toggleChannel = (key) => {
|
||||
setChannels(prev => {
|
||||
const newState = { ...prev, [key]: !prev[key] };
|
||||
|
||||
// Zero-Escape Protocol Validation
|
||||
const activeOnlineChannels = ['whatsapp', 'telegram', 'signal', 'sms', 'email'].filter(c => newState[c]);
|
||||
|
||||
if (activeOnlineChannels.length === 0) {
|
||||
// Blokir mutasi jika semua channel online dimatikan
|
||||
setWarningMessage('PROTOCOL ZERO-ESCAPE TERPICU: Anda wajib mengaktifkan minimal satu jalur notifikasi elektronik/online untuk memastikan penerimaan tagihan.');
|
||||
return prev;
|
||||
}
|
||||
|
||||
setWarningMessage(null);
|
||||
return newState;
|
||||
});
|
||||
};
|
||||
|
||||
const channelInfo = [
|
||||
{ key: 'whatsapp', name: 'WhatsApp Business', desc: 'Notifikasi instan dengan verifikasi end-to-end terenkripsi.', icon: '💬', color: '#25D366' },
|
||||
{ key: 'telegram', name: 'Telegram Bot', desc: 'Integrasi notifikasi super-cepat ke perangkat seluler dan desktop.', icon: '✈️', color: '#0088cc' },
|
||||
{ key: 'signal', name: 'Signal Secure Messenger', desc: 'Protokol pengingat ultra-privasi tinggi.', icon: '🔒', color: '#3A76F0' },
|
||||
{ key: 'sms', name: 'SMS Gateway', desc: 'Pengingat fallback langsung ke nomor telepon seluler.', icon: '📱', color: '#ff9900' },
|
||||
{ key: 'email', name: 'E-Mail', desc: 'Pengiriman Invoice lengkap berformat PDF.', icon: '📧', color: '#ea4335' },
|
||||
{ key: 'postal', name: 'Surat Pos Fisik', desc: 'Pengiriman Invoice fisik tercetak ke alamat kantor terdaftar.', icon: '📮', color: '#888' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{animation: 'fadeIn 0.5s ease-out'}}>
|
||||
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '30px'}}>
|
||||
<div>
|
||||
<h2 style={{color: 'var(--text-main)', fontSize: '1.8rem', letterSpacing: '1px', textTransform: 'uppercase'}}>Omni-Messenger Preferences</h2>
|
||||
<p style={{color: 'var(--text-muted)'}}>Sesuaikan jalur komunikasi tagihan sesuai tingkat kenyamanan operasional Anda.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{warningMessage && (
|
||||
<div style={{
|
||||
padding: '15px 20px', background: 'rgba(255, 0, 60, 0.1)', border: '1px solid var(--accent-red)',
|
||||
borderRadius: '8px', color: 'var(--accent-red)', marginBottom: '30px', animation: 'shake 0.4s',
|
||||
fontFamily: 'monospace', fontSize: '0.9rem'
|
||||
}}>
|
||||
⚠️ {warningMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid-cards" style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px'}}>
|
||||
{channelInfo.map(ch => {
|
||||
const isActive = channels[ch.key];
|
||||
return (
|
||||
<div key={ch.key} className="glass-panel" style={{
|
||||
padding: '25px', display: 'flex', flexDirection: 'column',
|
||||
border: `1px solid ${isActive ? ch.color : 'var(--table-border)'}`,
|
||||
background: isActive ? `${ch.color}0A` : 'var(--panel-bg)',
|
||||
transition: 'all 0.3s ease',
|
||||
boxShadow: isActive ? `0 0 15px ${ch.color}20` : 'none'
|
||||
}}>
|
||||
<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
|
||||
<span style={{fontSize: '1.5rem'}}>{ch.icon}</span>
|
||||
<h3 style={{color: isActive ? 'var(--text-main)' : 'var(--text-muted)', fontSize: '1.1rem'}}>{ch.name}</h3>
|
||||
</div>
|
||||
|
||||
{/* KINETIC TOGGLE SWITCH */}
|
||||
<div
|
||||
onClick={() => toggleChannel(ch.key)}
|
||||
style={{
|
||||
width: '50px', height: '26px',
|
||||
background: isActive ? ch.color : '#333',
|
||||
borderRadius: '13px',
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '20px', height: '20px',
|
||||
background: '#fff',
|
||||
borderRadius: '50%',
|
||||
position: 'absolute',
|
||||
top: '3px',
|
||||
left: isActive ? '27px' : '3px',
|
||||
transition: 'all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
|
||||
}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{color: 'var(--text-muted)', fontSize: '0.85rem', lineHeight: '1.5', flex: 1}}>
|
||||
{ch.desc}
|
||||
</p>
|
||||
|
||||
<div style={{marginTop: '20px', fontSize: '0.7rem', color: isActive ? ch.color : 'var(--text-muted)', fontFamily: 'monospace', fontWeight: 'bold'}}>
|
||||
STATUS: {isActive ? 'ACTIVE & ROUTED' : 'DEACTIVATED'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="glass-panel" style={{padding: '20px', marginTop: '30px', borderLeft: '4px solid var(--accent-cyan)'}}>
|
||||
<h4 style={{color: 'var(--accent-cyan)', marginBottom: '5px'}}>The Omni-Messenger Guarantee</h4>
|
||||
<p style={{color: 'var(--text-muted)', fontSize: '0.85rem', lineHeight: '1.6'}}>
|
||||
Sistem notifikasi Omni-Messenger memiliki protokol eskalasi otomatis. Jika pengiriman melalui metode utama (misal: Telegram) gagal diverifikasi (tidak ada *delivery receipt*), sistem akan secara otomatis melimpahkan pesan ke rute komunikasi *fallback* aktif Anda berikutnya untuk menjamin informasi tagihan Anda tidak terlewatkan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user