Merge pull request 'fix: Standardize checkboxes to use MUI Checkbox component (#35)' (#36) from issue-35-standardize-checkboxes into main

Reviewed-on: #36

frontend/src/features/auth/components/SignupForm.tsx

@@ -3,9 +3,10 @@
  */
 
 import React, { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { Checkbox, FormControlLabel, Link } from '@mui/material';
 import { Button } from '../../../shared-minimal/components/Button';
 import { SignupRequest } from '../types/auth.types';
 
@@ -40,6 +41,7 @@ export const SignupForm: React.FC<SignupFormProps> = ({ onSubmit, loading }) =>
     register,
     handleSubmit,
     formState: { errors },
+    control,
   } = useForm<SignupRequest & { confirmPassword: string }>({
     resolver: zodResolver(signupSchema),
   });
@@ -141,26 +143,41 @@ export const SignupForm: React.FC<SignupFormProps> = ({ onSubmit, loading }) =>
         )}
       </div>
 
-      <div className="flex items-start min-h-[44px]">
+      <div className="min-h-[44px]">
-        <label className="flex items-start cursor-pointer">
+        <Controller
-          <input
+          name="termsAccepted"
-            {...register('termsAccepted')}
+          control={control}
-            type="checkbox"
+          render={({ field }) => (
-            className="w-5 h-5 mt-0.5 rounded border-silverstone text-primary-600 focus:ring-abudhabi dark:border-silverstone dark:focus:ring-abudhabi"
+            <FormControlLabel
-            aria-label="I agree to the Terms and Conditions"
+              control={
-          />
+                <Checkbox
-          <span className="ml-2 text-sm text-avus">
+                  checked={field.value ?? false}
-            I agree to the{' '}
+                  onChange={(e) => field.onChange(e.target.checked)}
-            <a
+                  color="primary"
-              href="/docs/v2026-01-03.pdf"
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
-              target="_blank"
+                  inputProps={{ 'aria-label': 'I agree to the Terms and Conditions' }}
-              rel="noopener noreferrer"
+                />
-              className="text-abudhabi hover:underline"
+              }
-            >
+              label={
-              Terms & Conditions
+                <span className="text-sm text-avus">
-            </a>
+                  I agree to the{' '}
-          </span>
+                  <Link
-        </label>
+                    href="/docs/v2026-01-03.pdf"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    sx={{ color: 'primary.main' }}
+                  >
+                    Terms & Conditions
+                  </Link>
+                </span>
+              }
+              sx={{
+                alignItems: 'flex-start',
+                '& .MuiCheckbox-root': { pt: 0 },
+              }}
+            />
+          )}
+        />
       </div>
       {errors.termsAccepted && (
         <p className="text-sm text-red-400">{errors.termsAccepted.message}</p>

frontend/src/features/documents/components/DocumentForm.tsx

@@ -4,6 +4,7 @@ import { UpgradeRequiredDialog } from '../../../shared-minimal/components/Upgrad
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Checkbox, FormControlLabel } from '@mui/material';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import dayjs from 'dayjs';
 import { useCreateDocument, useUpdateDocument, useAddSharedVehicle, useRemoveVehicleFromDocument } from '../hooks/useDocuments';
@@ -426,22 +427,34 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
                 <label className="text-sm font-medium text-slate-700 dark:text-avus mb-2">
                   Share with other vehicles
                 </label>
-                <div className="space-y-2 p-3 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-50 dark:bg-scuro/50 max-h-40 overflow-y-auto">
+                <div className="space-y-1 p-3 border border-slate-300 dark:border-silverstone rounded-lg bg-slate-50 dark:bg-scuro/50 max-h-40 overflow-y-auto">
                   {sharedVehicleOptions.map((v) => (
-                    <label
+                    <FormControlLabel
                       key={v.id}
-                      className="flex items-center cursor-pointer min-h-[44px] py-2 px-2 hover:bg-slate-100 dark:hover:bg-scuro rounded"
+                      control={
-                    >
+                        <Checkbox
-                      <input
+                          checked={selectedSharedVehicles.includes(v.id)}
-                        type="checkbox"
+                          onChange={() => handleSharedVehicleToggle(v.id)}
-                        checked={selectedSharedVehicles.includes(v.id)}
+                          color="primary"
-                        onChange={() => handleSharedVehicleToggle(v.id)}
+                          sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
-                        className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi"
+                        />
-                      />
+                      }
-                      <span className="ml-3 text-sm text-slate-700 dark:text-avus">
+                      label={vehicleLabel(v)}
-                        {vehicleLabel(v)}
+                      sx={{
-                      </span>
+                        width: '100%',
-                    </label>
+                        minHeight: 44,
+                        mx: 0,
+                        px: 1,
+                        borderRadius: 1,
+                        '&:hover': {
+                          bgcolor: 'action.hover',
+                        },
+                        '& .MuiFormControlLabel-label': {
+                          fontSize: '0.875rem',
+                          color: 'text.primary',
+                        },
+                      }}
+                    />
                   ))}
                 </div>
               </div>
@@ -494,30 +507,39 @@ export const DocumentForm: React.FC<DocumentFormProps> = ({
 
         {documentType === 'manual' && (
           <div className="flex items-center md:col-span-2">
-            <label className={`flex items-center ${canScanMaintenance ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'}`}>
+            <FormControlLabel
-              <input
+              control={
-                type="checkbox"
+                <Checkbox
-                checked={canScanMaintenance ? scanForMaintenance : false}
+                  checked={canScanMaintenance ? scanForMaintenance : false}
-                onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
+                  onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
-                disabled={!canScanMaintenance}
+                  disabled={!canScanMaintenance}
-                className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi disabled:opacity-50"
+                  color="primary"
-              />
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
-              <span className="ml-2 text-sm font-medium text-slate-700 dark:text-avus">
+                />
-                Scan for Maintenance Schedule
+              }
-              </span>
+              label="Scan for Maintenance Schedule"
-            </label>
+              sx={{
+                opacity: canScanMaintenance ? 1 : 0.6,
+                cursor: canScanMaintenance ? 'pointer' : 'not-allowed',
+                '& .MuiFormControlLabel-label': {
+                  fontSize: '0.875rem',
+                  fontWeight: 500,
+                  color: 'text.primary',
+                },
+              }}
+            />
             {!canScanMaintenance && (
               <button
                 type="button"
                 onClick={() => setUpgradeDialogOpen(true)}
-                className="ml-2 p-1 text-slate-500 hover:text-primary-600 dark:text-titanio dark:hover:text-abudhabi transition-colors"
+                className="ml-1 p-1 text-slate-500 hover:text-primary-600 dark:text-titanio dark:hover:text-abudhabi transition-colors"
                 title="Upgrade to Pro to unlock this feature"
               >
                 <LockOutlinedIcon fontSize="small" />
               </button>
             )}
             {canScanMaintenance && (
-              <span className="ml-2 text-xs text-slate-500 dark:text-titanio">(Coming soon)</span>
+              <span className="ml-1 text-xs text-slate-500 dark:text-titanio">(Coming soon)</span>
             )}
           </div>
         )}

frontend/src/features/vehicles/components/VehicleForm.tsx

@@ -3,9 +3,10 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { Checkbox, FormControlLabel } from '@mui/material';
 import { Button } from '../../../shared-minimal/components/Button';
 import { CreateVehicleRequest, Vehicle, CostInterval } from '../types/vehicles.types';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -136,6 +137,7 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
     watch,
     setValue,
     reset,
+    control,
   } = useForm<CreateVehicleRequest>({
     resolver: zodResolver(vehicleSchema),
     defaultValues: initialData,
@@ -948,16 +950,31 @@ export const VehicleForm: React.FC<VehicleFormProps> = ({
         </div>
 
         <div className="mt-4">
-          <label className="flex items-center gap-3 cursor-pointer min-h-[44px]">
+          <Controller
-            <input
+            name="tcoEnabled"
-              {...register('tcoEnabled')}
+            control={control}
-              type="checkbox"
+            render={({ field }) => (
-              className="w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:bg-scuro"
+              <FormControlLabel
-            />
+                control={
-            <span className="text-sm font-medium text-gray-700 dark:text-avus">
+                  <Checkbox
-              Display Total Cost of Ownership on vehicle details
+                    checked={field.value ?? false}
-            </span>
+                    onChange={(e) => field.onChange(e.target.checked)}
-          </label>
+                    color="primary"
+                    sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
+                  />
+                }
+                label="Display Total Cost of Ownership on vehicle details"
+                sx={{
+                  minHeight: 44,
+                  '& .MuiFormControlLabel-label': {
+                    fontSize: '0.875rem',
+                    fontWeight: 500,
+                    color: 'text.primary',
+                  },
+                }}
+              />
+            )}
+          />
           <p className="text-xs text-gray-500 dark:text-titanio mt-1 ml-8">
             When enabled, shows lifetime cost and cost per mile/km on the vehicle detail page.
           </p>