refactor: Extract reusable UI components and add TDD documentation

- Add comprehensive TDD documentation to CLAUDE.md with coverage requirements and examples
- Extract reusable UI components to frontend/src/components/ui/ (Modal, FormInput, Button, Alert, etc.)
- Add shared constants (schedulePresets) and utility hooks (useCrudMutation, useFormValidation)
- Update frontend/CLAUDE.md with component documentation and usage examples
- Refactor CreateTaskModal to use shared components and constants
- Fix test assertions to be more robust and accurate across all test files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/components/ui/FormCurrencyInput.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import CurrencyInput from './CurrencyInput';
+
+interface FormCurrencyInputProps {
+  label?: string;
+  error?: string;
+  hint?: string;
+  value: number;
+  onChange: (cents: number) => void;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  /** Container class name */
+  containerClassName?: string;
+  /** Input class name */
+  className?: string;
+}
+
+/**
+ * Form wrapper for CurrencyInput that adds label, error, and hint support.
+ * Uses the ATM-style currency input where digits are entered as cents.
+ */
+export const FormCurrencyInput: React.FC<FormCurrencyInputProps> = ({
+  label,
+  error,
+  hint,
+  value,
+  onChange,
+  disabled = false,
+  required = false,
+  placeholder = '$0.00',
+  min,
+  max,
+  containerClassName = '',
+  className = '',
+}) => {
+  const baseInputClasses =
+    'w-full px-3 py-2 border rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors';
+
+  const stateClasses = error
+    ? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500'
+    : 'border-gray-300 dark:border-gray-600';
+
+  const disabledClasses = disabled
+    ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed opacity-60'
+    : '';
+
+  return (
+    <div className={containerClassName}>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+
+      <CurrencyInput
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        required={required}
+        placeholder={placeholder}
+        min={min}
+        max={max}
+        className={`${baseInputClasses} ${stateClasses} ${disabledClasses} ${className}`}
+      />
+
+      {error && (
+        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+
+      {hint && !error && (
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{hint}</p>
+      )}
+    </div>
+  );
+};
+
+export default FormCurrencyInput;