38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { MapPin, LogOut } from 'lucide-react';
|
|
import { trpc } from '@/lib/trpc/client';
|
|
|
|
/** Header chip showing the operator's current workstation, with a badge-out button. */
|
|
export function SessionBar({ code, name, area }: { code: string; name: string; area: string }) {
|
|
const ts = useTranslations('session');
|
|
const router = useRouter();
|
|
const endSession = trpc.operatorSession.end.useMutation({
|
|
onSuccess: () => router.refresh(),
|
|
});
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<MapPin className="h-5 w-5 shrink-0 text-primary" />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-muted-foreground">{ts('atStation')}</p>
|
|
<p className="truncate text-sm font-medium">
|
|
{code} — {name} <span className="text-xs text-muted-foreground">· {area}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => endSession.mutate()}
|
|
disabled={endSession.isPending}
|
|
className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
{ts('badgeOut')}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|