691 lines
46 KiB
TypeScript
691 lines
46 KiB
TypeScript
import {
|
|
AlertTriangle,
|
|
ArrowRight,
|
|
Calendar,
|
|
CheckCircle2,
|
|
Clock,
|
|
Package,
|
|
RefreshCw,
|
|
Trash2,
|
|
Undo2,
|
|
X,
|
|
} from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import type { Asset, OccurrenceCheck } from '@/types';
|
|
|
|
type RecurringConflictModalProps = {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
isLoading: boolean;
|
|
checkResult: {
|
|
occurrences: OccurrenceCheck[];
|
|
total_occurrences: number;
|
|
conflicts_count: number;
|
|
} | null;
|
|
initialAssetIds: number[];
|
|
isSubmitting: boolean;
|
|
onConfirmSubmit: (
|
|
occurrencesToSubmit: Array<{
|
|
starts_at: string;
|
|
ends_at: string;
|
|
asset_ids: number[];
|
|
}>,
|
|
) => void;
|
|
};
|
|
|
|
export function RecurringConflictModal({
|
|
isOpen,
|
|
onClose,
|
|
isLoading,
|
|
checkResult,
|
|
initialAssetIds,
|
|
isSubmitting,
|
|
onConfirmSubmit,
|
|
}: RecurringConflictModalProps) {
|
|
const [omittedIndexes, setOmittedIndexes] = useState<number[]>([]);
|
|
// Key format: `${occurrenceIndex}_${originalAssetId}` -> replacement Asset
|
|
const [replacements, setReplacements] = useState<Record<string, Asset>>({});
|
|
const [activeSelectorKey, setActiveSelectorKey] = useState<string | null>(
|
|
null,
|
|
);
|
|
|
|
const occurrences = checkResult?.occurrences ?? [];
|
|
|
|
function toggleOmit(index: number) {
|
|
setOmittedIndexes((prev) =>
|
|
prev.includes(index)
|
|
? prev.filter((i) => i !== index)
|
|
: [...prev, index],
|
|
);
|
|
}
|
|
|
|
function toggleReplacementSelector(key: string) {
|
|
setActiveSelectorKey((prev) => (prev === key ? null : key));
|
|
}
|
|
|
|
function selectReplacement(
|
|
occIndex: number,
|
|
originalAssetId: number,
|
|
replacement: Asset,
|
|
) {
|
|
setReplacements((prev) => ({
|
|
...prev,
|
|
[`${occIndex}_${originalAssetId}`]: replacement,
|
|
}));
|
|
setActiveSelectorKey(null);
|
|
}
|
|
|
|
function removeReplacement(occIndex: number, originalAssetId: number) {
|
|
setReplacements((prev) => {
|
|
const next = { ...prev };
|
|
delete next[`${occIndex}_${originalAssetId}`];
|
|
|
|
return next;
|
|
});
|
|
}
|
|
|
|
const activeOccurrences = occurrences.filter(
|
|
(_, idx) => !omittedIndexes.includes(idx),
|
|
);
|
|
const omittedCount = occurrences.length - activeOccurrences.length;
|
|
|
|
// Check if there are unresolved conflicts in active occurrences
|
|
const hasUnresolvedConflicts = occurrences.some((check, idx) => {
|
|
if (omittedIndexes.includes(idx) || !check.has_conflict) {
|
|
return false;
|
|
}
|
|
|
|
return check.conflicted_assets.some(
|
|
(ca) => !replacements[`${idx}_${ca.id}`],
|
|
);
|
|
});
|
|
|
|
const canSubmit =
|
|
!isLoading &&
|
|
activeOccurrences.length > 0 &&
|
|
!hasUnresolvedConflicts &&
|
|
!isSubmitting;
|
|
|
|
function handleConfirm() {
|
|
const payload = occurrences
|
|
.map((check, index) => ({ check, index }))
|
|
.filter(({ index }) => !omittedIndexes.includes(index))
|
|
.map(({ check, index }) => {
|
|
const finalAssetIds = initialAssetIds.map((origId) => {
|
|
const replacement = replacements[`${index}_${origId}`];
|
|
|
|
return replacement ? replacement.id : origId;
|
|
});
|
|
|
|
return {
|
|
starts_at: check.starts_at,
|
|
ends_at: check.ends_at,
|
|
asset_ids: finalAssetIds,
|
|
};
|
|
});
|
|
|
|
onConfirmSubmit(payload);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className="flex max-h-[90vh] max-w-3xl flex-col overflow-hidden p-0 sm:max-w-3xl">
|
|
<DialogHeader className="border-b p-6 pb-4">
|
|
<DialogTitle className="flex items-center gap-2 text-xl font-semibold">
|
|
<Calendar className="size-5 text-primary" />
|
|
Confirmação de Série Semanal
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
Análise de disponibilidade de todas as semanas da sua
|
|
requisição recorrente.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 space-y-6 overflow-y-auto p-6">
|
|
{isLoading ? (
|
|
<div className="space-y-4 py-16 text-center">
|
|
<RefreshCw className="mx-auto size-8 animate-spin text-primary" />
|
|
<p className="text-sm font-medium text-foreground">
|
|
A verificar disponibilidade semana a semana…
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
A cruzar horários com o inventário e requisições
|
|
existentes.
|
|
</p>
|
|
</div>
|
|
) : checkResult ? (
|
|
<>
|
|
{/* Summary banner */}
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<div className="rounded-lg border bg-card p-3 shadow-xs">
|
|
<span className="text-xs text-muted-foreground">
|
|
Semanas totais
|
|
</span>
|
|
<p className="text-2xl font-bold">
|
|
{checkResult.total_occurrences}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border bg-card p-3 shadow-xs">
|
|
<span className="text-xs text-muted-foreground">
|
|
A requisitar
|
|
</span>
|
|
<p className="text-2xl font-bold text-primary">
|
|
{activeOccurrences.length}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border bg-card p-3 shadow-xs">
|
|
<span className="text-xs text-muted-foreground">
|
|
Conflitos detetados
|
|
</span>
|
|
<p
|
|
className={`text-2xl font-bold ${
|
|
checkResult.conflicts_count > 0
|
|
? 'text-amber-600 dark:text-amber-500'
|
|
: 'text-emerald-600 dark:text-emerald-500'
|
|
}`}
|
|
>
|
|
{checkResult.conflicts_count}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informative alert */}
|
|
{checkResult.conflicts_count > 0 ? (
|
|
<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-900 dark:text-amber-200">
|
|
<div className="flex items-start gap-2.5">
|
|
<AlertTriangle className="mt-0.5 size-5 shrink-0 text-amber-600" />
|
|
<div className="space-y-1">
|
|
<p className="font-semibold">
|
|
Existem conflitos de horário com
|
|
outros pedidos!
|
|
</p>
|
|
<p className="text-xs leading-relaxed opacity-90">
|
|
Para cada dia assinalado,
|
|
escolha se prefere{' '}
|
|
<strong>
|
|
apagar a reserva desse dia
|
|
</strong>{' '}
|
|
(excluindo-o da série) ou{' '}
|
|
<strong>
|
|
trocar o material
|
|
</strong>{' '}
|
|
por outro equipamento
|
|
disponível.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-4 text-sm text-emerald-900 dark:text-emerald-200">
|
|
<div className="flex items-center gap-2.5">
|
|
<CheckCircle2 className="size-4 shrink-0 text-emerald-600" />
|
|
<p className="font-semibold">
|
|
Todos os equipamentos estão
|
|
disponíveis para todas as semanas da
|
|
série!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Occurrence Cards List */}
|
|
<div className="space-y-3">
|
|
{occurrences.map((check, index) => {
|
|
const isOmitted =
|
|
omittedIndexes.includes(index);
|
|
const hasConflicts = check.has_conflict;
|
|
const allConflictsResolved =
|
|
hasConflicts &&
|
|
check.conflicted_assets.every(
|
|
(ca) =>
|
|
replacements[
|
|
`${index}_${ca.id}`
|
|
],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
key={check.index}
|
|
className={`rounded-xl border p-4 transition-all ${
|
|
isOmitted
|
|
? 'border-dashed bg-slate-50 opacity-50 dark:bg-slate-900/50'
|
|
: hasConflicts &&
|
|
!allConflictsResolved
|
|
? 'border-amber-400 bg-amber-50/40 shadow-xs dark:border-amber-700/60 dark:bg-amber-950/20'
|
|
: 'border-slate-200 bg-card dark:border-slate-800'
|
|
}`}
|
|
>
|
|
<div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
|
|
<div className="space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-md bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">
|
|
Semana {index + 1}
|
|
</span>
|
|
<p
|
|
className={`text-sm font-semibold ${
|
|
isOmitted
|
|
? 'text-muted-foreground line-through'
|
|
: 'text-foreground'
|
|
}`}
|
|
>
|
|
{
|
|
check.date_formatted
|
|
}
|
|
</p>
|
|
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Clock className="size-3" />
|
|
{
|
|
check.time_formatted
|
|
}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 pt-1">
|
|
{isOmitted ? (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-dashed text-muted-foreground"
|
|
>
|
|
Dia apagado /
|
|
ignorado
|
|
</Badge>
|
|
) : allConflictsResolved ? (
|
|
<Badge
|
|
variant="default"
|
|
className="bg-emerald-600 text-white"
|
|
>
|
|
Conflito
|
|
resolvido com
|
|
troca
|
|
</Badge>
|
|
) : hasConflicts ? (
|
|
<Badge
|
|
variant="destructive"
|
|
className="bg-amber-600 text-white"
|
|
>
|
|
Conflito de
|
|
material
|
|
</Badge>
|
|
) : (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-emerald-300 text-emerald-700 dark:border-emerald-800 dark:text-emerald-400"
|
|
>
|
|
Equipamento
|
|
disponível
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
{isOmitted ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
toggleOmit(
|
|
index,
|
|
)
|
|
}
|
|
className="h-8 gap-1"
|
|
>
|
|
<Undo2 className="size-3.5" />
|
|
Restaurar este dia
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
toggleOmit(
|
|
index,
|
|
)
|
|
}
|
|
className="h-8 gap-1 text-rose-600 hover:bg-rose-50 hover:text-rose-700 dark:hover:bg-rose-950/40"
|
|
>
|
|
<Trash2 className="size-3.5" />
|
|
Apagar este dia
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details of items & conflicts */}
|
|
{!isOmitted && (
|
|
<div className="mt-3 space-y-2 border-t pt-3 text-xs">
|
|
{check.conflicted_assets.map(
|
|
(cAsset) => {
|
|
const key = `${index}_${cAsset.id}`;
|
|
const replacement =
|
|
replacements[
|
|
key
|
|
];
|
|
const isSelecting =
|
|
activeSelectorKey ===
|
|
key;
|
|
|
|
return (
|
|
<div
|
|
key={
|
|
cAsset.id
|
|
}
|
|
className="space-y-2 rounded-lg border border-amber-300/80 bg-amber-50/60 p-3 dark:border-amber-800/80 dark:bg-amber-950/30"
|
|
>
|
|
<div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
|
|
<div>
|
|
<span className="font-semibold text-amber-900 dark:text-amber-200">
|
|
Material
|
|
em
|
|
conflito:{' '}
|
|
</span>
|
|
<span className="font-medium text-foreground">
|
|
{
|
|
cAsset.name
|
|
}{' '}
|
|
(
|
|
{
|
|
cAsset.asset_tag
|
|
}
|
|
|
|
)
|
|
</span>
|
|
<p className="mt-0.5 text-[11px] text-muted-foreground">
|
|
Já
|
|
se
|
|
encontra
|
|
reservado
|
|
por
|
|
outro
|
|
utilizador
|
|
para
|
|
este
|
|
horário.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{replacement ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
removeReplacement(
|
|
index,
|
|
cAsset.id,
|
|
)
|
|
}
|
|
className="h-7 text-xs"
|
|
>
|
|
<Undo2 className="mr-1 size-3" />{' '}
|
|
Reverter
|
|
troca
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
variant="default"
|
|
size="sm"
|
|
onClick={() =>
|
|
toggleReplacementSelector(
|
|
key,
|
|
)
|
|
}
|
|
className="h-7 gap-1 text-xs"
|
|
>
|
|
<RefreshCw className="size-3" />
|
|
{isSelecting
|
|
? 'Fechar lista'
|
|
: 'Trocar material'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Replacement indicator */}
|
|
{replacement && (
|
|
<div className="flex items-center justify-between rounded-md border border-emerald-400 bg-emerald-50 p-2 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="size-4 shrink-0 text-emerald-600" />
|
|
<span>
|
|
Substituído
|
|
por:{' '}
|
|
<strong>
|
|
{
|
|
replacement.name
|
|
}
|
|
</strong>{' '}
|
|
(
|
|
{
|
|
replacement.asset_tag
|
|
}
|
|
|
|
)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Interactive Alternatives Selector */}
|
|
{isSelecting &&
|
|
!replacement && (
|
|
<div className="mt-2 space-y-2 rounded-md border bg-background p-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-semibold text-foreground">
|
|
Equipamentos
|
|
disponíveis
|
|
para
|
|
este
|
|
dia
|
|
(
|
|
{
|
|
cAsset
|
|
.alternatives
|
|
.length
|
|
}
|
|
):
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
toggleReplacementSelector(
|
|
key,
|
|
)
|
|
}
|
|
className="text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
{cAsset
|
|
.alternatives
|
|
.length ===
|
|
0 ? (
|
|
<p className="py-1 text-muted-foreground italic">
|
|
Não
|
|
foram
|
|
encontrados
|
|
equipamentos
|
|
alternativos
|
|
livres
|
|
para
|
|
este
|
|
horário.
|
|
Sugerimos
|
|
apagar
|
|
a
|
|
reserva
|
|
deste
|
|
dia.
|
|
</p>
|
|
) : (
|
|
<div className="grid max-h-40 gap-1.5 overflow-y-auto">
|
|
{cAsset.alternatives.map(
|
|
(
|
|
alt,
|
|
) => (
|
|
<div
|
|
key={
|
|
alt.id
|
|
}
|
|
className="flex cursor-pointer items-center justify-between rounded border p-2 transition-colors hover:bg-muted/50"
|
|
onClick={() =>
|
|
selectReplacement(
|
|
index,
|
|
cAsset.id,
|
|
alt,
|
|
)
|
|
}
|
|
>
|
|
<div>
|
|
<span className="font-medium text-foreground">
|
|
{
|
|
alt.name
|
|
}
|
|
</span>
|
|
<span className="ml-2 font-mono text-[10px] text-muted-foreground">
|
|
{
|
|
alt.asset_tag
|
|
}
|
|
</span>
|
|
{alt.category_name && (
|
|
<span className="ml-1 text-[10px] text-muted-foreground">
|
|
·{' '}
|
|
{
|
|
alt.category_name
|
|
}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="secondary"
|
|
className="h-6 text-xs"
|
|
onClick={(
|
|
e,
|
|
) => {
|
|
e.stopPropagation();
|
|
selectReplacement(
|
|
index,
|
|
cAsset.id,
|
|
alt,
|
|
);
|
|
}}
|
|
>
|
|
Escolher
|
|
</Button>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
)}
|
|
|
|
{/* Available assets for this occurrence */}
|
|
{check.available_assets
|
|
.length > 0 && (
|
|
<div className="flex items-center gap-1.5 text-muted-foreground">
|
|
<Package className="size-3.5 shrink-0 text-emerald-600" />
|
|
<span>
|
|
Disponíveis:
|
|
</span>
|
|
<span className="font-medium text-foreground">
|
|
{check.available_assets
|
|
.map(
|
|
(a) =>
|
|
`${a.name} (${a.asset_tag})`,
|
|
)
|
|
.join(', ')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
<DialogFooter className="flex flex-col justify-between gap-3 border-t bg-slate-50 p-4 sm:flex-row sm:items-center dark:bg-slate-900/60">
|
|
<div className="text-xs text-muted-foreground">
|
|
{activeOccurrences.length > 0 ? (
|
|
<span>
|
|
A submeter{' '}
|
|
<strong>{activeOccurrences.length}</strong>{' '}
|
|
requisições
|
|
{omittedCount > 0
|
|
? ` (${omittedCount} dias ignorados)`
|
|
: ''}
|
|
.
|
|
</span>
|
|
) : (
|
|
<span className="font-medium text-rose-600">
|
|
Todos os dias foram apagados. Restaure pelo
|
|
menos um dia para submeter.
|
|
</span>
|
|
)}
|
|
{hasUnresolvedConflicts && (
|
|
<span className="mt-0.5 block font-medium text-amber-600 dark:text-amber-400">
|
|
⚠ Resolva os conflitos pendentes (trocando o
|
|
material ou apagando o dia).
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={onClose}
|
|
disabled={isSubmitting}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={handleConfirm}
|
|
disabled={!canSubmit}
|
|
className="gap-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<RefreshCw className="size-4 animate-spin" />
|
|
A submeter…
|
|
</>
|
|
) : (
|
|
<>
|
|
Confirmar e submeter série
|
|
<ArrowRight className="size-4" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|