+
{breadcrumbs && breadcrumbs.length > 1 && (
@@ -665,6 +673,6 @@ export default function AuthenticatedLayout({
-
+
);
}
diff --git a/resources/js/Pages/AccountPayable/Index.tsx b/resources/js/Pages/AccountPayable/Index.tsx
new file mode 100644
index 0000000..31ca26e
--- /dev/null
+++ b/resources/js/Pages/AccountPayable/Index.tsx
@@ -0,0 +1,288 @@
+import { useState, useCallback } from 'react';
+import { Head, Link, router } from '@inertiajs/react';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import {
+ Search,
+ Wallet,
+ Eye,
+ X,
+} from "lucide-react";
+import { StatusBadge } from '@/Components/shared/StatusBadge';
+import { formatDate } from '@/lib/date';
+import Pagination from '@/Components/shared/Pagination';
+import { Can } from '@/Components/Permission/Can';
+import { Button } from '@/Components/ui/button';
+import { Input } from '@/Components/ui/input';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
+import { SearchableSelect } from '@/Components/ui/searchable-select';
+import { debounce } from "lodash";
+
+const STATUS_OPTIONS = [
+ { value: 'all', label: '所有狀態' },
+ { value: 'pending', label: '待處理' },
+ { value: 'posted', label: '已入帳' },
+ { value: 'paid', label: '已支付' },
+ { value: 'voided', label: '已作廢' },
+];
+
+const getStatusBadgeVariant = (status: string) => {
+ switch (status) {
+ case 'pending': return 'warning';
+ case 'posted': return 'info';
+ case 'paid': return 'success';
+ case 'voided': return 'destructive';
+ default: return 'neutral';
+ }
+};
+
+const getStatusLabel = (status: string) => {
+ const found = STATUS_OPTIONS.find(opt => opt.value === status);
+ return found ? found.label : status;
+};
+
+export default function AccountPayableIndex({ payables, filters, vendors }: any) {
+ const [searchTerm, setSearchTerm] = useState(filters.search || "");
+ const [statusFilter, setStatusFilter] = useState(filters.status || "all");
+ const [vendorFilter, setVendorFilter] = useState(filters.vendor_id || "all");
+ const [perPage, setPerPage] = useState(filters.per_page || "10");
+
+ // 穩定的防抖過濾函式
+ const debouncedFilter = useCallback(
+ debounce((params: any) => {
+ router.get(route('account-payables.index'), params, {
+ preserveState: true,
+ replace: true,
+ preserveScroll: true,
+ });
+ }, 500),
+ []
+ );
+
+ const handleSearchChange = (term: string) => {
+ setSearchTerm(term);
+ debouncedFilter({
+ ...filters,
+ search: term,
+ status: statusFilter === "all" ? "" : statusFilter,
+ vendor_id: vendorFilter === "all" ? "" : vendorFilter,
+ page: 1
+ });
+ };
+
+ const handleClearSearch = () => {
+ setSearchTerm("");
+ debouncedFilter({
+ ...filters,
+ search: "",
+ status: statusFilter === "all" ? "" : statusFilter,
+ vendor_id: vendorFilter === "all" ? "" : vendorFilter,
+ page: 1
+ });
+ };
+
+ const handleStatusChange = (value: string) => {
+ setStatusFilter(value);
+ debouncedFilter({
+ ...filters,
+ search: searchTerm,
+ status: value === "all" ? "" : value,
+ vendor_id: vendorFilter === "all" ? "" : vendorFilter,
+ page: 1
+ });
+ };
+
+ const handleVendorChange = (value: string) => {
+ setVendorFilter(value);
+ debouncedFilter({
+ ...filters,
+ search: searchTerm,
+ status: statusFilter === "all" ? "" : statusFilter,
+ vendor_id: value === "all" ? "" : value,
+ page: 1
+ });
+ };
+
+ const handlePerPageChange = (value: string) => {
+ setPerPage(value);
+ debouncedFilter({
+ ...filters,
+ per_page: value,
+ page: 1
+ });
+ };
+
+ return (
+
+
+
+
+ {/* 頁面標題 */}
+
+
+
+
+ 應付帳款管理
+
+
+ 追蹤與供應商的應付帳項，管理採購入庫後的結算與付款狀態。
+
+
+
+
+ {/* 篩選工具列 */}
+
+
+ {/* 搜尋 */}
+
+
+ handleSearchChange(e.target.value)}
+ className="pl-10 pr-10 h-9"
+ />
+ {searchTerm && (
+
+ )}
+
+
+ {/* 狀態篩選 */}
+
+
+ {/* 供應商篩選 */}
+
({ label: v.name, value: v.id.toString() }))
+ ]}
+ placeholder="選擇供應商"
+ className="w-full md:w-[200px] h-9"
+ />
+
+
+
+
+
+
+
+ #
+ 應付單號
+ 供應商
+ 金額
+ 到期日
+ 狀態
+ 操作
+
+
+
+ {payables.data.length === 0 ? (
+
+
+ 尚無應付帳款資料
+
+
+ ) : (
+ payables.data.map((payable: any, index: number) => (
+ router.visit(route('account-payables.show', [payable.id]))}
+ >
+
+ {(payables.current_page - 1) * payables.per_page + index + 1}
+
+
+ {payable.document_number}
+
+
+ {payable.vendor?.name}
+
+
+ {new Intl.NumberFormat().format(payable.total_amount)}
+
+
+ {formatDate(payable.due_date)}
+
+
+ {/* @ts-ignore */}
+
+ {getStatusLabel(payable.status)}
+
+
+
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+ ))
+ )}
+
+
+
+
+
+
+
+ 每頁顯示
+
+ 筆
+
+
共 {payables.total} 筆紀錄
+
+
+
+
+
+ );
+}
diff --git a/resources/js/Pages/AccountPayable/Show.tsx b/resources/js/Pages/AccountPayable/Show.tsx
new file mode 100644
index 0000000..45e47f8
--- /dev/null
+++ b/resources/js/Pages/AccountPayable/Show.tsx
@@ -0,0 +1,400 @@
+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';
+
+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)}
+
+
+ {formatDate(payable.created_at)}
+
+
+
+
+
+
+
+ {payable.status !== 'paid' && (
+
+ )}
+
+
+
+
+ {/* 基本資料 */}
+
+
基本資料
+
+
+
供應商
+
+ {payable.vendor?.name || '未知供應商'}
+
+
+
+
總金額
+
+ ${parseFloat(payable.total_amount).toLocaleString()}
+
+
+
+
到期日
+
+ {formatDate(payable.due_date)}
+
+
+
+
建立人
+
+ {payable.creator?.name || '-'}
+
+
+
+
提交時間
+
+ {formatDate(payable.created_at)}
+
+
+ {payable.remarks && (
+
+
備註
+
+ {payable.remarks}
+
+
+ )}
+
+
+
+ {/* 來源關聯 */}
+
+
來源關聯
+
+
+
來源類型
+
+ {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.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}
+
+
+ )}
+
+
+ )}
+
+
+
+ {/* 發票對話框 */}
+
+
+ {/* 付款對話框 */}
+
+
+
+
+ );
+}
diff --git a/resources/js/Pages/Inventory/GoodsReceipt/Index.tsx b/resources/js/Pages/Inventory/GoodsReceipt/Index.tsx
index 1bfa3f8..eb82cc8 100644
--- a/resources/js/Pages/Inventory/GoodsReceipt/Index.tsx
+++ b/resources/js/Pages/Inventory/GoodsReceipt/Index.tsx
@@ -106,8 +106,8 @@ export default function GoodsReceiptIndex({ receipts, filters, warehouses }: Pro
const statusOptions = [
{ label: '全部狀態', value: 'all' },
+ { label: '草稿', value: 'draft' },
{ label: '已完成', value: 'completed' },
- { label: '處理中', value: 'processing' },
];
const warehouseOptions = [
diff --git a/resources/js/Pages/Inventory/GoodsReceipt/Show.tsx b/resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
index 7860ea8..54c2d2a 100644
--- a/resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
+++ b/resources/js/Pages/Inventory/GoodsReceipt/Show.tsx
@@ -5,7 +5,8 @@
import { ArrowLeft, Package } from "lucide-react";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { Head, Link } from "@inertiajs/react";
+import { Head, Link, usePage, useForm } from "@inertiajs/react";
+import { useState } from "react";
import GoodsReceiptStatusBadge from "@/Components/Inventory/GoodsReceiptStatusBadge";
import CopyButton from "@/Components/shared/CopyButton";
import {
@@ -16,8 +17,20 @@ import {
TableHeader,
TableRow,
} from "@/Components/ui/table";
+import {
+ AlertDialog,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
import { formatCurrency, formatDate, formatDateTime } from "@/utils/format";
-import { getShowBreadcrumbs } from "@/utils/breadcrumb";
+import { PageProps } from "@/types/global";
+import { toast } from "sonner";
+
+// ... (省略中間介面定義)
interface GoodsReceiptItem {
id: number;
@@ -66,34 +79,43 @@ export default function ViewGoodsReceiptPage({ receipt }: Props) {
other: "其他入庫",
};
+ const breadcrumbs = [
+ { label: "庫存管理", href: "#" },
+ { label: "進貨單管理", href: route("goods-receipts.index") },
+ { label: `單據詳情 (#${receipt.code})` },
+ ];
+
return (
-
+
{/* Header */}
-
-
-
-
- 查看進貨單
-
-
單號：{receipt.code}
-
-
+
+
+
+
+ 查看進貨單
+
+
+ 單號：{receipt.code}
+
+
+
@@ -219,3 +241,95 @@ export default function ViewGoodsReceiptPage({ receipt }: Props) {
);
}
+
+function GoodsReceiptActions({ receipt }: { receipt: GoodsReceipt }) {
+ const { auth } = usePage
().props;
+ const permissions = auth.user?.permissions || [];
+ const roles = auth.user?.roles || [];
+ const isSuperAdmin = roles.includes('super-admin');
+
+ // 權限判斷
+ const canView = isSuperAdmin || permissions.includes('goods_receipts.view');
+ const canEdit = isSuperAdmin || permissions.includes('goods_receipts.update');
+ const canDelete = isSuperAdmin || permissions.includes('goods_receipts.delete');
+
+ const canSubmit = canEdit || canView;
+
+ // 對話框狀態
+ const [dialogType, setDialogType] = useState<"submit" | "delete" | null>(null);
+
+ const { post, delete: destroy, processing } = useForm({});
+
+ const handleAction = () => {
+ if (!dialogType) return;
+
+ const options = {
+ onSuccess: () => {
+ toast.success('操作成功');
+ setDialogType(null);
+ },
+ onError: (errors: any) => toast.error(errors.error || '操作失敗')
+ };
+
+ switch (dialogType) {
+ case "submit":
+ post(route('goods-receipts.submit', receipt.id), options);
+ break;
+ case "delete":
+ destroy(route('goods-receipts.destroy', receipt.id), options);
+ break;
+ }
+ };
+
+ return (
+
+ {receipt.status === 'draft' && canDelete && (
+
+ )}
+
+ {receipt.status === 'draft' && canSubmit && (
+
+ )}
+
+ {/* 統一確認對話框 */}
+
!open && setDialogType(null)}>
+
+
+
+ {dialogType === "submit" && "確認點收"}
+ {dialogType === "delete" && "刪除進貨單"}
+
+
+ {dialogType === "submit" && "確定已點收無誤嗎？送出後將會更新庫存、關聯單據數量，並自動產生應付帳款，且無法再次退回。"}
+ {dialogType === "delete" && `將刪除進貨單「${receipt.code}」。注意：此操作無法復原。`}
+
+
+
+
+ 取消
+
+
+
+
+
{/* Header */}
+ {/* 返回按鈕 */}
-
-
-
-
- 查看採購單
-
-
單號：{order.poNumber}
-
-
+ {/* 頁面標題與操作 */}
+
{/* 狀態流程條 */}
@@ -169,10 +174,6 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
- {/* 操作按鈕 (底部) */}
-
@@ -225,16 +226,15 @@ function PurchaseOrderActions({ order }: { order: PurchaseOrder }) {
const canSubmit = canEdit || canView;
return (
-
+
{['draft', 'pending', 'approved'].includes(order.status) && canCancel && (
)}
@@ -243,23 +243,19 @@ function PurchaseOrderActions({ order }: { order: PurchaseOrder }) {
onClick={() => handleUpdateStatus('draft', '退回')}
disabled={processing}
variant="outline"
- size="xl"
- className="button-outlined-warning shadow-amber-200/20"
+ className="button-outlined-warning"
>
-
退回
+
退回
)}
-
-
{order.status === 'draft' && canSubmit && (
)}
@@ -267,10 +263,9 @@ function PurchaseOrderActions({ order }: { order: PurchaseOrder }) {
)}
diff --git a/resources/js/Pages/StoreRequisition/Index.tsx b/resources/js/Pages/StoreRequisition/Index.tsx
index 41b1d7d..2885b76 100644
--- a/resources/js/Pages/StoreRequisition/Index.tsx
+++ b/resources/js/Pages/StoreRequisition/Index.tsx
@@ -81,58 +81,74 @@ export default function Index({
setPerPage(filters.per_page || "10");
}, [filters]);
- const applyFilters = useCallback(
- (overrides: Record
= {}) => {
- const params: Record = {
- search: searchTerm,
- status: statusFilter === "all" ? "" : statusFilter,
- warehouse_id: warehouseFilter === "all" ? "" : warehouseFilter,
- per_page: perPage,
- ...overrides,
- };
- // 清理空值
- Object.keys(params).forEach((key) => {
- if (!params[key]) delete params[key];
- });
+ const debouncedFilter = useCallback(
+ debounce((params: any) => {
router.get(route("store-requisitions.index"), params, {
preserveState: true,
replace: true,
- preserveScroll: true,
});
- },
- [searchTerm, statusFilter, warehouseFilter, perPage]
- );
-
- const debouncedSearch = useCallback(
- debounce((term: string) => {
- applyFilters({ search: term });
- }, 500),
- [applyFilters]
+ }, 300),
+ []
);
const handleSearchChange = (term: string) => {
setSearchTerm(term);
- debouncedSearch(term);
+ debouncedFilter({
+ ...filters,
+ search: term,
+ status: statusFilter === "all" ? "" : statusFilter,
+ warehouse_id: warehouseFilter === "all" ? "" : warehouseFilter,
+ page: 1,
+ });
};
const handleClearSearch = () => {
setSearchTerm("");
- applyFilters({ search: "" });
+ debouncedFilter({
+ ...filters,
+ search: "",
+ status: statusFilter === "all" ? "" : statusFilter,
+ warehouse_id: warehouseFilter === "all" ? "" : warehouseFilter,
+ page: 1,
+ });
};
const handleStatusChange = (value: string) => {
setStatusFilter(value);
- applyFilters({ status: value === "all" ? "" : value });
+ debouncedFilter({
+ ...filters,
+ search: searchTerm,
+ status: value === "all" ? "" : value,
+ warehouse_id: warehouseFilter === "all" ? "" : warehouseFilter,
+ page: 1,
+ });
};
const handleWarehouseChange = (value: string) => {
setWarehouseFilter(value);
- applyFilters({ warehouse_id: value === "all" ? "" : value });
+ debouncedFilter({
+ ...filters,
+ search: searchTerm,
+ status: statusFilter === "all" ? "" : statusFilter,
+ warehouse_id: value === "all" ? "" : value,
+ page: 1,
+ });
};
const handlePerPageChange = (value: string) => {
setPerPage(value);
- applyFilters({ per_page: value });
+ router.get(
+ route("store-requisitions.index"),
+ {
+ ...filters,
+ search: searchTerm,
+ status: statusFilter === "all" ? "" : statusFilter,
+ warehouse_id: warehouseFilter === "all" ? "" : warehouseFilter,
+ per_page: value,
+ page: 1,
+ },
+ { preserveState: true, replace: true, preserveScroll: true }
+ );
};
const handleDelete = () => {
diff --git a/resources/js/Pages/StoreRequisition/Show.tsx b/resources/js/Pages/StoreRequisition/Show.tsx
index af9783e..5a85178 100644
--- a/resources/js/Pages/StoreRequisition/Show.tsx
+++ b/resources/js/Pages/StoreRequisition/Show.tsx
@@ -23,6 +23,13 @@ import {
DialogFooter,
DialogDescription,
} from "@/Components/ui/dialog";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/Components/ui/select";
import {
AlertDialog,
AlertDialogAction,
@@ -138,10 +145,6 @@ export default function Show({ requisition, warehouses }: Props) {
};
const handleApprove = () => {
- if (!supplyWarehouseId) {
- toast.error("請選擇供貨倉庫");
- return;
- }
// 確認每個核准數量
for (const item of approvedItems) {
const qty = parseFloat(item.approved_qty);
@@ -155,7 +158,6 @@ export default function Show({ requisition, warehouses }: Props) {
router.post(
route("store-requisitions.approve", [requisition.id]),
{
- supply_warehouse_id: supplyWarehouseId,
items: approvedItems.map((item) => ({
id: item.id,
approved_qty: parseFloat(item.approved_qty),
@@ -196,6 +198,20 @@ export default function Show({ requisition, warehouses }: Props) {
const isEditable = ["draft", "rejected"].includes(requisition.status);
const isPending = requisition.status === "pending";
+ const canApprove = usePermission().can("store_requisitions.approve");
+
+ const handleUpdateSupplyWarehouse = (warehouseId: string) => {
+ setSubmitting(true);
+ router.patch(
+ route("store-requisitions.update-supply-warehouse", [requisition.id]),
+ { supply_warehouse_id: warehouseId },
+ {
+ onFinish: () => setSubmitting(false),
+ onSuccess: () => toast.success("供貨倉庫已更新"),
+ preserveScroll: true,
+ }
+ );
+ };
return (
供貨倉庫
-
- {requisition.supply_warehouse_name || "-"}
-
+
+ {isPending && canApprove ? (
+
w.id !== requisition.store_warehouse_id)
+ .map((w) => ({
+ label: w.name,
+ value: w.id.toString(),
+ }))}
+ placeholder="選擇供貨倉庫"
+ className="h-9 w-full max-w-[200px]"
+ disabled={submitting}
+ />
+ ) : (
+
+ {requisition.supply_warehouse_name || "-"}
+
+ )}
+
申請人
@@ -455,22 +489,14 @@ export default function Show({ requisition, warehouses }: Props) {
選擇供貨倉庫，並確認各商品的核准數量。
-
-
-
w.id !== requisition.store_warehouse_id)
- .map((w) => ({
- label: w.name,
- value: w.id.toString(),
- }))}
- placeholder="請選擇供貨倉庫"
- className="h-9"
- />
+
+
+ 供貨倉庫：
+ {requisition.supply_warehouse_name || "尚未選擇"}
+
+ {!requisition.supply_warehouse_id && (
+
* 請先在基本資訊中選擇供貨倉庫
+ )}
@@ -534,7 +560,7 @@ export default function Show({ requisition, warehouses }: Props) {