✅
Berhasil! Data anggota berhasil disimpan
OK
`);
printWindow.document.close();
// Auto focus and show print dialog after a short delay
setTimeout(() => {
printWindow.focus();
}, 500);
showSuccessModal('Jendela cetak telah dibuka! Klik tombol Cetak untuk mencetak kartu.');
});
}function loadMembersTable() {
const tbody = document.getElementById('membersTableBody');
if (members.length === 0) {
tbody.innerHTML = `
Belum ada data anggota. Silakan tambah anggota baru di tab Formulir.
`;
return;
}tbody.innerHTML = members.map(member => {
const expiryDate = member.cardExpiryDate ? new Date(member.cardExpiryDate) : null;
const today = new Date();
const isExpired = expiryDate && today > expiryDate;
let expiryText = 'Tidak ada data';
let expiryClass = 'text-gray-500';
if (expiryDate) {
expiryText = formatDate(member.cardExpiryDate);
expiryClass = isExpired ? 'text-red-600' : 'text-green-600';
if (isExpired) {
expiryText = `⚠️ EXPIRED: ${expiryText}`;
} else {
expiryText = `✅ ${expiryText}`;
}
}
return `
${member.photo ?
`
` :
'
👤 '
}
${member.id} ${member.fullName} ${member.nik} ${formatDate(member.birthDate)} ${member.phone}
${expiryText}
✏️ Edit
🗑️ Hapus
👁️ Lihat
`;
}).join('');
}function searchMembers() {
const query = document.getElementById('searchInput').value.toLowerCase();
const filteredMembers = members.filter(member =>
member.fullName.toLowerCase().includes(query) ||
member.nik.includes(query) ||
member.id.toLowerCase().includes(query)
);
const tbody = document.getElementById('membersTableBody');
if (filteredMembers.length === 0) {
tbody.innerHTML = `
Tidak ada data yang cocok dengan pencarian "${query}".
`;
return;
}tbody.innerHTML = filteredMembers.map(member => {
const expiryDate = member.cardExpiryDate ? new Date(member.cardExpiryDate) : null;
const today = new Date();
const isExpired = expiryDate && today > expiryDate;
let expiryText = 'Tidak ada data';
let expiryClass = 'text-gray-500';
if (expiryDate) {
expiryText = formatDate(member.cardExpiryDate);
expiryClass = isExpired ? 'text-red-600' : 'text-green-600';
if (isExpired) {
expiryText = `⚠️ EXPIRED: ${expiryText}`;
} else {
expiryText = `✅ ${expiryText}`;
}
}
return `
${member.photo ?
`
` :
'
👤 '
}
${member.id} ${member.fullName} ${member.nik} ${formatDate(member.birthDate)} ${member.phone}
${expiryText}
✏️ Edit
🗑️ Hapus
👁️ Lihat
`;
}).join('');
}function editMember(id) {
const member = members.find(m => m.id === id);
if (!member) return;// Fill form with member data
document.getElementById('fullName').value = member.fullName;
document.getElementById('nik').value = member.nik;
document.getElementById('birthDate').value = member.birthDate;
document.getElementById('address').value = member.address;
document.getElementById('village').value = member.village || '';
document.getElementById('regency').value = member.regency || '';
document.getElementById('province').value = member.province || '';
document.getElementById('phone').value = member.phone;
document.getElementById('memberId').value = member.id;
// Set dates
if (member.cardCreationDate) {
document.getElementById('cardCreationDate').value = member.cardCreationDate;
}
if (member.cardExpiryDate) {
document.getElementById('cardExpiryDate').value = member.cardExpiryDate;
}// Set photo if exists
if (member.photo) {
document.getElementById('photoPreview').innerHTML = `
`;
document.getElementById('cardPhoto').innerHTML = `
`;
}currentMember = member;
updatePreview();
showTab('form');
}function deleteMember(id) {
if (confirm('Yakin ingin menghapus anggota ini?')) {
members = members.filter(m => m.id !== id);
localStorage.setItem('members', JSON.stringify(members));
updateMemberCount();
loadMembersTable();
showSuccessModal('Anggota berhasil dihapus!');
}
}function previewMember(id) {
const member = members.find(m => m.id === id);
if (!member) return;currentMember = member;
// Update preview
document.getElementById('cardName').textContent = member.fullName.toUpperCase();
document.getElementById('cardId').textContent = `ID: ${member.id}`;
// Update location
const locationText = (member.village && member.regency && member.province) ?
`${member.village}, ${member.regency}, ${member.province}` :
'Desa, Kabupaten, Provinsi';
document.getElementById('cardLocation').textContent = locationText;
// Update birth date
const birthText = member.birthDate ? `Lahir: ${formatDate(member.birthDate)}` : 'Lahir: -';
document.getElementById('cardBirth').textContent = birthText;
// Use stored expiry date
if (member.cardExpiryDate) {
const expiryDate = new Date(member.cardExpiryDate);
const today = new Date();
const isExpired = today > expiryDate;
const expiryText = isExpired ?
`⚠️ EXPIRED: ${formatDate(member.cardExpiryDate)}` :
`Berlaku s/d: ${formatDate(member.cardExpiryDate)}`;
document.getElementById('cardExpiry').textContent = expiryText;
document.getElementById('cardExpiry').style.color = isExpired ? '#dc2626' : 'white';
document.getElementById('cardExpiry').style.fontWeight = isExpired ? 'bold' : 'normal';
// Update status based on expiry
const statusText = isExpired ?
'⚠️ Kartu sudah expired! Perlu diperpanjang.' :
'Kartu siap diunduh!';
document.getElementById('previewStatus').textContent = statusText;
} else {
document.getElementById('cardExpiry').textContent = 'Berlaku s/d: -';
document.getElementById('cardExpiry').style.color = 'white';
document.getElementById('cardExpiry').style.fontWeight = 'normal';
document.getElementById('previewStatus').textContent = 'Kartu siap diunduh!';
}
if (member.photo) {
document.getElementById('cardPhoto').innerHTML = `
`;
} else {
document.getElementById('cardPhoto').innerHTML = '
👤 ';
}
showTab('preview');
}function clearAllData() {
if (confirm('Yakin ingin menghapus SEMUA data anggota? Tindakan ini tidak dapat dibatalkan!')) {
members = [];
localStorage.setItem('members', JSON.stringify(members));
updateMemberCount();
loadMembersTable();
showSuccessModal('Semua data anggota berhasil dihapus!');
}
}function exportToExcel() {
if (members.length === 0) {
alert('Tidak ada data untuk diekspor!');
return;
}const csvContent = [
['ID Anggota', 'Nama Lengkap', 'NIK', 'Tanggal Lahir', 'Alamat', 'Desa/Kelurahan', 'Kabupaten/Kota', 'Provinsi', 'No. HP', 'Tanggal Pembuatan', 'Masa Berlaku', 'Status'],
...members.map(member => {
const expiryDate = member.cardExpiryDate ? new Date(member.cardExpiryDate) : null;
const today = new Date();
const isExpired = expiryDate && today > expiryDate;
const status = isExpired ? 'EXPIRED' : 'AKTIF';
return [
member.id,
member.fullName,
member.nik,
member.birthDate,
member.address,
member.village || '-',
member.regency || '-',
member.province || '-',
member.phone,
member.cardCreationDate || new Date(member.createdAt).toISOString().split('T')[0],
member.cardExpiryDate || '-',
status
];
})
].map(row => row.join(',')).join('\n');const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `data-anggota-koperasi-${new Date().toISOString().split('T')[0]}.csv`;
link.click();
showSuccessModal('Data berhasil diekspor ke CSV!');
}function updateMemberCount() {
document.getElementById('totalMembers').textContent = members.length;
}function showSuccessModal(message) {
document.getElementById('successMessage').textContent = message;
document.getElementById('successModal').classList.remove('hidden');
document.getElementById('successModal').classList.add('flex');
}function closeModal() {
document.getElementById('successModal').classList.add('hidden');
document.getElementById('successModal').classList.remove('flex');
}
` :
'👤'
}