import { useTranslation } from '@/hooks/use-translation'; import React, { useMemo } from 'react'; import { Head, Link, useForm } from '@inertiajs/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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Textarea } from '@/components/ui/textarea'; import { ArrowLeft, Save, Calendar } from 'lucide-react'; import { type MembershipPeriod, type BreadcrumbItem } from '@/types'; interface Tier { id: number; name: string; price: string; billing_period: string; } interface Props { member: { id: number; first_name: string; last_name: string; email: string; }; membershipPeriod: MembershipPeriod; tiers: Tier[]; invoices: Array<{ id: number; invoice_number: string; invoice_date: string; total: string; status: string; }>; } interface MembershipPeriodForm { membership_tier_id: string; begin_date: string; end_date: string; membership_type: string; invoice_id: string; notes: string; } export default function MembershipPeriodsEdit({ member, membershipPeriod, invoices, tiers }: Readonly) { const { t } = useTranslation(); const { data, setData, put, processing, errors } = useForm({ membership_tier_id: membershipPeriod.membership_tier_id?.toString() || '', begin_date: membershipPeriod.begin_date || '', end_date: membershipPeriod.end_date || '', membership_type: membershipPeriod.membership_type || 'annual', invoice_id: membershipPeriod.invoice_id?.toString() || '', notes: membershipPeriod.notes || '', }); const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard', }, { title: 'Members', href: '/admin/members', }, { title: `${member.first_name} ${member.last_name}`, href: `/admin/members/${member.id}`, }, { title: 'Edit Membership Period', href: `/admin/members/${member.id}/membership-periods/${membershipPeriod.id}/edit`, } ], [member, membershipPeriod.id]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); put(`/admin/members/${member.id}/membership-periods/${membershipPeriod.id}`); }; return (

{t('Edit Membership Period')}

Update membership period for {member.first_name} {member.last_name}

{t('Membership Period Details')}

setData('begin_date', e.target.value)} className="mt-1" /> {errors.begin_date && (

{errors.begin_date}

)}
setData('end_date', e.target.value)} className="mt-1" />

{t('Leave blank for ongoing membership')}

{errors.end_date && (

{errors.end_date}

)}

{t('Required for automatic dues invoicing')}

{errors.membership_tier_id && (

{errors.membership_tier_id}

)}
{errors.membership_type && (

{errors.membership_type}

)}
{errors.invoice_id && (

{errors.invoice_id}

)}