mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2e9ff6c832a7eeb8561e3df845609c6d6b8d55cc
star-erp/resources/js/Pages/PurchaseOrder/Show.tsx

279 lines
14 KiB
TypeScript
Raw Normal View History

first commit
2025-12-30 15:03:19 +08:00
/**
* 查看採購單詳情頁面
*/
feat(procurement): 統一採購單按鈕樣式與術語更名為「作廢」，並加強權限控管
2026-02-06 15:32:12 +08:00
import { ArrowLeft, ShoppingCart, Send, CheckCircle, XCircle, RotateCcw } from "lucide-react";
first commit
2025-12-30 15:03:19 +08:00
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
feat(procurement): 統一採購單按鈕樣式與術語更名為「作廢」，並加強權限控管
2026-02-06 15:32:12 +08:00
import { Head, Link, useForm, usePage, router } from "@inertiajs/react";
first commit
2025-12-30 15:03:19 +08:00
import { StatusProgressBar } from "@/Components/PurchaseOrder/StatusProgressBar";
import PurchaseOrderStatusBadge from "@/Components/PurchaseOrder/PurchaseOrderStatusBadge";
import CopyButton from "@/Components/shared/CopyButton";
大更新
2026-01-08 16:32:10 +08:00
import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
first commit
2025-12-30 15:03:19 +08:00
import type { PurchaseOrder } from "@/types/purchase-order";
import { formatCurrency, formatDateTime } from "@/utils/format";
麵包屑功能完善
2026-01-07 13:06:49 +08:00
import { getShowBreadcrumbs } from "@/utils/breadcrumb";
feat(procurement): 統一採購單按鈕樣式與術語更名為「作廢」，並加強權限控管
2026-02-06 15:32:12 +08:00
import { toast } from "sonner";
import { PageProps } from "@/types/global";
first commit
2025-12-30 15:03:19 +08:00
interface Props {
order: PurchaseOrder;
}
export default function ViewPurchaseOrderPage({ order }: Props) {
return (
麵包屑功能完善
2026-01-07 13:06:49 +08:00
<AuthenticatedLayout breadcrumbs={getShowBreadcrumbs("purchaseOrders", `詳情 (#${order.poNumber})`)}>
first commit
2025-12-30 15:03:19 +08:00
<Head title={`採購單詳情 - ${order.poNumber}`} />
<div className="container mx-auto p-6 max-w-7xl">
{/* Header */}
<div className="mb-6">
<Link href="/purchase-orders">
<Button
variant="outline"
className="gap-2 button-outlined-primary mb-6"
>
<ArrowLeft className="h-4 w-4" />
返回採購單列表
</Button>
</Link>
<div className="flex items-center justify-between mb-6">
<div>
feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能
2026-01-13 17:00:58 +08:00
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
feat: 新增租戶品牌客製化系統（Logo、主色系）、修正 hardcoded 顏色為 CSS 變數
2026-01-16 14:36:24 +08:00
<ShoppingCart className="h-6 w-6 text-primary-main" />
feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能
2026-01-13 17:00:58 +08:00
查看採購單
</h1>
<p className="text-gray-500 mt-1">單號：{order.poNumber}</p>
first commit
2025-12-30 15:03:19 +08:00
</div>
<div className="flex items-center gap-3">
<PurchaseOrderStatusBadge status={order.status} />
</div>
</div>
</div>
{/* 狀態流程條 */}
<div className="mb-8">
<StatusProgressBar currentStatus={order.status} />
</div>
<div className="space-y-8">
{/* 基本資訊與品項 */}
<div className="space-y-8">
{/* 基本資訊卡片 */}
<div className="bg-white rounded-lg border shadow-sm p-6">
<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>
<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>
feat(procurement): 修正採購單與進貨單日期標籤、狀態與操作紀錄本地化
2026-02-04 13:20:18 +08:00
<span className="text-sm text-gray-500 block mb-1">下單日期</span>
feat: 倉庫業務屬性、庫存成本追蹤與採購單功能更新 1. 倉庫管理：新增業務類型 (Owned/External/Customer) 與車牌資訊與司機欄位。 2. 庫存管理：實作成本追蹤 (unit_cost, total_value)，更新列表與撥補單顯示。 3. 採購單：新增採購日期 (order_date)，調整欄位名稱與順序。 4. 前端優化：更新相關 TS Type 定義與 UI 顯示。
2026-01-26 17:27:34 +08:00
<span className="font-medium text-gray-900">{order.orderDate || "-"}</span>
</div>
<div>
first commit
2025-12-30 15:03:19 +08:00
<span className="text-sm text-gray-500 block mb-1">預計到貨日期</span>
<span className="font-medium text-gray-900">{order.expectedDate || "-"}</span>
</div>
</div>
{order.remark && (
<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">
{order.remark}
</p>
</div>
)}
</div>
feat: 新增採購單發票欄位、更新 SearchableSelect 樣式與搜尋門檻至 10 個項目
2026-01-09 10:18:52 +08:00
{/* 發票資訊卡片 */}
{(order.invoiceNumber || order.invoiceDate || (order.invoiceAmount !== null && order.invoiceAmount !== undefined)) && (
<div className="bg-white rounded-lg border shadow-sm p-6">
<h2 className="text-lg font-bold text-gray-900 mb-6">發票資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
{order.invoiceNumber && (
<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.invoiceNumber}</span>
<CopyButton text={order.invoiceNumber} label="複製發票號碼" />
</div>
</div>
)}
{order.invoiceDate && (
<div>
<span className="text-sm text-gray-500 block mb-1">發票日期</span>
<span className="font-medium text-gray-900">{order.invoiceDate}</span>
</div>
)}
{order.invoiceAmount !== null && order.invoiceAmount !== undefined && (
<div>
<span className="text-sm text-gray-500 block mb-1">發票金額</span>
<span className="font-medium text-gray-900">{formatCurrency(order.invoiceAmount)}</span>
</div>
)}
</div>
</div>
)}
first commit
2025-12-30 15:03:19 +08:00
{/* 採購項目卡片 */}
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<div className="p-6 border-b border-gray-100">
<h2 className="text-lg font-bold text-gray-900">採購項目清單</h2>
</div>
大更新
2026-01-08 16:32:10 +08:00
<div className="p-6">
<PurchaseOrderItemsTable
items={order.items}
isReadOnly={true}
/>
feat: 統一進貨單 UI、修復庫存異動紀錄與廠商詳情顯示報錯
2026-01-27 17:23:31 +08:00
<div className="mt-6 flex justify-end">
<div className="w-full max-w-sm bg-primary/5 px-6 py-4 rounded-xl border border-primary/10 flex flex-col gap-3">
<div className="flex justify-between items-center w-full">
<span className="text-sm text-gray-500 font-medium">小計</span>
<span className="text-lg font-bold text-gray-700">{formatCurrency(order.totalAmount)}</span>
</div>
<div className="flex justify-between items-center w-full">
<span className="text-sm text-gray-500 font-medium">稅額</span>
<span className="text-lg font-bold text-gray-700">{formatCurrency(order.taxAmount || 0)}</span>
</div>
<div className="h-px bg-primary/10 w-full my-1"></div>
<div className="flex justify-between items-end w-full">
<span className="text-sm text-gray-500 font-medium mb-1">總計 (含稅)</span>
<span className="text-2xl font-black text-primary">
{formatCurrency(order.grandTotal || (order.totalAmount + (order.taxAmount || 0)))}
</span>
</div>
feat: 優化採購單操作紀錄與統一刪除確認 UI - 優化採購單更新與刪除的活動紀錄邏輯 (PurchaseOrderController) - 整合更新異動為單一紀錄，包含品項差異 - 刪除時記錄當下品項快照 - 統一採購單刪除確認介面，使用 AlertDialog 取代原生 confirm (PurchaseOrderActions) - Refactor: 將 ActivityDetailDialog 移至 Components/ActivityLog 並優化樣式與大數據顯示 - 調整 UI 文字：將「總金額」統一為「小計」 - 其他模型與 Controller 的活動紀錄支援更新
2026-01-19 15:32:41 +08:00
</div>
大更新
2026-01-08 16:32:10 +08:00
</div>
first commit
2025-12-30 15:03:19 +08:00
</div>
</div>
feat(procurement): 統一採購單按鈕樣式與術語更名為「作廢」，並加強權限控管
2026-02-06 15:32:12 +08:00
{/* 操作按鈕 (底部) */}
<div className="flex justify-end pt-4">
<PurchaseOrderActions order={order} />
</div>
first commit
2025-12-30 15:03:19 +08:00
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
feat(procurement): 統一採購單按鈕樣式與術語更名為「作廢」，並加強權限控管
2026-02-06 15:32:12 +08:00
function PurchaseOrderActions({ order }: { order: PurchaseOrder }) {
const { auth } = usePage<PageProps>().props;
const permissions = auth.user?.permissions || [];
const { processing } = useForm({
status: order.status,
});
const handleUpdateStatus = (newStatus: string, actionName: string) => {
const formData = {
vendor_id: order.supplierId,
warehouse_id: order.warehouse_id,
order_date: order.orderDate,
expected_delivery_date: order.expectedDate ? new Date(order.expectedDate).toISOString().split('T')[0] : null,
items: order.items.map((item: any) => ({
productId: item.productId,
quantity: item.quantity,
unitId: item.unitId,
subtotal: item.subtotal,
})),
tax_amount: order.taxAmount,
status: newStatus,
remark: order.remark || "",
};
router.patch(route('purchase-orders.update', order.id), formData, {
onSuccess: () => toast.success(`採購單已${actionName === '取消' ? '作廢' : actionName}`),
onError: (errors: any) => {
console.error("Status Update Error:", errors);
toast.error(errors.error || "操作失敗");
}
});
};
// 權限判斷 (包含超級管理員檢查)
const isSuperAdmin = auth.user?.roles?.some((r: any) => r.name === 'super-admin');
const canApprove = isSuperAdmin || permissions.includes('purchase_orders.approve');
const canCancel = isSuperAdmin || permissions.includes('purchase_orders.cancel');
const canEdit = isSuperAdmin || permissions.includes('purchase_orders.edit');
const canView = isSuperAdmin || permissions.includes('purchase_orders.view');
// 送審權限：擁有檢視或編輯權限的人都可以送審
const canSubmit = canEdit || canView;
return (
<div className="flex items-center gap-4">
{['draft', 'pending', 'approved'].includes(order.status) && canCancel && (
<Button
onClick={() => handleUpdateStatus('cancelled', '作廢')}
disabled={processing}
variant="outline"
size="xl"
className="button-outlined-error shadow-red-200/20 border-red-600 text-red-600 hover:bg-red-50"
>
<XCircle className="h-5 w-5" /> 作廢
</Button>
)}
{order.status === 'pending' && canApprove && (
<Button
onClick={() => handleUpdateStatus('draft', '退回')}
disabled={processing}
variant="outline"
size="xl"
className="button-outlined-warning shadow-amber-200/20"
>
<RotateCcw className="h-5 w-5" /> 退回
</Button>
)}
<div className="flex-1" />
{order.status === 'draft' && canSubmit && (
<Button
onClick={() => handleUpdateStatus('pending', '送出審核')}
disabled={processing}
size="xl"
className="button-filled-primary shadow-primary/20"
>
<Send className="h-5 w-5" /> 送審
</Button>
)}
{order.status === 'pending' && canApprove && (
<Button
onClick={() => handleUpdateStatus('approved', '核准')}
disabled={processing}
size="xl"
className="button-filled-primary shadow-primary/20"
>
<CheckCircle className="h-5 w-5" /> 核准
</Button>
)}
</div>
);
}
Reference in New Issue Copy Permalink