companion-vscode

## Generated React Component for User Dashboard

**File:** `src/components/UserDashboard.tsx`

```typescript
import React, { useState, useEffect } from 'react';
import { fetchUserData } from '../api/userApi';
import { User } from '../types/user';

interface UserDashboardProps {
  userId: string;
}

const UserDashboard: React.FC<UserDashboardProps> = ({ userId }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadUserData = async () => {
      try {
        setLoading(true);
        const data = await fetchUserData(userId);
        setUser(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load user data');
      } finally {
        setLoading(false);
      }
    };

    loadUserData();
  }, [userId]);

  if (loading) return <div className="loading-spinner">Loading...</div>;
  if (error) return <div className="error-message">Error: {error}</div>;
  if (!user) return <div>No user data available</div>;

  return (
    <div className="user-dashboard">
      <h1>Welcome, {user.name}</h1>
      <div className="user-details">
        <p>Email: {user.email}</p>
        <p>Role: {user.role}</p>
        <p>Last Active: {new Date(user.lastActive).toLocaleDateString()}</p>
      </div>
      <div className="user-actions">
        <button onClick={() => console.log('Edit profile clicked')}>Edit Profile</button>
        <button onClick={() => console.log('Settings clicked')}>Settings</button>
      </div>
    </div>
  );
};

export default UserDashboard;
```

**Unit Tests:** `src/components/UserDashboard.test.tsx`

```typescript
import { render, screen, waitFor } from '@testing-library/react';
import UserDashboard from './UserDashboard';
import { fetchUserData } from '../api/userApi';

jest.mock('../api/userApi');

const mockUser = {
  id: '123',
  name: 'John Doe',
  email: 'john@example.com',
  role: 'admin',
  lastActive: '2023-10-15T10:00:00Z',
};

describe('UserDashboard', () => {
  it('renders user data when loaded', async () => {
    (fetchUserData as jest.Mock).mockResolvedValue(mockUser);
    render(<UserDashboard userId="123" />);

    await waitFor(() => {
      expect(screen.getByText('Welcome, John Doe')).toBeInTheDocument();
      expect(screen.getByText('john@example.com')).toBeInTheDocument();
    });
  });

  it('shows error message when fetch fails', async () => {
    (fetchUserData as jest.Mock).mockRejectedValue(new Error('Failed to fetch'));
    render(<UserDashboard userId="123" />);

    await waitFor(() => {
      expect(screen.getByText(/Error: Failed to fetch/i)).toBeInTheDocument();
    });
  });
});
```

**Documentation:** Added to `README.md` under the Components section:

```markdown
### UserDashboard

A React component that displays user information and provides basic actions.

#### Props
- `userId` (string): The unique identifier for the user to display

#### Usage
```jsx
<UserDashboard userId="123" />
```

#### Dependencies
- React 18+
- TypeScript
- @testing-library/react (for tests)
```