Volunteer Activity Reporting - Profile Tabs

# Volunteer Activity Reporting Profile Tabs

## Description:

This issue outlines the necessary modifications to the existing AboutUserController to introduce a tabbed navigation interface on the volunteer profile page. Specifically, the _renderAboutMe method within common/components/controllers/AboutUserController.jsx will be refactored to conditionally render either the "About Me" section or the "My Activity" section based on the currently selected tab.

This refactoring is a foundational step for integrating the Volunteer Activity Reporting (VAR) features. The "My Activity" tab will eventually render the common/components/controllers/MyActivity.jsx controller. Please note that the creation of the MyActivity controller itself, along with its associated components (which will reside in components/common/componentsBySection/VolunteerActivityReport), will be handled in a separate GitHub issue. For the scope of this issue, the "My Activity" tab will render a placeholder until the dedicated controller is available.

## Figma:
[VAR Profile Tabs](https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39346-89091&t=C4A5diAd0xC4ACpB-4)


## Location:

- Primary Modification: common/components/controllers/AboutUserController.jsx
- New Components Location: components/common/componentsBySection/VolunteerActivityReport/ (This is where components like VARProfileTabs, AboutMeSection, and MyActivitySection will be located.)
- Future Controller (placeholder for now): common/components/controllers/MyActivity.jsx

## Structure:
```
common/components/controllers/
└── AboutUserController.jsx <-- This file will be modified
└── MyActivity.jsx <-- Placeholder for future controller
components/common/componentsBySection/VolunteerActivityReport/
├── VARProfileTabs/
│ ├── VARProfileTabs.jsx
│ ├── VARProfileTabs.module.scss
│ ├── AboutMeSection.jsx
│ └── MyActivitySection.jsx

```

```
// common/components/controllers/AboutUserController.jsx (Illustrative changes)

import React, { useState } from 'react';
// Assuming VARProfileTabs is imported from its new, consolidated location
import VARProfileTabs from '../../componentsBySection/VolunteerActivityReport/VARProfileTabs/VARProfileTabs';
import AboutMeSection from '../../componentsBySection/VolunteerActivityReport/VARProfileTabs/AboutMeSection';
// Import MyActivityController (once created in its own issue)
// import MyActivityController from '../MyActivity'; // This import will be uncommented in a future issue

const AboutUserController = ({ userData, ...props }) => {
const [activeTab, setActiveTab] = useState('about'); // 'about' or 'activity'

// This function will replace or be integrated into the existing _renderAboutMe logic
const renderProfileContent = () => {
if (activeTab === 'about') {
return ;
} else if (activeTab === 'activity') {
// Placeholder for MyActivityController until it's built in a separate issue.
// Once MyActivityController is available, it will be rendered here.
// return ;
return (

return (

export default AboutUserController;

```

## Dependencies

- VARProfileTabs (from components/common/componentsBySection/VolunteerActivityReport/VARProfileTabs/VARProfileTabs.jsx)

- AboutMeSection (from components/common/componentsBySection/VolunteerActivityReport/VARProfileTabs/AboutMeSection.jsx)

- Uses EditUserBioModal (Path: componentsBySection/AboutUser/EditUserBioModal.jsx)

## Stories:
- Default state: About Me tab selected
- Tab switch interaction to My Activity
- AboutMeSection includes editable bio via EditUserBioModal
- MyActivitySection includes LogActivityForm and VARLogWeek

# Acceptance Criteria

- The AboutUserController is successfully modified to include VARProfileTabs for tabbed navigation.
- Clicking the "About Me" tab correctly displays the AboutMeSection (including its nested EditUserBioModal functionality).
- Clicking the "My Activity" tab correctly displays a placeholder message/div, indicating where the MyActivityController will eventually render.
- The tab switching interaction is smooth, visually clear, and maintains the correct active state.
- The AboutUserController's layout, including the integrated tabs, remains responsive across various screen sizes.