690
resources/js/components/recurring-conflict-modal.tsx
Normal file
690
resources/js/components/recurring-conflict-modal.tsx
Normal file
@@ -0,0 +1,690 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user