41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { useParams, useRouter } from 'next/navigation';
|
||
|
|
|
||
|
|
import { ExpenseDetail } from '@/components/expenses/expense-detail';
|
||
|
|
import { ExpenseFormDialog } from '@/components/expenses/expense-form-dialog';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
import type { ExpenseRow } from '@/components/expenses/expense-columns';
|
||
|
|
|
||
|
|
export default function ExpenseDetailPage() {
|
||
|
|
const params = useParams<{ portSlug: string; id: string }>();
|
||
|
|
const router = useRouter();
|
||
|
|
const [editOpen, setEditOpen] = useState(false);
|
||
|
|
|
||
|
|
const { data } = useQuery<{ data: ExpenseRow }>({
|
||
|
|
queryKey: ['expenses', params.id],
|
||
|
|
queryFn: () => apiFetch(`/api/v1/expenses/${params.id}`),
|
||
|
|
enabled: !!params.id,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-3xl mx-auto">
|
||
|
|
<ExpenseDetail
|
||
|
|
expenseId={params.id}
|
||
|
|
onEdit={() => setEditOpen(true)}
|
||
|
|
onArchived={() => router.push(`/${params.portSlug}/expenses`)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{data?.data && (
|
||
|
|
<ExpenseFormDialog
|
||
|
|
open={editOpen}
|
||
|
|
onOpenChange={setEditOpen}
|
||
|
|
expense={data.data}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|