import { useState } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Button } from '@/Components/ui/button'; import { ExternalLink, ArrowLeft, Wallet, FileText, CheckCircle } from 'lucide-react'; import { StatusBadge } from '@/Components/shared/StatusBadge'; import { formatDate } from '@/lib/date'; import { Badge } from '@/Components/ui/badge'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/Components/ui/dialog'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { toast } from 'sonner'; import { Can } from '@/Components/Permission/Can'; const getStatusBadgeVariant = (status: string) => { switch (status) { case 'pending': return 'warning'; case 'partially_paid': return 'info'; case 'paid': return 'success'; case 'cancelled': return 'destructive'; default: return 'neutral'; } }; const getStatusLabel = (status: string) => { switch (status) { case 'pending': return '待付款'; case 'partially_paid': return '部分付款'; case 'paid': return '已結清'; case 'cancelled': return '已作廢'; default: return status; } }; export default function AccountPayableShow({ payable }: any) { const [invoiceDialogOpen, setInvoiceDialogOpen] = useState(false); const [paymentDialogOpen, setPaymentDialogOpen] = useState(false); const invoiceForm = useForm({ invoice_number: payable.invoice_number || '', invoice_date: payable.invoice_date || '', }); const paymentForm = useForm({ payment_method: payable.payment_method || 'bank_transfer', paid_at: payable.paid_at ? payable.paid_at.split('T')[0] : new Date().toISOString().split('T')[0], payment_note: payable.payment_note || '', }); const handleInvoiceSubmit = (e: React.FormEvent) => { e.preventDefault(); invoiceForm.post(route('account-payables.invoice', payable.id), { preserveScroll: true, onSuccess: () => { setInvoiceDialogOpen(false); toast.success('發票資訊已更新'); }, onError: (errors) => { toast.error(Object.values(errors)[0] as string || '更新失敗'); } }); }; const handlePaymentSubmit = (e: React.FormEvent) => { e.preventDefault(); paymentForm.post(route('account-payables.pay', payable.id), { preserveScroll: true, onSuccess: () => { setPaymentDialogOpen(false); toast.success('帳款已成功標記為已付款'); }, onError: (errors) => { toast.error(Object.values(errors)[0] as string || '標記失敗'); } }); }; return (

{/* Back Button */}

{/* 頁面標題與操作 */}

應付帳款: {payable.document_number}

{/* @ts-ignore */} {getStatusLabel(payable.status)}

供應商: {payable.vendor?.name || '未知供應商'} | 建立者: {payable.creator?.name || "-"} | 到期日: {formatDate(payable.due_date)} | 建立時間: {formatDate(payable.created_at)}

{payable.status !== 'paid' && ( )}

{/* 進階資訊 */}

進階資訊

總金額

${parseFloat(payable.total_amount).toLocaleString()}

來源類型

{payable.source_document_type === 'goods_receipt' ? ( 進貨單 ) : ( payable.source_document_type || '-' )}

來源單號

{payable.source_document_code || payable.source_document_id || '-'}

{payable.source_document_type === 'goods_receipt' && payable.source_document_id && ( 查閱 )}

{payable.remarks && (

備註

{payable.remarks}

)}

{/* 發票資訊 */}

發票資訊

發票號碼

{payable.invoice_number || 尚未登記}

發票日期

{payable.invoice_date ? formatDate(payable.invoice_date) : '-'}

{/* 付款資訊 */} {payable.status === 'paid' && (

付款資訊

付款狀態

已結清

付款方式

{payable.payment_method === 'cash' && '現金'} {payable.payment_method === 'bank_transfer' && '銀行轉帳'} {payable.payment_method === 'check' && '支票'} {payable.payment_method === 'credit_card' && '信用卡'} {!['cash', 'bank_transfer', 'check', 'credit_card'].includes(payable.payment_method) && (payable.payment_method || '-')}

付款日期

{payable.paid_at ? formatDate(payable.paid_at) : '-'}

{payable.payment_note && (

付款備註

{payable.payment_note}

)}

)}

{/* 發票對話框 */} {/* 付款對話框 */}

); }