to do list suryo

 https://docs.google.com/spreadsheets/d/1r4MLSUmae8GVbGPO5sBP-ZJasVmSDg5n0zjFe7dT9Qk/edit?usp=sharing

https://gemini.google.com/share/febad897a1d2

import React, { useState, useEffect } from 'react';

import {

Wallet,

Send,

PlusCircle,

ArrowDownCircle,

QrCode,

History,

User,

Bell,

ShieldCheck,

Smartphone,

Zap,

Tv,

CreditCard,

LayoutGrid,

ChevronRight,

MoreHorizontal,

Wrench,

BookOpen,

Monitor,

GraduationCap,

Bot,

Code2,

ExternalLink

} from 'lucide-react';

const App = () => {

const [balance, setBalance] = useState(17945067480);

const [activeTab, setActiveTab] = useState('beranda');

const [notifications, setNotifications] = useState(3);

const [showScanner, setShowScanner] = useState(false);

// URL gambar QR Code yang diunggah

const myQRCodeUrl = "https://files.oaiusercontent.com/file-2E8w997fE7J53N4mE09KkPz0?se=2024-10-24T08%3A45%3A00Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D604800%2C%20immutable%2C%20private&rscd=attachment%3B%20filename%3Dsuryo.png&sig=8y%2Bt9z9vYpPz6p3y/E%2BSvP6yYpPz6p3y/E%2BSvP6yYpPz6p3y/E%3D";

const transactions = [

{ id: 1, title: 'Pembayaran PLN', amount: -15500000, date: '26 Feb 2024', type: 'bill' },

{ id: 2, title: 'Transfer dari Budi', amount: 500000, date: '23 Feb 2024', type: 'income' },

{ id: 3, title: 'Starbucks Coffee', amount: -55000, date: '22 Feb 2024', type: 'merchant' },

{ id: 4, title: 'Top Up Saldo', amount: 200000, date: '21 Feb 2024', type: 'topup' },

];

const formatCurrency = (value) => {

return new Intl.NumberFormat('id-ID', {

style: 'currency',

currency: 'IDR',

minimumFractionDigits: 0

}).format(value);

};

const renderHome = () => (

<div className="pb-24">

{/* Top Bar */}

<div className="bg-[#118EEA] p-4 text-white sticky top-0 z-10 shadow-md">

<div className="flex justify-between items-center mb-6">

<div className="flex items-center gap-2">

<div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">

<User className="text-[#118EEA] size-5" />

</div>

<span className="font-semibold text-sm">Halo, Suryo Garage Boat</span>

</div>

<div className="flex gap-4">

<div className="relative">

<Bell className="size-6" />

{notifications > 0 && (

<span className="absolute -top-1 -right-1 bg-red-500 text-[10px] w-4 h-4 rounded-full flex items-center justify-center border-2 border-[#118EEA]">

{notifications}

</span>

)}

</div>

<ShieldCheck className="size-6" />

</div>

</div>

<div className="bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/20">

<div className="flex justify-between items-start">

<div>

<p className="text-xs opacity-80 mb-1">Saldo DANA</p>

<h1 className="text-2xl font-bold">{formatCurrency(balance)}</h1>

</div>

<div className="bg-white/20 px-3 py-1 rounded-full text-[10px] font-bold">

PREMIUM

</div>

</div>

</div>

</div>

{/* Quick Actions */}

<div className="bg-[#118EEA] px-4 pb-6 flex justify-between items-center text-white text-xs">

<div className="flex flex-col items-center gap-2 cursor-pointer hover:opacity-80">

<div className="bg-white/20 p-3 rounded-xl"><PlusCircle /></div>

<span>Top Up</span>

</div>

<div className="flex flex-col items-center gap-2 cursor-pointer hover:opacity-80">

<div className="bg-white/20 p-3 rounded-xl"><Send /></div>

<span>Kirim</span>

</div>

<div className="flex flex-col items-center gap-2 cursor-pointer hover:opacity-80">

<div className="bg-white/20 p-3 rounded-xl"><ArrowDownCircle /></div>

<span>Minta</span>

</div>

<div className="flex flex-col items-center gap-2 cursor-pointer hover:opacity-80">

<div className="bg-white/20 p-3 rounded-xl"><History /></div>

<span>Riwayat</span>

</div>

</div>

{/* Main Services Grid */}

<div className="bg-white rounded-t-3xl -mt-4 p-6 grid grid-cols-4 gap-y-6 text-center text-[11px] font-medium text-gray-600">

<a href="https://suryo26edu.blogspot.com/" target="_blank" rel="noopener noreferrer">

<ServiceItem icon={<BookOpen className="text-blue-600" />} label="Materi TBSM" />

</a>

<a href="https://suryo26edu.blogspot.com/" target="_blank" rel="noopener noreferrer">

<ServiceItem icon={<Monitor className="text-indigo-500" />} label="Materi Informatika" />

</a>

<a href="https://docs.google.com/spreadsheets/d/1R5DusKNoQcKEyktDpjSZFiQ-gSt1682n_kqBzsPzlQI/edit?usp=sharing" target="_blank" rel="noopener noreferrer">

<ServiceItem icon={<GraduationCap className="text-red-500" />} label="Nilai" />

</a>

<ServiceItem icon={<Bot className="text-purple-600" />} label="Robotik" />

<ServiceItem icon={<div className="bg-orange-100 p-1 rounded"><LayoutGrid className="text-orange-500" /></div>} label="Semua" />

<ServiceItem icon={<div className="bg-green-100 p-1 rounded"><Code2 className="text-green-600" /></div>} label="Coding" />

<a href="https://lynk.id/suryo26" target="_blank" rel="noopener noreferrer">

<ServiceItem icon={<div className="bg-pink-100 p-1 rounded"><ExternalLink className="text-pink-600" /></div>} label="Lynk" />

</a>

<ServiceItem icon={<MoreHorizontal className="text-gray-400" />} label="Lainnya" />

</div>

{/* Promo Banner */}

<div className="px-4 mt-4">

<div className="bg-gradient-to-r from-blue-600 to-blue-400 rounded-2xl p-4 text-white relative overflow-hidden h-32 flex items-center">

<div className="z-10">

<h3 className="font-bold text-lg leading-tight">Materi Service<br/>Sepeda Motor!</h3>

<button className="mt-2 bg-white text-blue-600 text-[10px] font-bold px-3 py-1 rounded-full uppercase">Pelajari</button>

</div>

<div className="absolute right-[-20px] bottom-[-10px] opacity-20 transform rotate-12">

<Wrench size={120} />

</div>

</div>

</div>

{/* Recent Activity */}

<div className="px-4 mt-8">

<div className="flex justify-between items-center mb-4">

<h2 className="font-bold text-gray-800">Aktivitas Terkini</h2>

<button className="text-[#118EEA] text-sm font-semibold">Lihat Semua</button>

</div>

<div className="space-y-4">

{transactions.map(tx => (

<div key={tx.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">

<div className="flex items-center gap-3">

<div className={`p-2 rounded-lg ${tx.amount > 0 ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'}`}>

{tx.amount > 0 ? <ArrowDownCircle size={20} /> : <Zap size={20} />}

</div>

<div>

<p className="text-sm font-semibold text-gray-800">{tx.title}</p>

<p className="text-[10px] text-gray-500">{tx.date}</p>

</div>

</div>

<p className={`text-sm font-bold ${tx.amount > 0 ? 'text-green-600' : 'text-gray-800'}`}>

{tx.amount > 0 ? '+' : ''}{formatCurrency(tx.amount).replace('Rp', 'Rp ')}

</p>

</div>

))}

</div>

</div>

</div>

);

const renderHistory = () => (

<div className="p-4">

<h1 className="text-xl font-bold mb-4">Riwayat Transaksi</h1>

<div className="bg-white rounded-xl shadow-sm border p-4 text-center text-gray-500">

Filter berdasarkan tanggal dan jenis transaksi...

</div>

<div className="mt-4 space-y-4">

{transactions.map(tx => (

<div key={tx.id} className="flex justify-between items-center border-b pb-3">

<div>

<p className="font-medium">{tx.title}</p>

<p className="text-xs text-gray-400">{tx.date}</p>

</div>

<p className={`font-bold ${tx.amount > 0 ? 'text-green-500' : 'text-red-500'}`}>

{tx.amount > 0 ? '+' : ''}{formatCurrency(tx.amount)}

</p>

</div>

))}

</div>

</div>

);

return (

<div className="max-w-md mx-auto min-h-screen bg-white font-sans text-gray-900 shadow-2xl relative">

{activeTab === 'beranda' && renderHome()}

{activeTab === 'riwayat' && renderHistory()}

{activeTab === 'dompet' && <div className="p-8 text-center mt-20 font-medium text-gray-500">Fitur Dompet Segera Datang</div>}

{activeTab === 'saya' && (

<div className="p-8 text-center mt-20">

<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-blue-500">

<User className="text-blue-500 size-10" />

</div>

<h2 className="text-xl font-bold">Suryo Garage Boat</h2>

<p className="text-gray-500 text-sm">0812-****-5678</p>

<div className="mt-6 space-y-2">

<div className="p-4 bg-gray-50 rounded-xl text-left flex justify-between items-center">

<span>Pengaturan Akun</span>

<ChevronRight size={18} />

</div>

<div className="p-4 bg-gray-50 rounded-xl text-left flex justify-between items-center">

<span>Pusat Bantuan</span>

<ChevronRight size={18} />

</div>

</div>

</div>

)}

{/* Tombol QR Utama */}

<button

onClick={() => setShowScanner(!showScanner)}

className="fixed bottom-20 left-1/2 -translate-x-1/2 z-30 bg-blue-500 text-white p-4 rounded-full shadow-lg border-4 border-white hover:bg-blue-600 transition-transform active:scale-90"

>

<QrCode size={32} />

</button>

<nav className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-100 px-6 py-3 flex justify-between items-center z-20">

<NavItem active={activeTab === 'beranda'} onClick={() => setActiveTab('beranda')} icon={<LayoutGrid />} label="Beranda" />

<NavItem active={activeTab === 'riwayat'} onClick={() => setActiveTab('riwayat')} icon={<History />} label="Riwayat" />

<div className="w-12"></div>

<NavItem active={activeTab === 'dompet'} onClick={() => setActiveTab('dompet')} icon={<Wallet />} label="Dompet" />

<NavItem active={activeTab === 'saya'} onClick={() => setActiveTab('saya')} icon={<User />} label="Saya" />

</nav>

{/* Tampilan QR Code (Overlay) */}

{showScanner && (

<div className="fixed inset-0 z-50 bg-black flex flex-col items-center justify-center p-6 text-white">

<div className="w-72 h-72 bg-white rounded-2xl p-4 flex items-center justify-center mb-8 relative shadow-[0_0_20px_rgba(255,255,255,0.3)]">

{/* Sudut Frame Putih */}

<div className="absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-blue-500 rounded-tl-lg"></div>

<div className="absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-blue-500 rounded-tr-lg"></div>

<div className="absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-blue-500 rounded-bl-lg"></div>

<div className="absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-blue-500 rounded-br-lg"></div>

{/* Gambar QR Code Anda */}

<img

src={myQRCodeUrl}

alt="QR Code Suryo"

className="w-full h-full object-contain rounded-lg"

onError={(e) => {

e.target.src = "https://via.placeholder.com/300?text=QR+Error";

}}

/>

</div>

<h2 className="text-xl font-bold mb-2">QRIS Saya</h2>

<p className="text-gray-400 text-center text-sm mb-8 px-8">

Tunjukkan kode ini kepada pelanggan untuk menerima pembayaran secara cepat.

</p>

<button

onClick={() => setShowScanner(false)}

className="bg-white/10 px-8 py-3 rounded-full font-bold hover:bg-white/20 transition-colors border border-white/20"

>

Tutup

</button>

</div>

)}

</div>

);

};

const ServiceItem = ({ icon, label }) => (

<div className="flex flex-col items-center gap-2 group cursor-pointer">

<div className="p-2 group-hover:bg-gray-100 rounded-xl transition-colors">

{icon}

</div>

<span className="leading-tight">{label}</span>

</div>

);

const NavItem = ({ icon, label, active, onClick }) => (

<button

onClick={onClick}

className={`flex flex-col items-center gap-1 transition-colors ${active ? 'text-[#118EEA]' : 'text-gray-400 hover:text-gray-600'}`}

>

{React.cloneElement(icon, { size: 24 })}

<span className="text-[10px] font-bold uppercase tracking-wider">{label}</span>

</button>

);

export default App;