From e5658238d9d53f5af4c422888a848c5a6491f295 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 13:43:44 +0100
Subject: [PATCH 01/15] Update plan

---
 plan.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plan.md b/plan.md
index 8508392..2c4f42d 100644
--- a/plan.md
+++ b/plan.md
@@ -44,8 +44,8 @@ Features:
   - [ ] filter collection based on favorites
   - [ ] _implement (un) mark favorite_
   - [x] **implement navigation to card detail**
-- [ ] **Card detail page**
-  - [ ] **display page with bar / qr code**
+- [x] **Card detail page**
+  - [x] **display page with bar / qr code**
   - [ ] implement switch note visibility
   - [ ] _implement delete card dialog + remove card from local storage_
   - [ ] _implement navigation to edit card page_

From e1a94ce752068a976ab3e2dd9761a3cd378116a0 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 14:15:54 +0100
Subject: [PATCH 02/15] Add card-detail-page.

---
 app/card/card-detail-page.tsx | 54 +++++++++++++++++++++++++++++++++++
 app/card/page.tsx             | 10 ++++++-
 app/ui/secondary-header.tsx   |  4 ++-
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 app/card/card-detail-page.tsx

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
new file mode 100644
index 0000000..88fd004
--- /dev/null
+++ b/app/card/card-detail-page.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import useAppState from '@/app/lib/app-state/app-state';
+import { Routes } from '@/app/lib/shared';
+import PageTemplate from '@/app/ui/page-template';
+import { SecondaryHeader } from '@/app/ui/secondary-header';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import { useSearchParams } from 'next/navigation';
+
+export function CardDetailPage() {
+  const searchParams = useSearchParams();
+  const id = searchParams.get('id');
+  const [state, dispatch] = useAppState();
+  const card = state.cards.find(c => c.id === id);
+  if (!card) {
+    return (
+      <PageTemplate
+        header={<SecondaryHeader title="Card detail" href={Routes.MyCards} />}
+      >
+        card not found
+      </PageTemplate>
+    );
+  }
+  return (
+    <PageTemplate
+      header={
+        <SecondaryHeader
+          title={card!.name}
+          href={Routes.MyCards}
+          rightAction={
+            <div className="flex gap-2">
+              <button className="btn btn-square btn-ghost">
+                <IconTrash />
+              </button>
+              <button className="btn btn-square btn-ghost">
+                <IconEdit />
+              </button>
+            </div>
+          }
+        />
+      }
+    >
+      <div>card</div>
+      <div>{card.name}</div>
+      <div>{card.id}</div>
+      <div>{card.code}</div>
+      <div>{card.note}</div>
+      <div>{card.bgColor}</div>
+      <div>{JSON.stringify(card.icon)}</div>
+      <div>{card.favorite}</div>
+      <div>{card.codeFormat}</div>
+    </PageTemplate>
+  );
+}
diff --git a/app/card/page.tsx b/app/card/page.tsx
index dda8869..18e0540 100644
--- a/app/card/page.tsx
+++ b/app/card/page.tsx
@@ -1,3 +1,11 @@
+import { CardDetailPage } from '@/app/card/card-detail-page';
+import Loading from '@/app/ui/loading';
+import { Suspense } from 'react';
+
 export default function CardPage() {
-  return <div>Card</div>;
+  return (
+    <Suspense fallback={<Loading />}>
+      <CardDetailPage />
+    </Suspense>
+  );
 }
diff --git a/app/ui/secondary-header.tsx b/app/ui/secondary-header.tsx
index 462bd86..a462440 100644
--- a/app/ui/secondary-header.tsx
+++ b/app/ui/secondary-header.tsx
@@ -17,7 +17,9 @@ export function SecondaryHeader({
           <IconArrowLeft />
         </Link>
       </div>
-      <div className="navbar-center">{title}</div>
+      <div className="navbar-center">
+        <span className="font-bold text-lg">{title}</span>
+      </div>
       <div className="navbar-end">{rightAction}</div>
     </header>
   );

From a4d12ea02a24c79deb0edb53b6165bf3a0855fc2 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 14:39:48 +0100
Subject: [PATCH 03/15] Use MainMessage component.

---
 app/card/card-detail-page.tsx | 24 ++++++++++++++++++++++--
 app/create-card/scanner.tsx   | 13 ++++++-------
 app/ui/main-message.tsx       | 21 +++++++++++++++++++++
 3 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 app/ui/main-message.tsx

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index 88fd004..3b3b865 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -2,9 +2,17 @@
 
 import useAppState from '@/app/lib/app-state/app-state';
 import { Routes } from '@/app/lib/shared';
+import { MainMessage } from '@/app/ui/main-message';
 import PageTemplate from '@/app/ui/page-template';
 import { SecondaryHeader } from '@/app/ui/secondary-header';
-import { IconEdit, IconTrash } from '@tabler/icons-react';
+import {
+  IconCards,
+  IconEdit,
+  IconHome,
+  IconPlus,
+  IconTrash,
+} from '@tabler/icons-react';
+import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
 export function CardDetailPage() {
@@ -17,7 +25,19 @@ export function CardDetailPage() {
       <PageTemplate
         header={<SecondaryHeader title="Card detail" href={Routes.MyCards} />}
       >
-        card not found
+        <div className="flex h-2/3 w-full items-center justify-center">
+          <MainMessage
+            title="Card not found"
+            description={`Something went wrong. Found with id ${id} not found.`}
+          >
+            <Link href={Routes.MyCards} replace>
+              <button className="btn btn-primary">
+                <IconCards className="w-6 h-6" />
+                My cards
+              </button>
+            </Link>
+          </MainMessage>
+        </div>
       </PageTemplate>
     );
   }
diff --git a/app/create-card/scanner.tsx b/app/create-card/scanner.tsx
index 6eeccd6..54a486d 100644
--- a/app/create-card/scanner.tsx
+++ b/app/create-card/scanner.tsx
@@ -4,6 +4,7 @@ import {
   CreateCardFormActions,
   CreateCardFormActionTypes,
 } from '@/app/create-card/createCardFormReducer';
+import { MainMessage } from '@/app/ui/main-message';
 import {
   Html5Qrcode,
   Html5QrcodeResult,
@@ -112,16 +113,14 @@ export default function Scanner({
     >
       <div id="reader" className="max-h-full"></div>
       {!activeDevice && (
-        <div className="text-center">
-          <p className="text-xl py-4">Please grant camera permissions.</p>
-          <p className="text-sm text-gray-500 pb-4">
-            Without those permissions, it will be impossible to scan and save
-            your cards.
-          </p>
+        <MainMessage
+          title="Please grant camera permissions."
+          description="Without those permissions, it will be impossible to scan and save your cards."
+        >
           <button className="btn btn-primary" onClick={getCameraDevices}>
             Request devices
           </button>
-        </div>
+        </MainMessage>
       )}
     </div>
   );
diff --git a/app/ui/main-message.tsx b/app/ui/main-message.tsx
new file mode 100644
index 0000000..0aa5ed0
--- /dev/null
+++ b/app/ui/main-message.tsx
@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+export function MainMessage({
+  className,
+  children,
+  title,
+  description,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className={clsx('text-center', className)}>
+      <p className="text-xl py-4">{title}</p>
+      <p className="text-sm text-gray-500 pb-4">{description}</p>
+      {children}
+    </div>
+  );
+}

From 57c5efc6077daec1aecd66adbd7ec747c5a3c7a1 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 14:59:43 +0100
Subject: [PATCH 04/15] Style card detail a bit.

---
 app/(homescreens)/layout.tsx  |  2 +-
 app/card/card-detail-page.tsx | 71 ++++++++++++++++++++++++-----------
 app/ui/company-icon.tsx       | 17 +++++++--
 app/ui/primary-header.tsx     |  2 +-
 app/ui/secondary-header.tsx   |  2 +-
 5 files changed, 65 insertions(+), 29 deletions(-)

diff --git a/app/(homescreens)/layout.tsx b/app/(homescreens)/layout.tsx
index 24bebcd..d76b308 100644
--- a/app/(homescreens)/layout.tsx
+++ b/app/(homescreens)/layout.tsx
@@ -8,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className={styles.childrenHeight}>{children}</div>
       <footer
         className={clsx(
-          `btm-nav btm-nav-lg text-base-content bg-base-200`,
+          `btm-nav btm-nav-lg text-base-content bg-base-300`,
           styles.bottomBarNavHeight
         )}
       >
diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index 3b3b865..d371598 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -2,16 +2,11 @@
 
 import useAppState from '@/app/lib/app-state/app-state';
 import { Routes } from '@/app/lib/shared';
+import CompanyIcon from '@/app/ui/company-icon';
 import { MainMessage } from '@/app/ui/main-message';
 import PageTemplate from '@/app/ui/page-template';
 import { SecondaryHeader } from '@/app/ui/secondary-header';
-import {
-  IconCards,
-  IconEdit,
-  IconHome,
-  IconPlus,
-  IconTrash,
-} from '@tabler/icons-react';
+import { IconCards, IconEdit, IconTrash } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
@@ -49,26 +44,58 @@ export function CardDetailPage() {
           href={Routes.MyCards}
           rightAction={
             <div className="flex gap-2">
-              <button className="btn btn-square btn-ghost">
-                <IconTrash />
-              </button>
-              <button className="btn btn-square btn-ghost">
-                <IconEdit />
-              </button>
+              <Link href={Routes.MyCards} replace>
+                <button className="btn btn-square btn-ghost">
+                  <IconTrash />
+                </button>
+              </Link>
+              <Link href={Routes.MyCards} replace>
+                <button className="btn btn-square btn-ghost">
+                  <IconEdit />
+                </button>
+              </Link>
             </div>
           }
         />
       }
     >
-      <div>card</div>
-      <div>{card.name}</div>
-      <div>{card.id}</div>
-      <div>{card.code}</div>
-      <div>{card.note}</div>
-      <div>{card.bgColor}</div>
-      <div>{JSON.stringify(card.icon)}</div>
-      <div>{card.favorite}</div>
-      <div>{card.codeFormat}</div>
+      <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
+        <div>
+          Code
+          <div>{card.code}</div>
+          <div>{card.codeFormat}</div>
+        </div>
+        <div
+          className="bg-base-300 p-6"
+          style={card.bgColor ? { backgroundColor: card.bgColor } : {}}
+        >
+          <div className="flex gap-6 items-center">
+            <CompanyIcon {...card} className="w-16 h-16" />
+            <label className="form-control flex-1">
+              <div className="label">
+                <span className="label-text">Card name</span>
+              </div>
+              <input
+                type="text"
+                disabled
+                value={card.name}
+                className="input input-bordered w-full"
+              />
+            </label>
+          </div>
+
+          <label className="form-control">
+            <div className="label">
+              <span className="label-text">Card note</span>
+            </div>
+            <textarea
+              className="textarea textarea-bordered h-24"
+              value={card.note}
+              disabled
+            />
+          </label>
+        </div>
+      </div>
     </PageTemplate>
   );
 }
diff --git a/app/ui/company-icon.tsx b/app/ui/company-icon.tsx
index 2b5b50e..14a5e9a 100644
--- a/app/ui/company-icon.tsx
+++ b/app/ui/company-icon.tsx
@@ -1,19 +1,28 @@
 import { Card } from '@/app/lib/app-state/reducer';
 import { iconsMap } from '@/app/lib/shared';
+import clsx from 'clsx';
 import Image from 'next/image';
 
-type CompanyIconProps = Pick<Card, 'icon' | 'name'>;
+type CompanyIconProps = Pick<Card, 'icon' | 'name'> & {
+  className?: string;
+};
 
-export default function CompanyIcon({ icon, name }: CompanyIconProps) {
+export default function CompanyIcon({
+  icon,
+  name,
+  className,
+}: CompanyIconProps) {
   if (typeof icon === 'string') {
     if (iconsMap[icon]) {
       const TheIcon = iconsMap[icon];
-      return <TheIcon name={name} className="w-10 h-10" />;
+      return <TheIcon name={name} className={clsx('w-10 h-10', className)} />;
     }
     return icon;
   }
   if (icon === null) {
     return null;
   }
-  return <Image {...icon} alt={name} className="w-10 h-10" />;
+  return (
+    <Image {...icon} alt={name} className={clsx('w-10 h-10', className)} />
+  );
 }
diff --git a/app/ui/primary-header.tsx b/app/ui/primary-header.tsx
index 169cbb7..7c9d6f8 100644
--- a/app/ui/primary-header.tsx
+++ b/app/ui/primary-header.tsx
@@ -11,7 +11,7 @@ export function PrimaryHeader({
 }) {
   return (
     <header>
-      <div className="navbar bg-base-200">
+      <div className="navbar bg-base-300">
         <div className="navbar-start">
           <Image
             src="/logo.svg"
diff --git a/app/ui/secondary-header.tsx b/app/ui/secondary-header.tsx
index a462440..8316f09 100644
--- a/app/ui/secondary-header.tsx
+++ b/app/ui/secondary-header.tsx
@@ -11,7 +11,7 @@ export function SecondaryHeader({
   href: LinkProps['href'];
 }) {
   return (
-    <header className="navbar bg-base-200">
+    <header className="navbar bg-base-300">
       <div className="navbar-start">
         <Link className="btn btn-square btn-ghost" href={href} replace>
           <IconArrowLeft />

From de3b138dc216fa117571f9bb84909ca38678f38c Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 15:13:09 +0100
Subject: [PATCH 05/15] Add jsbarcode lib

---
 package-lock.json | 7 +++++++
 package.json      | 1 +
 2 files changed, 8 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 530936d..0f2aff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@tabler/icons-react": "^3.19.0",
         "clsx": "^2.1.1",
         "html5-qrcode": "^2.3.8",
+        "jsbarcode": "^3.11.6",
         "next": "14.2.15",
         "next-pwa": "^5.6.0",
         "react": "^18",
@@ -8838,6 +8839,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbarcode": {
+      "version": "3.11.6",
+      "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.11.6.tgz",
+      "integrity": "sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==",
+      "license": "MIT"
+    },
     "node_modules/jsdom": {
       "version": "20.0.3",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
diff --git a/package.json b/package.json
index e48e667..7e5e345 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@tabler/icons-react": "^3.19.0",
     "clsx": "^2.1.1",
     "html5-qrcode": "^2.3.8",
+    "jsbarcode": "^3.11.6",
     "next": "14.2.15",
     "next-pwa": "^5.6.0",
     "react": "^18",

From f21807ce147f886fdd7ffd5e54e2e4cb76d8a318 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 15:31:49 +0100
Subject: [PATCH 06/15] Render Code 39

---
 app/card/card-detail-page.tsx   |  4 ++--
 app/lib/predefined-companies.ts |  4 ++++
 app/ui/barcode.tsx              | 31 +++++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 app/ui/barcode.tsx

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index d371598..47b5422 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -2,6 +2,7 @@
 
 import useAppState from '@/app/lib/app-state/app-state';
 import { Routes } from '@/app/lib/shared';
+import { Barcode } from '@/app/ui/barcode';
 import CompanyIcon from '@/app/ui/company-icon';
 import { MainMessage } from '@/app/ui/main-message';
 import PageTemplate from '@/app/ui/page-template';
@@ -61,8 +62,7 @@ export function CardDetailPage() {
     >
       <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
         <div>
-          Code
-          <div>{card.code}</div>
+          <Barcode code={card.code} />
           <div>{card.codeFormat}</div>
         </div>
         <div
diff --git a/app/lib/predefined-companies.ts b/app/lib/predefined-companies.ts
index f1c0891..5f17055 100644
--- a/app/lib/predefined-companies.ts
+++ b/app/lib/predefined-companies.ts
@@ -1,6 +1,10 @@
 import { SvgProps } from '@/app/lib/shared';
 import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
 
+/**
+ * @see https://worldvectorlogo.com/search/terno for logos
+ */
+
 export const predefinedCompanies: {
   name: string;
   svg: SvgProps;
diff --git a/app/ui/barcode.tsx b/app/ui/barcode.tsx
new file mode 100644
index 0000000..3830603
--- /dev/null
+++ b/app/ui/barcode.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import JsBarcode from 'jsbarcode';
+
+export function Barcode({ code }: { code: string }) {
+  const barcodeRef = useRef(null);
+
+  useEffect(() => {
+    if (barcodeRef.current) {
+      try {
+        JsBarcode(barcodeRef.current, code, {
+          format: 'CODE39',
+          lineColor: '#000000',
+          width: 2,
+          height: 100,
+          displayValue: true,
+        });
+      } catch (e) {
+        console.log('error', e);
+      }
+    }
+  }, [code]);
+
+  return (
+    <div>
+      <svg ref={barcodeRef} className="p-3" />
+      <div>{code}</div>;
+    </div>
+  );
+}

From 9538662e344793dca43c4377bfa777fef254de9c Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Mon, 4 Nov 2024 09:09:07 +0100
Subject: [PATCH 07/15] Add a toggle.

---
 app/card/card-detail-page.tsx | 13 ++++++++-----
 app/ui/barcode.tsx            |  1 -
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index 47b5422..7da3dc4 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -14,7 +14,7 @@ import { useSearchParams } from 'next/navigation';
 export function CardDetailPage() {
   const searchParams = useSearchParams();
   const id = searchParams.get('id');
-  const [state, dispatch] = useAppState();
+  const [state] = useAppState();
   const card = state.cards.find(c => c.id === id);
   if (!card) {
     return (
@@ -61,10 +61,7 @@ export function CardDetailPage() {
       }
     >
       <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
-        <div>
-          <Barcode code={card.code} />
-          <div>{card.codeFormat}</div>
-        </div>
+        <Barcode code={card.code} />
         <div
           className="bg-base-300 p-6"
           style={card.bgColor ? { backgroundColor: card.bgColor } : {}}
@@ -84,6 +81,12 @@ export function CardDetailPage() {
             </label>
           </div>
 
+          <label className="form-control">
+            <div className="label">
+              <span className="label-text">Toggle note visibility</span>
+            </div>
+            <input type="checkbox" className="toggle" defaultChecked />
+          </label>
           <label className="form-control">
             <div className="label">
               <span className="label-text">Card note</span>
diff --git a/app/ui/barcode.tsx b/app/ui/barcode.tsx
index 3830603..5783b0a 100644
--- a/app/ui/barcode.tsx
+++ b/app/ui/barcode.tsx
@@ -25,7 +25,6 @@ export function Barcode({ code }: { code: string }) {
   return (
     <div>
       <svg ref={barcodeRef} className="p-3" />
-      <div>{code}</div>;
     </div>
   );
 }

From fb915042bf5c24ed2e7a42d3834f8d0dd26a8c2a Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Mon, 4 Nov 2024 09:41:33 +0100
Subject: [PATCH 08/15] Implement mapHtml5QrcodeFormatToJsbarcodeFormat

---
 app/lib/app-state/codeFormat.ts | 44 +++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 app/lib/app-state/codeFormat.ts

diff --git a/app/lib/app-state/codeFormat.ts b/app/lib/app-state/codeFormat.ts
new file mode 100644
index 0000000..c7dc88c
--- /dev/null
+++ b/app/lib/app-state/codeFormat.ts
@@ -0,0 +1,44 @@
+import { Html5QrcodeSupportedFormats } from 'html5-qrcode/src/core';
+
+/**
+ * @param codeFormat
+ * jsbarcode format docs:
+ * @link https://github.com/lindell/JsBarcode/wiki/Options#format
+ * @link https://github.com/lindell/JsBarcode/wiki#barcodes
+ * html5-code format docs:
+ * https://scanapp.org/html5-qrcode-docs/docs/supported_code_formats
+ */
+export function mapHtml5QrcodeFormatToJsbarcodeFormat(
+  codeFormat: Html5QrcodeSupportedFormats
+): string {
+  switch (codeFormat) {
+    case Html5QrcodeSupportedFormats.QR_CODE:
+      return 'QR';
+    case Html5QrcodeSupportedFormats.CODE_128:
+      return 'CODE128';
+    case Html5QrcodeSupportedFormats.EAN_13:
+      return 'EAN13';
+    case Html5QrcodeSupportedFormats.EAN_8:
+      return 'EAN8';
+    case Html5QrcodeSupportedFormats.UPC_A:
+    case Html5QrcodeSupportedFormats.UPC_E:
+    case Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION:
+      return 'UPC';
+    case Html5QrcodeSupportedFormats.ITF:
+      return 'ITF14'; // ITF format in jsbarcode is often represented as ITF14
+    case Html5QrcodeSupportedFormats.CODE_39:
+      return 'CODE39';
+    case Html5QrcodeSupportedFormats.CODE_93:
+      return 'CODE93';
+    case Html5QrcodeSupportedFormats.CODABAR:
+      return 'codebar';
+    case Html5QrcodeSupportedFormats.AZTEC:
+    case Html5QrcodeSupportedFormats.DATA_MATRIX:
+    case Html5QrcodeSupportedFormats.MAXICODE:
+    case Html5QrcodeSupportedFormats.PDF_417:
+    case Html5QrcodeSupportedFormats.RSS_14:
+    case Html5QrcodeSupportedFormats.RSS_EXPANDED:
+    default:
+      throw new Error(`Unsupported code format: ${codeFormat}`);
+  }
+}

From 9213d2d66fdd0f4783bf0b41aa093e9857fde2bc Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Mon, 4 Nov 2024 15:45:23 +0100
Subject: [PATCH 09/15] Display images for barcodes.

---
 app/card/card-detail-page.tsx        |  2 +-
 app/create-card/create-card-form.tsx | 19 +++++++++----------
 app/lib/app-state/codeFormat.ts      |  2 +-
 app/lib/app-state/reducer.spec.ts    |  9 +++++++--
 app/lib/app-state/reducer.ts         |  3 +--
 app/lib/predefined-companies.ts      | 14 --------------
 app/ui/barcode.tsx                   | 14 ++++++++++----
 7 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index 7da3dc4..349ec7e 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -61,7 +61,7 @@ export function CardDetailPage() {
       }
     >
       <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
-        <Barcode code={card.code} />
+        <Barcode code={card.code} codeFormat={card.codeFormat} />
         <div
           className="bg-base-300 p-6"
           style={card.bgColor ? { backgroundColor: card.bgColor } : {}}
diff --git a/app/create-card/create-card-form.tsx b/app/create-card/create-card-form.tsx
index 361ffc5..63f3e51 100644
--- a/app/create-card/create-card-form.tsx
+++ b/app/create-card/create-card-form.tsx
@@ -9,6 +9,7 @@ import {
   CreateCardFormState,
 } from '@/app/create-card/createCardFormReducer';
 import useAppState from '@/app/lib/app-state/app-state';
+import { mapHtml5QrcodeFormatToJsbarcodeFormat } from '@/app/lib/app-state/codeFormat';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import {
   CardIcon,
@@ -26,7 +27,7 @@ import {
   IconRefresh,
   IconX,
 } from '@tabler/icons-react';
-import { Html5QrcodeResult, Html5QrcodeSupportedFormats } from 'html5-qrcode';
+import { Html5QrcodeResult } from 'html5-qrcode';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Reducer, useCallback, useEffect, useReducer, useRef } from 'react';
@@ -44,7 +45,7 @@ enum FormNames {
 type CreateCardForm = {
   [FormNames.Name]: string;
   [FormNames.Code]: string;
-  [FormNames.CodeFormat]: number;
+  [FormNames.CodeFormat]: string;
   [FormNames.Note]: string;
   [FormNames.Color]: string | null;
   [FormNames.Icon]: string | SvgProps;
@@ -63,11 +64,8 @@ export default function CreateCardForm() {
             [FormNames.Name]: predefinedCompany.name,
             [FormNames.Color]: null,
             [FormNames.Icon]: predefinedCompany.svg,
-            [FormNames.CodeFormat]: predefinedCompany.codeFormat,
           }
-        : {
-            [FormNames.CodeFormat]: Html5QrcodeSupportedFormats.EAN_13,
-          },
+        : {},
     });
   const [, appDispatch] = useAppState();
   const [{ devices, activeDevice, isModalVisible }, dispatch] = useReducer<
@@ -79,7 +77,10 @@ export default function CreateCardForm() {
     (text: string, { result }: Html5QrcodeResult) => {
       setValue(FormNames.Code, text);
       if (result.format?.format) {
-        setValue(FormNames.CodeFormat, result.format.format);
+        setValue(
+          FormNames.CodeFormat,
+          mapHtml5QrcodeFormatToJsbarcodeFormat(result.format.format)
+        );
       }
       cameraModalRef.current?.close();
     },
@@ -133,9 +134,7 @@ export default function CreateCardForm() {
               note: data[FormNames.Note] || undefined,
               bgColor: data[FormNames.Color] || null,
               icon: (data[FormNames.Icon] as CardIcon) || null,
-              codeFormat: data[
-                FormNames.CodeFormat
-              ] as Html5QrcodeSupportedFormats,
+              codeFormat: data[FormNames.CodeFormat],
             },
           });
           router.replace(Routes.MyCards);
diff --git a/app/lib/app-state/codeFormat.ts b/app/lib/app-state/codeFormat.ts
index c7dc88c..a846696 100644
--- a/app/lib/app-state/codeFormat.ts
+++ b/app/lib/app-state/codeFormat.ts
@@ -1,4 +1,4 @@
-import { Html5QrcodeSupportedFormats } from 'html5-qrcode/src/core';
+import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
 
 /**
  * @param codeFormat
diff --git a/app/lib/app-state/reducer.spec.ts b/app/lib/app-state/reducer.spec.ts
index 39cf599..0372ea0 100644
--- a/app/lib/app-state/reducer.spec.ts
+++ b/app/lib/app-state/reducer.spec.ts
@@ -1,3 +1,4 @@
+import { mapHtml5QrcodeFormatToJsbarcodeFormat } from '@/app/lib/app-state/codeFormat';
 import {
   AddCardAction,
   appReducer,
@@ -16,7 +17,9 @@ const dummyCard: Card = {
   code: '123adfa657SFV',
   bgColor: '#4523C9',
   icon: CardIcon.Retail,
-  codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
+  codeFormat: mapHtml5QrcodeFormatToJsbarcodeFormat(
+    Html5QrcodeSupportedFormats.QR_CODE
+  ),
 };
 
 describe('appReducer', () => {
@@ -25,7 +28,9 @@ describe('appReducer', () => {
     const newCard: Omit<Card, 'id'> = {
       bgColor: '#4523C9',
       icon: CardIcon.Retail,
-      codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
+      codeFormat: mapHtml5QrcodeFormatToJsbarcodeFormat(
+        Html5QrcodeSupportedFormats.QR_CODE
+      ),
       name: 'Test Card',
       code: 'ABC123',
     };
diff --git a/app/lib/app-state/reducer.ts b/app/lib/app-state/reducer.ts
index 2be0ff6..67aa8ff 100644
--- a/app/lib/app-state/reducer.ts
+++ b/app/lib/app-state/reducer.ts
@@ -1,5 +1,4 @@
 import { CardIcon, SvgProps } from '@/app/lib/shared';
-import { Html5QrcodeSupportedFormats } from 'html5-qrcode/src/core';
 import { v4 as uuid } from 'uuid';
 
 export type Card = {
@@ -10,7 +9,7 @@ export type Card = {
   bgColor: string | null;
   icon: CardIcon | null | SvgProps;
   favorite?: boolean;
-  codeFormat: Html5QrcodeSupportedFormats;
+  codeFormat: string;
 };
 
 export type AppState = {
diff --git a/app/lib/predefined-companies.ts b/app/lib/predefined-companies.ts
index 5f17055..64688f2 100644
--- a/app/lib/predefined-companies.ts
+++ b/app/lib/predefined-companies.ts
@@ -1,5 +1,4 @@
 import { SvgProps } from '@/app/lib/shared';
-import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
 
 /**
  * @see https://worldvectorlogo.com/search/terno for logos
@@ -8,7 +7,6 @@ import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
 export const predefinedCompanies: {
   name: string;
   svg: SvgProps;
-  codeFormat: Html5QrcodeSupportedFormats;
 }[] = [
   {
     name: 'DM',
@@ -17,7 +15,6 @@ export const predefinedCompanies: {
       height: 1620,
       width: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Albert',
@@ -26,7 +23,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Bata',
@@ -35,7 +31,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Biedronka',
@@ -44,7 +39,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Fresh',
@@ -53,7 +47,6 @@ export const predefinedCompanies: {
       width: 510.5,
       height: 182.7,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Ikea',
@@ -62,7 +55,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Kaufland',
@@ -71,7 +63,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Lidl',
@@ -80,7 +71,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
   },
   {
     name: 'Billa',
@@ -89,7 +79,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'O2',
@@ -98,7 +87,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Rossmann',
@@ -107,7 +95,6 @@ export const predefinedCompanies: {
       width: 116.6,
       height: 14.3,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Tesco',
@@ -116,6 +103,5 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
 ];
diff --git a/app/ui/barcode.tsx b/app/ui/barcode.tsx
index 5783b0a..f4be21f 100644
--- a/app/ui/barcode.tsx
+++ b/app/ui/barcode.tsx
@@ -3,14 +3,20 @@
 import { useEffect, useRef } from 'react';
 import JsBarcode from 'jsbarcode';
 
-export function Barcode({ code }: { code: string }) {
+export function Barcode({
+  code,
+  codeFormat,
+}: {
+  code: string;
+  codeFormat: string;
+}) {
   const barcodeRef = useRef(null);
 
   useEffect(() => {
     if (barcodeRef.current) {
       try {
         JsBarcode(barcodeRef.current, code, {
-          format: 'CODE39',
+          format: codeFormat,
           lineColor: '#000000',
           width: 2,
           height: 100,
@@ -20,11 +26,11 @@ export function Barcode({ code }: { code: string }) {
         console.log('error', e);
       }
     }
-  }, [code]);
+  }, [code, codeFormat]);
 
   return (
     <div>
-      <svg ref={barcodeRef} className="p-3" />
+      <svg ref={barcodeRef} className="p-3 w-full" />
     </div>
   );
 }

From 35c323d07b882b7169cc73aca93764b3065600cb Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Mon, 4 Nov 2024 15:52:02 +0100
Subject: [PATCH 10/15] Fix detecting of QrCode

---
 app/create-card/create-card-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/create-card/create-card-form.tsx b/app/create-card/create-card-form.tsx
index 63f3e51..7e4391d 100644
--- a/app/create-card/create-card-form.tsx
+++ b/app/create-card/create-card-form.tsx
@@ -76,7 +76,7 @@ export default function CreateCardForm() {
   const handleCodeDetected = useCallback(
     (text: string, { result }: Html5QrcodeResult) => {
       setValue(FormNames.Code, text);
-      if (result.format?.format) {
+      if (typeof result.format?.format === 'number') {
         setValue(
           FormNames.CodeFormat,
           mapHtml5QrcodeFormatToJsbarcodeFormat(result.format.format)

From 2add1b51ebe986caa0f3f15ebdf78898cffc03d9 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Mon, 4 Nov 2024 16:12:20 +0100
Subject: [PATCH 11/15] Install qrcode

---
 package-lock.json | 201 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   1 +
 2 files changed, 199 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0f2aff8..c8bba91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "jsbarcode": "^3.11.6",
         "next": "14.2.15",
         "next-pwa": "^5.6.0",
+        "qrcode": "^1.5.4",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.53.1",
@@ -4844,7 +4845,6 @@
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5435,6 +5435,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -5695,6 +5704,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6929,7 +6944,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -10025,6 +10039,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -10329,6 +10352,161 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -10562,7 +10740,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10577,6 +10754,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -10927,6 +11110,12 @@
       "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==",
       "license": "ISC"
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -12474,6 +12663,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
diff --git a/package.json b/package.json
index 7e5e345..a915710 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "jsbarcode": "^3.11.6",
     "next": "14.2.15",
     "next-pwa": "^5.6.0",
+    "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",

From f6a3fb02eb6cd515843258579cae1ca9e4815842 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Tue, 5 Nov 2024 09:04:02 +0100
Subject: [PATCH 12/15] Display QR codes.

---
 app/card/card-detail-page.tsx |  7 ++++++-
 app/ui/qrcode.tsx             | 28 ++++++++++++++++++++++++++++
 package-lock.json             | 11 +++++++++++
 package.json                  |  1 +
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 app/ui/qrcode.tsx

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index 349ec7e..97fcf26 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -6,6 +6,7 @@ import { Barcode } from '@/app/ui/barcode';
 import CompanyIcon from '@/app/ui/company-icon';
 import { MainMessage } from '@/app/ui/main-message';
 import PageTemplate from '@/app/ui/page-template';
+import { Qrcode } from '@/app/ui/qrcode';
 import { SecondaryHeader } from '@/app/ui/secondary-header';
 import { IconCards, IconEdit, IconTrash } from '@tabler/icons-react';
 import Link from 'next/link';
@@ -61,7 +62,11 @@ export function CardDetailPage() {
       }
     >
       <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
-        <Barcode code={card.code} codeFormat={card.codeFormat} />
+        {card.codeFormat === 'QR' ? (
+          <Qrcode code={card.code} />
+        ) : (
+          <Barcode code={card.code} codeFormat={card.codeFormat} />
+        )}
         <div
           className="bg-base-300 p-6"
           style={card.bgColor ? { backgroundColor: card.bgColor } : {}}
diff --git a/app/ui/qrcode.tsx b/app/ui/qrcode.tsx
new file mode 100644
index 0000000..1f516e2
--- /dev/null
+++ b/app/ui/qrcode.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import qrcode from 'qrcode';
+
+export function Qrcode({ code }: { code: string }) {
+  const [dataUrl, setDataUrl] = useState('');
+  console.log('code:', code);
+  useEffect(() => {
+    qrcode
+      .toDataURL(code, {
+        errorCorrectionLevel: 'H',
+      })
+      .then(url => {
+        console.log(url);
+        setDataUrl(url);
+      })
+      .catch(e => {
+        console.log(e);
+        // todo: handle failures while rendering qr codes
+      });
+  });
+  return (
+    <div className="flex justify-center items-center">
+      <img src={dataUrl} className="w-full max-w-44 h-auto" alt={code} />
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index c8bba91..1502f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@testing-library/react": "^16.0.1",
         "@types/jest": "^29.5.14",
         "@types/node": "^20",
+        "@types/qrcode": "^1.5.5",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "daisyui": "^4.12.13",
@@ -3582,6 +3583,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.11",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
diff --git a/package.json b/package.json
index a915710..e166727 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "daisyui": "^4.12.13",

From e8ecc8ff36b4fdf398f3e11c041598a9efb11a50 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Tue, 5 Nov 2024 09:09:07 +0100
Subject: [PATCH 13/15] Add new item to plan

---
 plan.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plan.md b/plan.md
index 2c4f42d..9d1420b 100644
--- a/plan.md
+++ b/plan.md
@@ -35,6 +35,7 @@ Features:
 - [ ] **Create card page**
   - [x] **implement form**
   - [x] _implement navigation to scan code page_
+  - [ ] _display scanned code_
   - [ ] implement color picker
   - [x] **implement creation of card (add it to other cards in local storage (); navigate to my cards page)**
 - [x] **My cards page**

From 38d2ec90726992524654464c18523e41bdc34520 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Tue, 5 Nov 2024 09:10:01 +0100
Subject: [PATCH 14/15] Suppress warning.

---
 app/ui/qrcode.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/ui/qrcode.tsx b/app/ui/qrcode.tsx
index 1f516e2..c613442 100644
--- a/app/ui/qrcode.tsx
+++ b/app/ui/qrcode.tsx
@@ -22,6 +22,7 @@ export function Qrcode({ code }: { code: string }) {
   });
   return (
     <div className="flex justify-center items-center">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
       <img src={dataUrl} className="w-full max-w-44 h-auto" alt={code} />
     </div>
   );

From bb938f28c4644fefb715d1e5eb1adaaab2202db3 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Tue, 5 Nov 2024 09:13:08 +0100
Subject: [PATCH 15/15] Clean up.

---
 app/lib/predefined-companies.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/lib/predefined-companies.ts b/app/lib/predefined-companies.ts
index 64688f2..ae57b18 100644
--- a/app/lib/predefined-companies.ts
+++ b/app/lib/predefined-companies.ts
@@ -1,7 +1,7 @@
 import { SvgProps } from '@/app/lib/shared';
 
 /**
- * @see https://worldvectorlogo.com/search/terno for logos
+ * @see https://worldvectorlogo.com/ for logos
  */
 
 export const predefinedCompanies: {