From f768b92873c66ff35a8f28e28f8bf3a7e1c6ad3c Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Thu, 20 Aug 2026 23:39:56 +0300
Subject: [PATCH] feat(qr-stands): clean SVG template renderer with exact QR
 placement and no redundant overlays

---
 apps/mobile/src/app/menu/qr.tsx               |  3 +-
 .../src/components/QrStandGeneratorClient.tsx | 51 +++--------
 packages/shared/src/qr-stands.ts              | 87 ++++++++-----------
 3 files changed, 47 insertions(+), 94 deletions(-)

diff --git a/apps/mobile/src/app/menu/qr.tsx b/apps/mobile/src/app/menu/qr.tsx
index e9d786a..183c3b8 100644
--- a/apps/mobile/src/app/menu/qr.tsx
+++ b/apps/mobile/src/app/menu/qr.tsx
@@ -82,7 +82,8 @@ export default function QrScreen() {
     })();
   }, []);
 
-  const displayCategories = categories.length > 0 ? categories.slice(0, 4) : activePreset.categories;
+  const displayCategories =
+    categories.length > 0 ? categories.slice(0, 4) : (activePreset.categories || []);
 
   async function handleCopy() {
     if (!qr?.targetUrl) return;
diff --git a/apps/web/src/components/QrStandGeneratorClient.tsx b/apps/web/src/components/QrStandGeneratorClient.tsx
index 618aad8..178a14a 100644
--- a/apps/web/src/components/QrStandGeneratorClient.tsx
+++ b/apps/web/src/components/QrStandGeneratorClient.tsx
@@ -29,7 +29,7 @@ export function QrStandGeneratorClient({
   const targetUrl = `https://menul.io/${slug}`;
 
   const displayCategories =
-    categoriesList.length > 0 ? categoriesList.slice(0, 4) : activePreset.categories;
+    categoriesList.length > 0 ? categoriesList.slice(0, 4) : (activePreset.categories || []);
 
   async function handleDownloadPng() {
     if (!standRef.current) return;
@@ -139,7 +139,7 @@ export function QrStandGeneratorClient({
                       <div className="flex items-center gap-3">
                         <div
                           className="w-4 h-4 rounded-full border border-white/20 shadow-sm"
-                          style={{ background: preset.plaqueBg }}
+                          style={{ background: preset.plaqueBg || preset.plaqueColor || "#1A1A1E" }}
                         />
                         <div>
                           <div className="text-xs font-bold">{preset.name}</div>
@@ -208,51 +208,22 @@ export function QrStandGeneratorClient({
             {activePreset.svgTemplateUrl ? (
               <div
                 ref={standRef}
-                className={`w-[360px] sm:w-[380px] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10 ${
-                  activePreset.aspectRatio === "672/900" ? "aspect-[672/900]" : "aspect-[400/650]"
-                }`}
+                className="w-[360px] sm:w-[380px] rounded-[2.5rem] relative overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2 border-white/10 aspect-[400/650]"
               >
                 {/* Exact SVG Template Vector Background Graphic */}
                 <img
                   src={activePreset.svgTemplateUrl}
                   alt={activePreset.name}
-                  className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+                  className="absolute inset-0 w-full h-full object-contain pointer-events-none"
                 />
 
-                {/* Dynamic Restaurant Logo & Name Header Overlay */}
-                <div
-                  className={`absolute left-0 right-0 flex flex-col items-center justify-center px-6 text-center z-10 ${
-                    activePreset.aspectRatio === "672/900" ? "top-[13%]" : "top-[15.5%]"
-                  }`}
-                >
-                  {logoUrl ? (
-                    <img
-                      src={logoUrl}
-                      alt={restaurantName}
-                      className="h-8 w-auto max-w-[120px] object-contain mb-1"
-                    />
-                  ) : null}
-                  <span
-                    className="font-black text-xl sm:text-2xl tracking-wider uppercase font-['Montserrat'] leading-tight drop-shadow-md"
-                    style={{ color: activePreset.accentText }}
-                  >
-                    {restaurantName}
-                  </span>
-                </div>
-
-                {/* Dynamic QR Code Canvas Overlay */}
-                <div
-                  className={`absolute left-1/2 -translate-x-1/2 rounded-[20px] p-3 shadow-2xl flex items-center justify-center bg-white z-10 border border-zinc-200 ${
-                    activePreset.aspectRatio === "672/900"
-                      ? "top-[37%] w-[52%] aspect-square"
-                      : "top-[33.1%] w-[55%] aspect-square"
-                  }`}
-                >
+                {/* Dynamic QR Code Canvas Overlay - Fills the QR Code Box Exactly */}
+                <div className="absolute top-[33.08%] left-1/2 -translate-x-1/2 w-[55%] aspect-square rounded-[20px] p-3 shadow-xl flex items-center justify-center bg-white z-10 border border-zinc-200">
                   <QRCodeCanvas
                     value={targetUrl}
-                    size={200}
-                    bgColor={activePreset.qrBg || "#ffffff"}
-                    fgColor={activePreset.qrColor || "#111111"}
+                    size={220}
+                    bgColor="#ffffff"
+                    fgColor="#111111"
                     level="H"
                     style={{ width: "100%", height: "100%" }}
                     includeMargin={false}
@@ -264,8 +235,8 @@ export function QrStandGeneratorClient({
                 ref={standRef}
                 className="w-[360px] sm:w-[380px] min-h-[660px] rounded-[2.5rem] p-7 flex flex-col items-center text-center relative shadow-[0_25px_60px_rgba(0,0,0,0.6)] border-2"
                 style={{
-                  background: activePreset.plaqueBg,
-                  borderColor: activePreset.borderAccent,
+                  background: activePreset.plaqueBg || activePreset.plaqueColor || "#1A1A1E",
+                  borderColor: activePreset.borderAccent || "#D4AF37",
                 }}
               >
                 {/* Inner Line Accent */}
diff --git a/packages/shared/src/qr-stands.ts b/packages/shared/src/qr-stands.ts
index 32349a8..936be2a 100644
--- a/packages/shared/src/qr-stands.ts
+++ b/packages/shared/src/qr-stands.ts
@@ -1,84 +1,65 @@
 export interface QrStandPreset {
   key: string;
   name: string;
-  categoryName: string;
-  bgGradient: string;
-  plaqueBg: string;
-  plaqueColor: string;
-  borderAccent: string;
-  qrBg: string;
-  qrColor: string;
-  logoBorder: string;
-  logoBg: string;
-  accentText: string;
-  headerText: string;
-  subText: string;
-  dividerColor: string;
-  categories: string[];
-  svgTemplateUrl?: string;
+  categoryName?: string;
+  svgTemplateUrl: string;
   aspectRatio?: string;
+  bgGradient?: string;
+  plaqueBg?: string;
+  plaqueColor?: string;
+  borderAccent?: string;
+  qrBg?: string;
+  qrColor?: string;
+  logoBorder?: string;
+  logoBg?: string;
+  accentText?: string;
+  headerText?: string;
+  subText?: string;
+  dividerColor?: string;
+  categories?: string[];
 }
 
 export const QR_STAND_PRESETS: Record<string, QrStandPreset> = {
   "qr-1": {
     key: "qr-1",
     name: "Gourmet Bistro Stand (QR-1)",
-    categoryName: "Özel Masa Kartı Şablonu",
+    categoryName: "Özel Masa Kartı",
+    svgTemplateUrl: "/qr-1.svg",
+    aspectRatio: "400/650",
     bgGradient: "radial-gradient(circle at 50% 50%, #1A1A1E 0%, #0C0C0E 100%)",
-    plaqueBg: "linear-gradient(135deg, #1A1A1E 0%, #121215 100%)",
     plaqueColor: "#1A1A1E",
     borderAccent: "#D4AF37",
-    qrBg: "#ffffff",
-    qrColor: "#111111",
-    logoBorder: "#D4AF37",
-    logoBg: "rgba(26, 26, 30, 0.8)",
     accentText: "#D4AF37",
     headerText: "#FFFFFF",
     subText: "#8E8E93",
     dividerColor: "rgba(212, 175, 55, 0.3)",
-    categories: ["BAŞLANGIÇLAR", "ANA YEMEKLER", "TATLILAR", "İÇECEKLER"],
-    svgTemplateUrl: "/qr-1.svg",
-    aspectRatio: "400/650",
-  },
-  "qr-4": {
-    key: "qr-4",
-    name: "Gourmet Gold Luxury Stand (QR-4)",
-    categoryName: "Özel Masa Kartı Şablonu",
-    bgGradient: "radial-gradient(circle at 50% 50%, #451A03 0%, #1c0a02 100%)",
-    plaqueBg: "linear-gradient(135deg, #000000 0%, #111111 100%)",
-    plaqueColor: "#000000",
-    borderAccent: "#D4AF37",
-    qrBg: "#ffffff",
-    qrColor: "#111111",
-    logoBorder: "#D4AF37",
-    logoBg: "rgba(0, 0, 0, 0.8)",
-    accentText: "#FFD700",
-    headerText: "#FFFFFF",
-    subText: "#A1A1AA",
-    dividerColor: "rgba(212, 175, 55, 0.3)",
-    categories: ["BAŞLANGIÇLAR", "ANA YEMEKLER", "TATLILAR", "İÇECEKLER"],
-    svgTemplateUrl: "/qr-4.svg",
-    aspectRatio: "400/650",
   },
   "qr-2": {
     key: "qr-2",
     name: "Gourmet Bistro Chef Crest (QR-2)",
-    categoryName: "Özel Masa Kartı Şablonu",
+    categoryName: "Özel Masa Kartı",
+    svgTemplateUrl: "/qr-2.svg",
+    aspectRatio: "400/650",
     bgGradient: "radial-gradient(circle at 50% 50%, #1A1A1E 0%, #0C0C0E 100%)",
-    plaqueBg: "linear-gradient(135deg, #1A1A1E 0%, #121215 100%)",
     plaqueColor: "#1A1A1E",
     borderAccent: "#D4AF37",
-    qrBg: "#ffffff",
-    qrColor: "#111111",
-    logoBorder: "#D4AF37",
-    logoBg: "rgba(26, 26, 30, 0.8)",
     accentText: "#D4AF37",
     headerText: "#FFFFFF",
     subText: "#8E8E93",
     dividerColor: "rgba(212, 175, 55, 0.3)",
-    categories: ["BAŞLANGIÇLAR", "ANA YEMEKLER", "TATLILAR", "İÇECEKLER"],
-    svgTemplateUrl: "/qr-2.svg",
+  },
+  "qr-4": {
+    key: "qr-4",
+    name: "Gourmet Gold Luxury Stand (QR-4)",
+    categoryName: "Özel Masa Kartı",
+    svgTemplateUrl: "/qr-4.svg",
     aspectRatio: "400/650",
+    bgGradient: "radial-gradient(circle at 50% 50%, #451A03 0%, #1c0a02 100%)",
+    plaqueColor: "#000000",
+    borderAccent: "#D4AF37",
+    accentText: "#FFD700",
+    headerText: "#FFFFFF",
+    subText: "#A1A1AA",
+    dividerColor: "rgba(212, 175, 55, 0.3)",
   },
 };
-