Mattsson
e4488a900b
* feat: add user locale preference to user_preferences table
- Introduced a new column 'locale' in the user_preferences table to store per-user UI language preferences.
- Added a CHECK constraint to ensure only supported locales ('sv', 'en') are allowed.
- Triggered a schema reload notification for the changes.
chore: declare CSS module support in TypeScript
- Added a declaration for CSS modules in globals.d.ts to enable TypeScript support for importing CSS files.
* feat: add Swish as an invoice payment method in company settings
211 lines
8.1 KiB
TypeScript
211 lines
8.1 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 { switchCompany } from '@/lib/company/actions'
|
|
import { Check, ChevronsUpDown, Plus, Loader2 } from 'lucide-react'
|
|
|
|
export default function CompanySwitcher() {
|
|
const { company, companies, isSandbox } = useCompany()
|
|
const t = useTranslations('company_switcher')
|
|
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)
|
|
const result = await switchCompany(companyId)
|
|
if (result.error) {
|
|
setIsPending(false)
|
|
return
|
|
}
|
|
// Notify every other open tab of the same user so they hard-reload
|
|
// onto the new company. BroadcastChannel is best-effort — if the
|
|
// browser doesn't support it (very old) we still hard-reload
|
|
// ourselves, and other tabs will self-correct via the visibilitychange
|
|
// / pageshow listeners in CompanyTabSync on their next focus event.
|
|
if (typeof BroadcastChannel !== 'undefined') {
|
|
try {
|
|
const channel = new BroadcastChannel('gnubok-company-switch')
|
|
channel.postMessage({ companyId })
|
|
channel.close()
|
|
} catch {
|
|
// Ignore — hard reload still happens below
|
|
}
|
|
}
|
|
// Hard navigation — tears down React state, router cache, in-flight
|
|
// fetches, blob URLs, etc. This is the whole point: nothing from the
|
|
// previous company can survive the switch.
|
|
window.location.assign('/')
|
|
}
|
|
|
|
// 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"
|
|
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-all 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-all 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 }) => (
|
|
<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-md 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>
|
|
</>
|
|
)}
|
|
|
|
{!isSandbox && (
|
|
<div className={cn(companies.length > 0 && 'border-t border-border/40 mt-1 pt-1', 'px-1')}>
|
|
<Link
|
|
href="/select-company"
|
|
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-md transition-colors md:whitespace-nowrap"
|
|
>
|
|
<Plus className="h-3.5 w-3.5" />
|
|
{t('add_company')}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</div>
|
|
)
|
|
}
|