mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: 統一各單據詳情頁面標題與基本資訊排版

Browse Source
This commit is contained in:
sky121113
2026-02-25 14:56:15 +08:00
parent 299cf37054
commit 878b90e2ad
7 changed files with 173 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
resources/js/Pages/AccountPayable/Show.tsx
View File

@@ -100,24 +100,27 @@ export default function AccountPayableShow({ payable }: any) {
</div>
{/* 頁面標題與操作 */}
<div className="flex items-start justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Wallet className="h-6 w-6 text-primary-main" />
{payable.document_number}
</h1>
<div className="flex items-center gap-2 mt-1">
<div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div className="space-y-2">
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Wallet className="h-6 w-6 text-primary-main" />
應付帳款: {payable.document_number}
</h1>
{/* @ts-ignore */}
<StatusBadge variant={getStatusBadgeVariant(payable.status)}>
{getStatusLabel(payable.status)}
</StatusBadge>
<span className="text-gray-500 text-sm">
{formatDate(payable.created_at)}
</span>
</div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
供應商: {payable.vendor?.name || '未知供應商'} <span className="mx-1">|</span>
建立者: {payable.creator?.name || "-"} <span className="mx-1">|</span>
到期日: {formatDate(payable.due_date)} <span className="mx-1">|</span>
建立時間: {formatDate(payable.created_at)}
</p>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
<Can permission="account_payables.edit">
<Button
variant="outline"
@@ -144,74 +147,35 @@ export default function AccountPayableShow({ payable }: any) {
</div>
<div className="space-y-6">
{/* 基本資料 */}
{/* 進階資訊 */}
<div className="bg-white rounded-lg shadow-sm border p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">基本資料</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<h2 className="text-lg font-bold text-gray-900 mb-6 border-b pb-4">進階資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
<div>
<span className="text-sm text-gray-500">供應商</span>
<p className="font-medium text-gray-800 mt-1">
{payable.vendor?.name || '未知供應商'}
</p>
</div>
<div>
<span className="text-sm text-gray-500">總金額</span>
<p className="font-medium text-gray-800 mt-1">
<span className="text-sm text-gray-500 block mb-1">總金額</span>
<p className="font-medium text-gray-800">
${parseFloat(payable.total_amount).toLocaleString()}
</p>
</div>
<div>
<span className="text-sm text-gray-500">到期日</span>
<p className="font-medium text-gray-800 mt-1">
{formatDate(payable.due_date)}
</p>
</div>
<div>
<span className="text-sm text-gray-500">建立人</span>
<p className="font-medium text-gray-800 mt-1">
{payable.creator?.name || '-'}
</p>
</div>
<div>
<span className="text-sm text-gray-500">提交時間</span>
<p className="font-medium text-gray-800 mt-1">
{formatDate(payable.created_at)}
</p>
</div>
{payable.remarks && (
<div className="md:col-span-3">
<span className="text-sm text-gray-500">備註</span>
<p className="font-medium text-gray-800 mt-1">
{payable.remarks}
</p>
</div>
)}
</div>
</div>
{/* 來源關聯 */}
<div className="bg-white rounded-lg shadow-sm border p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">來源關聯</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<span className="text-sm text-gray-500">來源類型</span>
<p className="font-medium text-gray-800 mt-1">
<span className="text-sm text-gray-500 block mb-1">來源類型</span>
<p className="font-medium text-gray-800">
{payable.source_document_type === 'goods_receipt' ? (
<Badge variant="outline" className="font-normal">進貨單</Badge>
<Badge variant="outline" className="font-normal border-gray-300">進貨單</Badge>
) : (
payable.source_document_type || '-'
)}
</p>
</div>
<div>
<span className="text-sm text-gray-500">來源單號</span>
<div className="flex items-center gap-2 mt-1">
<span className="text-sm text-gray-500 block mb-1">來源單號</span>
<div className="flex items-center gap-2">
<p className="font-medium text-gray-800">
{payable.source_document_code || payable.source_document_id || '-'}
</p>
{payable.source_document_type === 'goods_receipt' && payable.source_document_id && (
<Link
href={route('goods-receipts.show', [payable.source_document_id])}
href={route('goods-receipts.show', [payable.source_document_id]) + `?from=account-payables&from_id=${payable.id}&from_label=${payable.document_number}`}
className="text-primary-main hover:underline flex items-center gap-1 text-sm font-medium"
>
查閱 <ExternalLink className="h-3 w-3" />
@@ -220,6 +184,14 @@ export default function AccountPayableShow({ payable }: any) {
</div>
</div>
</div>
{payable.remarks && (
<div className="mt-8 pt-6 border-t border-gray-100">
<span className="text-sm text-gray-500 block mb-2">備註</span>
<p className="text-sm text-gray-700 bg-gray-50 p-4 rounded-lg leading-relaxed">
{payable.remarks}
</p>
</div>
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">