276 lines
7.7 KiB
TypeScript
276 lines
7.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { signIn } from 'next-auth/react';
|
|
import { ArrowLeft, Delete, MapPin } from 'lucide-react';
|
|
import { trpc } from '@/lib/trpc/client';
|
|
|
|
interface Operator {
|
|
id: string;
|
|
email: string;
|
|
}
|
|
|
|
type PickerState =
|
|
| { step: 'list' }
|
|
| { step: 'pin'; operator: Operator }
|
|
| { step: 'workstation'; operator: Operator };
|
|
|
|
const PIN_MIN = 4;
|
|
const PIN_MAX = 6;
|
|
|
|
function OperatorList({
|
|
operators,
|
|
onSelect,
|
|
t,
|
|
}: {
|
|
operators: Operator[];
|
|
onSelect: (op: Operator) => void;
|
|
t: ReturnType<typeof useTranslations<'auth'>>;
|
|
}) {
|
|
if (operators.length === 0) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground">{t('noOperators')}</p>
|
|
);
|
|
}
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
{operators.map((op) => (
|
|
<button
|
|
key={op.id}
|
|
onClick={() => onSelect(op)}
|
|
className="w-full rounded-xl border border-border bg-card px-6 py-5 text-left text-base font-medium transition-colors hover:bg-accent active:scale-[0.98]"
|
|
>
|
|
{op.email}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PinPad({
|
|
operator,
|
|
onBack,
|
|
onSuccess,
|
|
t,
|
|
tc,
|
|
}: {
|
|
operator: Operator;
|
|
onBack: () => void;
|
|
onSuccess: () => void;
|
|
t: ReturnType<typeof useTranslations<'auth'>>;
|
|
tc: ReturnType<typeof useTranslations<'common'>>;
|
|
}) {
|
|
const [digits, setDigits] = useState('');
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
function press(d: string) {
|
|
if (digits.length >= PIN_MAX) return;
|
|
setDigits((prev) => prev + d);
|
|
setError(null);
|
|
}
|
|
|
|
function erase() {
|
|
setDigits((prev) => prev.slice(0, -1));
|
|
setError(null);
|
|
}
|
|
|
|
async function submit() {
|
|
if (digits.length < PIN_MIN || busy) return;
|
|
setBusy(true);
|
|
setError(null);
|
|
try {
|
|
const result = await signIn('credentials', {
|
|
email: operator.email,
|
|
pin: digits,
|
|
redirect: false,
|
|
});
|
|
if (result?.error) {
|
|
setDigits('');
|
|
setError(t('invalidPin'));
|
|
} else {
|
|
// Authenticated — next step is binding to a workstation (badge-in).
|
|
onSuccess();
|
|
}
|
|
} catch {
|
|
setDigits('');
|
|
setError(t('unexpectedError'));
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del'];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={onBack}
|
|
disabled={busy}
|
|
className="rounded-lg p-2 hover:bg-accent disabled:opacity-50"
|
|
aria-label={t('back')}
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</button>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">{t('operatorSelected')}</p>
|
|
<p className="text-sm font-medium">{operator.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* PIN dots */}
|
|
<div className="flex justify-center gap-4">
|
|
{Array.from({ length: PIN_MAX }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`h-4 w-4 rounded-full border-2 transition-colors ${
|
|
i < digits.length
|
|
? 'border-primary bg-primary'
|
|
: 'border-muted-foreground bg-transparent'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<p className="text-center text-sm text-destructive">{error}</p>
|
|
)}
|
|
|
|
{/* Numpad */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{keys.map((key, idx) => {
|
|
if (key === '') {
|
|
return <div key={idx} />;
|
|
}
|
|
if (key === 'del') {
|
|
return (
|
|
<button
|
|
key={idx}
|
|
onClick={erase}
|
|
disabled={busy || digits.length === 0}
|
|
className="flex items-center justify-center rounded-2xl border border-border bg-card py-5 text-lg font-medium transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
|
|
aria-label={t('deleteDigit')}
|
|
>
|
|
<Delete className="h-5 w-5" />
|
|
</button>
|
|
);
|
|
}
|
|
return (
|
|
<button
|
|
key={idx}
|
|
onClick={() => press(key)}
|
|
disabled={busy || digits.length >= PIN_MAX}
|
|
className="rounded-2xl border border-border bg-card py-5 text-xl font-semibold transition-colors hover:bg-accent active:scale-[0.97] disabled:opacity-40"
|
|
>
|
|
{key}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<button
|
|
onClick={submit}
|
|
disabled={digits.length < PIN_MIN || busy}
|
|
className="w-full rounded-xl bg-primary py-4 text-base font-semibold text-primary-foreground transition-opacity hover:opacity-90 active:scale-[0.98] disabled:opacity-40"
|
|
>
|
|
{busy ? tc('entering') : tc('enter')}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WorkstationStep({
|
|
operator,
|
|
ts,
|
|
}: {
|
|
operator: Operator;
|
|
ts: ReturnType<typeof useTranslations<'session'>>;
|
|
}) {
|
|
const router = useRouter();
|
|
const { data: workstations = [], isLoading } = trpc.workstation.list.useQuery(undefined, {
|
|
staleTime: 60 * 60 * 1000,
|
|
});
|
|
const startSession = trpc.operatorSession.start.useMutation({
|
|
onSuccess: () => {
|
|
router.push('/');
|
|
router.refresh();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">{operator.email}</p>
|
|
<h2 className="mt-1 text-xl font-bold tracking-tight">{ts('badgeInTitle')}</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">{ts('badgeInSubtitle')}</p>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<p className="text-sm text-muted-foreground">{ts('loadingStations')}</p>
|
|
) : 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}
|
|
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-6 py-5 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>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function OperatorPicker({ operators }: { operators: Operator[] }) {
|
|
const t = useTranslations('auth');
|
|
const tc = useTranslations('common');
|
|
const ts = useTranslations('session');
|
|
const [state, setState] = useState<PickerState>({ step: 'list' });
|
|
|
|
if (state.step === 'pin') {
|
|
return (
|
|
<PinPad
|
|
operator={state.operator}
|
|
onBack={() => setState({ step: 'list' })}
|
|
onSuccess={() => setState({ step: 'workstation', operator: state.operator })}
|
|
t={t}
|
|
tc={tc}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (state.step === 'workstation') {
|
|
return <WorkstationStep operator={state.operator} ts={ts} />;
|
|
}
|
|
|
|
return (
|
|
<OperatorList
|
|
operators={operators}
|
|
onSelect={(op) => setState({ step: 'pin', operator: op })}
|
|
t={t}
|
|
/>
|
|
);
|
|
}
|