improvement: pdf generation added to cases feature.

frontend/src/components/ui/shared/Checkbox.tsx

@@ -8,6 +8,8 @@ type CheckboxProps = {
   onChange: (checked: boolean) => void;
   disabled?: boolean;
   label: string;
+  /** Where the label sits relative to the box. Default: after the box. */
+  labelPosition?: 'start' | 'end';
   id?: string;
   className?: string;
 };
@@ -21,6 +23,7 @@ export function Checkbox({
   onChange,
   disabled = false,
   label,
+  labelPosition = 'end',
   id,
   className = '',
 }: CheckboxProps) {
@@ -39,6 +42,30 @@ export function Checkbox({
     }
   };
 
+  const box = (
+    <span
+      className={`
+        flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border-2 transition-all duration-200
+        shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]
+        ${
+          checked
+            ? 'border-primary bg-primary shadow-[0_0_0_1px_rgba(9,169,188,0.25)]'
+            : 'border-border-strong bg-background-card/90 hover:border-border'
+        }
+      `}
+      aria-hidden
+    >
+      <Check
+        strokeWidth={3}
+        className={`h-3.5 w-3.5 text-primary-contrast transition-all duration-200 ${
+          checked ? 'scale-100 opacity-100' : 'scale-75 opacity-0'
+        }`}
+      />
+    </span>
+  );
+
+  const text = <span className="text-sm text-text-secondary">{label}</span>;
+
   return (
     <label
       id={inputId}
@@ -63,26 +90,17 @@ export function Checkbox({
         ${className}
       `}
     >
-      <span
-        className={`
-          flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border-2 transition-all duration-200
-          shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]
-          ${
-            checked
-              ? 'border-primary bg-primary shadow-[0_0_0_1px_rgba(9,169,188,0.25)]'
-              : 'border-border-strong bg-background-card/90 hover:border-border'
-          }
-        `}
-        aria-hidden
-      >
-        <Check
-          strokeWidth={3}
-          className={`h-3.5 w-3.5 text-primary-contrast transition-all duration-200 ${
-            checked ? 'scale-100 opacity-100' : 'scale-75 opacity-0'
-          }`}
-        />
-      </span>
-      <span className="text-sm text-text-secondary">{label}</span>
+      {labelPosition === 'start' ? (
+        <>
+          {text}
+          {box}
+        </>
+      ) : (
+        <>
+          {box}
+          {text}
+        </>
+      )}
     </label>
   );
 }