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

9
app/Modules/Inventory/Controllers/GoodsReceiptController.php
View File

@@ -88,7 +88,7 @@ class GoodsReceiptController extends Controller
]); ]);
} }
public function show($id) public function show(Request $request, $id)
{ {
$receipt = GoodsReceipt::with([ $receipt = GoodsReceipt::with([
'warehouse', 'warehouse',
@@ -105,7 +105,12 @@ class GoodsReceiptController extends Controller
$receipt->items_sum_total_amount = $receipt->items->sum('total_amount'); $receipt->items_sum_total_amount = $receipt->items->sum('total_amount');
return Inertia::render('Inventory/GoodsReceipt/Show', [ return Inertia::render('Inventory/GoodsReceipt/Show', [
'receipt' => $receipt 'receipt' => $receipt,
'navigation' => [
'from' => $request->query('from'),
'from_id' => $request->query('from_id'),
'from_label' => $request->query('from_label'),
]
]); ]);
} }

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

@@ -100,24 +100,27 @@ export default function AccountPayableShow({ payable }: any) {
</div> </div>
{/* 頁面標題與操作 */} {/* 頁面標題與操作 */}
<div className="flex items-start justify-between mb-6"> <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div> <div className="space-y-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2"> <div className="flex items-center gap-2">
<Wallet className="h-6 w-6 text-primary-main" /> <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
{payable.document_number} <Wallet className="h-6 w-6 text-primary-main" />
</h1> 應付帳款: {payable.document_number}
<div className="flex items-center gap-2 mt-1"> </h1>
{/* @ts-ignore */} {/* @ts-ignore */}
<StatusBadge variant={getStatusBadgeVariant(payable.status)}> <StatusBadge variant={getStatusBadgeVariant(payable.status)}>
{getStatusLabel(payable.status)} {getStatusLabel(payable.status)}
</StatusBadge> </StatusBadge>
<span className="text-gray-500 text-sm">
{formatDate(payable.created_at)}
</span>
</div> </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>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Can permission="account_payables.edit"> <Can permission="account_payables.edit">
<Button <Button
variant="outline" variant="outline"
@@ -144,74 +147,35 @@ export default function AccountPayableShow({ payable }: any) {
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
{/* 基本資料 */} {/* 進階資訊 */}
<div className="bg-white rounded-lg shadow-sm border p-6"> <div className="bg-white rounded-lg shadow-sm border p-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">基本資料</h2> <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-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
<div> <div>
<span className="text-sm text-gray-500">供應商</span> <span className="text-sm text-gray-500 block mb-1">總金額</span>
<p className="font-medium text-gray-800 mt-1"> <p className="font-medium text-gray-800">
{payable.vendor?.name || '未知供應商'}
</p>
</div>
<div>
<span className="text-sm text-gray-500">總金額</span>
<p className="font-medium text-gray-800 mt-1">
${parseFloat(payable.total_amount).toLocaleString()} ${parseFloat(payable.total_amount).toLocaleString()}
</p> </p>
</div> </div>
<div> <div>
<span className="text-sm text-gray-500">到期日</span> <span className="text-sm text-gray-500 block mb-1">來源類型</span>
<p className="font-medium text-gray-800 mt-1"> <p className="font-medium text-gray-800">
{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">
{payable.source_document_type === 'goods_receipt' ? ( {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 || '-' payable.source_document_type || '-'
)} )}
</p> </p>
</div> </div>
<div> <div>
<span className="text-sm text-gray-500">來源單號</span> <span className="text-sm text-gray-500 block mb-1">來源單號</span>
<div className="flex items-center gap-2 mt-1"> <div className="flex items-center gap-2">
<p className="font-medium text-gray-800"> <p className="font-medium text-gray-800">
{payable.source_document_code || payable.source_document_id || '-'} {payable.source_document_code || payable.source_document_id || '-'}
</p> </p>
{payable.source_document_type === 'goods_receipt' && payable.source_document_id && ( {payable.source_document_type === 'goods_receipt' && payable.source_document_id && (
<Link <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" className="text-primary-main hover:underline flex items-center gap-1 text-sm font-medium"
> >
查閱 <ExternalLink className="h-3 w-3" /> 查閱 <ExternalLink className="h-3 w-3" />
@@ -220,6 +184,14 @@ export default function AccountPayableShow({ payable }: any) {
</div> </div>
</div> </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>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

73
resources/js/Pages/Integration/SalesOrders/Show.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowLeft, TrendingUp, Package, CreditCard, Calendar, FileJson } from "lucide-react"; import { ArrowLeft, TrendingUp, FileJson } from "lucide-react";
import { Button } from "@/Components/ui/button"; import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react"; import { Head, Link } from "@inertiajs/react";
@@ -13,7 +13,6 @@ import {
import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge"; import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
import { formatDate } from "@/lib/date"; import { formatDate } from "@/lib/date";
import { formatNumber } from "@/utils/format"; import { formatNumber } from "@/utils/format";
import CopyButton from "@/Components/shared/CopyButton";
interface SalesOrderItem { interface SalesOrderItem {
id: number; id: number;
@@ -91,62 +90,30 @@ export default function SalesOrderShow({ order }: Props) {
</Button> </Button>
</Link> </Link>
<div className="flex items-center justify-between mb-6"> <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div> <div className="space-y-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2"> <div className="flex items-center gap-2">
<TrendingUp className="h-6 w-6 text-primary-main" /> <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
查看銷售訂單 <TrendingUp className="h-6 w-6 text-primary-main" />
</h1> 銷售訂單: #{order.external_order_id}
<p className="text-gray-500 mt-1">外部單號：{order.external_order_id}</p> </h1>
<StatusBadge variant={getStatusVariant(order.status)}>
{getStatusLabel(order.status)}
</StatusBadge>
</div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
銷售時間: {formatDate(order.sold_at)} <span className="mx-1">|</span>
付款方式: {order.payment_method || "—"} <span className="mx-1">|</span>
訂單來源: {getSourceDisplay(order.source, order.source_label)} <span className="mx-1">|</span>
同步時間: {formatDate(order.created_at as any)}
</p>
</div> </div>
<StatusBadge variant={getStatusVariant(order.status)}>
{getStatusLabel(order.status)}
</StatusBadge>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 左側：基本資訊與明細 */} {/* 左側：基本資訊與明細 */}
<div className="lg:col-span-2 space-y-6"> <div className="lg:col-span-2 space-y-6">
{/* 基本資訊卡片 */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
<Package className="h-5 w-5 text-primary-main" />
基本資訊
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<span className="text-sm text-gray-500 block mb-1">外部訂單編號</span>
<div className="flex items-center gap-1.5">
<span className="font-mono font-medium text-gray-900">{order.external_order_id}</span>
<CopyButton text={order.external_order_id} label="複製單號" />
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">銷售時間</span>
<div className="flex items-center gap-1.5 font-medium text-gray-900">
<Calendar className="h-4 w-4 text-gray-400" />
{formatDate(order.sold_at)}
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">付款方式</span>
<div className="flex items-center gap-1.5 font-medium text-gray-900">
<CreditCard className="h-4 w-4 text-gray-400" />
{order.payment_method || "—"}
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">同步時間</span>
<span className="font-medium text-gray-900">{formatDate(order.created_at as any)}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">訂單來源</span>
<span className="font-medium text-gray-900">{getSourceDisplay(order.source, order.source_label)}</span>
</div>
</div>
</div>
{/* 項目清單卡片 */} {/* 項目清單卡片 */}
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"> <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
<div className="p-6 border-b border-gray-100"> <div className="p-6 border-b border-gray-100">
@@ -201,8 +168,8 @@ export default function SalesOrderShow({ order }: Props) {
<p className="text-sm text-gray-500 mb-4"> <p className="text-sm text-gray-500 mb-4">
此區塊顯示同步時接收到的完整原始 JSON 內容，可用於排查資料問題。 此區塊顯示同步時接收到的完整原始 JSON 內容，可用於排查資料問題。
</p> </p>
<div className="bg-slate-900 rounded-lg p-4 overflow-auto max-h-[600px]"> <div className="bg-gray-50 border border-gray-100 rounded-lg p-4 overflow-auto max-h-[600px]">
<pre className="text-xs text-slate-300 font-mono"> <pre className="text-xs text-gray-700 font-mono">
{JSON.stringify(order.raw_payload, null, 2)} {JSON.stringify(order.raw_payload, null, 2)}
</pre> </pre>
</div> </div>

81
resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
View File

@@ -8,7 +8,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, usePage, useForm } from "@inertiajs/react"; import { Head, Link, usePage, useForm } from "@inertiajs/react";
import { useState } from "react"; import { useState } from "react";
import GoodsReceiptStatusBadge from "@/Components/Inventory/GoodsReceiptStatusBadge"; import GoodsReceiptStatusBadge from "@/Components/Inventory/GoodsReceiptStatusBadge";
import CopyButton from "@/Components/shared/CopyButton";
import { import {
Table, Table,
TableBody, TableBody,
@@ -70,82 +70,83 @@ interface GoodsReceipt {
interface Props { interface Props {
receipt: GoodsReceipt; receipt: GoodsReceipt;
navigation?: {
from?: string;
from_id?: string;
from_label?: string;
};
} }
export default function ViewGoodsReceiptPage({ receipt }: Props) { export default function ViewGoodsReceiptPage({ receipt, navigation }: Props) {
const typeMap: Record<string, string> = { const typeMap: Record<string, string> = {
standard: "標準採購進貨", standard: "標準採購進貨",
miscellaneous: "雜項入庫", miscellaneous: "雜項入庫",
other: "其他入庫", other: "其他入庫",
}; };
const breadcrumbs = [ const breadcrumbs: any[] = [
{ label: "庫存管理", href: "#" }, { label: "庫存管理", href: "#" },
{ label: "進貨單管理", href: route("goods-receipts.index") }, { label: "進貨單管理", href: route("goods-receipts.index") },
{ label: `單據詳情 (#${receipt.code})` },
]; ];
let backUrl = route("goods-receipts.index");
let backLabel = "返回進貨單列表";
if (navigation?.from === 'account-payables' && navigation.from_id) {
breadcrumbs.push({
label: `應付帳款: ${navigation.from_label || navigation.from_id}`,
href: route('account-payables.show', [navigation.from_id])
});
backUrl = route('account-payables.show', [navigation.from_id]);
backLabel = `返回應付帳款 (${navigation.from_label || navigation.from_id})`;
}
breadcrumbs.push({ label: `單據詳情 (#${receipt.code})`, isPage: true });
return ( return (
<AuthenticatedLayout breadcrumbs={breadcrumbs}> <AuthenticatedLayout breadcrumbs={breadcrumbs}>
<Head title={`進貨單詳情 - ${receipt.code}`} /> <Head title={`進貨單詳情 - ${receipt.code}`} />
<div className="container mx-auto p-6 max-w-7xl"> <div className="container mx-auto p-6 max-w-7xl">
{/* Header */} {/* Header */}
<div className="mb-6"> <div className="mb-6">
<Link href={route("goods-receipts.index")}> <Link href={backUrl}>
<Button <Button
variant="outline" variant="outline"
className="gap-2 button-outlined-primary" className="gap-2 button-outlined-primary"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
返回進貨單列表 {backLabel}
</Button> </Button>
</Link> </Link>
</div> </div>
<div className="flex items-center justify-between mb-6"> {/* 頁面標題與操作 */}
<div> <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2"> <div className="space-y-2">
<Package className="h-6 w-6 text-primary-main" /> <div className="flex items-center gap-2">
查看進貨單 <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
</h1> <Package className="h-6 w-6 text-primary-main" />
<div className="flex items-center gap-2 mt-1"> 進貨單: {receipt.code}
</h1>
<GoodsReceiptStatusBadge status={receipt.status} /> <GoodsReceiptStatusBadge status={receipt.status} />
<span className="text-gray-500 text-sm">單號：{receipt.code}</span>
</div> </div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
入庫類型: {typeMap[receipt.type] || receipt.type} <span className="mx-1">|</span>
倉庫: {receipt.warehouse?.name || "-"} <span className="mx-1">|</span>
供應商: {receipt.vendor?.name || "-"} <span className="mx-1">|</span>
進貨日期: {formatDate(receipt.received_date)}
</p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-2">
<GoodsReceiptActions receipt={receipt} /> <GoodsReceiptActions receipt={receipt} />
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-8"> <div className="grid grid-cols-1 gap-8">
{/* 基本資訊卡片 */} {/* 進階資訊卡片 */}
<div className="bg-white rounded-lg border shadow-sm p-6"> <div className="bg-white rounded-lg border shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6 border-b pb-4">基本資訊</h2> <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-2 lg:grid-cols-3 gap-x-8 gap-y-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
<div>
<span className="text-sm text-gray-500 block mb-1">進貨單編號</span>
<div className="flex items-center gap-1.5">
<span className="font-mono font-medium text-gray-900">{receipt.code}</span>
<CopyButton text={receipt.code} label="複製單號" />
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">入庫類型</span>
<span className="font-medium text-gray-900">{typeMap[receipt.type] || receipt.type}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">倉庫</span>
<span className="font-medium text-gray-900">{receipt.warehouse?.name || "-"}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">供應商</span>
<span className="font-medium text-gray-900">{receipt.vendor?.name || "-"}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">進貨日期</span>
<span className="font-medium text-gray-900">{formatDate(receipt.received_date)}</span>
</div>
<div> <div>
<span className="text-sm text-gray-500 block mb-1">建立時間</span> <span className="text-sm text-gray-500 block mb-1">建立時間</span>
<span className="font-medium text-gray-900">{formatDateTime(receipt.created_at)}</span> <span className="font-medium text-gray-900">{formatDateTime(receipt.created_at)}</span>

56
resources/js/Pages/PurchaseOrder/Show.tsx
View File

@@ -12,6 +12,7 @@ import CopyButton from "@/Components/shared/CopyButton";
import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable"; import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
import type { PurchaseOrder } from "@/types/purchase-order"; import type { PurchaseOrder } from "@/types/purchase-order";
import { formatCurrency, formatDateTime } from "@/utils/format"; import { formatCurrency, formatDateTime } from "@/utils/format";
import { formatDate } from "@/lib/date";
import { getShowBreadcrumbs } from "@/utils/breadcrumb"; import { getShowBreadcrumbs } from "@/utils/breadcrumb";
import { toast } from "sonner"; import { toast } from "sonner";
import { PageProps } from "@/types/global"; import { PageProps } from "@/types/global";
@@ -40,18 +41,23 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
</div> </div>
{/* 頁面標題與操作 */} {/* 頁面標題與操作 */}
<div className="flex items-center justify-between mb-6"> <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div> <div className="space-y-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2"> <div className="flex items-center gap-2">
<ShoppingCart className="h-6 w-6 text-primary-main" /> <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
查看採購單 <ShoppingCart className="h-6 w-6 text-primary-main" />
</h1> 採購單: {order.poNumber}
<div className="flex items-center gap-2 mt-1"> </h1>
<PurchaseOrderStatusBadge status={order.status} /> <PurchaseOrderStatusBadge status={order.status} />
<span className="text-gray-500 text-sm">單號：{order.poNumber}</span>
</div> </div>
<p className="text-sm text-gray-500 font-medium flex items-center gap-2">
供應商: {order.supplierName} <span className="mx-1">|</span>
{/* 此處將申請單位及申請人一起顯示 */}
建立者: {order.warehouse_name} ({order.createdBy}) <span className="mx-1">|</span>
時間: {formatDateTime(order.createdAt)}
</p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-2">
<PurchaseOrderActions order={order} /> <PurchaseOrderActions order={order} />
</div> </div>
</div> </div>
@@ -64,39 +70,17 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
{/* 基本資訊與品項 */} {/* 基本資訊與品項 */}
<div className="space-y-8"> <div className="space-y-8">
{/* 基本資訊卡片 (省略已在標題顯示的欄位) */}
{/* 基本資訊卡片 */}
<div className="bg-white rounded-lg border shadow-sm p-6"> <div className="bg-white rounded-lg border shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6">基本資訊</h2> <h2 className="text-lg font-bold text-gray-900 mb-6">進階資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
<div>
<span className="text-sm text-gray-500 block mb-1">採購單編號</span>
<div className="flex items-center gap-1.5">
<span className="font-mono font-medium text-gray-900">{order.poNumber}</span>
<CopyButton text={order.poNumber} label="複製單號" />
</div>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">供應商</span>
<span className="font-medium text-gray-900">{order.supplierName}</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">申請單位 (申請人)</span>
<span className="font-medium text-gray-900">
{order.warehouse_name} ({order.createdBy})
</span>
</div>
<div>
<span className="text-sm text-gray-500 block mb-1">建立日期</span>
<span className="font-medium text-gray-900">{formatDateTime(order.createdAt)}</span>
</div>
<div> <div>
<span className="text-sm text-gray-500 block mb-1">下單日期</span> <span className="text-sm text-gray-500 block mb-1">下單日期</span>
<span className="font-medium text-gray-900">{order.orderDate || "-"}</span> <span className="font-medium text-gray-900">{order.orderDate ? formatDate(order.orderDate) : "-"}</span>
</div> </div>
<div> <div>
<span className="text-sm text-gray-500 block mb-1">預計到貨日期</span> <span className="text-sm text-gray-500 block mb-1">預計到貨日期</span>
<span className="font-medium text-gray-900">{order.expectedDate || "-"}</span> <span className="font-medium text-gray-900">{order.expectedDate ? formatDate(order.expectedDate) : "-"}</span>
</div> </div>
</div> </div>
{order.remark && ( {order.remark && (

26
resources/js/Pages/Sales/Import/Show.tsx
View File

@@ -128,18 +128,22 @@ export default function SalesImportShow({ import: batch, items, filters = {} }:
</Button> </Button>
</Link> </Link>
<div className="flex items-center justify-between mb-6"> <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div> <div className="space-y-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCircle className="h-6 w-6 text-primary-main" /> <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
銷售匯入詳情 <CheckCircle className="h-6 w-6 text-primary-main" />
</h1> 銷售匯入: #{batch.id}
<p className="text-gray-500 mt-1">批次編號：#{batch.id} | 匯入時間：{format(new Date(batch.created_at), 'yyyy/MM/dd HH:mm')}</p> </h1>
<StatusBadge variant={batch.status === 'confirmed' ? 'success' : 'neutral'}>
{batch.status === 'confirmed' ? '已確認' : '待確認'}
</StatusBadge>
</div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
匯入時間: {format(new Date(batch.created_at), 'yyyy/MM/dd HH:mm')}
</p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center gap-2">
<StatusBadge variant={batch.status === 'confirmed' ? 'success' : 'neutral'}>
{batch.status === 'confirmed' ? '已確認' : '待確認'}
</StatusBadge>
{batch.status === 'pending' && ( {batch.status === 'pending' && (
<div className="flex gap-3"> <div className="flex gap-3">
{can('sales_imports.delete') && ( {can('sales_imports.delete') && (

79
resources/js/Pages/StoreRequisition/Show.tsx
View File

@@ -23,13 +23,7 @@ import {
DialogFooter, DialogFooter,
DialogDescription, DialogDescription,
} from "@/Components/ui/dialog"; } from "@/Components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@@ -119,7 +113,7 @@ export default function Show({ requisition, warehouses }: Props) {
// 核准狀態 // 核准狀態
const [showApproveDialog, setShowApproveDialog] = useState(false); const [showApproveDialog, setShowApproveDialog] = useState(false);
const [supplyWarehouseId, setSupplyWarehouseId] = useState("");
const [approvedItems, setApprovedItems] = useState<{ id: number; approved_qty: string }[]>( const [approvedItems, setApprovedItems] = useState<{ id: number; approved_qty: string }[]>(
requisition.items.map((item) => ({ requisition.items.map((item) => ({
id: item.id, id: item.id,
@@ -235,22 +229,35 @@ export default function Show({ requisition, warehouses }: Props) {
</div> </div>
{/* 頁面標題與操作 */} {/* 頁面標題與操作 */}
<div className="flex items-center justify-between mb-6"> <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div> <div className="space-y-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2"> <div className="flex items-center gap-2">
<Store className="h-6 w-6 text-primary-main" /> <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
{requisition.doc_no} <Store className="h-6 w-6 text-primary-main" />
</h1> 門市叫貨單: {requisition.doc_no}
<div className="flex items-center gap-2 mt-1"> </h1>
{getStatusBadge(requisition.status)} {getStatusBadge(requisition.status)}
<span className="text-gray-500 text-sm">
{formatDate(requisition.created_at)}
</span>
</div> </div>
<p className="text-sm text-gray-500 mt-1 font-medium flex items-center gap-2">
申請倉庫: {requisition.store_warehouse_name} <span className="mx-1">|</span>
建立者: {requisition.creator_name} <span className="mx-1">|</span>
時間: {formatDate(requisition.created_at)}
{requisition.transfer_order_id && (
<>
<span className="mx-1">|</span>
<Link
href={`${route("inventory.transfer.show", [requisition.transfer_order_id])}?from=requisition&from_id=${requisition.id}&from_doc=${encodeURIComponent(requisition.doc_no)}`}
className="text-primary-main hover:underline flex items-center gap-1"
>
關聯調撥單: {requisition.transfer_order_id}
</Link>
</>
)}
</p>
</div> </div>
{/* 操作按鈕 */} {/* 操作按鈕 */}
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
{isEditable && ( {isEditable && (
<> <>
<Can permission="store_requisitions.edit"> <Can permission="store_requisitions.edit">
@@ -300,16 +307,10 @@ export default function Show({ requisition, warehouses }: Props) {
{/* 基本資訊 */} {/* 基本資訊 */}
<div className="bg-white rounded-lg shadow-sm border p-6 mb-6"> <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">基本資訊</h2> <h2 className="text-lg font-semibold text-gray-800 mb-4 border-b pb-4">基本資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
<div> <div>
<span className="text-sm text-gray-500">申請倉庫</span> <span className="text-sm text-gray-500 block mb-1">供貨倉庫</span>
<p className="font-medium text-gray-800 mt-1">
{requisition.store_warehouse_name}
</p>
</div>
<div>
<span className="text-sm text-gray-500">供貨倉庫</span>
<div className="mt-1"> <div className="mt-1">
{isPending && canApprove ? ( {isPending && canApprove ? (
<SearchableSelect <SearchableSelect
@@ -332,16 +333,10 @@ export default function Show({ requisition, warehouses }: Props) {
)} )}
</div> </div>
</div> </div>
<div>
<span className="text-sm text-gray-500">申請人</span>
<p className="font-medium text-gray-800 mt-1">
{requisition.creator_name}
</p>
</div>
{requisition.submitted_at && ( {requisition.submitted_at && (
<div> <div>
<span className="text-sm text-gray-500">提交時間</span> <span className="text-sm text-gray-500 block mb-1">提交時間</span>
<p className="font-medium text-gray-800 mt-1"> <p className="font-medium text-gray-800">
{formatDate(requisition.submitted_at)} {formatDate(requisition.submitted_at)}
</p> </p>
</div> </div>
@@ -349,14 +344,14 @@ export default function Show({ requisition, warehouses }: Props) {
{requisition.approved_at && ( {requisition.approved_at && (
<> <>
<div> <div>
<span className="text-sm text-gray-500">審核人</span> <span className="text-sm text-gray-500 block mb-1">審核人</span>
<p className="font-medium text-gray-800 mt-1"> <p className="font-medium text-gray-800">
{requisition.approver_name} {requisition.approver_name}
</p> </p>
</div> </div>
<div> <div>
<span className="text-sm text-gray-500">審核時間</span> <span className="text-sm text-gray-500 block mb-1">審核時間</span>
<p className="font-medium text-gray-800 mt-1"> <p className="font-medium text-gray-800">
{formatDate(requisition.approved_at)} {formatDate(requisition.approved_at)}
</p> </p>
</div> </div>
@@ -364,8 +359,8 @@ export default function Show({ requisition, warehouses }: Props) {
)} )}
{requisition.remark && ( {requisition.remark && (
<div className="md:col-span-3"> <div className="md:col-span-3">
<span className="text-sm text-gray-500">備註</span> <span className="text-sm text-gray-500 block mb-1">備註</span>
<p className="font-medium text-gray-800 mt-1"> <p className="font-medium text-gray-800">
{requisition.remark} {requisition.remark}
</p> </p>
</div> </div>