KARTU NUPTK

import React, { useState, useRef } from 'react'; import { NuptkForm } from '@/components/NuptkForm'; import { NuptkCard } from '@/components/NuptkCard'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; import { Download, Printer, Eye, Sparkles, RotateCcw, CreditCard } from 'lucide-react'; import { generateHighQualityCard, downloadCard, printCard } from '@/lib/cardGenerator'; interface FormData { photo: File | null; photoPreview: string; schoolLogo: File | null; schoolLogoPreview: string; nuptk: string; name: string; schoolName: string; birthPlace: string; birthDate: string; gender: string; } export default function Index() { const [formData, setFormData] = useState({ photo: null, photoPreview: '', schoolLogo: null, schoolLogoPreview: '', nuptk: '', name: '', schoolName: '', birthPlace: '', birthDate: '', gender: '' }); const [isGenerating, setIsGenerating] = useState(false); const [showBothSides, setShowBothSides] = useState(false); const [activeCard, setActiveCard] = useState<'front' | 'back'>('front'); const frontCardRef = useRef(null); const backCardRef = useRef(null); const handleFormChange = (data: FormData) => { setFormData(data); }; const handleGenerateCard = () => { setShowBothSides(true); // Scroll to preview section const previewSection = document.getElementById('preview-section'); if (previewSection) { previewSection.scrollIntoView({ behavior: 'smooth' }); } }; const handlePrint = () => { const cardRef = activeCard === 'front' ? frontCardRef : backCardRef; if (cardRef.current) { printCard(cardRef.current); } }; const handleDownload = async (side: 'front' | 'back') => { const cardRef = side === 'front' ? frontCardRef : backCardRef; if (cardRef.current) { setIsGenerating(true); try { const dataUrl = await generateHighQualityCard(cardRef.current); if (dataUrl) { const filename = `kartu-nuptk-${side === 'front' ? 'depan' : 'belakang'}-${formData.name.replace(/\s+/g, '-').toLowerCase() || 'unnamed'}.png`; downloadCard(dataUrl, filename); } } catch (error) { console.error('Error downloading card:', error); alert('Terjadi kesalahan saat mengunduh kartu. Silakan coba lagi.'); } finally { setIsGenerating(false); } } }; const handleDownloadBoth = async () => { setIsGenerating(true); try { const baseName = formData.name.replace(/\s+/g, '-').toLowerCase() || 'unnamed'; // Download front if (frontCardRef.current) { const frontDataUrl = await generateHighQualityCard(frontCardRef.current); if (frontDataUrl) { downloadCard(frontDataUrl, `kartu-nuptk-depan-${baseName}.png`); } } // Wait and download back setTimeout(async () => { if (backCardRef.current) { const backDataUrl = await generateHighQualityCard(backCardRef.current); if (backDataUrl) { downloadCard(backDataUrl, `kartu-nuptk-belakang-${baseName}.png`); } } setIsGenerating(false); }, 1500); } catch (error) { console.error('Error downloading cards:', error); alert('Terjadi kesalahan saat mengunduh kartu. Silakan coba lagi.'); setIsGenerating(false); } }; const formatBirthDate = (date: string) => { if (!date) return ''; const d = new Date(date); return d.toLocaleDateString('id-ID', { day: '2-digit', month: '2-digit', year: 'numeric' }); }; const isFormComplete = formData.nuptk && formData.name && formData.schoolName && formData.birthPlace && formData.birthDate && formData.gender; return (

{/* Header */}

Cetak Kartu NUPTK Premium

Standar ISO/IEC 7810 ID-1 (85.60mm x 53.98mm) - Ultra HD Quality

v2.3 by Jamil Saiful

{/* Main Content */}

{/* Form Section */}

{/* Preview Section */}

Preview Kartu NUPTK Ultra HD

{showBothSides && (

)}

Download: 1012x638px (300 DPI) - Tampilan Depan dan Belakang

{/* Both Cards Preview */} {showBothSides ? (

{/* Side by Side Preview */}

Preview Kedua Sisi Kartu

{/* Front Card */}

Sisi Depan

{/* Back Card */}

Sisi Belakang

{/* Large Single Card View */}

) : (

Silakan isi form untuk melihat preview kartu

Kartu akan ditampilkan setelah semua field diisi

)} {/* Action Buttons */} {showBothSides && isFormComplete && ( <>

{/* Main Actions */}

✨ Spesifikasi Download Ultra HD:

• • Resolusi: 1012x638 pixels (300 DPI print-ready)
• • Ukuran: 85.60mm x 53.98mm (3.37" x 2.125")
• • Format: PNG berkualitas maksimal (lossless)
• • Ketebalan: 0.76mm (standar kartu kredit)
• • Sudut membulat sesuai ISO/IEC 7810 ID-1
• • QR Code terintegrasi dengan link resmi GTK
• • Siap cetak di percetakan profesional

Bagi yang Ingin Dibantu Cetak Dalam Bentuk Fisik Bisa Klik di link marketplace kesukaan anda dibawah ini.

{/* Marketplace Links */}

{/* Statistics */}

📊 898.847 orang mencetak kartu ini

)}

{/* Footer */}

Aplikasi Cetak Kartu NUPTK Premium

© 2024 Dikembangkan oleh Jamil Saiful - Aplikasi resmi untuk mencetak Kartu NUPTK dengan standar ISO internasional

Membantu pendidik dan tenaga kependidikan mencetak Kartu NUPTK dengan kualitas profesional dan dimensi yang tepat.

); }