2026-03-11 23:33:10 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { Form, Head, usePage } from '@inertiajs/vue3';
|
|
|
|
|
import { computed } from 'vue';
|
|
|
|
|
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
|
|
|
|
2026-03-12 18:25:32 +00:00
|
|
|
type Declaration = {
|
2026-03-11 23:33:10 +00:00
|
|
|
id: number;
|
|
|
|
|
title: string;
|
|
|
|
|
client_name: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type Props = {
|
2026-03-12 18:25:32 +00:00
|
|
|
declaration: Declaration;
|
2026-03-11 23:33:10 +00:00
|
|
|
token: string;
|
|
|
|
|
submitUrl: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
defineProps<Props>();
|
|
|
|
|
|
|
|
|
|
const page = usePage<{ flash?: { type?: string; message?: string } }>();
|
|
|
|
|
const flash = computed(() => page.props.flash);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="flex min-h-svh flex-col bg-background">
|
2026-03-12 18:25:32 +00:00
|
|
|
<Head :title="`Refus - ${declaration.title}`" />
|
2026-03-11 23:33:10 +00:00
|
|
|
|
|
|
|
|
<header class="border-b border-sidebar-border/70 px-4 py-4">
|
|
|
|
|
<div class="mx-auto flex max-w-2xl items-center gap-3">
|
2026-03-12 18:25:32 +00:00
|
|
|
<AppLogoIcon
|
|
|
|
|
class="size-8 fill-current text-[var(--foreground)]"
|
|
|
|
|
/>
|
2026-03-11 23:33:10 +00:00
|
|
|
<div>
|
2026-03-12 18:25:32 +00:00
|
|
|
<h1 class="font-medium">{{ declaration.title }}</h1>
|
|
|
|
|
<p class="text-sm text-muted-foreground">
|
|
|
|
|
{{ declaration.client_name }}
|
|
|
|
|
</p>
|
2026-03-11 23:33:10 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main class="mx-auto w-full max-w-2xl flex-1 p-4">
|
2026-03-12 18:25:32 +00:00
|
|
|
<div
|
|
|
|
|
v-if="flash?.message"
|
|
|
|
|
class="mb-4 rounded-lg bg-green-100 p-3 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-300"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
{{ flash.message }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
<div>
|
|
|
|
|
<h2 class="text-lg font-medium">Refuser la situation</h2>
|
|
|
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
2026-03-12 18:25:32 +00:00
|
|
|
Vous pouvez indiquer la raison de votre refus
|
|
|
|
|
(facultatif).
|
2026-03-11 23:33:10 +00:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-12 18:25:32 +00:00
|
|
|
<Form
|
|
|
|
|
:action="submitUrl"
|
|
|
|
|
method="post"
|
|
|
|
|
class="space-y-4"
|
|
|
|
|
v-slot="{ processing }"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
<div class="space-y-2">
|
|
|
|
|
<Label for="reason">Raison du refus (facultatif)</Label>
|
|
|
|
|
<textarea
|
|
|
|
|
id="reason"
|
|
|
|
|
name="reason"
|
|
|
|
|
rows="4"
|
|
|
|
|
placeholder="Précisez si besoin..."
|
|
|
|
|
:disabled="processing"
|
2026-03-12 18:25:32 +00:00
|
|
|
class="flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
2026-03-11 23:33:10 +00:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-12 18:25:32 +00:00
|
|
|
<Button
|
|
|
|
|
type="submit"
|
|
|
|
|
variant="destructive"
|
|
|
|
|
:disabled="processing"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
<Spinner v-if="processing" class="mr-2 size-4" />
|
|
|
|
|
Confirmer le refus
|
|
|
|
|
</Button>
|
|
|
|
|
</Form>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
