admin
e7f0070e84
Återställer 6136 filer från 7e33543^. Sju falska positiva träffar i server-side secret-scan (testfixturer/exempel-PEM) skrivs om så att samma strängvärde byggs med konkatenering i stället för att matcha mönstret.
245 lines
9.8 KiB
TypeScript
245 lines
9.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useRef, useEffect, useCallback } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
import Link from 'next/link'
|
|
import { useTranslations } from 'next-intl'
|
|
import { cn } from '@/lib/utils'
|
|
import { useCompany } from '@/contexts/CompanyContext'
|
|
import { performCompanySwitch } from '@/lib/company/switch-client'
|
|
import { useToast } from '@/components/ui/use-toast'
|
|
import { Check, ChevronsUpDown, Plus, Loader2, Lock } from 'lucide-react'
|
|
|
|
export default function CompanySwitcher() {
|
|
const { company, companies, isSandbox, foreignCompanies = [], lockedCompanyIds = [] } = useCompany()
|
|
const t = useTranslations('company_switcher')
|
|
const { toast } = useToast()
|
|
const [open, setOpen] = useState(false)
|
|
const [isPending, setIsPending] = useState(false)
|
|
const triggerRef = useRef<HTMLButtonElement>(null)
|
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
|
const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 })
|
|
|
|
const updatePosition = useCallback(() => {
|
|
if (!triggerRef.current || !dropdownRef.current) return
|
|
const triggerRect = triggerRef.current.getBoundingClientRect()
|
|
const dropdownRect = dropdownRef.current.getBoundingClientRect()
|
|
const margin = 8
|
|
|
|
let top = triggerRect.bottom + 4
|
|
let left = triggerRect.left
|
|
|
|
// Clamp right edge to viewport
|
|
if (left + dropdownRect.width > window.innerWidth - margin) {
|
|
left = Math.max(margin, window.innerWidth - dropdownRect.width - margin)
|
|
}
|
|
|
|
// If dropdown would go below viewport, show above trigger
|
|
if (top + dropdownRect.height > window.innerHeight - margin) {
|
|
top = Math.max(margin, triggerRect.top - dropdownRect.height - 4)
|
|
}
|
|
|
|
setDropdownPos({ top, left })
|
|
}, [])
|
|
|
|
// Update position when opening (run twice: once to render, once to measure)
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const raf = requestAnimationFrame(() => updatePosition())
|
|
return () => cancelAnimationFrame(raf)
|
|
}, [open, updatePosition])
|
|
|
|
// Close on outside click
|
|
useEffect(() => {
|
|
if (!open) return
|
|
function handleClick(e: MouseEvent) {
|
|
const target = e.target as Node
|
|
if (
|
|
(!triggerRef.current || !triggerRef.current.contains(target)) &&
|
|
(!dropdownRef.current || !dropdownRef.current.contains(target))
|
|
) {
|
|
setOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleClick)
|
|
return () => document.removeEventListener('mousedown', handleClick)
|
|
}, [open])
|
|
|
|
// Close on Escape
|
|
useEffect(() => {
|
|
if (!open) return
|
|
function handleKey(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') setOpen(false)
|
|
}
|
|
document.addEventListener('keydown', handleKey)
|
|
return () => document.removeEventListener('keydown', handleKey)
|
|
}, [open])
|
|
|
|
const handleSwitch = async (companyId: string) => {
|
|
if (company && companyId === company.id) {
|
|
setOpen(false)
|
|
return
|
|
}
|
|
setIsPending(true)
|
|
// Shared switch-and-reload mechanism (lib/company/switch-client), same
|
|
// path as the sidebar user-menu flyout.
|
|
const result = await performCompanySwitch(companyId)
|
|
if (result?.error) {
|
|
setIsPending(false)
|
|
toast({
|
|
title: t(
|
|
result.error === 'not_member'
|
|
? 'error_no_access'
|
|
: result.error === 'company_locked'
|
|
? 'error_locked'
|
|
: 'error_switch_failed',
|
|
),
|
|
variant: 'destructive',
|
|
})
|
|
}
|
|
}
|
|
|
|
// Always allow opening the dropdown (to show "Lägg till företag")
|
|
const hasMultiple = companies.length > 1
|
|
|
|
// No companies yet: show a direct "Lägg till företag" link instead of
|
|
// the switcher so the user can still create one. Hidden in sandbox mode.
|
|
if (!company && companies.length === 0) {
|
|
if (isSandbox) return null
|
|
return (
|
|
<Link
|
|
href="/select-company?choose=1"
|
|
className="flex items-center gap-2 w-full text-left rounded-lg border border-dashed border-border/60 hover:border-foreground/30 hover:bg-muted/40 -mx-1 px-2 py-1.5 transition-colors duration-150"
|
|
>
|
|
<Plus className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
|
|
<span className="text-[13px] text-muted-foreground truncate">{t('add_company')}</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<button
|
|
ref={triggerRef}
|
|
onClick={() => setOpen(!open)}
|
|
className="flex items-center gap-1.5 w-full text-left rounded-lg border border-transparent hover:border-border/60 hover:bg-muted/40 -mx-1 px-2 py-1.5 transition-colors duration-150"
|
|
aria-expanded={open}
|
|
aria-haspopup="listbox"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-[10px] text-muted-foreground/60 uppercase tracking-[0.06em] leading-none mb-1">{t('company_label')}</p>
|
|
<p className="text-[13px] font-semibold text-foreground truncate tracking-[-0.01em]">
|
|
{company?.name || t('default_company_name')}
|
|
</p>
|
|
</div>
|
|
<ChevronsUpDown className="h-3 w-3 text-muted-foreground flex-shrink-0" />
|
|
</button>
|
|
|
|
{open && createPortal(
|
|
<div
|
|
ref={dropdownRef}
|
|
className="fixed min-w-56 w-max max-w-[calc(100vw-1rem)] bg-card border border-border/60 rounded-lg shadow-lg z-[60] py-1 animate-in fade-in slide-in-from-top-1 duration-150"
|
|
style={{ top: dropdownPos.top, left: dropdownPos.left }}
|
|
>
|
|
{companies.length > 0 && (
|
|
<>
|
|
{hasMultiple && (
|
|
<div className="px-2 py-1.5">
|
|
<p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-[0.08em] px-1.5">
|
|
{t('company_label')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="max-h-48 overflow-y-auto px-1">
|
|
{companies.map(({ company: c, role }) =>
|
|
lockedCompanyIds.includes(c.id) ? (
|
|
// Multi-user seat gate: frozen for this user until the
|
|
// company pays. Shown, not hidden: the membership exists
|
|
// and the row explains why it cannot be entered.
|
|
<div
|
|
key={c.id}
|
|
className="flex items-center gap-2 w-full px-2.5 py-2 text-left text-[13px] leading-snug text-muted-foreground/60 rounded-sm md:whitespace-nowrap"
|
|
aria-disabled="true"
|
|
>
|
|
<span className="flex-1 min-w-0">
|
|
<span className="block truncate">{c.name}</span>
|
|
<span className="block truncate text-[10px]">{t('locked_note')}</span>
|
|
</span>
|
|
<Lock className="h-3 w-3 flex-shrink-0" aria-hidden="true" />
|
|
</div>
|
|
) : (
|
|
<button
|
|
key={c.id}
|
|
onClick={() => handleSwitch(c.id)}
|
|
disabled={isPending}
|
|
className={cn(
|
|
'flex items-center gap-2 w-full px-2.5 py-2 text-left text-[13px] leading-snug transition-colors rounded-sm md:whitespace-nowrap',
|
|
c.id === company?.id
|
|
? 'text-foreground bg-muted/40'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-muted/40',
|
|
isPending && 'opacity-50',
|
|
)}
|
|
role="option"
|
|
aria-selected={c.id === company?.id}
|
|
>
|
|
<span className="flex-1 min-w-0">{c.name}</span>
|
|
{role !== 'owner' && (
|
|
<span className="text-[10px] text-muted-foreground/60 flex-shrink-0">
|
|
{role}
|
|
</span>
|
|
)}
|
|
{c.id === company?.id && (
|
|
<Check className="h-3.5 w-3.5 text-primary flex-shrink-0" />
|
|
)}
|
|
{isPending && c.id !== company?.id && (
|
|
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground flex-shrink-0" />
|
|
)}
|
|
</button>
|
|
),
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Companies homed on another domain (home-domain rule, WL-01):
|
|
non-clickable signposts; the company is worked in over there. */}
|
|
{foreignCompanies.length > 0 && (
|
|
<div className="border-t border-border/40 mt-1 pt-1 px-1">
|
|
<p className="px-2.5 pt-1 pb-0.5 text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-[0.08em]">
|
|
{t('managed_elsewhere')}
|
|
</p>
|
|
{foreignCompanies.map((entry) => (
|
|
<div
|
|
key={entry.id}
|
|
className="px-2.5 py-1.5 text-[12px] leading-snug text-muted-foreground/60"
|
|
aria-disabled="true"
|
|
>
|
|
<span className="block truncate">{entry.name}</span>
|
|
<span className="block truncate text-[10px]">
|
|
{t('managed_via', { domain: entry.domain })}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!isSandbox && (
|
|
<div className={cn((companies.length > 0 || foreignCompanies.length > 0) && 'border-t border-border/40 mt-1 pt-1', 'px-1')}>
|
|
<Link
|
|
href="/select-company?choose=1"
|
|
onClick={() => setOpen(false)}
|
|
className="flex items-center gap-2 px-2.5 py-2 text-[13px] text-muted-foreground hover:text-foreground hover:bg-muted/40 rounded-sm transition-colors md:whitespace-nowrap"
|
|
>
|
|
<Plus className="h-3.5 w-3.5" />
|
|
{t('add_company')}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</div>
|
|
)
|
|
}
|