feat: Add mobile responsive layout, open room access, and admin room management
Mobile Responsive Layout: - Add useMediaQuery, useIsMobile, useIsTablet, useIsDesktop hooks for device detection - Create MobileHeader component with hamburger menu and action drawer - Create BottomToolbar for mobile navigation (Files, Members) - Create SlidePanel component for full-screen mobile sidebars - Update RoomDetail.tsx with mobile/desktop conditional rendering - Update RoomList.tsx with single-column grid and touch-friendly buttons - Add CSS custom properties for safe areas and touch targets (min 44px) - Add mobile viewport meta tags for notched devices Open Room Access: - All authenticated users can view all rooms (not just their own) - Users can join active rooms they're not members of - Add is_member field to room responses - Update room list API to return all rooms by default Admin Room Management: - Add permanent delete functionality for system admins - Add delete confirmation dialog with room title verification - Broadcast room deletion via WebSocket to connected users - Add users search API for adding members 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
egg
65
frontend/src/components/mobile/BottomToolbar.tsx
Normal file
65
frontend/src/components/mobile/BottomToolbar.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
interface BottomToolbarProps {
|
||||
showFiles: boolean
|
||||
showMembers: boolean
|
||||
memberCount: number
|
||||
onFilesToggle: () => void
|
||||
onMembersToggle: () => void
|
||||
}
|
||||
|
||||
export function BottomToolbar({
|
||||
showFiles,
|
||||
showMembers,
|
||||
memberCount,
|
||||
onFilesToggle,
|
||||
onMembersToggle,
|
||||
}: BottomToolbarProps) {
|
||||
return (
|
||||
<div className="bg-white border-t flex items-center justify-around px-4 py-2 safe-area-bottom">
|
||||
{/* Files button */}
|
||||
<button
|
||||
onClick={onFilesToggle}
|
||||
className={`flex flex-col items-center justify-center touch-target px-4 py-1 rounded-lg ${
|
||||
showFiles ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
|
||||
}`}
|
||||
aria-label="Toggle files panel"
|
||||
aria-pressed={showFiles}
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-xs mt-0.5">Files</span>
|
||||
</button>
|
||||
|
||||
{/* Members button */}
|
||||
<button
|
||||
onClick={onMembersToggle}
|
||||
className={`flex flex-col items-center justify-center touch-target px-4 py-1 rounded-lg ${
|
||||
showMembers ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
|
||||
}`}
|
||||
aria-label="Toggle members panel"
|
||||
aria-pressed={showMembers}
|
||||
>
|
||||
<div className="relative">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
{/* Member count badge */}
|
||||
<span className="absolute -top-1 -right-1 bg-gray-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
|
||||
{memberCount > 9 ? '9+' : memberCount}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs mt-0.5">Members</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
200
frontend/src/components/mobile/MobileHeader.tsx
Normal file
200
frontend/src/components/mobile/MobileHeader.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import type { RoomStatus } from '../../types'
|
||||
|
||||
interface MobileHeaderProps {
|
||||
title: string
|
||||
status: RoomStatus
|
||||
connectionStatus: 'connected' | 'connecting' | 'disconnected' | 'error'
|
||||
canUpdateStatus?: boolean
|
||||
isAdmin?: boolean
|
||||
isGeneratingReport?: boolean
|
||||
onGenerateReport: () => void
|
||||
onStatusChange: (status: RoomStatus) => void
|
||||
onPermanentDelete: () => void
|
||||
}
|
||||
|
||||
const statusColors: Record<RoomStatus, string> = {
|
||||
active: 'bg-green-100 text-green-800',
|
||||
resolved: 'bg-blue-100 text-blue-800',
|
||||
archived: 'bg-gray-100 text-gray-800',
|
||||
}
|
||||
|
||||
export function MobileHeader({
|
||||
title,
|
||||
status,
|
||||
connectionStatus,
|
||||
canUpdateStatus,
|
||||
isAdmin,
|
||||
isGeneratingReport,
|
||||
onGenerateReport,
|
||||
onStatusChange,
|
||||
onPermanentDelete,
|
||||
}: MobileHeaderProps) {
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Header Bar */}
|
||||
<header className="bg-white shadow-sm flex-shrink-0 safe-area-top">
|
||||
<div className="px-4 py-3 flex items-center justify-between">
|
||||
{/* Back button and title */}
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<Link
|
||||
to="/"
|
||||
className="touch-target flex items-center justify-center -ml-2 text-gray-600"
|
||||
aria-label="Back to room list"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="font-semibold text-gray-900 truncate text-base">{title}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[status]}`}>
|
||||
{status}
|
||||
</span>
|
||||
{/* Connection indicator */}
|
||||
<div className="flex items-center gap-1">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
connectionStatus === 'connected'
|
||||
? 'bg-green-500'
|
||||
: connectionStatus === 'connecting'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500' // disconnected or error
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hamburger menu button */}
|
||||
<button
|
||||
onClick={() => setShowMenu(true)}
|
||||
className="touch-target flex items-center justify-center text-gray-600"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Action Drawer Overlay */}
|
||||
{showMenu && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-black/50"
|
||||
onClick={() => setShowMenu(false)}
|
||||
>
|
||||
{/* Action Sheet */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl safe-area-bottom animate-slide-up"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Handle bar */}
|
||||
<div className="flex justify-center pt-3 pb-2">
|
||||
<div className="w-10 h-1 bg-gray-300 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Menu items */}
|
||||
<div className="px-4 pb-4 space-y-2">
|
||||
{/* Generate Report */}
|
||||
<button
|
||||
onClick={() => {
|
||||
onGenerateReport()
|
||||
setShowMenu(false)
|
||||
}}
|
||||
disabled={isGeneratingReport}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 active:bg-gray-100 disabled:opacity-50"
|
||||
>
|
||||
<svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-gray-900">{isGeneratingReport ? '生成中...' : '生成報告'}</span>
|
||||
</button>
|
||||
|
||||
{/* Status Actions */}
|
||||
{canUpdateStatus && status === 'active' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
onStatusChange('resolved')
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 active:bg-gray-100"
|
||||
>
|
||||
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span className="text-gray-900">Mark as Resolved</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
onStatusChange('archived')
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 active:bg-gray-100"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||
</svg>
|
||||
<span className="text-gray-900">Archive</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Admin: Permanent Delete */}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => {
|
||||
onPermanentDelete()
|
||||
setShowMenu(false)
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-red-50 active:bg-red-100"
|
||||
>
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
<span className="text-red-600">Delete Permanently</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Cancel button */}
|
||||
<button
|
||||
onClick={() => setShowMenu(false)}
|
||||
className="w-full px-4 py-3 rounded-lg bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 active:bg-gray-300 mt-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Animation keyframes - add to index.css if needed */}
|
||||
<style>{`
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slide-up 0.3s ease-out;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
)
|
||||
}
|
||||
102
frontend/src/components/mobile/SlidePanel.tsx
Normal file
102
frontend/src/components/mobile/SlidePanel.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
interface SlidePanelProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function SlidePanel({ isOpen, onClose, title, children }: SlidePanelProps) {
|
||||
const panelRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Handle escape key
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
return () => document.removeEventListener('keydown', handleEscape)
|
||||
}, [isOpen, onClose])
|
||||
|
||||
// Prevent body scroll when panel is open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
// Focus trap - focus panel when opened
|
||||
useEffect(() => {
|
||||
if (isOpen && panelRef.current) {
|
||||
panelRef.current.focus()
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 transition-opacity"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="absolute top-0 right-0 bottom-0 w-full max-w-sm bg-white shadow-xl flex flex-col animate-slide-in-right"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="panel-title"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b bg-white safe-area-top">
|
||||
<h2 id="panel-title" className="text-lg font-semibold text-gray-900">
|
||||
{title}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="touch-target flex items-center justify-center text-gray-500 hover:text-gray-700"
|
||||
aria-label="Close panel"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto safe-area-bottom">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Animation styles */}
|
||||
<style>{`
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.3s ease-out;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
3
frontend/src/components/mobile/index.ts
Normal file
3
frontend/src/components/mobile/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { MobileHeader } from './MobileHeader'
|
||||
export { BottomToolbar } from './BottomToolbar'
|
||||
export { SlidePanel } from './SlidePanel'
|
||||
@@ -38,3 +38,9 @@ export {
|
||||
useDownloadReport,
|
||||
useInvalidateReports,
|
||||
} from './useReports'
|
||||
export {
|
||||
useMediaQuery,
|
||||
useIsMobile,
|
||||
useIsTablet,
|
||||
useIsDesktop,
|
||||
} from './useMediaQuery'
|
||||
|
||||
174
frontend/src/hooks/useMediaQuery.test.ts
Normal file
174
frontend/src/hooks/useMediaQuery.test.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
import { renderHook, act } from '@testing-library/react'
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { useMediaQuery, useIsMobile, useIsTablet, useIsDesktop } from './useMediaQuery'
|
||||
|
||||
describe('useMediaQuery', () => {
|
||||
let matchMediaMock: ReturnType<typeof vi.fn>
|
||||
let listeners: Map<string, (e: MediaQueryListEvent) => void>
|
||||
|
||||
beforeEach(() => {
|
||||
listeners = new Map()
|
||||
|
||||
matchMediaMock = vi.fn((query: string) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
addEventListener: vi.fn((event: string, handler: (e: MediaQueryListEvent) => void) => {
|
||||
if (event === 'change') {
|
||||
listeners.set(query, handler)
|
||||
}
|
||||
}),
|
||||
removeEventListener: vi.fn((event: string) => {
|
||||
if (event === 'change') {
|
||||
listeners.delete(query)
|
||||
}
|
||||
}),
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
}))
|
||||
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: matchMediaMock,
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
listeners.clear()
|
||||
})
|
||||
|
||||
it('should return initial match state', () => {
|
||||
matchMediaMock.mockImplementation((query: string) => ({
|
||||
matches: query === '(max-width: 767px)',
|
||||
media: query,
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
}))
|
||||
|
||||
const { result } = renderHook(() => useMediaQuery('(max-width: 767px)'))
|
||||
expect(result.current).toBe(true)
|
||||
})
|
||||
|
||||
it('should return false when query does not match', () => {
|
||||
matchMediaMock.mockImplementation(() => ({
|
||||
matches: false,
|
||||
media: '(max-width: 767px)',
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
}))
|
||||
|
||||
const { result } = renderHook(() => useMediaQuery('(max-width: 767px)'))
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
|
||||
it('should update when media query changes', () => {
|
||||
let currentMatches = false
|
||||
let changeHandler: ((e: MediaQueryListEvent) => void) | null = null
|
||||
|
||||
matchMediaMock.mockImplementation((query: string) => ({
|
||||
matches: currentMatches,
|
||||
media: query,
|
||||
addEventListener: vi.fn((event: string, handler: (e: MediaQueryListEvent) => void) => {
|
||||
if (event === 'change') {
|
||||
changeHandler = handler
|
||||
}
|
||||
}),
|
||||
removeEventListener: vi.fn(),
|
||||
}))
|
||||
|
||||
const { result } = renderHook(() => useMediaQuery('(max-width: 767px)'))
|
||||
expect(result.current).toBe(false)
|
||||
|
||||
// Simulate viewport resize
|
||||
act(() => {
|
||||
currentMatches = true
|
||||
if (changeHandler) {
|
||||
changeHandler({ matches: true } as MediaQueryListEvent)
|
||||
}
|
||||
})
|
||||
|
||||
expect(result.current).toBe(true)
|
||||
})
|
||||
|
||||
it('should cleanup listener on unmount', () => {
|
||||
const removeEventListenerMock = vi.fn()
|
||||
|
||||
matchMediaMock.mockImplementation(() => ({
|
||||
matches: false,
|
||||
media: '(max-width: 767px)',
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: removeEventListenerMock,
|
||||
}))
|
||||
|
||||
const { unmount } = renderHook(() => useMediaQuery('(max-width: 767px)'))
|
||||
unmount()
|
||||
|
||||
expect(removeEventListenerMock).toHaveBeenCalledWith('change', expect.any(Function))
|
||||
})
|
||||
})
|
||||
|
||||
describe('useIsMobile', () => {
|
||||
it('should return true when viewport is mobile width', () => {
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn((query: string) => ({
|
||||
matches: query === '(max-width: 767px)',
|
||||
media: query,
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
})),
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useIsMobile())
|
||||
expect(result.current).toBe(true)
|
||||
})
|
||||
|
||||
it('should return false when viewport is not mobile width', () => {
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn(() => ({
|
||||
matches: false,
|
||||
media: '(max-width: 767px)',
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
})),
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useIsMobile())
|
||||
expect(result.current).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('useIsTablet', () => {
|
||||
it('should return true when viewport is tablet width', () => {
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn((query: string) => ({
|
||||
matches: query === '(min-width: 768px) and (max-width: 1023px)',
|
||||
media: query,
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
})),
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useIsTablet())
|
||||
expect(result.current).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('useIsDesktop', () => {
|
||||
it('should return true when viewport is desktop width', () => {
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn((query: string) => ({
|
||||
matches: query === '(min-width: 1024px)',
|
||||
media: query,
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
})),
|
||||
})
|
||||
|
||||
const { result } = renderHook(() => useIsDesktop())
|
||||
expect(result.current).toBe(true)
|
||||
})
|
||||
})
|
||||
74
frontend/src/hooks/useMediaQuery.ts
Normal file
74
frontend/src/hooks/useMediaQuery.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
/**
|
||||
* Custom hook for responsive breakpoint detection using CSS media queries.
|
||||
* Updates when the viewport is resized across breakpoints.
|
||||
*/
|
||||
export function useMediaQuery(query: string): boolean {
|
||||
const [matches, setMatches] = useState<boolean>(() => {
|
||||
// Check if window is available (SSR safety)
|
||||
if (typeof window !== 'undefined') {
|
||||
return window.matchMedia(query).matches
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
|
||||
const mediaQuery = window.matchMedia(query)
|
||||
|
||||
// Set initial value
|
||||
setMatches(mediaQuery.matches)
|
||||
|
||||
// Create event handler
|
||||
const handleChange = (event: MediaQueryListEvent) => {
|
||||
setMatches(event.matches)
|
||||
}
|
||||
|
||||
// Add listener (using modern API with fallback)
|
||||
if (mediaQuery.addEventListener) {
|
||||
mediaQuery.addEventListener('change', handleChange)
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
mediaQuery.addListener(handleChange)
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
if (mediaQuery.removeEventListener) {
|
||||
mediaQuery.removeEventListener('change', handleChange)
|
||||
} else {
|
||||
mediaQuery.removeListener(handleChange)
|
||||
}
|
||||
}
|
||||
}, [query])
|
||||
|
||||
return matches
|
||||
}
|
||||
|
||||
// Breakpoints aligned with Tailwind CSS defaults
|
||||
const MOBILE_BREAKPOINT = '(max-width: 767px)'
|
||||
const TABLET_BREAKPOINT = '(min-width: 768px) and (max-width: 1023px)'
|
||||
const DESKTOP_BREAKPOINT = '(min-width: 1024px)'
|
||||
|
||||
/**
|
||||
* Returns true when viewport width is less than 768px (mobile devices)
|
||||
*/
|
||||
export function useIsMobile(): boolean {
|
||||
return useMediaQuery(MOBILE_BREAKPOINT)
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true when viewport width is between 768px and 1023px (tablets)
|
||||
*/
|
||||
export function useIsTablet(): boolean {
|
||||
return useMediaQuery(TABLET_BREAKPOINT)
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true when viewport width is 1024px or greater (desktops)
|
||||
*/
|
||||
export function useIsDesktop(): boolean {
|
||||
return useMediaQuery(DESKTOP_BREAKPOINT)
|
||||
}
|
||||
@@ -78,6 +78,29 @@ export function useDeleteRoom() {
|
||||
})
|
||||
}
|
||||
|
||||
export function usePermanentDeleteRoom() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (roomId: string) => roomsService.permanentDeleteRoom(roomId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: roomKeys.lists() })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useJoinRoom() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (roomId: string) => roomsService.joinRoom(roomId),
|
||||
onSuccess: (_, roomId) => {
|
||||
queryClient.invalidateQueries({ queryKey: roomKeys.detail(roomId) })
|
||||
queryClient.invalidateQueries({ queryKey: roomKeys.lists() })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useAddMember(roomId: string) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
|
||||
11
frontend/src/hooks/useUsers.ts
Normal file
11
frontend/src/hooks/useUsers.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { usersService } from '../services/users'
|
||||
|
||||
export function useUserSearch(query: string, enabled: boolean = true) {
|
||||
return useQuery({
|
||||
queryKey: ['users', 'search', query],
|
||||
queryFn: () => usersService.searchUsers(query),
|
||||
enabled: enabled && query.length >= 1,
|
||||
staleTime: 1000 * 60, // 1 minute
|
||||
})
|
||||
}
|
||||
@@ -19,6 +19,7 @@ interface UseWebSocketOptions {
|
||||
onMessage?: (message: Message) => void
|
||||
onFileUploaded?: (data: FileUploadedBroadcast) => void
|
||||
onFileDeleted?: (data: FileDeletedBroadcast) => void
|
||||
onRoomDeleted?: (roomId: string) => void
|
||||
}
|
||||
|
||||
export function useWebSocket(roomId: string | null, options?: UseWebSocketOptions) {
|
||||
@@ -137,6 +138,8 @@ export function useWebSocket(roomId: string | null, options?: UseWebSocketOption
|
||||
addOnlineUser(systemData.user_id || '')
|
||||
} else if (systemData.event === 'user_left') {
|
||||
removeOnlineUser(systemData.user_id || '')
|
||||
} else if (systemData.event === 'room_deleted') {
|
||||
options?.onRoomDeleted?.(systemData.room_id || '')
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
@@ -4,14 +4,56 @@
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
/* Safe area insets for notched devices (iPhone X+) */
|
||||
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
||||
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
||||
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
||||
|
||||
/* Mobile-specific spacing */
|
||||
--mobile-header-height: 56px;
|
||||
--mobile-bottom-toolbar-height: 56px;
|
||||
--touch-target-min: 44px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
/* Prevent pull-to-refresh on mobile */
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Utility class for safe area padding */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: max(var(--safe-area-inset-bottom), 16px);
|
||||
}
|
||||
|
||||
.safe-area-top {
|
||||
padding-top: max(var(--safe-area-inset-top), 0px);
|
||||
}
|
||||
|
||||
/* Touch-friendly minimum size utility */
|
||||
.touch-target {
|
||||
min-width: var(--touch-target-min);
|
||||
min-height: var(--touch-target-min);
|
||||
}
|
||||
|
||||
/* Prevent text selection on touch for UI elements */
|
||||
.no-select {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
/* Smooth transitions for layout changes */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.transition-layout {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ describe('Login', () => {
|
||||
|
||||
expect(screen.getByText('Task Reporter')).toBeInTheDocument()
|
||||
expect(screen.getByLabelText(/email/i)).toBeInTheDocument()
|
||||
expect(screen.getByLabelText(/password/i)).toBeInTheDocument()
|
||||
expect(screen.getByPlaceholderText(/enter your password/i)).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
@@ -48,7 +48,13 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
expect(screen.getByLabelText(/email/i)).toHaveValue('')
|
||||
expect(screen.getByLabelText(/password/i)).toHaveValue('')
|
||||
expect(screen.getByPlaceholderText(/enter your password/i)).toHaveValue('')
|
||||
})
|
||||
|
||||
it('should have password visibility toggle', () => {
|
||||
render(<Login />)
|
||||
|
||||
expect(screen.getByLabelText(/show password/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -58,7 +64,7 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
const emailInput = screen.getByLabelText(/email/i)
|
||||
const passwordInput = screen.getByLabelText(/password/i)
|
||||
const passwordInput = screen.getByPlaceholderText(/enter your password/i)
|
||||
|
||||
await user.type(emailInput, 'test@example.com')
|
||||
await user.type(passwordInput, 'password123')
|
||||
@@ -67,6 +73,22 @@ describe('Login', () => {
|
||||
expect(passwordInput).toHaveValue('password123')
|
||||
})
|
||||
|
||||
it('should toggle password visibility', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<Login />)
|
||||
|
||||
const passwordInput = screen.getByPlaceholderText(/enter your password/i)
|
||||
const toggleButton = screen.getByLabelText(/show password/i)
|
||||
|
||||
expect(passwordInput).toHaveAttribute('type', 'password')
|
||||
|
||||
await user.click(toggleButton)
|
||||
expect(passwordInput).toHaveAttribute('type', 'text')
|
||||
|
||||
await user.click(screen.getByLabelText(/hide password/i))
|
||||
expect(passwordInput).toHaveAttribute('type', 'password')
|
||||
})
|
||||
|
||||
it('should submit form with credentials', async () => {
|
||||
vi.mocked(authService.login).mockResolvedValue({
|
||||
token: 'test-token',
|
||||
@@ -77,7 +99,7 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'testuser')
|
||||
await user.type(screen.getByLabelText(/password/i), 'password123')
|
||||
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
|
||||
await user.click(screen.getByRole('button', { name: /login/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
@@ -98,7 +120,7 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'testuser')
|
||||
await user.type(screen.getByLabelText(/password/i), 'password123')
|
||||
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
|
||||
await user.click(screen.getByRole('button', { name: /login/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
@@ -116,7 +138,7 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'testuser')
|
||||
await user.type(screen.getByLabelText(/password/i), 'password123')
|
||||
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
|
||||
await user.click(screen.getByRole('button', { name: /login/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
@@ -135,7 +157,7 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'testuser')
|
||||
await user.type(screen.getByLabelText(/password/i), 'wrongpassword')
|
||||
await user.type(screen.getByPlaceholderText(/enter your password/i), 'wrongpassword')
|
||||
await user.click(screen.getByRole('button', { name: /login/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
@@ -155,7 +177,7 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'testuser')
|
||||
await user.type(screen.getByLabelText(/password/i), 'password123')
|
||||
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
|
||||
await user.click(screen.getByRole('button', { name: /login/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
@@ -172,11 +194,11 @@ describe('Login', () => {
|
||||
render(<Login />)
|
||||
|
||||
await user.type(screen.getByLabelText(/email/i), 'testuser')
|
||||
await user.type(screen.getByLabelText(/password/i), 'password123')
|
||||
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
|
||||
await user.click(screen.getByRole('button', { name: /login/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button')).toBeDisabled()
|
||||
expect(screen.getByRole('button', { name: /logging in/i })).toBeDisabled()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function Login() {
|
||||
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: () => authService.login({ username, password }),
|
||||
@@ -68,16 +69,61 @@ export default function Login() {
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
|
||||
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||
>
|
||||
{showPassword ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useParams, Link } from 'react-router'
|
||||
import { useParams, Link, useNavigate } from 'react-router'
|
||||
import {
|
||||
useRoom,
|
||||
useRoomPermissions,
|
||||
@@ -7,15 +7,19 @@ import {
|
||||
useAddMember,
|
||||
useUpdateMemberRole,
|
||||
useRemoveMember,
|
||||
usePermanentDeleteRoom,
|
||||
} from '../hooks/useRooms'
|
||||
import { useMessages } from '../hooks/useMessages'
|
||||
import { useWebSocket } from '../hooks/useWebSocket'
|
||||
import { useFiles, useUploadFile, useDeleteFile } from '../hooks/useFiles'
|
||||
import { useGenerateReport, useDownloadReport } from '../hooks/useReports'
|
||||
import { useUserSearch } from '../hooks/useUsers'
|
||||
import { useIsMobile } from '../hooks/useMediaQuery'
|
||||
import { filesService } from '../services/files'
|
||||
import { useChatStore } from '../stores/chatStore'
|
||||
import { useAuthStore } from '../stores/authStore'
|
||||
import { useAuthStore, useIsAdmin } from '../stores/authStore'
|
||||
import { Breadcrumb } from '../components/common'
|
||||
import { MobileHeader, BottomToolbar, SlidePanel } from '../components/mobile'
|
||||
import ReportProgress from '../components/report/ReportProgress'
|
||||
import type { SeverityLevel, RoomStatus, MemberRole, FileMetadata, ReportStatus } from '../types'
|
||||
|
||||
@@ -42,20 +46,36 @@ const QUICK_EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '🎉']
|
||||
|
||||
export default function RoomDetail() {
|
||||
const { roomId } = useParams<{ roomId: string }>()
|
||||
const navigate = useNavigate()
|
||||
const user = useAuthStore((state) => state.user)
|
||||
const isAdmin = useIsAdmin()
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
const { data: room, isLoading: roomLoading, error: roomError } = useRoom(roomId || '')
|
||||
const { data: permissions } = useRoomPermissions(roomId || '')
|
||||
const { data: messagesData, isLoading: messagesLoading } = useMessages(roomId || '', { limit: 50 })
|
||||
|
||||
const { messages, connectionStatus, typingUsers, onlineUsers, setMessages, setCurrentRoom } = useChatStore()
|
||||
const { sendTextMessage, sendTyping, editMessage, deleteMessage, addReaction, removeReaction } = useWebSocket(roomId || null)
|
||||
|
||||
// Handle room deleted event from WebSocket
|
||||
const handleRoomDeleted = useCallback((deletedRoomId: string) => {
|
||||
if (deletedRoomId === roomId) {
|
||||
alert('This room has been permanently deleted by an administrator.')
|
||||
navigate('/')
|
||||
}
|
||||
}, [roomId, navigate])
|
||||
|
||||
const { sendTextMessage, sendTyping, editMessage, deleteMessage, addReaction, removeReaction } = useWebSocket(
|
||||
roomId || null,
|
||||
{ onRoomDeleted: handleRoomDeleted }
|
||||
)
|
||||
|
||||
// Mutations
|
||||
const updateRoom = useUpdateRoom(roomId || '')
|
||||
const addMember = useAddMember(roomId || '')
|
||||
const updateMemberRole = useUpdateMemberRole(roomId || '')
|
||||
const removeMember = useRemoveMember(roomId || '')
|
||||
const permanentDeleteRoom = usePermanentDeleteRoom()
|
||||
|
||||
// File hooks
|
||||
const { data: filesData, isLoading: filesLoading } = useFiles(roomId || '')
|
||||
@@ -88,8 +108,35 @@ export default function RoomDetail() {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [newMemberUsername, setNewMemberUsername] = useState('')
|
||||
const [newMemberRole, setNewMemberRole] = useState<MemberRole>('viewer')
|
||||
const [userSearchQuery, setUserSearchQuery] = useState('')
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
|
||||
const [showUserDropdown, setShowUserDropdown] = useState(false)
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||
const [deleteConfirmInput, setDeleteConfirmInput] = useState('')
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
const typingTimeoutRef = useRef<number | null>(null)
|
||||
const searchTimeoutRef = useRef<number | null>(null)
|
||||
|
||||
// User search with debounce
|
||||
const { data: userSearchResults, isLoading: userSearchLoading } = useUserSearch(
|
||||
debouncedSearchQuery,
|
||||
showAddMember && debouncedSearchQuery.length >= 1
|
||||
)
|
||||
|
||||
// Debounce user search
|
||||
useEffect(() => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current)
|
||||
}
|
||||
searchTimeoutRef.current = window.setTimeout(() => {
|
||||
setDebouncedSearchQuery(userSearchQuery)
|
||||
}, 300)
|
||||
return () => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current)
|
||||
}
|
||||
}
|
||||
}, [userSearchQuery])
|
||||
|
||||
// Initialize room
|
||||
useEffect(() => {
|
||||
@@ -188,6 +235,8 @@ export default function RoomDetail() {
|
||||
onSuccess: () => {
|
||||
setNewMemberUsername('')
|
||||
setNewMemberRole('viewer')
|
||||
setUserSearchQuery('')
|
||||
setShowUserDropdown(false)
|
||||
setShowAddMember(false)
|
||||
},
|
||||
}
|
||||
@@ -204,6 +253,17 @@ export default function RoomDetail() {
|
||||
}
|
||||
}
|
||||
|
||||
// Permanent delete room (admin only)
|
||||
const handlePermanentDelete = () => {
|
||||
if (!roomId || !room) return
|
||||
|
||||
permanentDeleteRoom.mutate(roomId, {
|
||||
onSuccess: () => {
|
||||
navigate('/')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// File handlers
|
||||
const handleFileUpload = useCallback(
|
||||
(files: FileList | null) => {
|
||||
@@ -341,129 +401,159 @@ export default function RoomDetail() {
|
||||
const typingUsersArray = Array.from(typingUsers).filter((u) => u !== user?.username)
|
||||
const onlineUsersArray = Array.from(onlineUsers)
|
||||
|
||||
// Toggle handlers for mobile
|
||||
const handleFilesToggle = () => {
|
||||
setShowFiles(!showFiles)
|
||||
if (!isMobile) setShowMembers(false)
|
||||
}
|
||||
|
||||
const handleMembersToggle = () => {
|
||||
setShowMembers(!showMembers)
|
||||
if (!isMobile) setShowFiles(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm flex-shrink-0">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-2">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Rooms', href: '/' },
|
||||
{ label: room.title },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<h1 className="font-semibold text-gray-900">{room.title}</h1>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[room.status]}`}>
|
||||
{room.status}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${severityColors[room.severity]}`}>
|
||||
{room.severity}
|
||||
</span>
|
||||
{room.location && <span className="text-gray-500">{room.location}</span>}
|
||||
{/* Header - Mobile vs Desktop */}
|
||||
{isMobile ? (
|
||||
<MobileHeader
|
||||
title={room.title}
|
||||
status={room.status}
|
||||
connectionStatus={connectionStatus}
|
||||
canUpdateStatus={permissions?.can_update_status}
|
||||
isAdmin={isAdmin}
|
||||
isGeneratingReport={generateReport.isPending}
|
||||
onGenerateReport={handleGenerateReport}
|
||||
onStatusChange={handleStatusChange}
|
||||
onPermanentDelete={() => setShowDeleteConfirm(true)}
|
||||
/>
|
||||
) : (
|
||||
<header className="bg-white shadow-sm flex-shrink-0">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-2">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Rooms', href: '/' },
|
||||
{ label: room.title },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<h1 className="font-semibold text-gray-900">{room.title}</h1>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[room.status]}`}>
|
||||
{room.status}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${severityColors[room.severity]}`}>
|
||||
{room.severity}
|
||||
</span>
|
||||
{room.location && <span className="text-gray-500">{room.location}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Connection Status */}
|
||||
<div className="flex items-center gap-1">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
connectionStatus === 'connected'
|
||||
? 'bg-green-500'
|
||||
: connectionStatus === 'connecting'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs text-gray-500">
|
||||
{connectionStatus === 'connected' ? 'Connected' : connectionStatus}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Generate Report Button */}
|
||||
<button
|
||||
onClick={handleGenerateReport}
|
||||
disabled={generateReport.isPending}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Connection Status */}
|
||||
<div className="flex items-center gap-1">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
connectionStatus === 'connected'
|
||||
? 'bg-green-500'
|
||||
: connectionStatus === 'connecting'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
</svg>
|
||||
{generateReport.isPending ? '生成中...' : '生成報告'}
|
||||
</button>
|
||||
|
||||
{/* Status Actions (Owner only) */}
|
||||
{permissions?.can_update_status && room.status === 'active' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleStatusChange('resolved')}
|
||||
className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleStatusChange('archived')}
|
||||
className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
|
||||
>
|
||||
Archive
|
||||
</button>
|
||||
<span className="text-xs text-gray-500">
|
||||
{connectionStatus === 'connected' ? 'Connected' : connectionStatus}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Files Toggle */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowFiles(!showFiles)
|
||||
setShowMembers(false)
|
||||
}}
|
||||
className={`flex items-center gap-1 ${showFiles ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm">Files</span>
|
||||
</button>
|
||||
{/* Generate Report Button */}
|
||||
<button
|
||||
onClick={handleGenerateReport}
|
||||
disabled={generateReport.isPending}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
{generateReport.isPending ? '生成中...' : '生成報告'}
|
||||
</button>
|
||||
|
||||
{/* Members Toggle */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowMembers(!showMembers)
|
||||
setShowFiles(false)
|
||||
}}
|
||||
className={`flex items-center gap-1 ${showMembers ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm">{room.member_count}</span>
|
||||
</button>
|
||||
{/* Status Actions (Owner only) */}
|
||||
{permissions?.can_update_status && room.status === 'active' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleStatusChange('resolved')}
|
||||
className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleStatusChange('archived')}
|
||||
className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
|
||||
>
|
||||
Archive
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Permanent Delete (Admin only) */}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200"
|
||||
title="Permanently delete this room (Admin only)"
|
||||
>
|
||||
Delete Permanently
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Files Toggle */}
|
||||
<button
|
||||
onClick={handleFilesToggle}
|
||||
className={`flex items-center gap-1 ${showFiles ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm">Files</span>
|
||||
</button>
|
||||
|
||||
{/* Members Toggle */}
|
||||
<button
|
||||
onClick={handleMembersToggle}
|
||||
className={`flex items-center gap-1 ${showMembers ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm">{room.member_count}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
@@ -639,29 +729,44 @@ export default function RoomDetail() {
|
||||
|
||||
{/* Message Input */}
|
||||
{permissions?.can_write && (
|
||||
<form onSubmit={handleSendMessage} className="p-4 bg-white border-t">
|
||||
<form onSubmit={handleSendMessage} className={`p-4 bg-white border-t ${isMobile ? 'pb-2' : ''}`}>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={messageInput}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Type a message..."
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
className={`flex-1 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none ${
|
||||
isMobile ? 'py-3 text-base' : 'py-2'
|
||||
}`}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!messageInput.trim()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className={`bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed ${
|
||||
isMobile ? 'px-5 py-3 touch-target' : 'px-4 py-2'
|
||||
}`}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Bottom Toolbar - Mobile Only */}
|
||||
{isMobile && (
|
||||
<BottomToolbar
|
||||
showFiles={showFiles}
|
||||
showMembers={showMembers}
|
||||
memberCount={room.member_count || 0}
|
||||
onFilesToggle={handleFilesToggle}
|
||||
onMembersToggle={handleMembersToggle}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Members Sidebar */}
|
||||
{showMembers && (
|
||||
{/* Members Sidebar - Desktop Only */}
|
||||
{!isMobile && showMembers && (
|
||||
<div className="w-72 bg-white border-l flex-shrink-0 overflow-y-auto">
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
@@ -679,13 +784,53 @@ export default function RoomDetail() {
|
||||
{/* Add Member Form */}
|
||||
{showAddMember && (
|
||||
<form onSubmit={handleAddMember} className="mb-4 p-3 bg-gray-50 rounded-lg">
|
||||
<input
|
||||
type="text"
|
||||
value={newMemberUsername}
|
||||
onChange={(e) => setNewMemberUsername(e.target.value)}
|
||||
placeholder="Username"
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded mb-2"
|
||||
/>
|
||||
<div className="relative mb-2">
|
||||
<input
|
||||
type="text"
|
||||
value={userSearchQuery}
|
||||
onChange={(e) => {
|
||||
setUserSearchQuery(e.target.value)
|
||||
setShowUserDropdown(true)
|
||||
if (e.target.value !== newMemberUsername) {
|
||||
setNewMemberUsername('')
|
||||
}
|
||||
}}
|
||||
onFocus={() => setShowUserDropdown(true)}
|
||||
placeholder="Search user by name or email..."
|
||||
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded"
|
||||
/>
|
||||
{/* User Search Dropdown */}
|
||||
{showUserDropdown && userSearchQuery.length >= 1 && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
|
||||
{userSearchLoading ? (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">Searching...</div>
|
||||
) : userSearchResults && userSearchResults.length > 0 ? (
|
||||
userSearchResults.map((result) => (
|
||||
<button
|
||||
key={result.user_id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNewMemberUsername(result.user_id)
|
||||
setUserSearchQuery(result.display_name || result.user_id)
|
||||
setShowUserDropdown(false)
|
||||
}}
|
||||
className="w-full px-3 py-2 text-left hover:bg-gray-100 text-sm"
|
||||
>
|
||||
<div className="font-medium text-gray-900">{result.display_name}</div>
|
||||
<div className="text-xs text-gray-500">{result.user_id}</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-3 py-2 text-sm text-gray-500">No users found</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{newMemberUsername && (
|
||||
<div className="text-xs text-green-600 mb-2">
|
||||
Selected: {newMemberUsername}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={newMemberRole}
|
||||
@@ -697,7 +842,7 @@ export default function RoomDetail() {
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addMember.isPending}
|
||||
disabled={addMember.isPending || !newMemberUsername}
|
||||
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
Add
|
||||
@@ -711,57 +856,72 @@ export default function RoomDetail() {
|
||||
|
||||
{/* Member List */}
|
||||
<div className="space-y-2">
|
||||
{room.members?.map((member) => (
|
||||
<div
|
||||
key={member.user_id}
|
||||
className="flex items-center justify-between py-2 px-2 hover:bg-gray-50 rounded"
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
||||
onlineUsersArray.includes(member.user_id) ? 'bg-green-500' : 'bg-gray-300'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-900 truncate">{member.user_id}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{/* Role selector (Owner can change roles except their own) */}
|
||||
{permissions?.role === 'owner' && member.role !== 'owner' ? (
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={(e) => handleRoleChange(member.user_id, e.target.value as MemberRole)}
|
||||
className="text-xs px-1 py-0.5 border border-gray-200 rounded"
|
||||
>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs text-gray-500 px-1">{roleLabels[member.role]}</span>
|
||||
)}
|
||||
{/* Remove button (Owner/Editor can remove, but not the owner) */}
|
||||
{permissions?.can_manage_members &&
|
||||
member.role !== 'owner' &&
|
||||
member.user_id !== user?.username && (
|
||||
<button
|
||||
onClick={() => handleRemoveMember(member.user_id)}
|
||||
className="p-1 text-gray-400 hover:text-red-500"
|
||||
title="Remove member"
|
||||
{room.members?.map((member) => {
|
||||
const isOwner = permissions?.role === 'owner'
|
||||
const isEditor = permissions?.role === 'editor'
|
||||
const canUpgradeToEditor = isEditor && member.role === 'viewer'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={member.user_id}
|
||||
className="flex items-center justify-between py-2 px-2 hover:bg-gray-50 rounded"
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
||||
onlineUsersArray.includes(member.user_id) ? 'bg-green-500' : 'bg-gray-300'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-900 truncate">{member.user_id}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{/* Owner: Full role selector */}
|
||||
{isOwner && member.role !== 'owner' ? (
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={(e) => handleRoleChange(member.user_id, e.target.value as MemberRole)}
|
||||
className="text-xs px-1 py-0.5 border border-gray-200 rounded"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
</select>
|
||||
) : canUpgradeToEditor ? (
|
||||
/* Editor: Can only upgrade viewer to editor */
|
||||
<button
|
||||
onClick={() => handleRoleChange(member.user_id, 'editor')}
|
||||
className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded hover:bg-green-200"
|
||||
title="Upgrade to Editor"
|
||||
>
|
||||
Upgrade
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-xs text-gray-500 px-1">{roleLabels[member.role]}</span>
|
||||
)}
|
||||
{/* Remove button: Only owner can remove, editors cannot */}
|
||||
{isOwner &&
|
||||
member.role !== 'owner' &&
|
||||
member.user_id !== user?.username && (
|
||||
<button
|
||||
onClick={() => handleRemoveMember(member.user_id)}
|
||||
className="p-1 text-gray-400 hover:text-red-500"
|
||||
title="Remove member"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Files Sidebar */}
|
||||
{showFiles && (
|
||||
{/* Files Sidebar - Desktop Only */}
|
||||
{!isMobile && showFiles && (
|
||||
<div className="w-80 bg-white border-l flex-shrink-0 overflow-y-auto">
|
||||
<div className="p-4">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Files</h3>
|
||||
@@ -894,6 +1054,276 @@ export default function RoomDetail() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Members SlidePanel */}
|
||||
{isMobile && (
|
||||
<SlidePanel
|
||||
isOpen={showMembers}
|
||||
onClose={() => setShowMembers(false)}
|
||||
title="Members"
|
||||
>
|
||||
<div className="p-4">
|
||||
{permissions?.can_manage_members && (
|
||||
<button
|
||||
onClick={() => setShowAddMember(!showAddMember)}
|
||||
className="w-full mb-4 px-4 py-3 text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 touch-target"
|
||||
>
|
||||
+ Add Member
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Add Member Form */}
|
||||
{showAddMember && (
|
||||
<form onSubmit={handleAddMember} className="mb-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="relative mb-3">
|
||||
<input
|
||||
type="text"
|
||||
value={userSearchQuery}
|
||||
onChange={(e) => {
|
||||
setUserSearchQuery(e.target.value)
|
||||
setShowUserDropdown(true)
|
||||
if (e.target.value !== newMemberUsername) {
|
||||
setNewMemberUsername('')
|
||||
}
|
||||
}}
|
||||
onFocus={() => setShowUserDropdown(true)}
|
||||
placeholder="Search user by name or email..."
|
||||
className="w-full px-4 py-3 text-base border border-gray-300 rounded-lg"
|
||||
/>
|
||||
{showUserDropdown && userSearchQuery.length >= 1 && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
|
||||
{userSearchLoading ? (
|
||||
<div className="px-4 py-3 text-gray-500">Searching...</div>
|
||||
) : userSearchResults && userSearchResults.length > 0 ? (
|
||||
userSearchResults.map((result) => (
|
||||
<button
|
||||
key={result.user_id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNewMemberUsername(result.user_id)
|
||||
setUserSearchQuery(result.display_name || result.user_id)
|
||||
setShowUserDropdown(false)
|
||||
}}
|
||||
className="w-full px-4 py-3 text-left hover:bg-gray-100 touch-target"
|
||||
>
|
||||
<div className="font-medium text-gray-900">{result.display_name}</div>
|
||||
<div className="text-sm text-gray-500">{result.user_id}</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-3 text-gray-500">No users found</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{newMemberUsername && (
|
||||
<div className="text-sm text-green-600 mb-3">Selected: {newMemberUsername}</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<select
|
||||
value={newMemberRole}
|
||||
onChange={(e) => setNewMemberRole(e.target.value as MemberRole)}
|
||||
className="flex-1 px-4 py-3 text-base border border-gray-300 rounded-lg"
|
||||
>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addMember.isPending || !newMemberUsername}
|
||||
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 touch-target"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Member List */}
|
||||
<div className="space-y-1">
|
||||
{room.members?.map((member) => {
|
||||
const isOwner = permissions?.role === 'owner'
|
||||
const isEditor = permissions?.role === 'editor'
|
||||
const canUpgradeToEditor = isEditor && member.role === 'viewer'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={member.user_id}
|
||||
className="flex items-center justify-between py-3 px-3 hover:bg-gray-50 rounded-lg touch-target"
|
||||
>
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full flex-shrink-0 ${
|
||||
onlineUsersArray.includes(member.user_id) ? 'bg-green-500' : 'bg-gray-300'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-base text-gray-900 truncate">{member.user_id}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{isOwner && member.role !== 'owner' ? (
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={(e) => handleRoleChange(member.user_id, e.target.value as MemberRole)}
|
||||
className="text-sm px-2 py-1 border border-gray-200 rounded"
|
||||
>
|
||||
<option value="viewer">Viewer</option>
|
||||
<option value="editor">Editor</option>
|
||||
</select>
|
||||
) : canUpgradeToEditor ? (
|
||||
<button
|
||||
onClick={() => handleRoleChange(member.user_id, 'editor')}
|
||||
className="text-sm px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200"
|
||||
>
|
||||
Upgrade
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-sm text-gray-500">{roleLabels[member.role]}</span>
|
||||
)}
|
||||
{isOwner && member.role !== 'owner' && member.user_id !== user?.username && (
|
||||
<button
|
||||
onClick={() => handleRemoveMember(member.user_id)}
|
||||
className="p-2 text-gray-400 hover:text-red-500 touch-target"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</SlidePanel>
|
||||
)}
|
||||
|
||||
{/* Mobile Files SlidePanel */}
|
||||
{isMobile && (
|
||||
<SlidePanel
|
||||
isOpen={showFiles}
|
||||
onClose={() => setShowFiles(false)}
|
||||
title="Files"
|
||||
>
|
||||
<div className="p-4">
|
||||
{/* Upload Area */}
|
||||
{permissions?.can_write && (
|
||||
<div
|
||||
className={`mb-4 border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
|
||||
isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
|
||||
}`}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={(e) => handleFileUpload(e.target.files)}
|
||||
className="hidden"
|
||||
/>
|
||||
{uploadProgress !== null ? (
|
||||
<div>
|
||||
<div className="text-base text-gray-600 mb-2">Uploading...</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">{uploadProgress}%</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-10 h-10 mx-auto text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 touch-target"
|
||||
>
|
||||
Choose File
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File List */}
|
||||
{filesLoading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
|
||||
</div>
|
||||
) : filesData?.files.length === 0 ? (
|
||||
<p className="text-base text-gray-500 text-center py-8">No files uploaded yet</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filesData?.files.map((file) => (
|
||||
<div
|
||||
key={file.file_id}
|
||||
className="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg"
|
||||
>
|
||||
{/* Thumbnail or Icon */}
|
||||
<div className="w-12 h-12 flex-shrink-0 rounded bg-gray-100 flex items-center justify-center overflow-hidden">
|
||||
{filesService.isImage(file.mime_type) ? (
|
||||
<svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* File Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-base text-gray-900 truncate">{file.filename}</p>
|
||||
<p className="text-sm text-gray-500">{filesService.formatFileSize(file.file_size)}</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1">
|
||||
{filesService.isImage(file.mime_type) && (
|
||||
<button
|
||||
onClick={() => setPreviewFile(file)}
|
||||
className="p-2 text-gray-400 hover:text-blue-500 touch-target"
|
||||
title="Preview"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDownloadFile(file)}
|
||||
className="p-2 text-gray-400 hover:text-blue-500 touch-target"
|
||||
title="Download"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
</button>
|
||||
{(file.uploader_id === user?.username || permissions?.can_delete) && (
|
||||
<button
|
||||
onClick={() => handleDeleteFile(file.file_id)}
|
||||
className="p-2 text-gray-400 hover:text-red-500 touch-target"
|
||||
title="Delete"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SlidePanel>
|
||||
)}
|
||||
|
||||
{/* Image Preview Modal */}
|
||||
{previewFile && (
|
||||
<div
|
||||
@@ -941,6 +1371,74 @@ export default function RoomDetail() {
|
||||
reportId={reportProgress.reportId}
|
||||
onDownload={handleDownloadReport}
|
||||
/>
|
||||
|
||||
{/* Permanent Delete Confirmation Modal (Admin only) */}
|
||||
{showDeleteConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
|
||||
<h2 className="text-xl font-semibold text-red-600 mb-4">
|
||||
Permanently Delete Room
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<p className="text-sm text-red-800 font-medium mb-2">
|
||||
This action cannot be undone!
|
||||
</p>
|
||||
<p className="text-sm text-red-700">
|
||||
The following will be permanently deleted:
|
||||
</p>
|
||||
<ul className="text-sm text-red-700 list-disc list-inside mt-2">
|
||||
<li>All members and permissions</li>
|
||||
<li>All messages and reactions</li>
|
||||
<li>All uploaded files</li>
|
||||
<li>All generated reports</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Type <span className="font-bold">"{room?.title}"</span> to confirm:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deleteConfirmInput}
|
||||
onChange={(e) => setDeleteConfirmInput(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
|
||||
placeholder="Enter room title"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{permanentDeleteRoom.isError && (
|
||||
<div className="bg-red-50 text-red-600 px-3 py-2 rounded-lg text-sm">
|
||||
Failed to delete room. Please try again.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowDeleteConfirm(false)
|
||||
setDeleteConfirmInput('')
|
||||
}}
|
||||
className="px-4 py-2 text-gray-600 hover:text-gray-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePermanentDelete}
|
||||
disabled={deleteConfirmInput !== room?.title || permanentDeleteRoom.isPending}
|
||||
className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{permanentDeleteRoom.isPending ? 'Deleting...' : 'Delete Permanently'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import { useRooms, useCreateRoom, useRoomTemplates } from '../hooks/useRooms'
|
||||
import { useAuthStore } from '../stores/authStore'
|
||||
import { Link, useNavigate } from 'react-router'
|
||||
import { useRooms, useCreateRoom, useRoomTemplates, useJoinRoom } from '../hooks/useRooms'
|
||||
import { useAuthStore, useIsAdmin } from '../stores/authStore'
|
||||
import { useIsMobile } from '../hooks/useMediaQuery'
|
||||
import { Breadcrumb } from '../components/common'
|
||||
import type { RoomStatus, IncidentType, SeverityLevel, CreateRoomRequest } from '../types'
|
||||
import type { RoomStatus, IncidentType, SeverityLevel, CreateRoomRequest, Room } from '../types'
|
||||
|
||||
const statusColors: Record<RoomStatus, string> = {
|
||||
active: 'bg-green-100 text-green-800',
|
||||
@@ -28,13 +29,19 @@ const incidentTypeLabels: Record<IncidentType, string> = {
|
||||
const ITEMS_PER_PAGE = 12
|
||||
|
||||
export default function RoomList() {
|
||||
const navigate = useNavigate()
|
||||
const user = useAuthStore((state) => state.user)
|
||||
const clearAuth = useAuthStore((state) => state.clearAuth)
|
||||
const isAdmin = useIsAdmin()
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
const [statusFilter, setStatusFilter] = useState<RoomStatus | ''>('')
|
||||
const [statusFilter, setStatusFilter] = useState<RoomStatus | ''>('active')
|
||||
const [search, setSearch] = useState('')
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [myRoomsOnly, setMyRoomsOnly] = useState(false)
|
||||
|
||||
const joinRoom = useJoinRoom()
|
||||
|
||||
// Reset page when filters change
|
||||
const handleStatusChange = (status: RoomStatus | '') => {
|
||||
@@ -47,9 +54,25 @@ export default function RoomList() {
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handleMyRoomsToggle = () => {
|
||||
setMyRoomsOnly(!myRoomsOnly)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
const handleJoinRoom = (e: React.MouseEvent, roomId: string) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
joinRoom.mutate(roomId, {
|
||||
onSuccess: () => {
|
||||
navigate(`/rooms/${roomId}`)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const { data, isLoading, error } = useRooms({
|
||||
status: statusFilter || undefined,
|
||||
search: search || undefined,
|
||||
my_rooms: myRoomsOnly || undefined,
|
||||
limit: ITEMS_PER_PAGE,
|
||||
offset: (page - 1) * ITEMS_PER_PAGE,
|
||||
})
|
||||
@@ -63,60 +86,90 @@ export default function RoomList() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<h1 className="text-xl font-bold text-gray-900">Task Reporter</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-gray-600">{user?.display_name}</span>
|
||||
<header className="bg-white shadow-sm safe-area-top">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3 sm:py-4 flex justify-between items-center">
|
||||
<h1 className={`font-bold text-gray-900 ${isMobile ? 'text-lg' : 'text-xl'}`}>Task Reporter</h1>
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{!isMobile && <span className="text-gray-600">{user?.display_name}</span>}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
className={`text-gray-500 hover:text-gray-700 ${isMobile ? 'touch-target p-2' : ''}`}
|
||||
aria-label="Logout"
|
||||
>
|
||||
Logout
|
||||
{isMobile ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
) : (
|
||||
'Logout'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 py-6">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-4">
|
||||
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Rooms' }]} />
|
||||
</div>
|
||||
<main className={`max-w-7xl mx-auto px-4 py-4 sm:py-6 ${isMobile ? 'safe-area-bottom' : ''}`}>
|
||||
{/* Breadcrumb - hide on mobile */}
|
||||
{!isMobile && (
|
||||
<div className="mb-4">
|
||||
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Rooms' }]} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
{/* Search */}
|
||||
<div className="flex flex-col gap-3 mb-4 sm:mb-6">
|
||||
{/* Search - Full width on mobile */}
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search rooms..."
|
||||
value={search}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
className={`w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none ${
|
||||
isMobile ? 'px-4 py-3 text-base' : 'px-4 py-2'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusChange(e.target.value as RoomStatus | '')}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="resolved">Resolved</option>
|
||||
<option value="archived">Archived</option>
|
||||
</select>
|
||||
{/* Filter Row */}
|
||||
<div className="flex flex-wrap gap-2 sm:gap-4">
|
||||
{/* Status Filter */}
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusChange(e.target.value as RoomStatus | '')}
|
||||
className={`border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none flex-1 sm:flex-none ${
|
||||
isMobile ? 'px-3 py-3 text-base min-w-0' : 'px-4 py-2'
|
||||
}`}
|
||||
>
|
||||
{isAdmin && <option value="">All Status</option>}
|
||||
<option value="active">Active</option>
|
||||
<option value="resolved">Resolved</option>
|
||||
{isAdmin && <option value="archived">Archived</option>}
|
||||
</select>
|
||||
|
||||
{/* New Room Button */}
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
+ New Room
|
||||
</button>
|
||||
{/* My Rooms Filter */}
|
||||
<button
|
||||
onClick={handleMyRoomsToggle}
|
||||
className={`rounded-lg border transition-colors flex-1 sm:flex-none ${
|
||||
myRoomsOnly
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||
} ${isMobile ? 'px-3 py-3 text-base' : 'px-4 py-2'}`}
|
||||
>
|
||||
{myRoomsOnly ? 'Show All' : 'My Rooms'}
|
||||
</button>
|
||||
|
||||
{/* New Room Button */}
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className={`bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex-1 sm:flex-none ${
|
||||
isMobile ? 'px-3 py-3 text-base' : 'px-4 py-2'
|
||||
}`}
|
||||
>
|
||||
+ New Room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Room List */}
|
||||
@@ -141,56 +194,15 @@ export default function RoomList() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className={`grid gap-4 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'}`}>
|
||||
{data?.rooms.map((room) => (
|
||||
<Link
|
||||
<RoomCard
|
||||
key={room.room_id}
|
||||
to={`/rooms/${room.room_id}`}
|
||||
className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow"
|
||||
>
|
||||
{/* Room Header */}
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="font-semibold text-gray-900 truncate flex-1">
|
||||
{room.title}
|
||||
</h3>
|
||||
<span
|
||||
className={`ml-2 px-2 py-0.5 rounded text-xs font-medium ${
|
||||
statusColors[room.status]
|
||||
}`}
|
||||
>
|
||||
{room.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Type and Severity */}
|
||||
<div className="flex gap-2 mb-3">
|
||||
<span className="text-xs text-gray-500">
|
||||
{incidentTypeLabels[room.incident_type]}
|
||||
</span>
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
severityColors[room.severity]
|
||||
}`}
|
||||
>
|
||||
{room.severity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{room.description && (
|
||||
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
|
||||
{room.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between items-center text-xs text-gray-400">
|
||||
<span>{room.member_count} members</span>
|
||||
<span>
|
||||
{new Date(room.last_activity_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
room={room}
|
||||
onJoin={handleJoinRoom}
|
||||
isJoining={joinRoom.isPending}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -231,6 +243,97 @@ export default function RoomList() {
|
||||
)
|
||||
}
|
||||
|
||||
// Room Card Component
|
||||
function RoomCard({
|
||||
room,
|
||||
onJoin,
|
||||
isJoining,
|
||||
isMobile,
|
||||
}: {
|
||||
room: Room
|
||||
onJoin: (e: React.MouseEvent, roomId: string) => void
|
||||
isJoining: boolean
|
||||
isMobile: boolean
|
||||
}) {
|
||||
const isMember = room.is_member || room.current_user_role !== null
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={isMember ? `/rooms/${room.room_id}` : '#'}
|
||||
onClick={!isMember ? (e) => e.preventDefault() : undefined}
|
||||
className={`bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow block ${
|
||||
isMobile ? 'p-4' : 'p-4'
|
||||
}`}
|
||||
>
|
||||
{/* Room Header */}
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className={`font-semibold text-gray-900 truncate flex-1 ${isMobile ? 'text-base' : ''}`}>
|
||||
{room.title}
|
||||
</h3>
|
||||
<div className="flex gap-1 ml-2 flex-shrink-0">
|
||||
{isMember && (
|
||||
<span className={`rounded font-medium bg-blue-100 text-blue-800 ${
|
||||
isMobile ? 'px-2 py-1 text-xs' : 'px-2 py-0.5 text-xs'
|
||||
}`}>
|
||||
Member
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={`rounded font-medium ${statusColors[room.status]} ${
|
||||
isMobile ? 'px-2 py-1 text-xs' : 'px-2 py-0.5 text-xs'
|
||||
}`}
|
||||
>
|
||||
{room.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type and Severity */}
|
||||
<div className="flex gap-2 mb-3 flex-wrap">
|
||||
<span className={`text-gray-500 ${isMobile ? 'text-sm' : 'text-xs'}`}>
|
||||
{incidentTypeLabels[room.incident_type]}
|
||||
</span>
|
||||
<span
|
||||
className={`rounded font-medium ${severityColors[room.severity]} ${
|
||||
isMobile ? 'px-2 py-1 text-xs' : 'px-2 py-0.5 text-xs'
|
||||
}`}
|
||||
>
|
||||
{room.severity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{room.description && (
|
||||
<p className={`text-gray-600 mb-3 line-clamp-2 ${isMobile ? 'text-base' : 'text-sm'}`}>
|
||||
{room.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className={`text-gray-400 ${isMobile ? 'text-sm' : 'text-xs'}`}>
|
||||
{room.member_count} members
|
||||
</span>
|
||||
{!isMember && room.status !== 'archived' ? (
|
||||
<button
|
||||
onClick={(e) => onJoin(e, room.room_id)}
|
||||
disabled={isJoining}
|
||||
className={`bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 ${
|
||||
isMobile ? 'px-4 py-2 text-base touch-target' : 'px-3 py-1 text-sm'
|
||||
}`}
|
||||
>
|
||||
{isJoining ? 'Joining...' : 'Join'}
|
||||
</button>
|
||||
) : (
|
||||
<span className={`text-gray-400 ${isMobile ? 'text-sm' : 'text-xs'}`}>
|
||||
{new Date(room.last_activity_at).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
// Create Room Modal Component
|
||||
function CreateRoomModal({ onClose }: { onClose: () => void }) {
|
||||
const [title, setTitle] = useState('')
|
||||
|
||||
@@ -12,10 +12,24 @@ const api = axios.create({
|
||||
},
|
||||
})
|
||||
|
||||
// Helper to get token from zustand persist storage
|
||||
function getAuthToken(): string | null {
|
||||
try {
|
||||
const authStorage = localStorage.getItem('auth-storage')
|
||||
if (authStorage) {
|
||||
const parsed = JSON.parse(authStorage)
|
||||
return parsed.state?.token || null
|
||||
}
|
||||
} catch {
|
||||
// Ignore parse errors
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// Request interceptor - add auth token
|
||||
api.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
const token = localStorage.getItem('token')
|
||||
const token = getAuthToken()
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
@@ -31,9 +45,8 @@ api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error: AxiosError) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Token expired or invalid - clear storage and redirect to login
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
// Token expired or invalid - clear zustand auth storage and redirect to login
|
||||
localStorage.removeItem('auth-storage')
|
||||
|
||||
// Only redirect if not already on login page
|
||||
if (window.location.pathname !== '/login') {
|
||||
|
||||
@@ -18,7 +18,7 @@ export interface RoomFilters {
|
||||
incident_type?: IncidentType
|
||||
severity?: SeverityLevel
|
||||
search?: string
|
||||
all?: boolean
|
||||
my_rooms?: boolean
|
||||
limit?: number
|
||||
offset?: number
|
||||
}
|
||||
@@ -35,7 +35,7 @@ export const roomsService = {
|
||||
if (filters.incident_type) params.append('incident_type', filters.incident_type)
|
||||
if (filters.severity) params.append('severity', filters.severity)
|
||||
if (filters.search) params.append('search', filters.search)
|
||||
if (filters.all) params.append('all', 'true')
|
||||
if (filters.my_rooms) params.append('my_rooms', 'true')
|
||||
if (filters.limit) params.append('limit', filters.limit.toString())
|
||||
if (filters.offset) params.append('offset', filters.offset.toString())
|
||||
}
|
||||
@@ -75,6 +75,22 @@ export const roomsService = {
|
||||
await api.delete(`/rooms/${roomId}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* Permanently delete room (admin only)
|
||||
* This is an irreversible operation that deletes all room data.
|
||||
*/
|
||||
async permanentDeleteRoom(roomId: string): Promise<void> {
|
||||
await api.delete(`/rooms/${roomId}/permanent`)
|
||||
},
|
||||
|
||||
/**
|
||||
* Self-join a room as a viewer
|
||||
*/
|
||||
async joinRoom(roomId: string): Promise<RoomMember> {
|
||||
const response = await api.post<RoomMember>(`/rooms/${roomId}/join`)
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* Get room members
|
||||
*/
|
||||
|
||||
16
frontend/src/services/users.ts
Normal file
16
frontend/src/services/users.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import api from './api'
|
||||
|
||||
export interface UserSearchResult {
|
||||
user_id: string
|
||||
display_name: string
|
||||
}
|
||||
|
||||
export const usersService = {
|
||||
/**
|
||||
* Search users by name or email
|
||||
*/
|
||||
async searchUsers(query: string): Promise<UserSearchResult[]> {
|
||||
const response = await api.get<UserSearchResult[]>(`/users/search?q=${encodeURIComponent(query)}`)
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
@@ -2,6 +2,9 @@ import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import type { User } from '../types'
|
||||
|
||||
// System admin email - must match backend SYSTEM_ADMIN_EMAIL
|
||||
const SYSTEM_ADMIN_EMAIL = 'ymirliu@panjit.com.tw'
|
||||
|
||||
interface AuthState {
|
||||
token: string | null
|
||||
user: User | null
|
||||
@@ -49,3 +52,18 @@ export const useAuthStore = create<AuthState>()(
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
/**
|
||||
* Check if the current user is a system administrator
|
||||
*/
|
||||
export function isSystemAdmin(username: string | undefined): boolean {
|
||||
return username === SYSTEM_ADMIN_EMAIL
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to check if current user is admin
|
||||
*/
|
||||
export function useIsAdmin(): boolean {
|
||||
const user = useAuthStore((state) => state.user)
|
||||
return isSystemAdmin(user?.username)
|
||||
}
|
||||
|
||||
@@ -48,6 +48,7 @@ export interface Room {
|
||||
member_count: number
|
||||
members?: RoomMember[]
|
||||
current_user_role?: MemberRole | null
|
||||
is_member?: boolean
|
||||
is_admin_view?: boolean
|
||||
}
|
||||
|
||||
@@ -183,6 +184,7 @@ export type SystemEventType =
|
||||
| 'member_removed'
|
||||
| 'file_uploaded'
|
||||
| 'file_deleted'
|
||||
| 'room_deleted'
|
||||
|
||||
export interface WebSocketMessageIn {
|
||||
type: WebSocketMessageType
|
||||
|
||||
Reference in New Issue
Block a user