better formatting

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-aspect-ratio": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-select": "^2.1.3",

src/components/QR/PreviewText.tsx

@@ -5,6 +5,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '../ui/accordion';
+import { Badge } from '../ui/badge';
 
 export type PreviewTextProps = {
   data: string;
@@ -34,7 +35,9 @@ export function PreviewText(props: PreviewTextProps) {
             {fieldValues.map(fv => (
               <div key={fv.code} className="flex gap-2">
                 <span className="text-gray-500">{fv.code}</span>
-                <span className="text-gray-200 font-mono">{fv.value}</span>
+                <Badge variant="secondary" className="font-mono">
+                  {JSON.stringify(fv.value)}
+                </Badge>
               </div>
             ))}
           </div>

src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx

@@ -17,10 +17,14 @@ export function CommitAndResetSection() {
   }, [formData]);
 
   const missingRequiredFields = useMemo(() => {
-    return requiredFields.some(
-      rf => !fieldValues.find(fv => fv.code === rf)?.value,
+    console.log(
+      'missingRequiredFields',
+      fieldValues.filter(f => requiredFields.includes(f.code)),
     );
-  }, [formData]);
+    return fieldValues
+      .filter(f => requiredFields.includes(f.code))
+      .some(f => f.value === undefined || f.value === '' || f.value === null);
+  }, [formData, fieldValues]);
 
   return (
     <Section>

src/components/inputs/TimerInput.tsx

@@ -36,9 +36,10 @@ export default function TimerInput(props: ConfigurableInputProps) {
       return;
     }
 
-    setTime(0);
+    setTime(data.defaultValue);
     toggleTimer(false);
     setTimes([]);
+    updateValue(props.code, data.defaultValue);
   }, []);
 
   useEvent('resetFields', resetState);

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/store/store.ts

@@ -50,6 +50,7 @@ export function resetToDefaultConfig() {
 }
 
 export function updateValue(code: string, data: any) {
+  console.log('updateValue', code, data);
   useQRScoutState.setState(
     produce((state: QRScoutState) => {
       const field = state.fieldValues.find(f => f.code === code);