@ -36,12 +36,12 @@ import {
Description , Description ,
TableChart , TableChart ,
AutoAwesome , AutoAwesome ,
AccountTree ,
TrendingUp ,
LocationOn ,
ExpandMore , ExpandMore ,
ExpandLess , ExpandLess ,
Info , Info ,
Dashboard ,
Fullscreen ,
FullscreenExit ,
} from '@mui/icons-material' ; } from '@mui/icons-material' ;
import { dataService } from '../services/dataService' ; import { dataService } from '../services/dataService' ;
import type { Group , GroupPost , GroupLink } from '../types/group' ; import type { Group , GroupPost , GroupLink } from '../types/group' ;
@ -75,7 +75,7 @@ const GroupDetailPage = () => {
const [ group , setGroup ] = useState < Group | null > ( null ) ; const [ group , setGroup ] = useState < Group | null > ( null ) ;
const [ posts , setPosts ] = useState < GroupPost [ ] > ( [ ] ) ; const [ posts , setPosts ] = useState < GroupPost [ ] > ( [ ] ) ;
const [ links , setLinks ] = useState < GroupLink [ ] > ( [ ] ) ; const [ links , setLinks ] = useState < GroupLink [ ] > ( [ ] ) ;
const [ tabValue , setTabValue ] = useState ( 0 ) ; // Default to Network tab
const [ tabValue , setTabValue ] = useState ( 0 ) ; // Default to combined view
const [ isLoading , setIsLoading ] = useState ( true ) ; const [ isLoading , setIsLoading ] = useState ( true ) ;
const [ showAIAssistant , setShowAIAssistant ] = useState ( false ) ; const [ showAIAssistant , setShowAIAssistant ] = useState ( false ) ;
const [ showGroupTour , setShowGroupTour ] = useState ( false ) ; const [ showGroupTour , setShowGroupTour ] = useState ( false ) ;
@ -89,6 +89,7 @@ const GroupDetailPage = () => {
const [ selectedPersonFilter , setSelectedPersonFilter ] = useState < string > ( 'all' ) ; const [ selectedPersonFilter , setSelectedPersonFilter ] = useState < string > ( 'all' ) ;
const [ selectedTopicFilter , setSelectedTopicFilter ] = useState < string > ( 'all' ) ; const [ selectedTopicFilter , setSelectedTopicFilter ] = useState < string > ( 'all' ) ;
const [ expandedPosts , setExpandedPosts ] = useState < Set < string > > ( new Set ( ) ) ; const [ expandedPosts , setExpandedPosts ] = useState < Set < string > > ( new Set ( ) ) ;
const [ fullscreenSection , setFullscreenSection ] = useState < 'activity' | 'network' | 'map' | null > ( null ) ;
useEffect ( ( ) = > { useEffect ( ( ) = > {
const loadGroupData = async ( ) = > { const loadGroupData = async ( ) = > {
@ -374,6 +375,14 @@ const GroupDetailPage = () => {
// TODO: Implement group post creation logic
// TODO: Implement group post creation logic
} ; } ;
const handleFullscreenToggle = ( section : 'activity' | 'network' | 'map' ) = > {
if ( fullscreenSection === section ) {
setFullscreenSection ( null ) ; // Exit fullscreen
} else {
setFullscreenSection ( section ) ; // Enter fullscreen
}
} ;
const formatDate = ( date : Date ) = > { const formatDate = ( date : Date ) = > {
return new Intl . DateTimeFormat ( 'en-US' , { return new Intl . DateTimeFormat ( 'en-US' , {
year : 'numeric' , year : 'numeric' ,
@ -661,12 +670,9 @@ const GroupDetailPage = () => {
} }
] ; ] ;
const renderNetworkTab = ( ) = > { const renderCombinedView = ( ) = > {
const members = getMockMembers ( ) ; const members = getMockMembers ( ) ;
return renderNetworkView ( members ) ;
} ;
const renderActivityTab = ( ) = > {
// Get all unique people and topics for filters
// Get all unique people and topics for filters
const allPeople = [ 'all' , . . . Array . from ( new Set ( posts . map ( ( p : any ) = > p . authorName ) ) ) ] ; const allPeople = [ 'all' , . . . Array . from ( new Set ( posts . map ( ( p : any ) = > p . authorName ) ) ) ] ;
const allTopics = [ 'all' , . . . Array . from ( new Set ( posts . map ( ( p : any ) = > p . topic ) . filter ( Boolean ) ) ) ] ; const allTopics = [ 'all' , . . . Array . from ( new Set ( posts . map ( ( p : any ) = > p . topic ) . filter ( Boolean ) ) ) ] ;
@ -823,37 +829,171 @@ const GroupDetailPage = () => {
) ; ) ;
} ; } ;
// Handle fullscreen rendering
if ( fullscreenSection ) {
return ( return (
< Box >
{ /* Filter Controls */ }
< Box sx = { {
< Box sx = { {
mb : 3 ,
mt : { xs : 0 , md : 0 } ,
pt : { xs : '16px' , md : 0 } ,
width : '100%' ,
width : '100%' ,
overflow : 'visible' , // Change to visible so labels can show
height : 'calc(100vh - 180px)' ,
backgroundColor : 'white' , px : { xs : 2 , md : 0 }
zIndex : 10 , // Ensure it's above other elements
position : 'relative' // Required for z-index
} } > } } >
{ fullscreenSection === 'activity' && (
< Box sx = { { height : '100%' , display : 'flex' , flexDirection : 'column' } } >
< Box sx = { { display : 'flex' , alignItems : 'center' , justifyContent : 'space-between' , mb : 2 } } >
< Typography variant = "h6" sx = { { fontWeight : 600 , color : 'primary.main' } } >
Activity Feed - Fullscreen
< / Typography >
< IconButton onClick = { ( ) = > handleFullscreenToggle ( 'activity' ) } >
< FullscreenExit / >
< / IconButton >
< / Box >
{ /* Filter Controls */ }
< Box sx = { { mb : 3 , flexShrink : 0 } } >
< Box sx = { { display : 'flex' , gap : 1 , flexWrap : 'wrap' } } >
< FormControl sx = { { minWidth : 140 } } size = "small" >
< InputLabel id = "person-filter-label-fs" > Filter by Person < / InputLabel >
< Select
labelId = "person-filter-label-fs"
value = { selectedPersonFilter }
label = "Filter by Person"
onChange = { ( e ) = > setSelectedPersonFilter ( e . target . value ) }
>
{ allPeople . map ( person = > (
< MenuItem key = { person } value = { person } >
{ person === 'all' ? 'All People' : person }
< / MenuItem >
) ) }
< / Select >
< / FormControl >
< FormControl sx = { { minWidth : 140 } } size = "small" >
< InputLabel id = "topic-filter-label-fs" > Filter by Topic < / InputLabel >
< Select
labelId = "topic-filter-label-fs"
value = { selectedTopicFilter }
label = "Filter by Topic"
onChange = { ( e ) = > setSelectedTopicFilter ( e . target . value ) }
>
{ allTopics . map ( topic = > (
< MenuItem key = { topic } value = { topic } >
{ topic === 'all' ? 'All Topics' : topic }
< / MenuItem >
) ) }
< / Select >
< / FormControl >
< / Box >
< / Box >
< Box sx = { {
< Box sx = { {
flex : 1 ,
overflowY : 'auto' ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2 ,
backgroundColor : 'grey.50' ,
p : 2
} } >
{ filteredPosts . length === 0 ? (
< Card sx = { { textAlign : 'center' , py : 6 } } >
< CardContent >
< Typography variant = "h6" color = "text.secondary" gutterBottom >
No posts match your filters
< / Typography >
< Typography variant = "body2" color = "text.secondary" >
Try adjusting your filter selection to see more posts .
< / Typography >
< / CardContent >
< / Card >
) : (
< Box >
{ filteredPosts . map ( renderPost ) }
< / Box >
) }
< / Box >
< / Box >
) }
{ fullscreenSection === 'network' && (
< Box sx = { { height : '100%' , display : 'flex' , flexDirection : 'column' } } >
< Box sx = { { display : 'flex' , alignItems : 'center' , justifyContent : 'space-between' , mb : 2 } } >
< Typography variant = "h6" sx = { { fontWeight : 600 , color : 'primary.main' } } >
Network - Fullscreen
< / Typography >
< IconButton onClick = { ( ) = > handleFullscreenToggle ( 'network' ) } >
< FullscreenExit / >
< / IconButton >
< / Box >
< Box sx = { {
flex : 1 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2 ,
overflow : 'hidden' ,
display : 'flex' , display : 'flex' ,
gap : { xs : 1 , md : 2 } ,
alignItems : 'center' ,
flexWrap : 'wrap' ,
justifyContent : 'center'
alignItems : 'flex-start' , // Change to flex-start so labels have room
} } >
{ renderNetworkView ( members , '100%' ) }
< / Box >
< / Box >
) }
{ fullscreenSection === 'map' && (
< Box sx = { { height : '100%' , display : 'flex' , flexDirection : 'column' } } >
< Box sx = { { display : 'flex' , alignItems : 'center' , justifyContent : 'space-between' , mb : 2 } } >
< Typography variant = "h6" sx = { { fontWeight : 600 , color : 'primary.main' } } >
Member Locations - Fullscreen
< / Typography >
< IconButton onClick = { ( ) = > handleFullscreenToggle ( 'map' ) } >
< FullscreenExit / >
< / IconButton >
< / Box >
< Box sx = { {
flex : 1 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2 ,
overflow : 'hidden'
} } >
{ renderMapView ( members , true ) }
< / Box >
< / Box >
) }
< / Box >
) ;
}
return (
< Box sx = { {
width : '100%' ,
width : '100%' ,
position : 'relative' , maxWidth : '100% ',
zIndex : 10 px : { xs : 2 , md : 0 }
} } > } } >
{ /* Person Filter */ } { /* Desktop Layout: Activity left, Network top-right, Map bottom-right */ }
< FormControl sx = { {
< Box sx = { {
minWidth : { xs : 100 , md : 200 } , display : { xs : 'none' , md : 'flex' } ,
flex : { xs : 1 , md : 'none' } , gap : 4 ,
maxWidth : { xs : 'calc(50% - 8px)' , md : 'none' } , width : '100%' ,
width : { xs : 'calc(50% - 8px)' , md : 'auto' } , maxWidth : '100%' ,
zIndex : 20 , height : 'calc(100vh - 180px)' // Full height minus header and tabs
position : 'relative' } } >
} } size = "small" > { /* Activity Feed - Left Column (60% width) */ }
< Box sx = { {
width : '60%' ,
display : 'flex' ,
flexDirection : 'column' ,
height : '100%' ,
position : 'relative' // Add position relative for the + button
} } >
< Typography variant = "h6" sx = { { fontWeight : 600 , mb : 2 , color : 'primary.main' , flexShrink : 0 } } >
Activity Feed
< / Typography >
{ /* Filter Controls */ }
< Box sx = { { mb : 3 , flexShrink : 0 } } >
< Box sx = { { display : 'flex' , gap : 1 , flexWrap : 'wrap' } } >
< FormControl sx = { { minWidth : 140 } } size = "small" >
< InputLabel id = "person-filter-label" > Filter by Person < / InputLabel > < InputLabel id = "person-filter-label" > Filter by Person < / InputLabel >
< Select < Select
labelId = "person-filter-label" labelId = "person-filter-label"
@ -869,15 +1009,7 @@ const GroupDetailPage = () => {
< / Select > < / Select >
< / FormControl > < / FormControl >
{ /* Topic Filter */ } < FormControl sx = { { minWidth : 140 } } size = "small" >
< FormControl sx = { {
minWidth : { xs : 100 , md : 200 } ,
flex : { xs : 1 , md : 'none' } ,
maxWidth : { xs : 'calc(50% - 8px)' , md : 'none' } ,
width : { xs : 'calc(50% - 8px)' , md : 'auto' } ,
zIndex : 20 ,
position : 'relative'
} } size = "small" >
< InputLabel id = "topic-filter-label" > Filter by Topic < / InputLabel > < InputLabel id = "topic-filter-label" > Filter by Topic < / InputLabel >
< Select < Select
labelId = "topic-filter-label" labelId = "topic-filter-label"
@ -895,9 +1027,19 @@ const GroupDetailPage = () => {
< / Box > < / Box >
< / Box > < / Box >
{ /* Posts Feed */ } { /* Posts Feed - Takes remaining height */ }
< Box sx = { {
flex : 1 ,
overflowY : 'auto' ,
pr : 1 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2 ,
backgroundColor : 'grey.50' ,
position : 'relative'
} } >
{ filteredPosts . length === 0 ? ( { filteredPosts . length === 0 ? (
< Card sx = { { textAlign : 'center' , py : 6 } } > < Card sx = { { textAlign : 'center' , py : 6 , m : 2 } } >
< CardContent > < CardContent >
< Typography variant = "h6" color = "text.secondary" gutterBottom > < Typography variant = "h6" color = "text.secondary" gutterBottom >
No posts match your filters No posts match your filters
@ -907,26 +1049,238 @@ const GroupDetailPage = () => {
< / Typography > < / Typography >
< / CardContent > < / CardContent >
< / Card > < / Card >
) : (
< Box sx = { { p : 2 } } >
{ filteredPosts . map ( renderPost ) }
< / Box >
) }
{ /* Fullscreen expand icon - positioned to not conflict with + button */ }
< IconButton
size = "small"
onClick = { ( ) = > handleFullscreenToggle ( 'activity' ) }
sx = { {
position : 'absolute' ,
bottom : 8 ,
left : 8 ,
backgroundColor : 'rgba(255, 255, 255, 0.9)' ,
'&:hover' : {
backgroundColor : 'rgba(255, 255, 255, 1)' ,
} ,
zIndex : 10
} }
>
< Fullscreen fontSize = "small" / >
< / IconButton >
< / Box >
{ /* + Button positioned within Activity Feed */ }
< Box sx = { {
position : 'absolute' ,
bottom : 24 ,
right : 24 ,
zIndex : 1000 ,
'& .MuiFab-root' : {
position : 'relative !important' ,
bottom : 'auto !important' ,
right : 'auto !important'
}
} } >
< PostCreateButton
groupId = { groupId }
onCreatePost = { handleCreatePost }
/ >
< / Box >
< / Box >
{ /* Right Column (40% width) - Network and Map stacked */ }
< Box sx = { {
width : '40%' ,
display : 'flex' ,
flexDirection : 'column' ,
height : '100%' ,
gap : 3
} } >
{ /* Network View - Takes 60% of the height */ }
< Box sx = { { flex : 0.6 , display : 'flex' , flexDirection : 'column' } } >
< Typography variant = "h6" sx = { { fontWeight : 600 , mb : 2 , color : 'primary.main' , flexShrink : 0 } } >
Network
< / Typography >
< Box sx = { {
flex : 1 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2 ,
overflow : 'hidden' ,
display : 'flex' ,
alignItems : 'center' ,
justifyContent : 'center' ,
position : 'relative'
} } >
{ renderNetworkView ( members , '100%' ) }
{ /* Fullscreen expand icon */ }
< IconButton
size = "small"
onClick = { ( ) = > handleFullscreenToggle ( 'network' ) }
sx = { {
position : 'absolute' ,
bottom : 8 ,
right : 8 ,
backgroundColor : 'rgba(255, 255, 255, 0.9)' ,
'&:hover' : {
backgroundColor : 'rgba(255, 255, 255, 1)' ,
} ,
zIndex : 10
} }
>
< Fullscreen fontSize = "small" / >
< / IconButton >
< / Box >
< / Box >
{ /* Map View - Takes 40% of the height */ }
< Box sx = { { flex : 0.4 , display : 'flex' , flexDirection : 'column' } } >
< Typography variant = "h6" sx = { { fontWeight : 600 , mb : 2 , color : 'primary.main' , flexShrink : 0 } } >
Member Locations
< / Typography >
< Box sx = { {
flex : 1 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2 ,
overflow : 'hidden' ,
position : 'relative'
} } >
{ renderMapView ( members , true ) }
{ /* Fullscreen expand icon */ }
< IconButton
size = "small"
onClick = { ( ) = > handleFullscreenToggle ( 'map' ) }
sx = { {
position : 'absolute' ,
bottom : 8 ,
right : 8 ,
backgroundColor : 'rgba(255, 255, 255, 0.9)' ,
'&:hover' : {
backgroundColor : 'rgba(255, 255, 255, 1)' ,
} ,
zIndex : 10
} }
>
< Fullscreen fontSize = "small" / >
< / IconButton >
< / Box >
< / Box >
< / Box >
< / Box >
{ /* Mobile Layout: Activity first, then Network, then Map - all naturally scrollable */ }
< Box sx = { {
display : { xs : 'block' , md : 'none' }
} } >
{ /* Activity View - First on mobile */ }
< Typography variant = "h6" sx = { { fontWeight : 600 , mb : 2 , color : 'primary.main' } } >
Activity Feed
< / Typography >
{ /* Filter Controls */ }
< Box sx = { { mb : 3 } } >
< Box sx = { { display : 'flex' , gap : 1 , flexWrap : 'wrap' } } >
< FormControl sx = { { minWidth : 120 , flex : 1 } } size = "small" >
< InputLabel id = "person-filter-label-mobile" > Person < / InputLabel >
< Select
labelId = "person-filter-label-mobile"
value = { selectedPersonFilter }
label = "Person"
onChange = { ( e ) = > setSelectedPersonFilter ( e . target . value ) }
>
{ allPeople . map ( person = > (
< MenuItem key = { person } value = { person } >
{ person === 'all' ? 'All' : person . split ( ' ' ) [ 0 ] }
< / MenuItem >
) ) }
< / Select >
< / FormControl >
< FormControl sx = { { minWidth : 120 , flex : 1 } } size = "small" >
< InputLabel id = "topic-filter-label-mobile" > Topic < / InputLabel >
< Select
labelId = "topic-filter-label-mobile"
value = { selectedTopicFilter }
label = "Topic"
onChange = { ( e ) = > setSelectedTopicFilter ( e . target . value ) }
>
{ allTopics . map ( topic = > (
< MenuItem key = { topic } value = { topic } >
{ topic === 'all' ? 'All' : topic }
< / MenuItem >
) ) }
< / Select >
< / FormControl >
< / Box >
< / Box >
{ /* Posts Feed - Natural height, no scroll container */ }
< Box sx = { { mb : 4 } } >
{ filteredPosts . length === 0 ? (
< Card sx = { { textAlign : 'center' , py : 6 } } >
< CardContent >
< Typography variant = "h6" color = "text.secondary" gutterBottom >
No posts match your filters
< / Typography >
< Typography variant = "body2" color = "text.secondary" >
Try adjusting your filter selection .
< / Typography >
< / CardContent >
< / Card >
) : ( ) : (
< Box > < Box >
{ filteredPosts . map ( renderPost ) } { filteredPosts . map ( renderPost ) }
< / Box > < / Box >
) } ) }
< / Box > < / Box >
{ /* Network View - Fixed height on mobile */ }
< Typography variant = "h6" sx = { { fontWeight : 600 , mb : 2 , color : 'primary.main' } } >
Network
< / Typography >
< Box sx = { {
height : '300px' ,
overflow : 'hidden' ,
mb : 4 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2
} } >
{ renderNetworkView ( members , '300px' ) }
< / Box >
{ /* Map View - Fixed height on mobile */ }
< Typography variant = "h6" sx = { { fontWeight : 600 , mb : 2 , color : 'primary.main' } } >
Member Locations
< / Typography >
< Box sx = { {
height : '300px' ,
overflow : 'hidden' ,
mb : 4 ,
border : 1 ,
borderColor : 'divider' ,
borderRadius : 2
} } >
{ renderMapView ( members , true ) }
< / Box >
< / Box >
< / Box >
) ; ) ;
} ; } ;
const renderMapTab = ( ) = > {
const members = getMockMembers ( ) ;
return renderMapView ( members ) ;
} ;
const renderNetworkView = ( members : any [ ] ) = > { const renderNetworkView = ( members : any [ ] , height? : string ) = > {
// Shared position calculation function for perfect alignment
// Shared position calculation function for perfect alignment
const getNodePosition = ( member : any ) = > { const getNodePosition = ( member : any ) = > {
const centerX = 290 ; // Moved 40px right from previous position (250 + 40 = 290)
const centerX = 400 ; // Center of 800px viewBox
const centerY = 375 ; // Moved 25px up from previous position (400 - 25 = 375)
const centerY = 400 ; // Center of 800px viewBox
const scale = 1.8 ; // Increased scale for better visibility
const scale = 1.8 ; // Increased scale for better visibility
const x = centerX + member . position . x * scale ; const x = centerX + member . position . x * scale ;
@ -939,19 +1293,22 @@ const GroupDetailPage = () => {
< Box
< Box
sx = { {
sx = { {
position : 'relative' ,
position : 'relative' ,
height : 'calc(100vh - 57px)' , // Full viewport height minus tabs header
height : '100%' ,
backgroundColor : 'grey.50' ,
backgroundColor : 'grey.50' ,
overflow : 'visible ' , overflow : 'hidden ' ,
width : '100%' , width : '100%' ,
display : 'flex' ,
alignItems : 'center' ,
justifyContent : 'center' ,
m : 0 , m : 0 ,
p : '5px 0 15px 0' // 5px top, 15px bottom padding
p : 1
} } } }
> >
{ /* SVG Network Graph */ } { /* SVG Network Graph */ }
< svg
< svg
width = "100 %"
width = "95 %"
height = "calc(100vh - 77px)" // Full viewport height minus tabs header and padding
height = "95%"
style = { { display : 'block' , paddingBottom : '60px' } } style = { { display : 'block' } }
viewBox = "0 0 800 800" viewBox = "0 0 800 800"
preserveAspectRatio = "xMidYMid meet" preserveAspectRatio = "xMidYMid meet"
> >
@ -1129,22 +1486,23 @@ const GroupDetailPage = () => {
} ; } ;
const renderMapView = ( members : any [ ] ) = > { const renderMapView = ( members : any [ ] , compact? : boolean ) = > {
const visibleMembers = members . filter ( m = > m . location ? . visible ) ; const visibleMembers = members . filter ( m = > m . location ? . visible ) ;
return ( return (
< Box > < Box sx = { { height : '100%' , width : '100%' } } >
{ /* World map view */ } { /* World map view */ }
< Box < Box
sx = { { sx = { {
position : 'relative' , position : 'relative' ,
height : 'calc(100vh - 200px) ' , height : '100% ' ,
borderRadius : 2 , width : '100%' ,
overflow : 'hidden' , overflow : 'hidden' ,
backgroundImage : ` url('/images/world-map.png') ` , backgroundImage : ` url('/images/world-map.png') ` ,
backgroundSize : 'cover' , backgroundSize : 'cover' ,
backgroundPosition : 'center' , backgroundPosition : 'center' ,
backgroundRepeat : 'no-repeat' backgroundRepeat : 'no-repeat' ,
backgroundColor : '#f5f5f5' // Light grey fallback to show container
} } } }
> >
{ /* Member locations */ } { /* Member locations */ }
@ -1198,82 +1556,86 @@ const GroupDetailPage = () => {
< Avatar < Avatar
src = { member . avatar } src = { member . avatar }
sx = { { sx = { {
width : 40 , width : compact ? 32 : 40 ,
height : 40 , height : compact ? 32 : 40 ,
border : 3 , border : compact ? 2 : 3 ,
borderColor : member.id === 'current-user' ? 'primary.main' : 'success.main' , borderColor : member.id === 'current-user' ? 'primary.main' : 'success.main' ,
boxShadow : member.id === 'current-user'
boxShadow : member.id === 'current-user'
? ` 0 0 15px ${ alpha ( theme . palette . primary . main , 0.6 ) } ` ? ` 0 0 ${ compact ? 10 : 15 } px ${ alpha ( theme . palette . primary . main , 0.6 ) } `
: ` 0 0 10px ${ alpha ( theme . palette . success . main , 0.4 ) } ` , : ` 0 0 ${ compact ? 6 : 10 } px ${ alpha ( theme . palette . success . main , 0.4 ) } ` ,
fontSize : '0.9rem' , fontSize : compact ? '0.75rem' : '0.9rem' ,
fontWeight : 600 fontWeight : 600 ,
backgroundSize : member.avatar ? getContactPhotoStyles ( member . name ) . backgroundSize : 'cover' ,
backgroundPosition : member.avatar ? getContactPhotoStyles ( member . name ) . backgroundPosition : 'center' ,
} } } }
> >
{ member . initials } { member . initials }
< / Avatar > < / Avatar >
{ /* Name tooltip */ } { /* Name tooltip - smaller in compact mode */ }
< Box < Box
sx = { { sx = { {
position : 'absolute' , position : 'absolute' ,
top : - 40 , top : compact ? - 32 : - 40 ,
left : '50%' , left : '50%' ,
transform : 'translateX(-50%)' , transform : 'translateX(-50%)' ,
backgroundColor : 'white' , backgroundColor : 'white' ,
px : 1 , px : compact ? 0.5 : 1 ,
py : 0.5 , py : compact ? 0.25 : 0.5 ,
borderRadius : 1 , borderRadius : 1 ,
border : 1 , border : 1 ,
borderColor : 'divider' , borderColor : 'divider' ,
boxShadow : 2 , boxShadow : compact ? 1 : 2 ,
fontSize : '0.75rem' , fontSize : compact ? '0.65rem' : '0.75rem' ,
fontWeight : 500 , fontWeight : 500 ,
whiteSpace : 'nowrap' , whiteSpace : 'nowrap' ,
pointerEvents : 'none' pointerEvents : 'none'
} } } }
> >
{ member . name } { compact ? member . name . split ( ' ' ) [ 0 ] : member . name }
< / Box > < / Box >
< / Box > < / Box >
) ; ) ;
} ) } } ) }
{ /* Map legend */ } { /* Map legend - smaller in compact mode */ }
< Box < Box
sx = { { sx = { {
position : 'absolute' , position : 'absolute' ,
bottom : 16 , bottom : compact ? 8 : 16 ,
left : 16 , left : compact ? 8 : 16 ,
backgroundColor : 'white' , backgroundColor : 'white' ,
p : 2 , p : compact ? 1 : 2 ,
borderRadius : 2 , borderRadius : 2 ,
border : 1 , border : 1 ,
borderColor : 'divider' , borderColor : 'divider' ,
boxShadow : 2 boxShadow : 2
} } } }
> >
< Typography variant = "subtitle2" gutterBottom sx = { { fontWeight : 600 } } > < Typography variant = { compact ? "caption" : } gutterBottom sx = { { fontWeight : 600 } } >
Location Sharing Location Sharing
< / Typography > < / Typography >
< Box sx = { { display : 'flex' , flexDirection : 'column' , gap : 1 } } > < Box sx = { { display : 'flex' , flexDirection : 'column' , gap : compact ? 0.5 : 1 } } >
< Box sx = { { display : 'flex' , alignItems : 'center' , gap : 1 } } > < Box sx = { { display : 'flex' , alignItems : 'center' , gap : 1 } } >
< Box sx = { { width : 12 , height : 12 , backgroundColor : 'success.main' , borderRadius : '50%' } } / > < Box sx = { { width : compact ? 8 : 12 , height : compact ? 8 : 12 , backgroundColor : 'success.main' , borderRadius : '50%' } } / >
< Typography variant = "caption" > { visibleMembers . length } members visible < / Typography > < Typography variant = "caption" > { visibleMembers . length } visible < / Typography >
< / Box > < / Box >
< Box sx = { { display : 'flex' , alignItems : 'center' , gap : 1 } } > < Box sx = { { display : 'flex' , alignItems : 'center' , gap : 1 } } >
< Box sx = { { width : 12 , height : 12 , backgroundColor : 'grey.400' , borderRadius : '50%' } } / > < Box sx = { { width : compact ? 8 : 12 , height : compact ? 8 : 12 , backgroundColor : 'grey.400' , borderRadius : '50%' } } / >
< Typography variant = "caption" > { members . length - visibleMembers . length } members private < / Typography > < Typography variant = "caption" > { members . length - visibleMembers . length } private < / Typography >
< / Box > < / Box >
< / Box > < / Box >
< / Box > < / Box >
< / Box > < / Box >
{ /* Privacy notice */ } { /* Privacy notice - hide in compact mode */ }
{ ! compact && (
< Box sx = { { mt : 2 , p : 2 , backgroundColor : alpha ( theme . palette . info . main , 0.1 ) , borderRadius : 2 } } > < Box sx = { { mt : 2 , p : 2 , backgroundColor : alpha ( theme . palette . info . main , 0.1 ) , borderRadius : 2 } } >
< Typography variant = "body2" color = "info.main" sx = { { fontWeight : 500 } } > < Typography variant = "body2" color = "info.main" sx = { { fontWeight : 500 } } >
📍 Location Privacy : Only members who have enabled location sharing are visible on the map . 📍 Location Privacy : Only members who have enabled location sharing are visible on the map .
< / Typography > < / Typography >
< / Box > < / Box >
) }
< / Box > < / Box >
) ; ) ;
} ; } ;
@ -1420,21 +1782,18 @@ const GroupDetailPage = () => {
return ( return (
< Box sx = { {
< Box sx = { {
height : '100%' , // Normal height
width : '100%' ,
width : '100%' ,
maxWidth : { xs : '100vw' , md : '100%' } ,
maxWidth : { xs : '100vw' , md : '100%' } ,
overflow : tabValue === 0 ? 'hidden' : 'hidden' , // Prevent scrolling for network tab
boxSizing : 'border-box' , boxSizing : 'border-box' ,
pt : { xs : 1.5 , md : 2 } , // Reduced top padding
mx : { xs : 0 , md : 'auto' } ,
pb : 0 , // No bottom padding
minHeight : '100vh' // Ensure minimum height but allow scrolling
mx : { xs : 0 , md : 'auto' }
} } > } } >
{ /* Header - Hidden for network tab to maximize space */ } { /* Header */ }
< Box sx = { {
< Box sx = { {
mb : { xs : 1.5 , md : 2 } , // Reduced bottom margin to match top
pt : { xs : 1.5 , md : 2 } ,
pb : { xs : 1 , md : 1.5 } ,
width : '100%' ,
width : '100%' ,
overflow : 'hidden' , overflow : 'hidden'
display : 'block' // Always show header
} } > } } >
{ /* Top row with back button, avatar, and title/description */ } { /* Top row with back button, avatar, and title/description */ }
< Box sx = { {
< Box sx = { {
@ -1525,13 +1884,10 @@ const GroupDetailPage = () => {
{ /* Navigation Tabs */ } { /* Navigation Tabs */ }
< Box sx = { {
< Box sx = { {
width : tabValue === 0 ? '100vw' : { xs : 'calc(100% + 20px)' , md : '100%' } ,
width : '100%' ,
maxWidth : tabValue === 0 ? '100vw' : { xs : 'calc(100vw - 0px)' , md : '100%' } ,
overflow : 'hidden' , overflow : 'hidden' ,
mx : tabValue === 0 ? 0 : { xs : '-10px' , md : 0 } , // Full width for network tab
boxSizing : 'border-box' , boxSizing : 'border-box' ,
backgroundColor : 'white' , // Force white background
backgroundColor : 'white'
height : 'auto' // Normal height
} } > } } >
< Tabs < Tabs
value = { tabValue } value = { tabValue }
@ -1562,9 +1918,7 @@ const GroupDetailPage = () => {
} }
} } } }
> >
< Tab icon = { < AccountTree / > } label = "Network" / > < Tab icon = { < Dashboard / > } label = "Overview" / >
< Tab icon = { < TrendingUp / > } label = "Activity" / >
< Tab icon = { < LocationOn / > } label = "Map" / >
< Tab icon = { < Chat / > } label = "Chat" / > < Tab icon = { < Chat / > } label = "Chat" / >
< Tab icon = { < Folder / > } label = "Files" / > < Tab icon = { < Folder / > } label = "Files" / >
< Tab icon = { < Link / > } label = "Links" / > < Tab icon = { < Link / > } label = "Links" / >
@ -1572,34 +1926,21 @@ const GroupDetailPage = () => {
{ /* Tab Content */ } { /* Tab Content */ }
< Box sx = { {
< Box sx = { {
pt : 3 , // Add top padding for space between tabs and content
pt : 3 ,
px : 0 , // No horizontal padding
px : 0 ,
pb : 0 , // No bottom padding
pb : 4 ,
width : '100%' ,
width : '100%' ,
maxWidth : '100%' ,
maxWidth : '100%' ,
overflow : 'visible' , // Let page scroll instead
boxSizing : 'border-box' , boxSizing : 'border-box' ,
height : tabValue === 0 ? 'calc(100vh - 200px)' : 'auto' , // Use viewport height for network tab only
backgroundColor : 'white'
backgroundColor : 'white' , // Force white background
minHeight : tabValue === 1 ? 'calc(100vh - 200px)' : 'auto' // Normal min height
} } > } } >
{ tabValue === 0 && renderNetworkTab ( ) } { tabValue === 0 && renderCombinedView ( ) }
{ tabValue === 1 && renderActivityTab ( ) } { tabValue === 1 && renderChatTab ( ) }
{ tabValue === 2 && renderMapTab ( ) } { tabValue === 2 && renderFilesTab ( ) }
{ tabValue === 3 && renderChatTab ( ) } { tabValue === 3 && renderLinksTab ( ) }
{ tabValue === 4 && renderFilesTab ( ) }
{ tabValue === 5 && renderLinksTab ( ) }
< / Box > < / Box >
< / Box > < / Box >
{ /* Show Post Create Button only on Activity tab */ }
{ tabValue === 1 && (
< PostCreateButton
groupId = { groupId }
onCreatePost = { handleCreatePost }
/ >
) }
{ /* Group Tour */ } { /* Group Tour */ }
< GroupTour < GroupTour
Claude Code Assistant
2 months ago