MY QUALITY - First iteration

2026-06-11 15:43:35 +01:00
parent 4f8996712e
commit 1fdb9536fa
31 changed files with 1965 additions and 98 deletions
@@ -0,0 +1,289 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { ArrowLeft, ClipboardCheck, MapPin, CheckCircle2, Loader2, AlertTriangle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { trpc } from '@/lib/trpc/client';
+import type { RouterOutputs } from '@/lib/trpc/server';
+
+type Defect = RouterOutputs['qualityDefect']['forMyStation'][number];
+type DefectStatus = 'OPEN' | 'ACKNOWLEDGED' | 'CORRECTED';
+type TFn = (key: string, values?: Record<string, string | number>) => string;
+
+function timeAgo(date: Date | string, t: TFn): string {
+  const diffMs = Date.now() - new Date(date).getTime();
+  const mins = Math.floor(diffMs / 60_000);
+  if (mins < 1) return t('now');
+  if (mins < 60) return t('minutesAgo', { mins });
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return t('hoursAgo', { hours });
+  return t('daysAgo', { days: Math.floor(hours / 24) });
+}
+
+function playBeep() {
+  try {
+    const ctx = new AudioContext();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.type = 'sine';
+    osc.frequency.value = 880;
+    gain.gain.setValueAtTime(0.2, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
+    osc.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + 0.4);
+  } catch {
+    // AudioContext may be blocked before user interaction — ignore.
+  }
+}
+
+const STATUS_CLASS: Record<DefectStatus, string> = {
+  OPEN: 'bg-orange-100 text-orange-700',
+  ACKNOWLEDGED: 'bg-blue-100 text-blue-700',
+  CORRECTED: 'bg-green-100 text-green-700',
+};
+
+function Thumbnail({ photoKey, alt }: { photoKey: string | null; alt: string }) {
+  const { data } = trpc.storage.signPhotoDownload.useQuery(
+    { photoKey: photoKey! },
+    { enabled: !!photoKey, staleTime: 50_000 },
+  );
+  if (!photoKey) return null;
+  if (!data?.url) {
+    return <div className="h-20 w-20 shrink-0 animate-pulse rounded-lg bg-muted" />;
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={data.url} alt={alt} className="h-20 w-20 shrink-0 rounded-lg object-cover" />
+  );
+}
+
+function CorrectDialog({
+  onConfirm,
+  onCancel,
+  note,
+  onNoteChange,
+  busy,
+  t,
+  tc,
+}: {
+  onConfirm: () => void;
+  onCancel: () => void;
+  note: string;
+  onNoteChange: (v: string) => void;
+  busy: boolean;
+  t: ReturnType<typeof useTranslations<'quality'>>;
+  tc: ReturnType<typeof useTranslations<'common'>>;
+}) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-4 sm:items-center">
+      <div className="w-full max-w-md rounded-2xl bg-card p-6 shadow-xl">
+        <h2 className="mb-4 text-lg font-semibold">{t('correctDialogTitle')}</h2>
+        <label className="mb-1 block text-sm font-medium">{t('correctNoteLabel')}</label>
+        <textarea
+          value={note}
+          onChange={(e) => onNoteChange(e.target.value)}
+          rows={3}
+          placeholder={t('correctNotePlaceholder')}
+          className="mb-4 w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <div className="flex justify-end gap-3">
+          <button onClick={onCancel} className="rounded-lg px-4 py-2 text-sm hover:bg-accent">
+            {tc('cancel')}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={busy}
+            className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
+          >
+            {busy && <Loader2 className="h-4 w-4 animate-spin" />}
+            {tc('confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DefectCard({
+  defect,
+  onAcknowledge,
+  onCorrect,
+  acknowledging,
+  t,
+  tc,
+}: {
+  defect: Defect;
+  onAcknowledge: () => void;
+  onCorrect: () => void;
+  acknowledging: boolean;
+  t: ReturnType<typeof useTranslations<'quality'>>;
+  tc: ReturnType<typeof useTranslations<'common'>>;
+}) {
+  const status = defect.status as DefectStatus;
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
+      <div className="flex gap-3">
+        <Thumbnail photoKey={defect.photoKey} alt={t('photo')} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-2">
+            <p className="font-semibold">{defect.defectType}</p>
+            <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_CLASS[status]}`}>
+              {t(`status.${status.toLowerCase() as 'open' | 'acknowledged' | 'corrected'}`)}
+            </span>
+          </div>
+          {defect.location && (
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              {t('location')}: {defect.location}
+            </p>
+          )}
+          <p className="mt-1 text-sm text-muted-foreground">{defect.description}</p>
+          <div className="mt-1.5 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            {defect.rfsCode && (
+              <span className="rounded bg-muted px-1.5 py-0.5 font-mono">
+                {t('rfs')} {defect.rfsCode}
+              </span>
+            )}
+            <span>{t('raised', { email: defect.createdBy.email, time: timeAgo(defect.createdAt, tc) })}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-3">
+        {status === 'OPEN' && (
+          <button
+            onClick={onAcknowledge}
+            disabled={acknowledging}
+            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
+          >
+            {acknowledging ? <Loader2 className="h-4 w-4 animate-spin" /> : <ClipboardCheck className="h-4 w-4" />}
+            {t('acknowledge')}
+          </button>
+        )}
+        {status === 'ACKNOWLEDGED' && (
+          <>
+            {defect.acknowledgedAt && (
+              <p className="text-xs text-muted-foreground">
+                {t('acknowledgedBy', { time: timeAgo(defect.acknowledgedAt, tc) })}
+              </p>
+            )}
+            <button
+              onClick={onCorrect}
+              className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+            >
+              <CheckCircle2 className="h-4 w-4" />
+              {t('correct')}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function QualityDefectsPage() {
+  const t = useTranslations('quality');
+  const tc = useTranslations('common');
+  const tcTime = useTranslations('common.timeAgo');
+
+  const [correctId, setCorrectId] = useState<string | null>(null);
+  const [correctionNote, setCorrectionNote] = useState('');
+  const [soundEnabled, setSoundEnabled] = useState(false);
+
+  const { data: session } = trpc.operatorSession.current.useQuery();
+  const { data: defects = [], refetch } = trpc.qualityDefect.forMyStation.useQuery(undefined, {
+    refetchInterval: 5000,
+    refetchIntervalInBackground: false,
+  });
+
+  const acknowledge = trpc.qualityDefect.acknowledge.useMutation({ onSuccess: () => refetch() });
+  const correct = trpc.qualityDefect.correct.useMutation({
+    onSuccess: () => {
+      setCorrectId(null);
+      refetch();
+    },
+  });
+
+  const openIds = defects.filter((d) => d.status === 'OPEN').map((d) => d.id);
+
+  // Beep when a new OPEN defect arrives.
+  const prevOpenIds = useRef(new Set<string>());
+  useEffect(() => {
+    const current = new Set(openIds);
+    const hasNew = [...current].some((id) => !prevOpenIds.current.has(id));
+    if (hasNew && prevOpenIds.current.size > 0 && soundEnabled) playBeep();
+    prevOpenIds.current = current;
+  }, [openIds, soundEnabled]);
+
+  return (
+    <main className="mx-auto flex min-h-dvh max-w-lg flex-col bg-background">
+      <header className="sticky top-0 z-10 flex items-center gap-3 border-b border-border bg-card px-4 py-3">
+        <Link href="/" className="rounded-md p-1 hover:bg-accent" aria-label={t('backHome')}>
+          <ArrowLeft className="h-5 w-5" />
+        </Link>
+        <div className="min-w-0 flex-1">
+          <h1 className="text-base font-semibold">{t('title')}</h1>
+          {session && (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <MapPin className="h-3 w-3" />
+              {t('subtitle', { code: session.workstation.code })}
+            </p>
+          )}
+        </div>
+        <button
+          onClick={() => setSoundEnabled((v) => !v)}
+          className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
+            soundEnabled ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
+          }`}
+        >
+          {soundEnabled ? t('soundOn') : t('soundOff')}
+        </button>
+      </header>
+
+      <div className="flex flex-1 flex-col gap-3 p-4">
+        {!session ? (
+          <div className="py-16 text-center text-muted-foreground">
+            <AlertTriangle className="mx-auto mb-3 h-10 w-10 opacity-30" />
+            <p>{t('noSession')}</p>
+          </div>
+        ) : defects.length === 0 ? (
+          <div className="py-16 text-center text-muted-foreground">
+            <ClipboardCheck className="mx-auto mb-3 h-10 w-10 opacity-30" />
+            <p>{t('empty')}</p>
+          </div>
+        ) : (
+          defects.map((defect) => (
+            <DefectCard
+              key={defect.id}
+              defect={defect}
+              t={t}
+              tc={tcTime}
+              acknowledging={acknowledge.isPending && acknowledge.variables?.id === defect.id}
+              onAcknowledge={() => acknowledge.mutate({ id: defect.id })}
+              onCorrect={() => {
+                setCorrectId(defect.id);
+                setCorrectionNote('');
+              }}
+            />
+          ))
+        )}
+      </div>
+
+      {correctId && (
+        <CorrectDialog
+          note={correctionNote}
+          onNoteChange={setCorrectionNote}
+          t={t}
+          tc={tc}
+          busy={correct.isPending}
+          onConfirm={() =>
+            correct.mutate({ id: correctId, correctionNote: correctionNote.trim() || undefined })
+          }
+          onCancel={() => setCorrectId(null)}
+        />
+      )}
+    </main>
+  );
+}