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]">
-        <label className="flex items-start cursor-pointer">
-          <input
-            {...register('termsAccepted')}
-            type="checkbox"
-            className="w-5 h-5 mt-0.5 rounded border-silverstone text-primary-600 focus:ring-abudhabi dark:border-silverstone dark:focus:ring-abudhabi"
-            aria-label="I agree to the Terms and Conditions"
+      <div className="min-h-[44px]">
+        <Controller
+          name="termsAccepted"
+          control={control}
+          render={({ field }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={field.value ?? false}
+                  onChange={(e) => field.onChange(e.target.checked)}
+                  color="primary"
+                  sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
+                  inputProps={{ 'aria-label': 'I agree to the Terms and Conditions' }}
                 />
-          <span className="ml-2 text-sm text-avus">
+              }
+              label={
+                <span className="text-sm text-avus">
                   I agree to the{' '}
-            <a
+                  <Link
                     href="/docs/v2026-01-03.pdf"
                     target="_blank"
                     rel="noopener noreferrer"
-              className="text-abudhabi hover:underline"
+                    sx={{ color: 'primary.main' }}
                   >
                     Terms & Conditions
-            </a>
+                  </Link>
                 </span>
-        </label>
+              }
+              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"
-                    >
-                      <input
-                        type="checkbox"
+                      control={
+                        <Checkbox
                           checked={selectedSharedVehicles.includes(v.id)}
                           onChange={() => handleSharedVehicleToggle(v.id)}
-                        className="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:focus:ring-abudhabi"
+                          color="primary"
+                          sx={{ '& .MuiSvgIcon-root': { fontSize: 24 } }}
+                        />
+                      }
+                      label={vehicleLabel(v)}
+                      sx={{
+                        width: '100%',
+                        minHeight: 44,
+                        mx: 0,
+                        px: 1,
+                        borderRadius: 1,
+                        '&:hover': {
+                          bgcolor: 'action.hover',
+                        },
+                        '& .MuiFormControlLabel-label': {
+                          fontSize: '0.875rem',
+                          color: 'text.primary',
+                        },
+                      }}
                     />
-                      <span className="ml-3 text-sm text-slate-700 dark:text-avus">
-                        {vehicleLabel(v)}
-                      </span>
-                    </label>
                   ))}
                 </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'}`}>
-              <input
-                type="checkbox"
+            <FormControlLabel
+              control={
+                <Checkbox
                   checked={canScanMaintenance ? scanForMaintenance : false}
                   onChange={(e) => canScanMaintenance && setScanForMaintenance(e.target.checked)}
                   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 } }}
+                />
+              }
+              label="Scan for Maintenance Schedule"
+              sx={{
+                opacity: canScanMaintenance ? 1 : 0.6,
+                cursor: canScanMaintenance ? 'pointer' : 'not-allowed',
+                '& .MuiFormControlLabel-label': {
+                  fontSize: '0.875rem',
+                  fontWeight: 500,
+                  color: 'text.primary',
+                },
+              }}
             />
-              <span className="ml-2 text-sm font-medium text-slate-700 dark:text-avus">
-                Scan for Maintenance Schedule
-              </span>
-            </label>
             {!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]">
-            <input
-              {...register('tcoEnabled')}
-              type="checkbox"
-              className="w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-silverstone dark:bg-scuro"
+          <Controller
+            name="tcoEnabled"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={field.value ?? false}
+                    onChange={(e) => field.onChange(e.target.checked)}
+                    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',
+                  },
+                }}
+              />
+            )}
           />
-            <span className="text-sm font-medium text-gray-700 dark:text-avus">
-              Display Total Cost of Ownership on vehicle details
-            </span>
-          </label>
           <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>