61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { MapPin } from 'lucide-react';
|
|
import { trpc } from '@/lib/trpc/client';
|
|
|
|
interface Workstation {
|
|
id: string;
|
|
code: string;
|
|
name: string;
|
|
area: string;
|
|
}
|
|
|
|
/** Home-screen badge-in: pick a workstation to start an operator session. */
|
|
export function BadgeInPanel({ workstations }: { workstations: Workstation[] }) {
|
|
const ts = useTranslations('session');
|
|
const router = useRouter();
|
|
const startSession = trpc.operatorSession.start.useMutation({
|
|
onSuccess: () => router.refresh(),
|
|
});
|
|
|
|
return (
|
|
<section className="flex flex-col gap-4">
|
|
<div className="rounded-2xl border-2 border-dashed border-border bg-card p-5 text-center">
|
|
<MapPin className="mx-auto mb-2 h-7 w-7 text-primary" />
|
|
<h2 className="text-base font-semibold">{ts('badgeInTitle')}</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">{ts('badgeInPrompt')}</p>
|
|
</div>
|
|
|
|
{workstations.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{ts('noStations')}</p>
|
|
) : (
|
|
<div className="flex flex-col gap-3">
|
|
{workstations.map((ws) => (
|
|
<button
|
|
key={ws.id}
|
|
data-testid="badge-in-station"
|
|
onClick={() => startSession.mutate({ workstationId: ws.id })}
|
|
disabled={startSession.isPending}
|
|
className="flex w-full items-center gap-3 rounded-xl border border-border bg-card px-5 py-4 text-left transition-colors hover:bg-accent active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
<MapPin className="h-5 w-5 shrink-0 text-primary" />
|
|
<span>
|
|
<span className="block text-base font-medium">
|
|
{ws.code} — {ws.name}
|
|
</span>
|
|
<span className="block text-xs text-muted-foreground">{ws.area}</span>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{startSession.isPending && (
|
|
<p className="text-center text-sm text-muted-foreground">{ts('starting')}</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|