import { useTranslation } from '@/hooks/use-translation'; import { useMemo } from 'react'; import { useForm, Head } from '@inertiajs/react'; import { FileText, Calendar, Heart } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { BreadcrumbItem, Note, Member, User } from '@/types'; interface EditNoteProps { note: Note; members: Member[]; users: User[]; } interface NoteFormData { item_scope: string; name: string; deadline_date: string; note_text: string; label: string; added_by: string; visibility: string; priority: string; member_care_alert: string; member_id: string; user_id: string; } export default function EditNote({ note, members, users }: EditNoteProps) { const { t } = useTranslation(); const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard', }, { title: 'Notes & Tasks', href: '/admin/notes', }, { title: note.name, href: `/admin/notes/${note.id}`, }, { title: 'Edit', href: `/admin/notes/${note.id}/edit`, } ], [note.name, note.id]); const formatDateTimeForInput = (dateString?: string) => { if (!dateString) return ''; const date = new Date(dateString); return date.toISOString().slice(0, 16); }; const { data, setData, put, processing, errors } = useForm({ item_scope: note.item_scope || 'User', name: note.name || '', deadline_date: formatDateTimeForInput(note.deadline_date), note_text: note.note_text || '', label: note.label || '', added_by: note.added_by || '', visibility: note.visibility || 'Admin', priority: note.priority || 'Medium', member_care_alert: note.member_care_alert || '', member_id: note.member_id?.toString() || '', user_id: note.user_id?.toString() || '' }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put(`/admin/notes/${note.id}`); }; return (

{t('Edit Note')}

{t('Update note information')}

{/* Basic Information */} {t('Basic Information')} {t('Update the basic details for the note')}
setData('name', e.target.value)} placeholder={t('Enter note name')} className={errors.name ? 'border-red-500' : ''} /> {errors.name && (

{errors.name}

)}
{errors.item_scope && (

{errors.item_scope}

)}
{errors.priority && (

{errors.priority}

)}
{errors.visibility && (

{errors.visibility}

)}
{errors.member_care_alert && (

{errors.member_care_alert}

)}
{/* Additional Details */} {t('Additional Details')} {t('Optional information and scheduling')}
setData('deadline_date', e.target.value)} className={errors.deadline_date ? 'border-red-500' : ''} /> {errors.deadline_date && (

{errors.deadline_date}

)}
setData('label', e.target.value)} placeholder={t('Enter label (e.g., Financial, Meetings)')} className={errors.label ? 'border-red-500' : ''} /> {errors.label && (

{errors.label}

)}
setData('added_by', e.target.value)} placeholder={t('Enter who added this note')} className={errors.added_by ? 'border-red-500' : ''} /> {errors.added_by && (

{errors.added_by}

)}
{errors.member_id && (

{errors.member_id}

)}
{errors.user_id && (

{errors.user_id}

)}
{/* Note Content */} {t('Note Content')} {t('Detailed description and content of the note')}