v1.0.8: fix rapport logos, donation tiers 10/20/50+custom, payment methods, app story

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {

src/app/api/donate/checkout/route.ts

@@ -21,7 +21,7 @@ export async function POST(req: NextRequest) {
     const origin = req.headers.get('origin') || req.nextUrl.origin
 
     const session = await stripe.checkout.sessions.create({
-      payment_method_types: ['card', 'twint'],
+      payment_method_types: ['card', 'twint', 'link'],
       mode: 'payment',
       line_items: [
         {

src/app/page.tsx

@@ -526,10 +526,10 @@ function SupportSection() {
           {/* Tier preview */}
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
             {[
-              { emoji: '\u2615', label: 'Kaffee', amount: 'CHF 5' },
-              { emoji: '\uD83C\uDF55', label: 'Pizza', amount: 'CHF 10' },
-              { emoji: '\uD83D\uDDA5\uFE0F', label: 'Server', amount: 'CHF 25' },
+              { emoji: '\u2615', label: 'Kaffee', amount: 'CHF 10' },
+              { emoji: '\uD83D\uDDA5\uFE0F', label: 'Server', amount: 'CHF 20' },
               { emoji: '\uD83D\uDE80', label: 'Feature', amount: 'CHF 50' },
+              { emoji: '\u2764\uFE0F', label: 'Freibetrag', amount: 'Frei' },
             ].map(tier => (
               <div key={tier.label} className="rounded-xl p-4 border border-gray-100 bg-gray-50">
                 <span className="text-2xl block mb-1">{tier.emoji}</span>
@@ -540,7 +540,7 @@ function SupportSection() {
           </div>
 
           <p className="text-gray-500 mb-6">
-            Wähle einen Betrag auf unserer Spendenseite — Zahlung sicher via Stripe (Kreditkarte, Twint).
+            Wähle einen Betrag auf unserer Spendenseite — Zahlung sicher via Stripe (Kreditkarte, Twint, Apple Pay, Google Pay).
           </p>
 
           <Link href="/spenden">

src/app/rapport/[token]/page.tsx

@@ -72,7 +72,7 @@ export default function RapportViewerPage({ params }: { params: Promise<{ token:
       {/* Action bar */}
       <div className="max-w-[210mm] mx-auto mb-4 flex justify-between items-center px-4">
         <div className="flex items-center gap-2">
-          <MapPin className="w-5 h-5 text-red-500" />
+          <img src="/logo.svg" alt="Lageplan" className="w-5 h-5 object-contain" />
           <span className="font-semibold text-sm">Lageplan — Einsatzrapport</span>
         </div>
         <div className="flex gap-2">
@@ -145,7 +145,9 @@ export default function RapportViewerPage({ params }: { params: Promise<{ token:
         {/* Header */}
         <div className="flex justify-between items-start pb-3 border-b-[3px] border-gray-900 mb-1">
           <div className="flex items-center gap-3">
-            <img src="/logo.svg" alt="Lageplan" className="w-10 h-10 object-contain" />
+            {d.logoUrl && (
+              <img src={d.logoUrl} alt="Logo" className="w-10 h-10 object-contain" />
+            )}
             <div>
               <h1 className="text-2xl font-bold tracking-tight">Einsatzrapport</h1>
               <p className="text-xs text-gray-500 mt-0.5 font-medium">{d.organisation} · {d.abteilung}</p>

src/app/spenden/page.tsx

@@ -10,14 +10,15 @@ import {
 import { Logo } from '@/components/ui/logo'
 
 const tiers = [
-  { value: 5, label: 'Kaffee', emoji: '\u2615', desc: 'Ein Kaffee für die nächste Coding-Session' },
-  { value: 10, label: 'Pizza', emoji: '\uD83C\uDF55', desc: 'Pizza-Abend nach einem langen Entwicklungstag' },
-  { value: 25, label: 'Server', emoji: '\uD83D\uDDA5\uFE0F', desc: 'Hilft die monatlichen Serverkosten zu decken' },
+  { value: 10, label: 'Kaffee', emoji: '\u2615', desc: 'Ein Kaffee für die nächste Coding-Session' },
+  { value: 20, label: 'Server', emoji: '\uD83D\uDDA5\uFE0F', desc: 'Hilft die monatlichen Serverkosten zu decken' },
   { value: 50, label: 'Feature', emoji: '\uD83D\uDE80', desc: 'Finanziert die Entwicklung eines neuen Features' },
 ]
 
 export default function SpendenPage() {
-  const [amount, setAmount] = useState(10)
+  const [amount, setAmount] = useState(20)
+  const [customAmount, setCustomAmount] = useState('')
+  const [isCustom, setIsCustom] = useState(false)
   const [name, setName] = useState('')
   const [message, setMessage] = useState('')
   const [isLoading, setIsLoading] = useState(false)
@@ -112,9 +113,9 @@ export default function SpendenPage() {
             {tiers.map(tier => (
               <button
                 key={tier.value}
-                onClick={() => setAmount(tier.value)}
+                onClick={() => { setAmount(tier.value); setIsCustom(false); setCustomAmount('') }}
                 className={`rounded-xl p-4 text-center transition-all border-2 ${
-                  amount === tier.value
+                  !isCustom && amount === tier.value
                     ? 'border-red-500 bg-red-50 shadow-md'
                     : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
                 }`}
@@ -124,34 +125,52 @@ export default function SpendenPage() {
                 <span className="text-xs text-gray-500 block mt-0.5">{tier.label}</span>
               </button>
             ))}
+            <button
+              onClick={() => setIsCustom(true)}
+              className={`rounded-xl p-4 text-center transition-all border-2 ${
+                isCustom
+                  ? 'border-red-500 bg-red-50 shadow-md'
+                  : 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
+              }`}
+            >
+              <span className="text-2xl block mb-1">\u2764\uFE0F</span>
+              <span className="text-lg font-bold text-gray-900">Frei</span>
+              <span className="text-xs text-gray-500 block mt-0.5">Eigener Betrag</span>
+            </button>
           </div>
 
-          {/* Slider */}
-          <div className="mb-6">
-            <div className="flex justify-between items-center mb-2">
-              <span className="text-sm text-gray-500">Oder wähle einen eigenen Betrag:</span>
-              <span className="text-xl font-bold text-red-600">CHF {amount}</span>
-            </div>
+          {/* Custom amount input */}
+          {isCustom && (
+            <div className="mb-8">
+              <label className="block text-sm font-medium text-gray-700 mb-2">Eigener Betrag in CHF</label>
+              <div className="relative">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium">CHF</span>
                 <input
-              type="range"
-              min="5"
-              max="200"
-              step="5"
-              value={amount}
-              onChange={e => setAmount(parseInt(e.target.value))}
-              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-red-600"
+                  type="number"
+                  min="1"
+                  max="1000"
+                  step="1"
+                  value={customAmount}
+                  onChange={e => {
+                    setCustomAmount(e.target.value)
+                    const val = parseInt(e.target.value)
+                    if (val > 0) setAmount(val)
+                  }}
+                  placeholder="Betrag eingeben..."
+                  className="w-full rounded-lg border border-gray-300 pl-14 pr-4 py-3 text-lg font-bold focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
+                  autoFocus
                 />
-            <div className="flex justify-between text-xs text-gray-400 mt-1">
-              <span>CHF 5</span>
-              <span>CHF 200</span>
               </div>
             </div>
+          )}
 
           {/* Current tier description */}
+          {!isCustom && (
             <div className="bg-gray-50 rounded-xl p-4 mb-6 text-center">
               <span className="text-3xl">{activeTier.emoji}</span>
               <p className="text-sm text-gray-600 mt-2">{activeTier.desc}</p>
             </div>
+          )}
 
           {/* Optional name & message */}
           <div className="space-y-4 mb-6">
@@ -203,14 +222,32 @@ export default function SpendenPage() {
             </Button>
           )}
 
-          <div className="mt-4 flex flex-wrap items-center justify-center gap-4 text-xs text-gray-400">
+          <div className="mt-4 flex flex-wrap items-center justify-center gap-3 text-xs text-gray-400">
             <span className="flex items-center gap-1"><Shield className="w-3.5 h-3.5" /> Sichere Zahlung via Stripe</span>
-            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Kreditkarte & Twint</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Kreditkarte</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Twint</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Apple Pay</span>
+            <span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Google Pay</span>
           </div>
         </div>
 
+        {/* Story */}
+        <div className="mt-10 bg-gray-50 rounded-2xl p-6 md:p-8 border border-gray-100">
+          <h3 className="font-bold text-gray-900 mb-3">Die Geschichte hinter Lageplan</h3>
+          <p className="text-sm text-gray-600 leading-relaxed">
+            Lageplan wird seit über 2 Jahren von einem aktiven Feuerwehrmann in seiner Freizeit entwickelt.
+            Die App ist und bleibt <strong>kostenlos</strong> — weil jede Feuerwehr Zugang zu guten Werkzeugen haben soll,
+            unabhängig vom Budget. Es gibt zwar kommerzielle Alternativen, aber die Idee war immer:
+            Ein Werkzeug <em>von der Feuerwehr, für die Feuerwehr</em>.
+          </p>
+          <p className="text-sm text-gray-600 leading-relaxed mt-3">
+            Mit deiner Spende hilfst du, dass das so bleibt. Jeder Franken fliesst direkt in
+            Serverkosten und Weiterentwicklung. Danke für deine Unterstützung!
+          </p>
+        </div>
+
         {/* Trust */}
-        <div className="mt-10 text-center">
+        <div className="mt-8 text-center">
           <p className="text-sm text-gray-500">
             100% deiner Spende fliesst direkt in Serverkosten und Weiterentwicklung.
             <br />Kein Unternehmen, keine Investoren — nur ein Feuerwehrmann mit einer Idee.

src/components/journal/journal-view.tsx

@@ -1053,10 +1053,11 @@ export function JournalView({ projectId, projectTitle, projectLocation, einsatzl
                     } else {
                       mapScreenshot = rawScreenshot
                     }
-                    // Convert Lageplan app logo to base64 for PDF rendering
+                    // Convert logo URL to base64 for PDF rendering
                     let logoDataUri = ''
+                    if (rapportForm.logoUrl) {
                       try {
-                      const logoRes = await fetch('/logo-icon.png')
+                        const logoRes = await fetch(rapportForm.logoUrl)
                         if (logoRes.ok) {
                           const blob = await logoRes.blob()
                           logoDataUri = await new Promise<string>((resolve) => {
@@ -1066,7 +1067,8 @@ export function JournalView({ projectId, projectTitle, projectLocation, einsatzl
                           })
                         }
                       } catch (e) { console.warn('Logo fetch failed:', e) }
-                    const rapportData = { ...rapportForm, mapScreenshot, logoUrl: logoDataUri || '/logo-icon.png' }
+                    }
+                    const rapportData = { ...rapportForm, mapScreenshot, logoUrl: logoDataUri || rapportForm.logoUrl }
                     console.log('[Rapport] Sending request, body size ~', JSON.stringify({ projectId, data: rapportData }).length, 'bytes')
                     const res = await fetch('/api/rapports', {
                       method: 'POST',