GPT-21: Barcode scanner UI + some functionality

package.json

@@ -21,6 +21,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-dropdown-select": "^4.12.2",
+    "react-qr-barcode-scanner": "^2.1.8",
     "react-router-dom": "^7.6.3",
     "sweetalert2": "^11.22.2",
     "validator": "^13.15.15",

src/components/Scanner.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import BarcodeScanner from "react-qr-barcode-scanner";
+
+interface ScannerProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+
+const Scanner: React.FC<ScannerProps> = ({ value, onChange }) => {
+  const [isScanning, setIsScanning] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <div className="barcode-scanner">
+      <input
+        type="text"
+        id="barcode"
+        name="barcode"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Barcode"
+        autoComplete="off"
+        maxLength={200}
+      />
+
+      <button type="button" onClick={() => {
+        setIsScanning(true);
+        setLoading(true);
+      }}>Scan</button>
+
+      {isScanning && (
+        <div className="barcode-scanner-overlay">
+          <div className="barcode-scanner-camera">
+            {loading && <div className="barcode-scanner-loading">Loading barcode scanner...</div>}
+            <BarcodeScanner
+              onUpdate={(_err, result) => {
+                if (loading) setLoading(false);
+                console.log(result);
+                if (result) {
+                  const code = result.getText();
+                  onChange(code); 
+                  setIsScanning(false); 
+                }
+              }}
+            />
+            <button
+              className="button"
+              onClick={() => setIsScanning(false)}>Cancel</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Scanner;

src/index.css

@@ -297,10 +297,12 @@ h1 {
   background-color: #2c2c2c;
   color: #f0f0f0;
   width: 100%;
+  box-sizing: border-box;
 }
 
 .add-form textarea {
   height: 10rem;
+  resize: none;
 }
 
 .add-form input[type="checkbox"] {
@@ -321,10 +323,22 @@ h1 {
   margin-top: 1.5rem;
 }
 
-.add-form .discount-group .big-chain-group  {
+.add-form .discount-group, .big-chain-group  {
   display: contents;
 }
 
+.discount-group label {
+  grid-column: 1;
+  align-self: center;
+}
+
+.discount-group input[type="checkbox"] {
+  grid-column: 2;
+  justify-self: start;
+  align-self: center;
+  transform: scale(1.6);
+}
+
 .store-locations-group {
   grid-column: span 2;
   display: flex;
@@ -435,6 +449,67 @@ h1 {
   font-size: 1.15rem;
 }
 
+.barcode-scanner {
+  display: flex;
+  gap: 0.5em;
+}
+
+.barcode-scanner-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.barcode-scanner-camera {
+  background: #fff;
+  border-radius: 12px;
+  padding: 1rem;
+  position: relative;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  height: 420px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1em;
+}
+
+.barcode-scanner-camera video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+  z-index: 2;
+}
+
+.barcode-scanner-camera .button {
+  background-color: #E85660;
+}
+
+.barcode-scanner-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.2rem;
+  color: #555;
+  z-index: 1;
+  pointer-events: none;
+  width: 90%;
+  text-align: center;
+}
+
+
+
 
 @media (prefers-color-scheme: light) {
   :root {
@@ -559,11 +634,10 @@ h1 {
     box-sizing: border-box;
   }
 
-  .add-form .discount-group .big-chain-group {
+  .add-form .discount-group, .big-chain-group {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    grid-column: 1 / -1;
   }
 
   .store-locations-group {
@@ -574,11 +648,11 @@ h1 {
     grid-column: span 1;
   }
 
-  .add-form .discount-group .big-chain-group label {
+  .add-form .discount-group, .big-chain-group label {
     margin: 0;
   }
 
-  .add-form .discount-group .big-chain-group [type="checkbox"] {
+  .add-form .big-chain-group [type="checkbox"] {
     transform: scale(1.4);
   }
 }

src/pages/CreateNewItem.tsx

@@ -8,6 +8,7 @@ import UnitsDropdownSelect from "../custom-dropdown-select/UnitsDropdownSelect";
 import StoresDropdownSelect from "../custom-dropdown-select/StoresDropdownSelect";
 import { generateClient } from "aws-amplify/data";
 import type { Schema } from "../../amplify/data/resource";
+import Scanner from "../components/Scanner";
 
 const client = generateClient<Schema>();
 
@@ -169,17 +170,16 @@ const CreateNewItem: React.FC = () => {
             onSubmit={handleSubmit}
             method="POST"
           >
-            <label htmlFor="barcode">Barcode (recommended)</label>
-            <input
-              type="text"
-              id="barcode"
-              name="barcode"
-              placeholder="Barcode (recommended)"
-              value={DOMPurify.sanitize(inputs.barcode)}
-              onChange={handleChange}
-              autoComplete="off"
-              maxLength={200}
-            />
+
+          <label htmlFor="barcode">Barcode (recommended)</label>
+          <Scanner
+            value={DOMPurify.sanitize(inputs.barcode)}
+            onChange={(val) =>
+              handleChange({
+                target: { name: "barcode", value: val },
+              } as React.ChangeEvent<HTMLInputElement>)
+            }
+          />
 
             <label htmlFor="itemName">Item Name<span className="required-form-item">*</span></label>
             <input