first commit

app/(auth)/login/page.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useState } from 'react'
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import { Shield, Lock, ArrowRight, Loader2, KeyRound, Sparkles, Eye, EyeOff } from 'lucide-react'
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    const result = await signIn('credentials', {
+      username,
+      password,
+      redirect: false,
+    })
+
+    setLoading(false)
+    if (result?.ok) {
+      router.push('/dashboard')
+    } else {
+      setError('Geçersiz kullanıcı adı veya şifre')
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 relative z-10">
+      <div className="w-full max-w-md animate-fade-in">
+        {/* Brand header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center p-3.5 bg-gradient-to-tr from-emerald-600 to-emerald-400 rounded-2xl mb-4 shadow-xl shadow-emerald-500/20 border border-emerald-300/30 ring-4 ring-emerald-500/10">
+            <Shield className="w-8 h-8 text-slate-950 stroke-[2.2]" />
+          </div>
+          <h1 className="text-3xl font-extrabold text-white tracking-tight flex items-center justify-center gap-2">
+            ConfigVault
+            <span className="text-xs font-semibold px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
+              v1.0
+            </span>
+          </h1>
+          <p className="text-slate-400 text-sm mt-2 font-normal">
+            Merkezi Remote Config & Gizli Anahtar Yönetimi
+          </p>
+        </div>
+
+        {/* Glass Card */}
+        <div className="glass-panel rounded-3xl p-8 shadow-2xl relative overflow-hidden">
+          {/* Subtle top glow line */}
+          <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/50 to-transparent" />
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
+                Kullanıcı Adı
+              </label>
+              <div className="relative">
+                <input
+                  type="text"
+                  value={username}
+                  onChange={e => setUsername(e.target.value)}
+                  required
+                  autoFocus
+                  className="w-full glass-input rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none text-sm font-medium"
+                  placeholder="admin"
+                />
+              </div>
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider">
+                  Şifre
+                </label>
+              </div>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  required
+                  className="w-full glass-input rounded-xl px-4 py-3 pr-11 text-white placeholder-slate-500 focus:outline-none text-sm font-medium"
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-200 transition-colors p-1"
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-rose-500/10 border border-rose-500/30 rounded-xl p-3.5 text-rose-300 text-sm flex items-center gap-2.5 animate-slide-up">
+                <div className="w-2 h-2 rounded-full bg-rose-400 flex-shrink-0 animate-ping" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-emerald-500 hover:bg-emerald-400 active:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed text-slate-950 font-bold py-3 px-4 rounded-xl transition-all duration-200 shadow-lg shadow-emerald-500/25 flex items-center justify-center gap-2 text-sm mt-3"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span>Giriş Yapılıyor...</span>
+                </>
+              ) : (
+                <>
+                  <span>Yönetim Paneline Giriş</span>
+                  <ArrowRight className="w-4 h-4 stroke-[2.5]" />
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Security details pill */}
+          <div className="mt-6 pt-6 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-500">
+            <div className="flex items-center gap-1.5">
+              <KeyRound className="w-3.5 h-3.5 text-emerald-500/80" />
+              <span>JWT & Bcrypt Korumalı</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Sparkles className="w-3.5 h-3.5 text-emerald-500/80" />
+              <span>SSL / TLS Güvenli</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer info */}
+        <p className="text-center text-slate-600 text-xs mt-6">
+          ConfigVault &bull; Tüm ortam ve dinamik ayarlarınız güvende
+        </p>
+      </div>
+    </div>
+  )
+}

app/(dashboard)/dashboard/apps/[id]/page.tsx

@@ -0,0 +1,48 @@
+import sql from '@/lib/db'
+import { notFound } from 'next/navigation'
+import { Navbar } from '@/components/Navbar'
+import { AppDetailClient } from '@/components/AppDetailClient'
+
+export const dynamic = 'force-dynamic'
+
+async function getAppData(id: string) {
+  const [app] = await sql`SELECT * FROM apps WHERE id = ${id}`
+  if (!app) return null
+
+  const environments = await sql`
+    SELECT * FROM environments WHERE app_id = ${id} ORDER BY name
+  `
+
+  const envIds = environments.map((e: any) => e.id)
+  const configs = envIds.length
+    ? await sql`SELECT * FROM config_entries WHERE environment_id = ANY(${envIds}) ORDER BY key`
+    : []
+
+  const auditLogs = await sql`
+    SELECT * FROM audit_logs WHERE app_id = ${id}
+    ORDER BY created_at DESC LIMIT 30
+  `
+
+  return { app, environments, configs, auditLogs }
+}
+
+export default async function AppDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const data = await getAppData(id)
+  if (!data) notFound()
+
+  return (
+    <div className="min-h-screen pb-16">
+      <Navbar appName={data.app.name} appId={data.app.id} iconUrl={data.app.icon_url} />
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 pt-8">
+        <AppDetailClient
+          app={data.app as any}
+          environments={data.environments as any}
+          configs={data.configs as any}
+          auditLogs={data.auditLogs as any}
+        />
+      </main>
+    </div>
+  )
+}

app/(dashboard)/dashboard/apps/new/page.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, Sparkles, Loader2, Rocket, Globe, Terminal, Smartphone } from 'lucide-react'
+import { Navbar } from '@/components/Navbar'
+import { IconPicker } from '@/components/IconPicker'
+import { slugify } from '@/lib/utils'
+
+export default function NewAppPage() {
+  const router = useRouter()
+  const [name, setName] = useState('')
+  const [slug, setSlug] = useState('')
+  const [description, setDescription] = useState('')
+  const [iconUrl, setIconUrl] = useState('')
+  const [slugEdited, setSlugEdited] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  function handleNameChange(value: string) {
+    setName(value)
+    if (!slugEdited) {
+      setSlug(slugify(value))
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    try {
+      const res = await fetch('/api/apps', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, slug, description, icon_url: iconUrl || null }),
+      })
+
+      const data = await res.json()
+      setLoading(false)
+
+      if (!res.ok) {
+        setError(data.error ?? 'Uygulama oluşturulurken bir hata oluştu.')
+        return
+      }
+
+      router.push(`/dashboard/apps/${data.id}`)
+    } catch {
+      setLoading(false)
+      setError('Ağ hatası oluştu, lütfen tekrar deneyin.')
+    }
+  }
+
+  return (
+    <div className="min-h-screen pb-16">
+      <Navbar />
+
+      <main className="max-w-2xl mx-auto px-4 sm:px-6 pt-8 animate-fade-in">
+        <Link
+          href="/dashboard"
+          className="inline-flex items-center gap-2 text-slate-400 hover:text-white text-xs font-medium mb-6 transition-colors px-3 py-1.5 rounded-lg hover:bg-slate-900 border border-transparent hover:border-slate-800"
+        >
+          <ArrowLeft className="w-3.5 h-3.5" />
+          <span>Uygulamalara Geri Dön</span>
+        </Link>
+
+        {/* Page Title */}
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-white tracking-tight flex items-center gap-2.5">
+            <span>Yeni Uygulama Oluştur</span>
+            <div className="w-6 h-6 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
+              <Rocket className="w-3.5 h-3.5" />
+            </div>
+          </h1>
+          <p className="text-slate-400 text-sm mt-1">
+            Uygulamanız için dinamik config yönetimi ve otomatik 3 ortam (Development, Staging, Production) kurulacaktır.
+          </p>
+        </div>
+
+        {/* Creation Card */}
+        <div className="glass-panel rounded-3xl p-7 sm:p-8 shadow-2xl relative overflow-hidden">
+          <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/50 to-transparent" />
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
+                Uygulama Adı <span className="text-rose-400">*</span>
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={e => handleNameChange(e.target.value)}
+                required
+                autoFocus
+                placeholder="Örn: Trendyol Satıcı Paneli, Mobil E-Ticaret"
+                className="w-full glass-input rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none text-sm font-medium"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
+                Benzersiz Tanımlayıcı (Slug) <span className="text-rose-400">*</span>
+              </label>
+              <div className="flex items-center glass-input rounded-xl overflow-hidden focus-within:ring-2 focus-within:ring-emerald-500/30 focus-within:border-emerald-500/60">
+                <span className="px-3.5 text-slate-500 text-xs font-mono border-r border-slate-800 bg-slate-900/50 py-3 select-none">
+                  app/
+                </span>
+                <input
+                  type="text"
+                  value={slug}
+                  onChange={e => {
+                    setSlug(e.target.value)
+                    setSlugEdited(true)
+                  }}
+                  required
+                  placeholder="mobil-e-ticaret"
+                  pattern="[a-z0-9-]+"
+                  className="flex-1 bg-transparent px-3.5 py-3 text-white placeholder-slate-500 focus:outline-none text-sm font-mono"
+                />
+              </div>
+              <p className="text-slate-500 text-[11px] mt-1.5">
+                Yalnızca küçük harfler, rakamlar ve tire (-) kullanılabilir. API isteklerinde kullanılacaktır.
+              </p>
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
+                Açıklama <span className="text-slate-500 font-normal lowercase">(isteğe bağlı)</span>
+              </label>
+              <textarea
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                placeholder="Bu uygulama ne amaçla kullanılıyor ve hangi platformlarda çalışıyor?"
+                rows={3}
+                className="w-full glass-input rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none text-sm font-medium resize-none leading-relaxed"
+              />
+            </div>
+
+            {/* Icon Picker */}
+            <IconPicker
+              value={iconUrl}
+              onChange={setIconUrl}
+              appName={name}
+            />
+
+            {/* Quick target platforms hint */}
+            <div className="p-4 rounded-2xl bg-slate-900/50 border border-slate-800/80 space-y-2">
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
+                <Sparkles className="w-3.5 h-3.5 text-emerald-400" />
+                Uyumlu Platformlar & Entegrasyon
+              </span>
+              <div className="flex flex-wrap gap-2 text-xs text-slate-400 pt-1">
+                <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-slate-800/80 border border-slate-700/50">
+                  <Smartphone className="w-3.5 h-3.5 text-cyan-400" />
+                  React Native / Expo
+                </span>
+                <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-slate-800/80 border border-slate-700/50">
+                  <Globe className="w-3.5 h-3.5 text-emerald-400" />
+                  Next.js & React Web
+                </span>
+                <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-slate-800/80 border border-slate-700/50">
+                  <Terminal className="w-3.5 h-3.5 text-purple-400" />
+                  Node.js / Express Backend
+                </span>
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-rose-500/10 border border-rose-500/30 rounded-xl p-3.5 text-rose-300 text-sm animate-slide-up">
+                {error}
+              </div>
+            )}
+
+            <div className="flex items-center gap-3 pt-2">
+              <Link
+                href="/dashboard"
+                className="flex-1 text-center bg-slate-800/80 hover:bg-slate-700/80 text-slate-300 text-sm font-semibold py-3 rounded-xl transition-colors border border-slate-700/60"
+              >
+                İptal
+              </Link>
+              <button
+                type="submit"
+                disabled={loading || !name || !slug}
+                className="flex-1 bg-emerald-500 hover:bg-emerald-400 active:bg-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed text-slate-950 text-sm font-bold py-3 rounded-xl transition-all shadow-lg shadow-emerald-500/25 flex items-center justify-center gap-2"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <span>Oluşturuluyor...</span>
+                  </>
+                ) : (
+                  <span>Uygulamayı Oluştur</span>
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </main>
+    </div>
+  )
+}

app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,44 @@
+import sql from '@/lib/db'
+import { App } from '@/types'
+import { Navbar } from '@/components/Navbar'
+import { DashboardClient } from '@/components/DashboardClient'
+
+export const dynamic = 'force-dynamic'
+
+async function getDashboardData() {
+  const apps = await sql`
+    SELECT a.*, COUNT(ce.id) as config_count 
+    FROM apps a 
+    LEFT JOIN environments e ON e.app_id = a.id 
+    LEFT JOIN config_entries ce ON ce.environment_id = e.id 
+    GROUP BY a.id 
+    ORDER BY a.created_at DESC
+  ` as any
+
+  const [totalConfigs] = await sql`SELECT count(*)::int as count FROM config_entries`
+  const [totalAudit] = await sql`SELECT count(*)::int as count FROM audit_logs`
+
+  return {
+    apps,
+    totalConfigsCount: totalConfigs?.count || 0,
+    totalAuditCount: totalAudit?.count || 0,
+  }
+}
+
+export default async function DashboardPage() {
+  const { apps, totalConfigsCount, totalAuditCount } = await getDashboardData()
+
+  return (
+    <div className="min-h-screen pb-16">
+      <Navbar />
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 pt-8">
+        <DashboardClient
+          initialApps={apps}
+          totalConfigsCount={totalConfigsCount}
+          totalAuditCount={totalAuditCount}
+        />
+      </main>
+    </div>
+  )
+}

app/api/apps/[id]/config/[entryId]/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import sql from '@/lib/db'
+
+// PATCH /api/apps/[id]/config/[entryId]
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string; entryId: string }> }
+) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id, entryId } = await params
+  const { value, environment } = await req.json()
+
+  const [old] = await sql`SELECT key, value FROM config_entries WHERE id = ${entryId}`
+
+  const [entry] = await sql`
+    UPDATE config_entries SET value = ${value}
+    WHERE id = ${entryId}
+    RETURNING *
+  `
+
+  await sql`
+    INSERT INTO audit_logs (app_id, environment, action, key, old_value, actor)
+    VALUES (
+      ${id}, ${environment}, 'update',
+      ${old?.key}, ${old?.value?.slice(0, 100)},
+      ${session.user?.name ?? 'admin'}
+    )
+  `
+
+  return NextResponse.json(entry)
+}
+
+// DELETE /api/apps/[id]/config/[entryId]
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string; entryId: string }> }
+) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id, entryId } = await params
+  const env = req.nextUrl.searchParams.get('environment') ?? ''
+  const [old] = await sql`SELECT key FROM config_entries WHERE id = ${entryId}`
+
+  await sql`DELETE FROM config_entries WHERE id = ${entryId}`
+
+  await sql`
+    INSERT INTO audit_logs (app_id, environment, action, key, actor)
+    VALUES (${id}, ${env}, 'delete', ${old?.key}, ${session.user?.name ?? 'admin'})
+  `
+
+  return NextResponse.json({ success: true })
+}

app/api/apps/[id]/config/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import sql from '@/lib/db'
+
+// GET /api/apps/[id]/config?env=production
+export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const env = req.nextUrl.searchParams.get('env') ?? 'production'
+
+  const entries = await sql`
+    SELECT ce.*
+    FROM config_entries ce
+    JOIN environments e ON e.id = ce.environment_id
+    WHERE e.app_id = ${id} AND e.name = ${env}
+    ORDER BY ce.key
+  `
+  return NextResponse.json(entries)
+}
+
+// POST /api/apps/[id]/config
+export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const body = await req.json()
+  const { environment_id, key, value, type, description, environment } = body
+
+  if (!environment_id || !key || value === undefined) {
+    return NextResponse.json({ error: 'environment_id, key, value are required' }, { status: 400 })
+  }
+
+  try {
+    const [entry] = await sql`
+      INSERT INTO config_entries (environment_id, key, value, type, description)
+      VALUES (${environment_id}, ${key.toUpperCase()}, ${value}, ${type ?? 'text'}, ${description ?? null})
+      RETURNING *
+    `
+
+    await sql`
+      INSERT INTO audit_logs (app_id, environment, action, key, actor)
+      VALUES (${id}, ${environment}, 'create', ${key}, ${session.user?.name ?? 'admin'})
+    `
+
+    return NextResponse.json(entry, { status: 201 })
+  } catch (err: any) {
+    if (err.code === '23505') {
+      return NextResponse.json({ error: `Key "${key}" already exists in this environment` }, { status: 409 })
+    }
+    return NextResponse.json({ error: err.message }, { status: 500 })
+  }
+}

app/api/apps/[id]/rotate-key/route.ts

@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import sql from '@/lib/db'
+import { randomBytes } from 'crypto'
+
+export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const newKey = randomBytes(32).toString('hex')
+
+  const [app] = await sql`
+    UPDATE apps SET api_key = ${newKey}
+    WHERE id = ${id}
+    RETURNING api_key
+  `
+
+  await sql`
+    INSERT INTO audit_logs (app_id, action, actor)
+    VALUES (${id}, 'rotate_key', ${session.user?.name ?? 'admin'})
+  `
+
+  return NextResponse.json({ api_key: app.api_key })
+}

app/api/apps/[id]/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import sql from '@/lib/db'
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  await sql`DELETE FROM apps WHERE id = ${id}`
+  return NextResponse.json({ success: true })
+}
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const { name, description, icon_url } = await req.json()
+
+  const [app] = await sql`
+    UPDATE apps SET 
+      name = COALESCE(${name}, name),
+      description = ${description !== undefined ? description : sql`description`},
+      icon_url = ${icon_url !== undefined ? icon_url : sql`icon_url`},
+      updated_at = NOW()
+    WHERE id = ${id}
+    RETURNING *
+  `
+  return NextResponse.json(app)
+}

app/api/apps/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import sql from '@/lib/db'
+import { slugify } from '@/lib/utils'
+
+// GET /api/apps
+export async function GET() {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const apps = await sql`SELECT * FROM apps ORDER BY created_at DESC`
+  return NextResponse.json(apps)
+}
+
+// POST /api/apps
+export async function POST(req: NextRequest) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const { name, description, icon_url } = body
+  const slug = body.slug ?? slugify(name)
+
+  if (!name || !slug) {
+    return NextResponse.json({ error: 'name and slug are required' }, { status: 400 })
+  }
+
+  try {
+    const [app] = await sql`
+      INSERT INTO apps (name, slug, description, icon_url)
+      VALUES (${name}, ${slug}, ${description ?? null}, ${icon_url ?? null})
+      RETURNING *
+    `
+
+    await sql`
+      INSERT INTO audit_logs (app_id, action, actor)
+      VALUES (${app.id}, 'create_app', ${session.user?.name ?? 'admin'})
+    `
+
+    return NextResponse.json(app, { status: 201 })
+  } catch (err: any) {
+    if (err.code === '23505') {
+      return NextResponse.json({ error: 'Slug already exists.' }, { status: 409 })
+    }
+    return NextResponse.json({ error: err.message }, { status: 500 })
+  }
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,5 @@
+import NextAuth from 'next-auth'
+import { authOptions } from '@/lib/auth'
+
+const handler = NextAuth(authOptions)
+export { handler as GET, handler as POST }

app/api/v1/config/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from 'next/server'
+import sql from '@/lib/db'
+
+/**
+ * GET /api/v1/config?env=production
+ *
+ * Mobile app bu endpoint'i çağırır.
+ * Header: X-Api-Key: <app_api_key>
+ * Query:  env = development | staging | production (default: production)
+ *
+ * Response: { "KEY": "value", "ANOTHER_KEY": "value2", ... }
+ */
+export async function GET(req: NextRequest) {
+  const apiKey =
+    req.headers.get('x-api-key') ??
+    req.headers.get('authorization')?.replace('Bearer ', '')
+
+  if (!apiKey) {
+    return NextResponse.json(
+      { error: 'Missing API key. Pass X-Api-Key header.' },
+      { status: 401 }
+    )
+  }
+
+  const env = req.nextUrl.searchParams.get('env') ?? 'production'
+  const validEnvs = ['development', 'staging', 'production']
+  if (!validEnvs.includes(env)) {
+    return NextResponse.json(
+      { error: `Invalid env. Must be one of: ${validEnvs.join(', ')}` },
+      { status: 400 }
+    )
+  }
+
+  // Find app by API key
+  const [app] = await sql`
+    SELECT id, name FROM apps WHERE api_key = ${apiKey} LIMIT 1
+  `
+  if (!app) {
+    return NextResponse.json({ error: 'Invalid API key' }, { status: 401 })
+  }
+
+  // Fetch config entries for this app + environment in one join
+  const entries = await sql`
+    SELECT ce.key, ce.value
+    FROM config_entries ce
+    JOIN environments e ON e.id = ce.environment_id
+    WHERE e.app_id = ${app.id} AND e.name = ${env}
+  `
+
+  const config: Record<string, string> = {}
+  for (const entry of entries) {
+    config[entry.key] = entry.value
+  }
+
+  return NextResponse.json(config, {
+    headers: {
+      'Cache-Control': 'no-store, no-cache, must-revalidate',
+      'X-App': app.name,
+      'X-Env': env,
+    },
+  })
+}

app/globals.css

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-[#080B11] text-slate-100 antialiased font-sans selection:bg-emerald-500/30 selection:text-emerald-200;
+    min-height: 100vh;
+  }
+}
+
+/* Custom modern scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: rgba(15, 23, 42, 0.6);
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(51, 65, 85, 0.6);
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(71, 85, 105, 0.9);
+}
+
+/* Glassmorphic utilities */
+.glass-panel {
+  background: linear-gradient(135deg, rgba(20, 26, 38, 0.7) 0%, rgba(13, 17, 26, 0.8) 100%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.glass-panel-interactive {
+  background: linear-gradient(135deg, rgba(20, 26, 38, 0.65) 0%, rgba(13, 17, 26, 0.75) 100%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glass-panel-interactive:hover {
+  border-color: rgba(16, 185, 129, 0.3);
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 20px -5px rgba(16, 185, 129, 0.12);
+  transform: translateY(-2px);
+}
+
+.glass-input {
+  background: rgba(15, 20, 31, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
+}
+
+.glass-input:focus {
+  background: rgba(15, 20, 31, 0.95);
+  border-color: rgba(16, 185, 129, 0.6);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+}
+
+/* Subtle background grid */
+.bg-grid-pattern {
+  background-size: 32px 32px;
+  background-image: 
+    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+}

app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from 'next'
+import { Inter, JetBrains_Mono } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
+
+const mono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+})
+
+export const metadata: Metadata = {
+  title: 'ConfigVault — Centralized Remote Config & Secret Manager',
+  description: 'Enterprise-grade centralized remote configuration and secret management for mobile & web apps.',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${mono.variable} dark`}>
+      <body className="min-h-screen bg-[#080B11] text-slate-100 font-sans relative overflow-x-hidden">
+        {/* Background ambient lighting */}
+        <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+          <div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-emerald-500/10 rounded-full blur-[130px] opacity-70" />
+          <div className="absolute top-1/3 -left-40 w-[600px] h-[400px] bg-cyan-500/5 rounded-full blur-[140px] opacity-50" />
+          <div className="absolute bottom-10 -right-40 w-[600px] h-[400px] bg-emerald-600/5 rounded-full blur-[140px] opacity-50" />
+          <div className="absolute inset-0 bg-grid-pattern opacity-60" />
+        </div>
+        <div className="relative z-10">
+          {children}
+        </div>
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function Home() {
+  redirect('/dashboard')
+}