439 lines
16 KiB
TypeScript
439 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { Wrench, Camera, X, Loader2, ClipboardList, AlertTriangle } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { trpc } from '@/lib/trpc/client';
|
|
import type { RouterOutputs } from '@/lib/trpc/server';
|
|
import { LanguageSwitcher } from '../language-switcher';
|
|
|
|
type Defect = RouterOutputs['qualityDefect']['queue'][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 compressImage(file: File): Promise<Blob> {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
const url = URL.createObjectURL(file);
|
|
img.onload = () => {
|
|
URL.revokeObjectURL(url);
|
|
const MAX = 1600;
|
|
let { width, height } = img;
|
|
if (width > MAX || height > MAX) {
|
|
if (width >= height) {
|
|
height = Math.round((height * MAX) / width);
|
|
width = MAX;
|
|
} else {
|
|
width = Math.round((width * MAX) / height);
|
|
height = MAX;
|
|
}
|
|
}
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return reject(new Error('Canvas context unavailable'));
|
|
ctx.drawImage(img, 0, 0, width, height);
|
|
canvas.toBlob(
|
|
(blob) => (blob ? resolve(blob) : reject(new Error('Canvas toBlob failed'))),
|
|
'image/jpeg',
|
|
0.8,
|
|
);
|
|
};
|
|
img.onerror = () => reject(new Error('Image load failed'));
|
|
img.src = url;
|
|
});
|
|
}
|
|
|
|
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-16 w-16 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-16 w-16 shrink-0 rounded-lg object-cover" />
|
|
);
|
|
}
|
|
|
|
// ── New-defect form ───────────────────────────────────────────────────────────
|
|
|
|
function NewDefectForm({
|
|
onCreated,
|
|
t,
|
|
}: {
|
|
onCreated: () => void;
|
|
t: ReturnType<typeof useTranslations<'quality'>>;
|
|
}) {
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
const [workstationId, setWorkstationId] = useState('');
|
|
const [defectType, setDefectType] = useState('');
|
|
const [location, setLocation] = useState('');
|
|
const [rfsCode, setRfsCode] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [photoBlob, setPhotoBlob] = useState<Blob | null>(null);
|
|
const [photoPreview, setPhotoPreview] = useState<string | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const { data: workstations = [] } = trpc.workstation.list.useQuery(undefined, {
|
|
staleTime: 60 * 60 * 1000,
|
|
});
|
|
const signUpload = trpc.storage.signPhotoUpload.useMutation();
|
|
const create = trpc.qualityDefect.create.useMutation();
|
|
|
|
async function handlePhotoChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
try {
|
|
const compressed = await compressImage(file);
|
|
if (photoPreview) URL.revokeObjectURL(photoPreview);
|
|
setPhotoBlob(compressed);
|
|
setPhotoPreview(URL.createObjectURL(compressed));
|
|
} catch {
|
|
setError(t('form.photoError'));
|
|
}
|
|
}
|
|
|
|
function removePhoto() {
|
|
if (photoPreview) URL.revokeObjectURL(photoPreview);
|
|
setPhotoBlob(null);
|
|
setPhotoPreview(null);
|
|
if (fileRef.current) fileRef.current.value = '';
|
|
}
|
|
|
|
function reset() {
|
|
setWorkstationId('');
|
|
setDefectType('');
|
|
setLocation('');
|
|
setRfsCode('');
|
|
setDescription('');
|
|
removePhoto();
|
|
}
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!workstationId || defectType.trim().length < 1 || description.trim().length < 3) return;
|
|
setSubmitting(true);
|
|
setError(null);
|
|
try {
|
|
let photoKey: string | undefined;
|
|
if (photoBlob) {
|
|
const signed = await signUpload.mutateAsync({
|
|
contentType: 'image/jpeg',
|
|
byteSize: photoBlob.size,
|
|
category: 'quality',
|
|
});
|
|
const res = await fetch(signed.uploadUrl, {
|
|
method: 'PUT',
|
|
body: photoBlob,
|
|
headers: { 'Content-Type': 'image/jpeg' },
|
|
});
|
|
if (!res.ok) throw new Error(`Photo PUT ${res.status}`);
|
|
photoKey = signed.photoKey;
|
|
}
|
|
await create.mutateAsync({
|
|
workstationId,
|
|
defectType: defectType.trim(),
|
|
location: location.trim() || undefined,
|
|
rfsCode: rfsCode.trim() || undefined,
|
|
description: description.trim(),
|
|
photoKey,
|
|
});
|
|
reset();
|
|
onCreated();
|
|
} catch {
|
|
setError(t('form.submitError'));
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
const canSubmit =
|
|
workstationId !== '' &&
|
|
defectType.trim().length >= 1 &&
|
|
description.trim().length >= 3 &&
|
|
!submitting;
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm"
|
|
>
|
|
<h2 className="text-sm font-semibold">{t('newDefect')}</h2>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium">{t('form.workstation')}</span>
|
|
<select
|
|
value={workstationId}
|
|
onChange={(e) => setWorkstationId(e.target.value)}
|
|
required
|
|
className="rounded-lg border border-border bg-background px-3 py-2 text-sm"
|
|
>
|
|
<option value="">{t('form.workstationPlaceholder')}</option>
|
|
{workstations.map((ws) => (
|
|
<option key={ws.id} value={ws.id}>
|
|
{ws.code} — {ws.name} · {ws.area}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium">{t('form.defectType')}</span>
|
|
<input
|
|
type="text"
|
|
value={defectType}
|
|
onChange={(e) => setDefectType(e.target.value)}
|
|
required
|
|
maxLength={100}
|
|
placeholder={t('form.defectTypePlaceholder')}
|
|
className="rounded-lg border border-border bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium">{t('form.location')}</span>
|
|
<input
|
|
type="text"
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
maxLength={200}
|
|
placeholder={t('form.locationPlaceholder')}
|
|
className="rounded-lg border border-border bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium">{t('form.rfs')}</span>
|
|
<input
|
|
type="text"
|
|
value={rfsCode}
|
|
onChange={(e) => setRfsCode(e.target.value)}
|
|
maxLength={100}
|
|
placeholder={t('form.rfsPlaceholder')}
|
|
className="rounded-lg border border-border bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="flex flex-col gap-1 text-sm">
|
|
<span className="font-medium">{t('form.description')}</span>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
required
|
|
minLength={3}
|
|
maxLength={1000}
|
|
rows={2}
|
|
placeholder={t('form.descriptionPlaceholder')}
|
|
className="resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</label>
|
|
|
|
{/* Photo */}
|
|
<div className="flex items-center gap-3">
|
|
{photoPreview ? (
|
|
<div className="relative">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={photoPreview} alt="" className="h-16 w-16 rounded-lg object-cover" />
|
|
<button
|
|
type="button"
|
|
onClick={removePhoto}
|
|
className="absolute -right-2 -top-2 rounded-full bg-black/60 p-1 text-white hover:bg-black/80"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => fileRef.current?.click()}
|
|
className="flex items-center gap-2 rounded-lg border border-dashed border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent"
|
|
>
|
|
<Camera className="h-4 w-4" />
|
|
{t('form.photoButton')}
|
|
</button>
|
|
)}
|
|
<input
|
|
ref={fileRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={handlePhotoChange}
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!canSubmit}
|
|
className="ml-auto flex items-center gap-1.5 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground hover:opacity-90 disabled:opacity-40"
|
|
>
|
|
{submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <AlertTriangle className="h-4 w-4" />}
|
|
{submitting ? t('form.submitting') : t('form.submit')}
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</p>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|
|
|
|
// ── Defect card ───────────────────────────────────────────────────────────────
|
|
|
|
function DefectCard({
|
|
defect,
|
|
t,
|
|
tTime,
|
|
}: {
|
|
defect: Defect;
|
|
t: ReturnType<typeof useTranslations<'quality'>>;
|
|
tTime: TFn;
|
|
}) {
|
|
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('photoAlt')} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="font-medium">
|
|
{defect.defectType}
|
|
<span className="ml-1 text-xs text-muted-foreground">
|
|
· {defect.workstation.code}
|
|
</span>
|
|
</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 line-clamp-2 text-sm text-muted-foreground">{defect.description}</p>
|
|
<div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 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('createdBy', { email: defect.createdBy.email, time: timeAgo(defect.createdAt, tTime) })}</span>
|
|
</div>
|
|
{defect.acknowledgedBy && defect.acknowledgedAt && (
|
|
<p className="mt-0.5 text-xs text-blue-700">
|
|
{t('acknowledgedBy', { email: defect.acknowledgedBy.email, time: timeAgo(defect.acknowledgedAt, tTime) })}
|
|
</p>
|
|
)}
|
|
{defect.correctedBy && defect.correctedAt && (
|
|
<p className="mt-0.5 text-xs text-green-700">
|
|
{t('correctedBy', { email: defect.correctedBy.email, time: timeAgo(defect.correctedAt, tTime) })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Console ───────────────────────────────────────────────────────────────────
|
|
|
|
export function QualityConsole({ canCreate }: { canCreate: boolean }) {
|
|
const t = useTranslations('quality');
|
|
const tTime = useTranslations('common.timeAgo');
|
|
|
|
const [statuses, setStatuses] = useState<DefectStatus[]>(['OPEN', 'ACKNOWLEDGED']);
|
|
|
|
const { data: defects = [], refetch } = trpc.qualityDefect.queue.useQuery(
|
|
{ statuses: statuses.length > 0 ? statuses : undefined },
|
|
{ refetchInterval: 5000, refetchIntervalInBackground: false },
|
|
);
|
|
|
|
function toggleStatus(s: DefectStatus) {
|
|
setStatuses((prev) => (prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]));
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<header className="sticky top-0 z-10 border-b border-border bg-card px-4 py-3">
|
|
<div className="mx-auto flex max-w-4xl items-center justify-between gap-4">
|
|
<h1 className="flex items-center gap-2 text-lg font-bold">
|
|
<ClipboardList className="h-5 w-5" />
|
|
{t('consoleTitle')}
|
|
</h1>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Link
|
|
href="/maintenance"
|
|
className="flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground hover:bg-accent"
|
|
>
|
|
<Wrench className="h-3 w-3" />
|
|
{t('backToMaintenance')}
|
|
</Link>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto flex max-w-4xl flex-col gap-4 p-4">
|
|
{canCreate && <NewDefectForm onCreated={() => refetch()} t={t} />}
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<span className="text-xs text-muted-foreground">{t('filterStatus')}</span>
|
|
{(['OPEN', 'ACKNOWLEDGED', 'CORRECTED'] as DefectStatus[]).map((s) => (
|
|
<label key={s} className="flex cursor-pointer items-center gap-1.5 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={statuses.includes(s)}
|
|
onChange={() => toggleStatus(s)}
|
|
className="rounded"
|
|
/>
|
|
{t(`status.${s.toLowerCase() as 'open' | 'acknowledged' | 'corrected'}`)}
|
|
</label>
|
|
))}
|
|
<span className="ml-auto text-xs text-muted-foreground">{t('updatesEvery')}</span>
|
|
</div>
|
|
|
|
{/* Queue */}
|
|
<section>
|
|
<h2 className="mb-3 text-sm font-medium text-muted-foreground">{t('queueTitle')}</h2>
|
|
{defects.length === 0 ? (
|
|
<div className="py-12 text-center text-muted-foreground">
|
|
<ClipboardList className="mx-auto mb-3 h-10 w-10 opacity-30" />
|
|
<p>{t('empty')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{defects.map((defect) => (
|
|
<DefectCard key={defect.id} defect={defect} t={t} tTime={tTime} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|