fix: resolve admin panel API path issues and ActionMenu overflow

- Fix duplicate /api/v1 paths in admin API calls
- Fix ActionMenu dropdown being clipped by using React Portal
- Fix TeamCategoriesPage API endpoints

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-08 06:53:21 -05:00
parent 159161aa59
commit f4eb3fe186
3 changed files with 75 additions and 48 deletions

View File

@@ -1,4 +1,5 @@
import { useState, useRef, useEffect, type ReactNode } from 'react'
import { createPortal } from 'react-dom'
import { MoreHorizontal } from 'lucide-react'
import { cn } from '@/lib/utils'
@@ -16,12 +17,29 @@ interface ActionMenuProps {
export function ActionMenu({ items }: ActionMenuProps) {
const [open, setOpen] = useState(false)
const ref = useRef<HTMLDivElement>(null)
const buttonRef = useRef<HTMLButtonElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0 })
// Calculate menu position when opened
useEffect(() => {
if (open && buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect()
setMenuPosition({
top: rect.bottom + window.scrollY + 4, // 4px gap (mt-1)
right: window.innerWidth - rect.right + window.scrollX,
})
}
}, [open])
// Close menu when clicking outside
useEffect(() => {
if (!open) return
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) {
if (
buttonRef.current && !buttonRef.current.contains(e.target as Node) &&
menuRef.current && !menuRef.current.contains(e.target as Node)
) {
setOpen(false)
}
}
@@ -30,8 +48,9 @@ export function ActionMenu({ items }: ActionMenuProps) {
}, [open])
return (
<div className="relative" ref={ref}>
<>
<button
ref={buttonRef}
onClick={() => setOpen(!open)}
className={cn(
'rounded-md p-1.5 text-muted-foreground transition-colors',
@@ -40,11 +59,18 @@ export function ActionMenu({ items }: ActionMenuProps) {
>
<MoreHorizontal className="h-4 w-4" />
</button>
{open && (
<div className={cn(
'absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-md border border-border',
'bg-card py-1 shadow-lg animate-scale-in'
)}>
{open && createPortal(
<div
ref={menuRef}
className={cn(
'fixed z-50 min-w-[160px] rounded-md border border-border',
'bg-card py-1 shadow-lg animate-scale-in'
)}
style={{
top: `${menuPosition.top}px`,
right: `${menuPosition.right}px`,
}}
>
{items.map((item) => (
<button
key={item.label}
@@ -62,9 +88,10 @@ export function ActionMenu({ items }: ActionMenuProps) {
{item.label}
</button>
))}
</div>
</div>,
document.body
)}
</div>
</>
)
}