124 lines
5.2 KiB
TypeScript
124 lines
5.2 KiB
TypeScript
import { Head, Link } from '@inertiajs/react';
|
|
import { format } from 'date-fns';
|
|
import { ArrowLeft, Paperclip } from 'lucide-react';
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { index } from '@/routes/student/letter-requests';
|
|
import type { LetterRequest, LetterStatus } from '@/types/letter-request';
|
|
import { LetterStatusLabels } from '@/types/letter-request';
|
|
|
|
type Props = {
|
|
letterRequest: LetterRequest;
|
|
};
|
|
|
|
export default function LetterRequestShow({ letterRequest }: Props) {
|
|
const status = letterRequest.status as LetterStatus | null;
|
|
|
|
const variant =
|
|
status === 'completed'
|
|
? 'default'
|
|
: status === 'rejected'
|
|
? 'destructive'
|
|
: status === 'in_process'
|
|
? 'secondary'
|
|
: 'outline';
|
|
|
|
return (
|
|
<>
|
|
<Head title="Detail Surat Permohonan" />
|
|
|
|
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
|
|
<PageHeader
|
|
title="Detail Surat Permohonan"
|
|
actions={
|
|
<Button variant="outline" asChild>
|
|
<Link href={index.url()}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Kembali
|
|
</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-start justify-between gap-4">
|
|
<div>
|
|
<CardTitle>{letterRequest.letter_type}</CardTitle>
|
|
{letterRequest.submitted_at && (
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Diajukan pada{' '}
|
|
{format(
|
|
new Date(letterRequest.submitted_at),
|
|
'd MMM yyyy, HH:mm',
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{status && (
|
|
<Badge variant={variant}>
|
|
{LetterStatusLabels[status]}
|
|
</Badge>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 border-t pt-4 text-sm">
|
|
<div>
|
|
<p className="font-medium text-muted-foreground">
|
|
Keperluan
|
|
</p>
|
|
<p className="mt-1">
|
|
{letterRequest.purpose || '-'}
|
|
</p>
|
|
</div>
|
|
{letterRequest.processor && (
|
|
<div>
|
|
<p className="font-medium text-muted-foreground">
|
|
Diproses Oleh
|
|
</p>
|
|
<p className="mt-1">
|
|
{letterRequest.processor.profile
|
|
?.full_name ?? '-'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{letterRequest.completed_at && (
|
|
<div>
|
|
<p className="font-medium text-muted-foreground">
|
|
Selesai Pada
|
|
</p>
|
|
<p className="mt-1">
|
|
{format(
|
|
new Date(letterRequest.completed_at),
|
|
'd MMM yyyy, HH:mm',
|
|
)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-medium text-muted-foreground">
|
|
Dokumen
|
|
</p>
|
|
{letterRequest.result_url ? (
|
|
<a
|
|
href={letterRequest.result_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-1 inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80"
|
|
>
|
|
<Paperclip className="h-3.5 w-3.5" />
|
|
{letterRequest.result_name}
|
|
</a>
|
|
) : (
|
|
<p className="mt-1 text-muted-foreground">
|
|
Belum tersedia.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|