feat(qr): complete QR studio, dynamic google fonts, mouse canvas drag, and template sync
This commit is contained in:
AyrisAI
@@ -0,0 +1,158 @@
|
||||
import Link from "next/link";
|
||||
import { QR_STAND_PRESETS } from "@menulio/shared";
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
const presetCount = Object.keys(QR_STAND_PRESETS).length;
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-8">
|
||||
{/* Karşılama Başlığı */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
|
||||
Menulio Sistem & Şablon Yönetimi
|
||||
</h1>
|
||||
<p className="text-zinc-400 text-sm mt-1">
|
||||
Masa standı şablonlarını, JSON şablon motorunu ve restoran görünüm ayarlarını yönetin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/admin/templates"
|
||||
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#D4AF37] to-[#F59E0B] text-[#0C0C0E] font-bold px-5 py-2.5 rounded-xl shadow-lg shadow-[#D4AF37]/20 hover:opacity-95 transition-all text-sm self-start"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Yeni Şablon Tasarla & Ekle
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* İstatistik Kartları */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
|
||||
<div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
|
||||
Aktif Şablonlar
|
||||
</div>
|
||||
<div className="text-3xl font-black text-white">{presetCount} Adet</div>
|
||||
<div className="text-xs text-emerald-400 font-medium flex items-center gap-1">
|
||||
<span>●</span> Mobil & Web Canlıda
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
|
||||
<div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
|
||||
Şablon Motoru Tipi
|
||||
</div>
|
||||
<div className="text-2xl font-black text-[#D4AF37]">JSON Driven</div>
|
||||
<div className="text-xs text-zinc-400 font-medium">
|
||||
0 App Store güncellemesi
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
|
||||
<div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
|
||||
Baskı Çıktı Formatı
|
||||
</div>
|
||||
<div className="text-3xl font-black text-white">A5 & 300DPI</div>
|
||||
<div className="text-xs text-zinc-400 font-medium">
|
||||
PDF + Vektörel PNG
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-2xl bg-[#121215] border border-white/10 space-y-2">
|
||||
<div className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
|
||||
API Durumu
|
||||
</div>
|
||||
<div className="text-2xl font-black text-emerald-400">Aktif & Senkron</div>
|
||||
<div className="text-xs text-zinc-400 font-medium">
|
||||
REST API v1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nasıl Çalışır / Mimari Rehber Kutusu */}
|
||||
<div className="p-6 rounded-2xl bg-gradient-to-br from-[#18181B] to-[#121215] border border-[#D4AF37]/20 relative overflow-hidden">
|
||||
<div className="relative z-10 space-y-4">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#D4AF37]/15 border border-[#D4AF37]/30 text-xs font-bold text-[#D4AF37]">
|
||||
💡 DİNAMİK ŞABLON MİMARİSİ
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
Mobil Uygulamayı Güncellemeden Yeni Şablon Yayınlama
|
||||
</h2>
|
||||
|
||||
<p className="text-sm text-zinc-300 leading-relaxed max-w-3xl">
|
||||
Menulio, QR masa kartı şablonlarını doğrudan kod içine gömmek yerine <strong>JSON şablon spesifikasyonu</strong> ile çalışır.
|
||||
Admin panelinden yeni bir SVG/Görsel arka plan ve varsayılan QR/metin koordinatları tanımladığınızda,
|
||||
tüm mobil kullanıcılar uygulamayı güncellemek zorunda kalmadan yeni şablonu anında görürler.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
|
||||
<div className="p-4 rounded-xl bg-black/40 border border-white/5 space-y-1.5">
|
||||
<div className="text-xs font-bold text-[#D4AF37]">1. Arka Planı Belirle</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
Figma veya Illustrator'dan SVG/PNG arka planı oluşturup yükleyin veya renk seçin.
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-black/40 border border-white/5 space-y-1.5">
|
||||
<div className="text-xs font-bold text-[#D4AF37]">2. QR & Katmanları Ayarla</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
QR kodun yerini, boyutunu, restoran ismi ve slogan metinlerinin varsayılan yerlerini belirleyin.
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-black/40 border border-white/5 space-y-1.5">
|
||||
<div className="text-xs font-bold text-[#D4AF37]">3. Tek Tıkla Yayınla</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
Kaydet butonuna bastığınız anda API üzerinden tüm restoranların mobil uygulamasına dağıtılır.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hızlı Şablonlar Listesi */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-bold text-white">Mevcut Hazır Şablonlar</h3>
|
||||
<Link
|
||||
href="/admin/templates"
|
||||
className="text-xs font-semibold text-[#D4AF37] hover:underline"
|
||||
>
|
||||
Tümünü Yönet & Düzenle →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{Object.values(QR_STAND_PRESETS).slice(0, 4).map((preset) => (
|
||||
<div
|
||||
key={preset.key}
|
||||
className="p-4 rounded-xl bg-[#121215] border border-white/10 space-y-3 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[11px] font-mono text-zinc-500">{preset.key}</span>
|
||||
<span className="text-[10px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full font-bold">
|
||||
Aktif
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-bold text-white text-sm line-clamp-1">{preset.name}</div>
|
||||
<div className="text-xs text-zinc-400 mt-0.5">{preset.categoryName || "Masa Kartı"}</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-white/5 flex items-center justify-between text-xs text-zinc-400">
|
||||
<span>Oran: {preset.aspectRatio || "1/1"}</span>
|
||||
<Link
|
||||
href={`/admin/templates?key=${preset.key}`}
|
||||
className="font-bold text-[#D4AF37] hover:underline"
|
||||
>
|
||||
Düzenle
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user