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/dashboard/__tests__/ChartWidget.test.tsx

@@ -841,8 +841,17 @@ describe('ChartWidget', () => {
     it('should support different color schemes', () => {
       const colors = ['#3b82f6', '#10b981', '#ef4444', '#f59e0b', '#8b5cf6'];
 
+      const { rerender } = render(
+        <ChartWidget
+          title="Revenue"
+          data={mockChartData}
+          type="bar"
+          color={colors[0]}
+        />
+      );
+
       colors.forEach((color) => {
-        const { container, rerender } = render(
+        rerender(
           <ChartWidget
             title="Revenue"
             data={mockChartData}
@@ -853,17 +862,6 @@ describe('ChartWidget', () => {
 
         const bar = screen.getByTestId('bar');
         expect(bar).toHaveAttribute('data-fill', color);
-
-        if (color !== colors[colors.length - 1]) {
-          rerender(
-            <ChartWidget
-              title="Revenue"
-              data={mockChartData}
-              type="bar"
-              color={colors[colors.indexOf(color) + 1]}
-            />
-          );
-        }
       });
     });