From 1bb782467b221b6e51706001c01cac01086f1cc2 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Fri, 17 Apr 2026 09:16:07 +0200
Subject: [PATCH] Validation error

---
 src/app/(main)/(app)/create/page.tsx    |  3 +-
 src/app/(main)/api/qrs/route.ts         |  3 ++
 src/components/dashboard/QRCodeCard.tsx | 41 +++++++++++++++++--------
 src/lib/validationSchemas.ts            |  4 +--
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/app/(main)/(app)/create/page.tsx b/src/app/(main)/(app)/create/page.tsx
index b88765b..d73e297 100644
--- a/src/app/(main)/(app)/create/page.tsx
+++ b/src/app/(main)/(app)/create/page.tsx
@@ -173,7 +173,7 @@ export default function CreatePage() {
       case 'FEEDBACK':
         return content.feedbackUrl || 'https://example.com/feedback';
       case 'BARCODE':
-        return content.value || '123456789';
+        return content.value || '';
       default:
         return 'https://example.com';
     }
@@ -1062,6 +1062,7 @@ export default function CreatePage() {
                       qrContent ? (
                         <div className="p-2 bg-white">
                           <Barcode
+                            key={`${qrContent}-${content.format}-${foregroundColor}`}
                             value={qrContent}
                             format={content.format || 'CODE128'}
                             lineColor={foregroundColor}
diff --git a/src/app/(main)/api/qrs/route.ts b/src/app/(main)/api/qrs/route.ts
index 4008622..830f493 100644
--- a/src/app/(main)/api/qrs/route.ts
+++ b/src/app/(main)/api/qrs/route.ts
@@ -190,6 +190,9 @@ END:VCARD`;
         case 'FEEDBACK':
           qrContent = body.content.feedbackUrl || 'https://example.com/feedback';
           break;
+        case 'BARCODE':
+          qrContent = body.content.value || '123456789';
+          break;
         default:
           qrContent = body.content.url || 'https://example.com';
       }
diff --git a/src/components/dashboard/QRCodeCard.tsx b/src/components/dashboard/QRCodeCard.tsx
index 1df5a06..e593d83 100644
--- a/src/components/dashboard/QRCodeCard.tsx
+++ b/src/components/dashboard/QRCodeCard.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { QRCodeSVG } from 'qrcode.react';
+import Barcode from 'react-barcode';
 import { Card, CardContent } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
@@ -208,19 +209,33 @@ END:VCARD`;
               </div>
             )}
             <div id={`qr-svg-${qr.id}`} className={qr.style?.cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
-              <QRCodeSVG
-                value={qrUrl}
-                size={96}
-                fgColor={qr.style?.foregroundColor || '#000000'}
-                bgColor={qr.style?.backgroundColor || '#FFFFFF'}
-                level="H"
-                imageSettings={qr.style?.imageSettings ? {
-                  src: qr.style.imageSettings.src,
-                  height: qr.style.imageSettings.height * (96 / 200), // Scale logo for smaller QR
-                  width: qr.style.imageSettings.width * (96 / 200),
-                  excavate: qr.style.imageSettings.excavate,
-                } : undefined}
-              />
+              {qr.contentType === 'BARCODE' && qr.type === 'STATIC' ? (
+                <Barcode
+                  key={`${qr.content?.value}-${qr.content?.format}`}
+                  value={qr.content?.value || '123456789'}
+                  format={(qr.content?.format as any) || 'CODE128'}
+                  lineColor={qr.style?.foregroundColor || '#000000'}
+                  background={qr.style?.backgroundColor || '#FFFFFF'}
+                  width={1.5}
+                  height={60}
+                  displayValue={true}
+                  fontSize={10}
+                />
+              ) : (
+                <QRCodeSVG
+                  value={qrUrl}
+                  size={96}
+                  fgColor={qr.style?.foregroundColor || '#000000'}
+                  bgColor={qr.style?.backgroundColor || '#FFFFFF'}
+                  level="H"
+                  imageSettings={qr.style?.imageSettings ? {
+                    src: qr.style.imageSettings.src,
+                    height: qr.style.imageSettings.height * (96 / 200),
+                    width: qr.style.imageSettings.width * (96 / 200),
+                    excavate: qr.style.imageSettings.excavate,
+                  } : undefined}
+                />
+              )}
             </div>
           </div>
         </div>
diff --git a/src/lib/validationSchemas.ts b/src/lib/validationSchemas.ts
index 0bbaa46..77e7017 100644
--- a/src/lib/validationSchemas.ts
+++ b/src/lib/validationSchemas.ts
@@ -25,7 +25,7 @@ export const createQRSchema = z.object({
 
   isStatic: z.boolean().optional(),
 
-  contentType: z.enum(['URL', 'VCARD', 'GEO', 'PHONE', 'SMS', 'WHATSAPP', 'TEXT', 'PDF', 'APP', 'COUPON', 'FEEDBACK'], {
+  contentType: z.enum(['URL', 'VCARD', 'GEO', 'PHONE', 'SMS', 'WHATSAPP', 'TEXT', 'PDF', 'APP', 'COUPON', 'FEEDBACK', 'BARCODE'], {
     errorMap: () => ({ message: 'Invalid content type' })
   }),
 
@@ -60,7 +60,7 @@ export const bulkQRSchema = z.object({
     z.object({
       title: z.string().min(1).max(100),
       content: z.string().min(1).max(5000),
-      contentType: z.enum(['URL', 'VCARD', 'GEO', 'PHONE', 'SMS', 'WHATSAPP', 'TEXT', 'PDF', 'APP', 'COUPON', 'FEEDBACK']),
+      contentType: z.enum(['URL', 'VCARD', 'GEO', 'PHONE', 'SMS', 'WHATSAPP', 'TEXT', 'PDF', 'APP', 'COUPON', 'FEEDBACK', 'BARCODE']),
     })
   ).min(1, 'At least one QR code is required')
     .max(100, 'Maximum 100 QR codes per bulk creation'),