F #2
Description
import React, { useState } from 'react';
import { Upload, FileText, Loader2, Check } from 'lucide-react';
const AboneSozlesmeOtomasyon = () => {
const [onYuz, setOnYuz] = useState(null);
const [arkaYuz, setArkaYuz] = useState(null);
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
adSoyad: '',
tcKimlikNo: '',
dogumTarihi: '',
babaAdi: '',
anneAdi: '',
mobilTel: '',
adres: '',
eposta: 'barank3306@gmail.com',
abonelikTipi: 'bireysel'
});
const [showContract, setShowContract] = useState(false);
const handleFileUpload = async (e, type) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
if (type === 'on') {
setOnYuz(event.target.result);
} else {
setArkaYuz(event.target.result);
}
};
reader.readAsDataURL(file);
};
const extractDataFromID = async () => {
if (!onYuz || !arkaYuz) {
alert('Lütfen kimliğin hem ön hem de arka yüzünü yükleyin!');
return;
}
setLoading(true);
try {
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 1000,
messages: [
{
role: "user",
content: [
{
type: "image",
source: {
type: "base64",
media_type: "image/jpeg",
data: onYuz.split(',')[1]
}
},
{
type: "image",
source: {
type: "base64",
media_type: "image/jpeg",
data: arkaYuz.split(',')[1]
}
},
{
type: "text",
text: `Bu Türkiye Cumhuriyeti kimlik kartının ön ve arka yüzünden şu bilgileri çıkar ve sadece JSON formatında döndür, başka hiçbir açıklama ekleme:
{
"adSoyad": "tam ad soyad",
"tcKimlikNo": "11 haneli TC kimlik numarası",
"dogumTarihi": "GG/AA/YYYY formatında doğum tarihi",
"babaAdi": "baba adı",
"anneAdi": "anne adı"
}
Sadece JSON döndür, başka hiçbir metin ekleme.`
}
]
}
],
})
});
const data = await response.json();
const textContent = data.content.find(item => item.type === "text")?.text || "";
// JSON'ı temizle ve parse et
const cleanJson = textContent.replace(/```json\n?/g, '').replace(/```\n?/g, '').trim();
const extractedData = JSON.parse(cleanJson);
setFormData(prev => ({
...prev,
...extractedData
}));
alert('Kimlik bilgileri başarıyla çıkarıldı!');
} catch (error) {
console.error('Hata:', error);
alert('Kimlik bilgileri çıkarılırken bir hata oluştu. Lütfen tekrar deneyin.');
} finally {
setLoading(false);
}
};
const handleInputChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = () => {
// Zorunlu alanları kontrol et
if (!formData.adSoyad || !formData.tcKimlikNo || !formData.mobilTel || !formData.adres) {
alert('Lütfen tüm zorunlu alanları doldurun!');
return;
}
setShowContract(true);
};
if (showContract) {
return (
Doldurulmuş Sözleşme
<button
onClick={() => setShowContract(false)}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
Düzenle
<div className="border-2 border-gray-300 rounded-lg p-6 space-y-4">
<div className="text-center mb-6">
<h2 className="text-xl font-bold">GESNET ABONELİK SÖZLEŞMESİ</h2>
<p className="text-sm text-gray-600 mt-2">Bireysel Abonelik</p>
</div>
<div className="space-y-3">
<div className="border-b pb-2">
<span className="font-semibold">Ad Soyad:</span>
<span className="ml-2">{formData.adSoyad}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">T.C. Kimlik No:</span>
<span className="ml-2">{formData.tcKimlikNo}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">Doğum Tarihi:</span>
<span className="ml-2">{formData.dogumTarihi}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">Baba Adı:</span>
<span className="ml-2">{formData.babaAdi}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">Anne Adı:</span>
<span className="ml-2">{formData.anneAdi}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">Mobil Tel:</span>
<span className="ml-2">{formData.mobilTel}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">E-posta Adresi:</span>
<span className="ml-2">{formData.eposta}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">Adres:</span>
<span className="ml-2">{formData.adres}</span>
</div>
<div className="border-b pb-2">
<span className="font-semibold">Abonelik Tipi:</span>
<span className="ml-2">Bireysel Abonelik</span>
</div>
</div>
<div className="mt-8 pt-6 border-t-2">
<p className="text-sm text-gray-600 mb-4">
Yukarıda belirtilen bilgilerin doğruluğunu onaylıyorum ve Gesnet Abonelik Sözleşmesi'ni okudum, anladım ve kabul ediyorum.
</p>
<div className="flex justify-between items-end">
<div>
<p className="text-sm font-semibold">İmza:</p>
<div className="w-48 h-16 border-b-2 border-gray-400 mt-2"></div>
</div>
<div>
<p className="text-sm font-semibold">Tarih: {new Date().toLocaleDateString('tr-TR')}</p>
</div>
</div>
</div>
</div>
<div className="mt-6 text-center">
<button
onClick={() => window.print()}
className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold"
>
Yazdır / PDF Olarak Kaydet
</button>
</div>
</div>
</div>
);
}
return (
Gesnet Abone Sözleşme Otomasyonu
<div className="space-y-6">
{/* Kimlik Yükleme Bölümü */}
<div className="bg-blue-50 p-6 rounded-lg">
<h2 className="text-xl font-semibold mb-4 text-gray-700">1. Kimlik Kartı Yükleme</h2>
<div className="grid md:grid-cols-2 gap-4">
<div className="border-2 border-dashed border-blue-300 rounded-lg p-6 text-center">
<input
type="file"
accept="image/*"
onChange={(e) => handleFileUpload(e, 'on')}
className="hidden"
id="on-yuz"
/>
<label htmlFor="on-yuz" className="cursor-pointer">
{onYuz ? (
<div>
<img src={onYuz} alt="Ön Yüz" className="max-h-40 mx-auto rounded mb-2" />
<Check className="w-6 h-6 text-green-600 mx-auto" />
<p className="text-sm text-green-600 font-semibold">Ön yüz yüklendi</p>
</div>
) : (
<div>
<Upload className="w-12 h-12 text-blue-400 mx-auto mb-2" />
<p className="font-semibold text-gray-700">Kimlik Ön Yüzü</p>
<p className="text-sm text-gray-500">Tıklayarak yükleyin</p>
</div>
)}
</label>
</div>
<div className="border-2 border-dashed border-blue-300 rounded-lg p-6 text-center">
<input
type="file"
accept="image/*"
onChange={(e) => handleFileUpload(e, 'arka')}
className="hidden"
id="arka-yuz"
/>
<label htmlFor="arka-yuz" className="cursor-pointer">
{arkaYuz ? (
<div>
<img src={arkaYuz} alt="Arka Yüz" className="max-h-40 mx-auto rounded mb-2" />
<Check className="w-6 h-6 text-green-600 mx-auto" />
<p className="text-sm text-green-600 font-semibold">Arka yüz yüklendi</p>
</div>
) : (
<div>
<Upload className="w-12 h-12 text-blue-400 mx-auto mb-2" />
<p className="font-semibold text-gray-700">Kimlik Arka Yüzü</p>
<p className="text-sm text-gray-500">Tıklayarak yükleyin</p>
</div>
)}
</label>
</div>
</div>
<button
onClick={extractDataFromID}
disabled={!onYuz || !arkaYuz || loading}
className="mt-4 w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
{loading ? (
<>
<Loader2 className="w-5 h-5 animate-spin" />
Bilgiler Çıkarılıyor...
</>
) : (
'Kimlikten Bilgileri Çıkar'
)}
</button>
</div>
{/* Form Bölümü */}
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-700">2. Abone Bilgileri</h2>
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Ad Soyad *
</label>
<input
type="text"
name="adSoyad"
value={formData.adSoyad}
onChange={handleInputChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
T.C. Kimlik No *
</label>
<input
type="text"
name="tcKimlikNo"
value={formData.tcKimlikNo}
onChange={handleInputChange}
maxLength={11}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Doğum Tarihi
</label>
<input
type="text"
name="dogumTarihi"
value={formData.dogumTarihi}
onChange={handleInputChange}
placeholder="GG/AA/YYYY"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Mobil Tel *
</label>
<input
type="tel"
name="mobilTel"
value={formData.mobilTel}
onChange={handleInputChange}
placeholder="0555 555 55 55"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Baba Adı
</label>
<input
type="text"
name="babaAdi"
value={formData.babaAdi}
onChange={handleInputChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Anne Adı
</label>
<input
type="text"
name="anneAdi"
value={formData.anneAdi}
onChange={handleInputChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
E-posta Adresi
</label>
<input
type="email"
name="eposta"
value={formData.eposta}
onChange={handleInputChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
readOnly
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Adres *
</label>
<textarea
name="adres"
value={formData.adres}
onChange={handleInputChange}
rows={3}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<button
onClick={handleSubmit}
className="w-full bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 flex items-center justify-center gap-2"
>
<FileText className="w-5 h-5" />
Sözleşmeyi Oluştur
</button>
</div>
</div>
</div>
</div>
);
};