siakad-itm/resources/js/pages/admin/feedback/create.tsx

127 lines
5.8 KiB
TypeScript

import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import TiptapEditor from '@/components/rich-text-editor';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { index, store } from '@/routes/admin/feedback';
type FeedbackTypeOption = { value: string; label: string };
type Props = {
types: FeedbackTypeOption[];
};
export default function FeedbackCreate({ types }: Props) {
const [message, setMessage] = useState('');
return (
<>
<Head title="Tambah Kritik dan Saran" />
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
<PageHeader
title="Tambah Kritik dan Saran"
actions={
<Button variant="outline" asChild>
<Link href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</Link>
</Button>
}
/>
<Form action={store()} className="space-y-6">
{({ errors, processing }) => (
<>
<Card>
<CardHeader>
<CardTitle>Detail Masukan</CardTitle>
</CardHeader>
<CardContent className="grid gap-4">
<div className="grid gap-2">
<Label>
Jenis{' '}
<span className="text-destructive">
*
</span>
</Label>
<input type="hidden" name="type" />
<Select
name="type"
defaultValue="kritik"
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Pilih jenis" />
</SelectTrigger>
<SelectContent>
{types.map((type) => (
<SelectItem
key={type.value}
value={type.value}
>
{type.label}
</SelectItem>
))}
</SelectContent>
</Select>
<InputError message={errors.type} />
</div>
<div className="grid gap-2">
<Label htmlFor="subject">
Subjek{' '}
<span className="text-destructive">
*
</span>
</Label>
<Input
id="subject"
name="subject"
placeholder="Ringkasan singkat"
/>
<InputError message={errors.subject} />
</div>
<div className="grid gap-2">
<Label>
Pesan{' '}
<span className="text-destructive">
*
</span>
</Label>
<TiptapEditor
name="message"
value={message}
onChange={setMessage}
placeholder="Jelaskan kritik, saran, atau aduan Anda secara rinci"
error={errors.message}
/>
</div>
</CardContent>
</Card>
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>
</>
)}
</Form>
</div>
</>
);
}