feat: sunucu tarafı hesap altyapısı — Stripe webhook, kotalar, gerçek API anahtarı ve belge deposu
Denetlenen 5 teknik borç kalemi de kapatıldı:
1) Stripe webhook + gerçek yetkilendirme (ÖNCEDEN YOKTU)
- POST /api/billing/webhook — SDK'sız HMAC-SHA256 imza doğrulaması,
tekrar saldırısına karşı ±300sn zaman penceresi, timingSafeEqual
- checkout.session.completed / subscription.created|updated|deleted işlenir
- Ödeme → kullanıcının planı sunucuda güncellenir (önce ödeme hiçbir şeyi
değiştirmiyordu)
2) Plan kotaları GERÇEKTEN uygulanıyor (önce sadece tanımlıydı)
- server/entitlements.mjs: plan hakları + kotaKontrol()
- ekip, belge adedi/boyutu, API anahtarı kotaları sunucuda zorlanır
- Kota aşımında 402 + anlaşılır Türkçe mesaj; arayüzde KotaUyarisi bandı
- /api/me/plan: plan, haklar ve gerçek kullanım
3) Kullanıcı verisi localStorage'dan sunucuya taşındı
- server/user-store.mjs: kullanici_verisi tablosu (izinli anahtar listesi)
- AppContext girişte sunucudan yükler, değişiklikleri sunucuya yazar;
localStorage yalnızca çevrimdışı önbellek
- Artık cihaz değişince veri kaybolmuyor
4) API anahtarları gerçek (önce Math.random ile tarayıcıda üretiliyordu)
- Sunucuda crypto.randomBytes ile üretilir, YALNIZCA sha256 hash'i saklanır
- Ham değer bir kez gösterilir; verifyApiKey ile doğrulanır, son kullanım
izlenir, iptal anında geçerli olur
5) Belge deposu gerçek (önce boyut Math.random'dı, dosya hiç yüklenmiyordu)
- Dosyalar kalıcı volume'e yazılır, boyut GERÇEK bayt
- Auth'lu indirme (blob), silme diskten de siler, kota sunucuda uygulanır
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { AlertTriangle, X, ArrowRight } from 'lucide-react';
|
||||
|
||||
/** Plan kotası aşıldığında sunucudan gelen uyarıyı gösterir. */
|
||||
export const KotaUyarisi = () => {
|
||||
const { kotaUyarisi, setKotaUyarisi, setActiveTab } = useApp();
|
||||
if (!kotaUyarisi) return null;
|
||||
return (
|
||||
<div className="bg-amber-50 border border-amber-300 rounded-xl p-4 my-3 flex items-start gap-3">
|
||||
<AlertTriangle className="w-4 h-4 text-amber-700 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-amber-900 leading-relaxed flex-1">{kotaUyarisi}</p>
|
||||
<button onClick={() => { setKotaUyarisi(null); setActiveTab('planlar'); }}
|
||||
className="text-[11px] font-bold text-amber-900 hover:underline flex items-center gap-1 shrink-0">
|
||||
Planlar <ArrowRight className="w-3 h-3" />
|
||||
</button>
|
||||
<button onClick={() => setKotaUyarisi(null)} className="text-amber-600 hover:text-amber-900 shrink-0">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,174 +1,166 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { Code, Key, Webhook, Send, CheckCircle2, Copy, Plus, Lock, Globe, MessageSquare, Terminal, RefreshCw } from 'lucide-react';
|
||||
import confetti from 'canvas-confetti';
|
||||
import { listApiKeys, createApiKey, revokeApiKey } from '../../services/account';
|
||||
import { Webhook, Key, Plus, Trash2, Loader2, Copy, Check, AlertTriangle, ShieldCheck, Lock } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Gerçek API anahtarı yönetimi.
|
||||
* Anahtar sunucuda üretilir, YALNIZCA hash'i saklanır, ham değer bir kez gösterilir.
|
||||
* (Önceden tarayıcıda Math.random ile üretiliyor ve hiçbir yerde doğrulanmıyordu.)
|
||||
*/
|
||||
export const ApiWebhooks = () => {
|
||||
const { apiKeys, setApiKeys, webhooksConfig, setWebhooksConfig } = useApp();
|
||||
const [copiedKey, setCopiedKey] = useState(false);
|
||||
const [testSuccess, setTestSuccess] = useState(false);
|
||||
const { authUser } = useApp();
|
||||
const [durum, setDurum] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [hata, setHata] = useState(null);
|
||||
const [yeniAd, setYeniAd] = useState('');
|
||||
const [yeniAnahtar, setYeniAnahtar] = useState(null); // yalnızca bir kez gösterilir
|
||||
const [kopyalandi, setKopyalandi] = useState(false);
|
||||
|
||||
const handleGenerateApiKey = () => {
|
||||
const newKey = {
|
||||
id: 'key-' + Date.now(),
|
||||
name: 'Yeni Uygulama Anahtarı ' + (apiKeys.length + 1),
|
||||
key: 'ih_live_' + Math.random().toString(36).substring(2, 18),
|
||||
createdAt: new Date().toISOString().split('T')[0],
|
||||
lastUsed: 'Henüz Kullanılmadı'
|
||||
};
|
||||
setApiKeys(prev => [newKey, ...prev]);
|
||||
confetti({ particleCount: 50 });
|
||||
const yukle = () => {
|
||||
if (!authUser) return;
|
||||
listApiKeys().then(setDurum).catch((e) => setHata(e.message));
|
||||
};
|
||||
useEffect(yukle, [authUser]);
|
||||
|
||||
const olustur = async () => {
|
||||
setBusy(true); setHata(null); setYeniAnahtar(null);
|
||||
try {
|
||||
const d = await createApiKey(yeniAd || 'API Anahtarı');
|
||||
setYeniAnahtar(d.anahtar);
|
||||
setYeniAd('');
|
||||
yukle();
|
||||
} catch (e) { setHata(e.message); }
|
||||
finally { setBusy(false); }
|
||||
};
|
||||
|
||||
const handleSendTestWebhook = () => {
|
||||
setTestSuccess(true);
|
||||
confetti({ particleCount: 60 });
|
||||
setTimeout(() => setTestSuccess(false), 4000);
|
||||
const iptal = async (id) => {
|
||||
setBusy(true); setHata(null);
|
||||
try { setDurum(await revokeApiKey(id)); }
|
||||
catch (e) { setHata(e.message); }
|
||||
finally { setBusy(false); }
|
||||
};
|
||||
|
||||
const kopyala = (t) => {
|
||||
navigator.clipboard?.writeText(t);
|
||||
setKopyalandi(true);
|
||||
setTimeout(() => setKopyalandi(false), 2000);
|
||||
};
|
||||
|
||||
const limit = durum?.limit;
|
||||
const kilitli = limit === 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-linear-to-r from-slate-900 via-emerald-950 to-teal-900 text-white p-6 rounded-2xl shadow-lg border border-emerald-800/40 flex items-center justify-between">
|
||||
<div className="bg-linear-to-r from-slate-900 via-violet-950 to-indigo-900 text-white p-6 rounded-2xl shadow-lg border border-violet-800/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-emerald-600 text-white flex items-center justify-center font-black shadow-md">
|
||||
<div className="w-12 h-12 rounded-2xl bg-violet-600 flex items-center justify-center shadow-md">
|
||||
<Webhook className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-extrabold text-xl">API & Webhook Entegrasyon Yönetimi</h2>
|
||||
<p className="text-xs text-emerald-200 mt-0.5">ERP, SAP, Logo, Mikro muhasebe yazılımlarınız ve Slack/Teams kanallarınız ile çift yönlü canlı veri aktarımı.</p>
|
||||
<h2 className="font-extrabold text-xl">API Erişimi</h2>
|
||||
<p className="text-xs text-violet-200 mt-0.5">
|
||||
İhale verisini kendi sistemlerinize (ERP, CRM) taşımak için sunucu doğrulamalı API anahtarları.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* REST API Keys Section */}
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs space-y-4">
|
||||
{kilitli && (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3">
|
||||
<Lock className="w-4 h-4 text-amber-700 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-amber-900 leading-relaxed">
|
||||
API erişimi <strong>Kurumsal</strong> planda sunulur. Mevcut planınızda API anahtarı oluşturulamaz —
|
||||
Planlar sekmesinden yükseltebilirsiniz.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Yeni anahtar — yalnızca bir kez gösterilir */}
|
||||
{yeniAnahtar && (
|
||||
<div className="bg-emerald-50 border border-emerald-300 rounded-xl p-4 space-y-2">
|
||||
<p className="text-xs font-extrabold text-emerald-900 flex items-center gap-1.5">
|
||||
<ShieldCheck className="w-4 h-4" /> Anahtarınız oluşturuldu — bu değer bir daha gösterilmeyecek
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 bg-white border border-emerald-200 rounded-lg px-3 py-2 text-[11px] font-mono break-all">
|
||||
{yeniAnahtar.anahtar}
|
||||
</code>
|
||||
<button onClick={() => kopyala(yeniAnahtar.anahtar)}
|
||||
className="bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-3 py-2 rounded-lg flex items-center gap-1.5 shrink-0">
|
||||
{kopyalandi ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
{kopyalandi ? 'Kopyalandı' : 'Kopyala'}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-emerald-800">
|
||||
Sunucuda yalnızca anahtarın <strong>hash</strong>'i saklanır; ham değeri biz de göremeyiz. Güvenli bir yere kaydedin.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-xs p-5 space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||||
<div>
|
||||
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-emerald-600" /> REST API Canlı Erişim Anahtarları
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500">Geliştiricileriniz için RESTful JSON API anahtarları.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleGenerateApiKey}
|
||||
className="bg-emerald-600 hover:bg-emerald-500 text-white font-extrabold text-xs px-4 py-2 rounded-xl flex items-center gap-1.5 transition-colors shadow-xs"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Yeni API Anahtarı Üret</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{apiKeys.map(k => (
|
||||
<div key={k.id} className="bg-slate-50 p-4 rounded-xl border border-slate-200 flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<span className="font-bold text-xs text-slate-900">{k.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="bg-slate-900 text-amber-400 font-mono text-xs px-3 py-1 rounded-lg">
|
||||
{k.key}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(k.key);
|
||||
setCopiedKey(true);
|
||||
setTimeout(() => setCopiedKey(false), 2000);
|
||||
}}
|
||||
className="p-1.5 text-slate-500 hover:text-slate-900 hover:bg-slate-200 rounded-lg transition-colors text-xs font-bold flex items-center gap-1"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span>{copiedKey ? 'Kopyalandı!' : 'Kopyala'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-[11px] text-slate-500 font-medium space-y-0.5">
|
||||
<p>Oluşturulma: {k.createdAt}</p>
|
||||
<p>Son Kullanım: <strong className="text-emerald-700">{k.lastUsed}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Webhook Configuration & Slack / Teams Section */}
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs space-y-6">
|
||||
<div className="border-b border-slate-100 pb-3">
|
||||
<h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4 text-blue-600" /> Slack & Microsoft Teams Webhook Ayarları
|
||||
<Key className="w-4 h-4 text-violet-600" /> API Anahtarları
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500">İhale etkinlikleri gerçekleştiğinde anında bildirim alacağınız HTTP Webhook URL adresleri.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Slack Webhook URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={webhooksConfig.slackWebhookUrl}
|
||||
onChange={(e) => setWebhooksConfig({ ...webhooksConfig, slackWebhookUrl: e.target.value })}
|
||||
className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-xs font-mono text-slate-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Microsoft Teams Webhook URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={webhooksConfig.teamsWebhookUrl}
|
||||
onChange={(e) => setWebhooksConfig({ ...webhooksConfig, teamsWebhookUrl: e.target.value })}
|
||||
className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-xs font-mono text-slate-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Event Trigger Checkboxes */}
|
||||
<div className="space-y-3 pt-2">
|
||||
<label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Tetiklenecek Webhook Etkinlikleri</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{[
|
||||
{ key: 'newTenderMatch', title: '🟢 Yeni Uyumlu İhale Yayınlandığında' },
|
||||
{ key: 'tenderWon', title: '🏆 İhale Kazanıldığında ERP/Muhasebeye Gönder' },
|
||||
{ key: 'bidDeadlineAlert', title: '⚠️ İhale Son Başvurusuna 3 Saat Kala Uyar' },
|
||||
{ key: 'competitorActivity', title: '🛡️ İzlenen Rakip Firma Teklif Verince Bildir' }
|
||||
].map(item => (
|
||||
<label key={item.key} className="flex items-center gap-3 p-3 bg-slate-50 hover:bg-slate-100 rounded-xl border border-slate-200 cursor-pointer font-semibold text-xs text-slate-800">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={webhooksConfig.events[item.key]}
|
||||
onChange={(e) => setWebhooksConfig({
|
||||
...webhooksConfig,
|
||||
events: { ...webhooksConfig.events, [item.key]: e.target.checked }
|
||||
})}
|
||||
className="w-4 h-4 accent-emerald-600 rounded"
|
||||
/>
|
||||
<span>{item.title}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Test Webhook Button */}
|
||||
<div className="pt-2 flex items-center gap-3">
|
||||
<button
|
||||
onClick={handleSendTestWebhook}
|
||||
className="bg-slate-900 hover:bg-slate-800 text-white font-extrabold text-xs px-6 py-3 rounded-xl flex items-center gap-2 shadow-md transition-colors"
|
||||
>
|
||||
<Send className="w-4 h-4 text-emerald-400" />
|
||||
<span>Test Webhook Payload Gönder (HTTP 200 OK)</span>
|
||||
</button>
|
||||
|
||||
{testSuccess && (
|
||||
<span className="text-xs font-extrabold text-emerald-700 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-xl flex items-center gap-1.5 animate-fade-in">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-600" />
|
||||
<span>Test Webhook Başarıyla Slack & Teams Kanallarına İletildi! (HTTP 200 OK)</span>
|
||||
{durum && (
|
||||
<span className="text-[11px] text-slate-500">
|
||||
{durum.anahtarlar.length}{limit != null ? ` / ${limit}` : ''} anahtar
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!durum ? (
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400"><Loader2 className="w-3.5 h-3.5 animate-spin" /> yükleniyor…</div>
|
||||
) : durum.anahtarlar.length === 0 ? (
|
||||
<p className="text-xs text-slate-400">Henüz anahtar yok.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{durum.anahtarlar.map((k) => (
|
||||
<div key={k.id} className="flex items-center justify-between gap-3 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5">
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-bold text-slate-800">{k.ad}</p>
|
||||
<p className="text-[11px] font-mono text-slate-500">{k.onek}••••••••••••••••</p>
|
||||
<p className="text-[10px] text-slate-400 mt-0.5">
|
||||
Oluşturma: {new Date(k.olusturma).toLocaleDateString('tr-TR')}
|
||||
{' · '}
|
||||
{k.son_kullanim ? `son kullanım: ${new Date(k.son_kullanim).toLocaleString('tr-TR')}` : 'hiç kullanılmadı'}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => iptal(k.id)} disabled={busy}
|
||||
className="text-slate-400 hover:text-red-500 shrink-0" title="Anahtarı iptal et">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-2 border-t border-slate-100">
|
||||
<input value={yeniAd} onChange={(e) => setYeniAd(e.target.value)}
|
||||
placeholder="Anahtar adı (ör. ERP Entegrasyonu)" disabled={kilitli}
|
||||
className="flex-1 bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 text-xs disabled:opacity-50" />
|
||||
<button onClick={olustur} disabled={busy || kilitli}
|
||||
className="bg-violet-600 hover:bg-violet-500 disabled:opacity-40 text-white font-bold text-xs px-4 rounded-lg flex items-center gap-1.5">
|
||||
{busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Plus className="w-3.5 h-3.5" />} Oluştur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{hata && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-2.5 flex gap-2">
|
||||
<AlertTriangle className="w-3.5 h-3.5 text-red-600 shrink-0 mt-0.5" />
|
||||
<p className="text-[11px] text-red-800">{hata}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
|
||||
<p className="text-[11px] text-slate-600 leading-relaxed">
|
||||
<strong>Kullanım:</strong> İsteklerinize <code className="bg-white px-1 rounded border">Authorization: Bearer ih_live_…</code>
|
||||
{' '}başlığını ekleyin. Anahtar sunucuda doğrulanır, her kullanımda son kullanım zamanı güncellenir,
|
||||
iptal ettiğinizde anında geçersiz olur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,147 +1,156 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { FolderKanban, FileText, Upload, Plus, ShieldCheck, AlertCircle, CheckCircle2, Download, Trash2, Tag, Calendar } from 'lucide-react';
|
||||
import confetti from 'canvas-confetti';
|
||||
import { listDocuments, uploadDocument, deleteDocument, downloadDocument, formatBayt } from '../../services/account';
|
||||
import { FolderKanban, Upload, Trash2, Download, Loader2, AlertTriangle, FileText, HardDrive } from 'lucide-react';
|
||||
|
||||
const KATEGORILER = ['Yasal Belgeler', 'Kalite Belgeleri', 'Mali Belgeler', 'Resmi Kayıtlar', 'Teknik Belgeler', 'Diğer'];
|
||||
|
||||
/**
|
||||
* Gerçek belge deposu — dosyalar sunucudaki kalıcı diske yazılır,
|
||||
* boyut gerçek bayt cinsindendir ve plan kotası sunucu tarafında uygulanır.
|
||||
* (Önceden dosya hiç yüklenmiyordu; boyut Math.random ile uyduruluyordu.)
|
||||
*/
|
||||
export const DocumentVault = () => {
|
||||
const { vaultDocuments, setVaultDocuments, userProfile } = useApp();
|
||||
const [docName, setDocName] = useState('');
|
||||
const [category, setCategory] = useState('Kalite Belgeleri');
|
||||
const { authUser } = useApp();
|
||||
const [durum, setDurum] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [hata, setHata] = useState(null);
|
||||
const [kategori, setKategori] = useState(KATEGORILER[0]);
|
||||
const dosyaRef = useRef(null);
|
||||
|
||||
const handleAddDocument = (e) => {
|
||||
e.preventDefault();
|
||||
if (!docName.trim()) return;
|
||||
const yukle = () => {
|
||||
if (!authUser) return;
|
||||
listDocuments().then(setDurum).catch((e) => setHata(e.message));
|
||||
};
|
||||
useEffect(yukle, [authUser]);
|
||||
|
||||
const newDoc = {
|
||||
id: 'doc-' + Date.now(),
|
||||
name: docName.endsWith('.pdf') ? docName : docName + '.pdf',
|
||||
category,
|
||||
size: (Math.random() * 2 + 0.5).toFixed(1) + ' MB',
|
||||
updatedAt: new Date().toISOString().split('T')[0],
|
||||
expiresAt: '2027-12-31',
|
||||
status: 'Geçerli'
|
||||
};
|
||||
|
||||
setVaultDocuments(prev => [newDoc, ...prev]);
|
||||
setDocName('');
|
||||
confetti({ particleCount: 60 });
|
||||
const dosyaSecildi = async (e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (!f) return;
|
||||
setBusy(true); setHata(null);
|
||||
try {
|
||||
setDurum(await uploadDocument(f, kategori));
|
||||
} catch (err) {
|
||||
setHata(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
if (dosyaRef.current) dosyaRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const deleteDoc = (id) => {
|
||||
setVaultDocuments(prev => prev.filter(d => d.id !== id));
|
||||
const sil = async (id) => {
|
||||
setBusy(true); setHata(null);
|
||||
try { setDurum(await deleteDocument(id)); }
|
||||
catch (e) { setHata(e.message); }
|
||||
finally { setBusy(false); }
|
||||
};
|
||||
|
||||
const k = durum?.kullanim;
|
||||
const h = durum?.haklar;
|
||||
const doluluk = h?.bayt ? Math.min(100, Math.round(((k?.bayt || 0) / h.bayt) * 100)) : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-linear-to-r from-slate-900 via-blue-950 to-indigo-900 text-white p-6 rounded-2xl shadow-lg border border-blue-800/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
<div className="bg-linear-to-r from-slate-900 via-teal-950 to-cyan-900 text-white p-6 rounded-2xl shadow-lg border border-teal-800/40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-600 text-white flex items-center justify-center font-black shadow-md">
|
||||
<div className="w-12 h-12 rounded-2xl bg-teal-600 flex items-center justify-center shadow-md">
|
||||
<FolderKanban className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="font-extrabold text-xl">Doküman ve Teklif Deposu</h2>
|
||||
<span className="bg-emerald-500 text-slate-950 text-[10px] font-extrabold px-2.5 py-0.5 rounded-full uppercase tracking-wider">
|
||||
Resmi Evrak Kütüphanesi
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-blue-200 mt-0.5">Sık kullanılan resmi belgelerinizi (İmza sirküleri, ISO, ÜTS, Faaliyet Belgesi) tek yerde saklayın; ihale teklif paketine saniyeler içinde ekleyin.</p>
|
||||
<h2 className="font-extrabold text-xl">Belge Kasası</h2>
|
||||
<p className="text-xs text-teal-200 mt-0.5">
|
||||
İhale dosyalarınıza her cihazdan erişin — belgeler sunucuda saklanır, tarayıcınızda değil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Document Form */}
|
||||
<form onSubmit={handleAddDocument} className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs flex flex-col md:flex-row gap-3 items-end">
|
||||
<div className="flex-1 space-y-1.5 w-full">
|
||||
<label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Yeni Doküman Adı</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={docName}
|
||||
onChange={(e) => setDocName(e.target.value)}
|
||||
placeholder="Örn: 2026 ISO 9001 Kalite Belgesi.pdf"
|
||||
className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-xs font-semibold text-slate-900 focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-64 space-y-1.5">
|
||||
<label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Kategori</label>
|
||||
<select
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2.5 text-xs font-semibold text-slate-900"
|
||||
>
|
||||
<option>Yasal Belgeler</option>
|
||||
<option>Kalite Belgeleri</option>
|
||||
<option>Tıbbi Cihaz Kaydı</option>
|
||||
<option>Resmi Kayıtlar</option>
|
||||
<option>Mali Belgeler</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full md:w-auto bg-blue-600 hover:bg-blue-500 text-white font-extrabold text-xs px-6 py-3 rounded-xl flex items-center justify-center gap-2 shadow-md transition-colors shrink-0"
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
<span>Depoya Ekle</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Documents Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{vaultDocuments.map((doc) => (
|
||||
<div key={doc.id} className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs hover:shadow-md transition-all space-y-3 flex flex-col justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="bg-slate-100 text-slate-700 font-bold text-[10px] px-2.5 py-1 rounded-lg border border-slate-200 flex items-center gap-1">
|
||||
<Tag className="w-3 h-3 text-blue-600" /> {doc.category}
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full flex items-center gap-1">
|
||||
<ShieldCheck className="w-3 h-3" /> {doc.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 pt-1">
|
||||
<div className="w-10 h-10 rounded-xl bg-red-50 text-red-600 border border-red-200 flex items-center justify-center shrink-0 font-black">
|
||||
<FileText className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-xs text-slate-900 leading-snug line-clamp-2">{doc.name}</h4>
|
||||
<p className="text-[10px] text-slate-400 mt-0.5">Boyut: {doc.size}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Kullanım */}
|
||||
{durum && (
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-xs p-5 space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="font-bold text-slate-800 flex items-center gap-1.5">
|
||||
<HardDrive className="w-3.5 h-3.5 text-teal-600" /> Kullanım
|
||||
</span>
|
||||
<span className="text-slate-600 font-semibold">
|
||||
{k.adet}{h?.adet != null ? ` / ${h.adet}` : ''} belge · {formatBayt(k.bayt)}
|
||||
{h?.bayt != null && ` / ${formatBayt(h.bayt)}`}
|
||||
</span>
|
||||
</div>
|
||||
{h?.bayt != null && (
|
||||
<div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
|
||||
<div className={`h-2 rounded-full transition-all ${doluluk > 90 ? 'bg-red-500' : doluluk > 70 ? 'bg-amber-500' : 'bg-teal-600'}`}
|
||||
style={{ width: `${doluluk}%` }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border-t border-slate-100 pt-3 flex items-center justify-between text-[11px] text-slate-500 font-medium">
|
||||
<span className="flex items-center gap-1 text-slate-600">
|
||||
<Calendar className="w-3.5 h-3.5 text-slate-400" /> Son Geçerlilik: <strong>{doc.expiresAt}</strong>
|
||||
</span>
|
||||
{/* Yükleme */}
|
||||
<div className="bg-white rounded-2xl border-2 border-dashed border-teal-300 p-6 text-center space-y-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-teal-50 text-teal-600 flex items-center justify-center mx-auto">
|
||||
<Upload className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-sm text-slate-800">Belge Yükleyin</h3>
|
||||
<p className="text-xs text-slate-500">İmza sirküleri, sertifikalar, vergi levhası… (en fazla 8 MB)</p>
|
||||
</div>
|
||||
<div className="flex justify-center gap-2 flex-wrap">
|
||||
<select value={kategori} onChange={(e) => setKategori(e.target.value)}
|
||||
className="bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-2 text-xs">
|
||||
{KATEGORILER.map((c) => <option key={c}>{c}</option>)}
|
||||
</select>
|
||||
<label className={`font-extrabold text-xs px-5 py-2.5 rounded-xl shadow-md flex items-center gap-2 ${
|
||||
busy ? 'bg-slate-300 text-slate-500 cursor-not-allowed' : 'bg-teal-600 hover:bg-teal-500 text-white cursor-pointer'
|
||||
}`}>
|
||||
{busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
|
||||
{busy ? 'Yükleniyor…' : 'Dosya Seç'}
|
||||
<input ref={dosyaRef} type="file" className="hidden" disabled={busy} onChange={dosyaSecildi} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => alert(`${doc.name} başarıyla indirildi.`)}
|
||||
className="p-1.5 text-slate-600 hover:text-blue-600 rounded-lg hover:bg-slate-100 transition-colors"
|
||||
title="İndir"
|
||||
>
|
||||
{hata && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex gap-3">
|
||||
<AlertTriangle className="w-4 h-4 text-red-600 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-red-800 leading-relaxed">{hata}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Liste */}
|
||||
{!durum ? (
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400"><Loader2 className="w-3.5 h-3.5 animate-spin" /> yükleniyor…</div>
|
||||
) : durum.belgeler.length === 0 ? (
|
||||
<div className="bg-white rounded-2xl border border-dashed border-slate-300 p-10 text-center">
|
||||
<FileText className="w-8 h-8 text-slate-300 mx-auto mb-3" />
|
||||
<p className="text-sm font-bold text-slate-500">Henüz belge yüklemediniz</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{durum.belgeler.map((d) => (
|
||||
<div key={d.id} className="bg-white rounded-xl border border-slate-200 p-4 shadow-xs flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-bold text-slate-900 truncate">{d.ad}</p>
|
||||
<p className="text-[11px] text-slate-500 mt-0.5">
|
||||
{d.kategori || 'Diğer'} · <strong>{formatBayt(d.boyut)}</strong>
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400 mt-0.5">
|
||||
{new Date(d.olusturma).toLocaleString('tr-TR')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<button onClick={() => downloadDocument(d.id, d.ad).catch((e) => setHata(e.message))}
|
||||
className="text-slate-400 hover:text-teal-600 p-1" title="İndir">
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteDoc(doc.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-red-600 rounded-lg hover:bg-red-50 transition-colors"
|
||||
title="Sil"
|
||||
>
|
||||
<button onClick={() => sil(d.id)} disabled={busy} className="text-slate-400 hover:text-red-500 p-1" title="Sil">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user