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

feat: 新增採購單發票欄位、更新 SearchableSelect 樣式與搜尋門檻至 10 個項目
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Successful in 1m17s
Details
Koori-ERP-Deploy-System / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
sky121113
2026-01-09 10:18:52 +08:00
parent d60367ac57
commit 24ae6f3eee
13 changed files with 451 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resources/js/Components/Product/ProductDialog.tsx
View File

@@ -11,13 +11,7 @@ import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { useForm } from "@inertiajs/react";
import { toast } from "sonner";
import type { Product, Category } from "@/Pages/Product/Index";
@@ -123,21 +117,14 @@ export default function ProductDialog({
<Label htmlFor="category_id">
分類 <span className="text-red-500">*</span>
</Label>
<Select
<SearchableSelect
value={data.category_id}
onValueChange={(value) => setData("category_id", value)}
>
<SelectTrigger id="category_id" className={errors.category_id ? "border-red-500" : ""}>
<SelectValue placeholder="選擇分類" />
</SelectTrigger>
<SelectContent>
{categories.map((category) => (
<SelectItem key={category.id} value={category.id.toString()}>
{category.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={categories.map((c) => ({ label: c.name, value: c.id.toString() }))}
placeholder="選擇分類"
searchPlaceholder="搜尋分類..."
className={errors.category_id ? "border-red-500" : ""}
/>
{errors.category_id && <p className="text-sm text-red-500">{errors.category_id}</p>}
</div>
@@ -188,42 +175,30 @@ export default function ProductDialog({
<Label htmlFor="base_unit_id">
基本庫存單位 <span className="text-red-500">*</span>
</Label>
<Select
<SearchableSelect
value={data.base_unit_id}
onValueChange={(value) => setData("base_unit_id", value)}
>
<SelectTrigger id="base_unit_id" className={errors.base_unit_id ? "border-red-500" : ""}>
<SelectValue placeholder="選擇單位" />
</SelectTrigger>
<SelectContent>
{units.map((unit) => (
<SelectItem key={unit.id} value={unit.id.toString()}>
{unit.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={units.map((u) => ({ label: u.name, value: u.id.toString() }))}
placeholder="選擇單位"
searchPlaceholder="搜尋單位..."
className={errors.base_unit_id ? "border-red-500" : ""}
/>
{errors.base_unit_id && <p className="text-sm text-red-500">{errors.base_unit_id}</p>}
</div>
<div className="space-y-2">
<Label htmlFor="large_unit_id">大單位</Label>
<Select
<SearchableSelect
value={data.large_unit_id}
onValueChange={(value) => setData("large_unit_id", value)}
>
<SelectTrigger id="large_unit_id" className={errors.large_unit_id ? "border-red-500" : ""}>
<SelectValue placeholder="無" />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">無</SelectItem>
{units.map((unit) => (
<SelectItem key={unit.id} value={unit.id.toString()}>
{unit.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={[
{ label: "無", value: "none" },
...units.map((u) => ({ label: u.name, value: u.id.toString() }))
]}
placeholder="無"
searchPlaceholder="搜尋單位..."
className={errors.large_unit_id ? "border-red-500" : ""}
/>
{errors.large_unit_id && <p className="text-sm text-red-500">{errors.large_unit_id}</p>}
</div>

48
resources/js/Components/PurchaseOrder/PurchaseOrderItemsTable.tsx
View File

@@ -5,13 +5,7 @@
import { Trash2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import {
Table,
TableBody,
@@ -82,27 +76,18 @@ export function PurchaseOrderItemsTable({
{isReadOnly ? (
<span className="font-medium">{item.productName}</span>
) : (
<Select
<SearchableSelect
value={item.productId}
onValueChange={(value) =>
onItemChange?.(index, "productId", value)
}
disabled={isDisabled}
>
<SelectTrigger className="h-10 border-gray-200">
<SelectValue placeholder="選擇商品" />
</SelectTrigger>
<SelectContent>
{supplier?.commonProducts.map((product) => (
<SelectItem key={product.productId} value={product.productId}>
{product.productName}
</SelectItem>
))}
{(!supplier || supplier.commonProducts.length === 0) && (
<div className="p-2 text-sm text-gray-400 text-center">無可用商品</div>
)}
</SelectContent>
</Select>
options={supplier?.commonProducts.map((p) => ({ label: p.productName, value: p.productId })) || []}
placeholder="選擇商品"
searchPlaceholder="搜尋商品..."
emptyText="無可用商品"
className="w-full"
/>
)}
</TableCell>
@@ -128,21 +113,18 @@ export function PurchaseOrderItemsTable({
{/* 單位選擇 */}
<TableCell>
{!isReadOnly && item.large_unit_id ? (
<Select
<SearchableSelect
value={item.selectedUnit || 'base'}
onValueChange={(value) =>
onItemChange?.(index, "selectedUnit", value)
}
disabled={isDisabled}
>
<SelectTrigger className="h-10 border-gray-200 w-24">
<SelectValue />
</SelectTrigger>
<SelectContent className="z-[9999]">
<SelectItem value="base">{item.base_unit_name || "個"}</SelectItem>
<SelectItem value="large">{item.large_unit_name}</SelectItem>
</SelectContent>
</Select>
options={[
{ label: item.base_unit_name || "個", value: "base" },
{ label: item.large_unit_name || "", value: "large" }
]}
className="w-24"
/>
) : (
<span className="text-gray-500 font-medium">
{item.selectedUnit === 'large' && item.large_unit_name

100
resources/js/Components/Warehouse/TransferOrderDialog.tsx
View File

@@ -18,13 +18,7 @@ import {
import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input";
import { Button } from "@/Components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Textarea } from "@/Components/ui/textarea";
import { toast } from "sonner";
import { Warehouse, TransferOrder, TransferOrderStatus } from "@/types/warehouse";
@@ -194,7 +188,7 @@ export default function TransferOrderDialog({
<Label htmlFor="sourceWarehouse">
來源倉庫 <span className="text-red-500">*</span>
</Label>
<Select
<SearchableSelect
value={formData.sourceWarehouseId}
onValueChange={(value) =>
setFormData({
@@ -207,44 +201,28 @@ export default function TransferOrderDialog({
})
}
disabled={!!order}
>
<SelectTrigger id="sourceWarehouse">
<SelectValue placeholder="選擇來源倉庫" />
</SelectTrigger>
<SelectContent>
{warehouses.map((warehouse) => (
<SelectItem key={warehouse.id} value={warehouse.id}>
{warehouse.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={warehouses.map((warehouse) => ({ label: warehouse.name, value: warehouse.id }))}
placeholder="選擇來源倉庫"
searchPlaceholder="搜尋倉庫..."
/>
</div>
<div className="space-y-2">
<Label htmlFor="targetWarehouse">
目標倉庫 <span className="text-red-500">*</span>
</Label>
<Select
<SearchableSelect
value={formData.targetWarehouseId}
onValueChange={(value) =>
setFormData({ ...formData, targetWarehouseId: value })
}
disabled={!!order}
>
<SelectTrigger id="targetWarehouse">
<SelectValue placeholder="選擇目標倉庫" />
</SelectTrigger>
<SelectContent>
{warehouses
.filter((w) => w.id !== formData.sourceWarehouseId)
.map((warehouse) => (
<SelectItem key={warehouse.id} value={warehouse.id}>
{warehouse.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={warehouses
.filter((w) => w.id !== formData.sourceWarehouseId)
.map((warehouse) => ({ label: warehouse.name, value: warehouse.id }))}
placeholder="選擇目標倉庫"
searchPlaceholder="搜尋倉庫..."
/>
</div>
</div>
@@ -253,7 +231,7 @@ export default function TransferOrderDialog({
<Label htmlFor="product">
撥補商品 <span className="text-red-500">*</span>
</Label>
<Select
<SearchableSelect
value={
formData.productId && formData.batchNumber
? `${formData.productId}|||${formData.batchNumber}`
@@ -261,28 +239,14 @@ export default function TransferOrderDialog({
}
onValueChange={handleProductChange}
disabled={!formData.sourceWarehouseId || !!order}
>
<SelectTrigger id="product">
<SelectValue placeholder="選擇商品與批號" />
</SelectTrigger>
<SelectContent>
{availableProducts.length === 0 ? (
<div className="p-2 text-sm text-gray-500 text-center">
{formData.sourceWarehouseId ? "該倉庫無可用庫存" : "請先選擇來源倉庫"}
</div>
) : (
availableProducts.map((product) => (
<SelectItem
key={`${product.productId}|||${product.batchNumber}`}
value={`${product.productId}|||${product.batchNumber}`}
>
{product.productName} (庫存:{" "}
{product.availableQty} {product.unit})
</SelectItem>
))
)}
</SelectContent>
</Select>
options={availableProducts.map((product) => ({
label: `${product.productName} (庫存: ${product.availableQty} ${product.unit})`,
value: `${product.productId}|||${product.batchNumber}`,
}))}
placeholder="選擇商品與批號"
searchPlaceholder="搜尋商品..."
emptyText={formData.sourceWarehouseId ? "該倉庫無可用庫存" : "請先選擇來源倉庫"}
/>
</div>
{/* 數量和日期 */}
@@ -329,22 +293,18 @@ export default function TransferOrderDialog({
{order && (
<div className="space-y-2">
<Label htmlFor="status">狀態</Label>
<Select
<SearchableSelect
value={formData.status}
onValueChange={(value) =>
setFormData({ ...formData, status: value as TransferOrderStatus })
}
>
<SelectTrigger id="status">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="待處理">待處理</SelectItem>
<SelectItem value="處理中">處理中</SelectItem>
<SelectItem value="已完成">已完成</SelectItem>
<SelectItem value="已取消">已取消</SelectItem>
</SelectContent>
</Select>
options={[
{ label: "待處理", value: "待處理" },
{ label: "處理中", value: "處理中" },
{ label: "已完成", value: "已完成" },
{ label: "已取消", value: "已取消" },
]}
/>
</div>
)}

139
resources/js/Components/ui/searchable-select.tsx Normal file
View File

@@ -0,0 +1,139 @@
import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/Components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/Components/ui/popover";
interface Option {
label: string;
value: string;
sublabel?: string;
disabled?: boolean;
}
interface SearchableSelectProps {
value: string;
onValueChange: (value: string) => void;
options: Option[];
placeholder?: string;
searchPlaceholder?: string;
emptyText?: string;
disabled?: boolean;
className?: string;
/** 當選項數量超過此閾值時顯示搜尋框，預設為 10。若設為 0 則總是顯示。 */
searchThreshold?: number;
/** 強制控制是否顯示搜尋框。若設定此值，則忽略 searchThreshold */
showSearch?: boolean;
}
export function SearchableSelect({
value,
onValueChange,
options,
placeholder = "請選擇...",
searchPlaceholder = "搜尋...",
emptyText = "找不到符合的項目",
disabled = false,
className,
searchThreshold = 10,
showSearch,
}: SearchableSelectProps) {
const [open, setOpen] = React.useState(false);
// 決定是否顯示搜尋框
const shouldShowSearch =
showSearch !== undefined ? showSearch : options.length > searchThreshold;
const selectedOption = options.find((option) => option.value === value);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
role="combobox"
aria-expanded={open}
disabled={disabled}
className={cn(
// Base styles matching SelectTrigger
"flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none",
// Outlined default state - 2px border with grey-3
"border-2 border-grey-3 bg-grey-5",
// Text colors
"text-grey-0",
!selectedOption && "text-grey-3",
// Focus state - primary border with ring
"focus-visible:border-primary-main focus-visible:ring-primary-main/20 focus-visible:ring-[3px]",
// Disabled state
"disabled:border-grey-4 disabled:bg-background-light-grey disabled:text-grey-2 disabled:cursor-not-allowed disabled:opacity-50",
// Height
"h-9",
className
)}
>
<span className="truncate">
{selectedOption ? selectedOption.label : placeholder}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 text-grey-2" />
</button>
</PopoverTrigger>
<PopoverContent
className="p-0 z-[9999]"
align="start"
style={{ width: "var(--radix-popover-trigger-width)" }}
>
<Command>
{shouldShowSearch && (
<CommandInput placeholder={searchPlaceholder} />
)}
<CommandList>
<CommandEmpty>{emptyText}</CommandEmpty>
<CommandGroup>
{options.map((option) => (
<CommandItem
key={option.value}
value={option.label}
onSelect={() => {
onValueChange(option.value);
setOpen(false);
}}
disabled={option.disabled}
className="cursor-pointer"
>
<Check
className={cn(
"mr-2 h-4 w-4 text-primary",
value === option.value
? "opacity-100"
: "opacity-0"
)}
/>
<div className="flex items-center justify-between flex-1">
<span>{option.label}</span>
{option.sublabel && (
<span className="text-xs text-muted-foreground ml-2">
{option.sublabel}
</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}

52
resources/js/Pages/Product/Index.tsx
View File

@@ -1,13 +1,7 @@
import { useState, useEffect, useCallback } from "react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Plus, Search, X } from "lucide-react";
import ProductTable from "@/Components/Product/ProductTable";
import ProductDialog from "@/Components/Product/ProductDialog";
@@ -209,17 +203,16 @@ export default function ProductManagement({ products, categories, units, filters
</div>
{/* Type Filter */}
<Select value={typeFilter} onValueChange={handleCategoryChange}>
<SelectTrigger className="w-full md:w-[180px]">
<SelectValue placeholder="商品分類" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">全部分類</SelectItem>
{categories.map(cat => (
<SelectItem key={cat.id} value={cat.id.toString()}>{cat.name}</SelectItem>
))}
</SelectContent>
</Select>
<SearchableSelect
value={typeFilter}
onValueChange={handleCategoryChange}
options={[
{ label: "全部分類", value: "all" },
...categories.map((cat) => ({ label: cat.name, value: cat.id.toString() }))
]}
placeholder="商品分類"
className="w-full md:w-[180px]"
/>
{/* Add Button */}
<div className="flex gap-2 w-full md:w-auto">
@@ -260,17 +253,18 @@ export default function ProductManagement({ products, categories, units, filters
<div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2 text-sm text-gray-500">
<span>每頁顯示</span>
<Select value={perPage} onValueChange={handlePerPageChange}>
<SelectTrigger className="w-[80px] h-8">
<SelectValue placeholder="10" />
</SelectTrigger>
<SelectContent>
<SelectItem value="10">10</SelectItem>
<SelectItem value="20">20</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectContent>
</Select>
<SearchableSelect
value={perPage}
onValueChange={handlePerPageChange}
options={[
{ label: "10", value: "10" },
{ label: "20", value: "20" },
{ label: "50", value: "50" },
{ label: "100", value: "100" }
]}
className="w-[80px] h-8"
showSearch={false}
/>
<span>筆</span>
</div>
<Pagination links={products.links} />

132
resources/js/Pages/PurchaseOrder/Create.tsx
View File

@@ -7,13 +7,7 @@ import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import { Alert, AlertDescription } from "@/Components/ui/alert";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, router } from "@inertiajs/react";
import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
@@ -58,6 +52,12 @@ export default function CreatePurchaseOrder({
updateItem,
status,
setStatus,
invoiceNumber,
invoiceDate,
invoiceAmount,
setInvoiceNumber,
setInvoiceDate,
setInvoiceAmount,
} = usePurchaseOrderForm({ order, suppliers });
@@ -110,6 +110,9 @@ export default function CreatePurchaseOrder({
expected_delivery_date: expectedDate,
remark: notes,
status: status,
invoice_number: invoiceNumber || null,
invoice_date: invoiceDate || null,
invoice_amount: invoiceAmount ? parseFloat(invoiceAmount) : null,
items: validItems.map(item => ({
productId: item.productId,
quantity: item.quantity,
@@ -191,40 +194,26 @@ export default function CreatePurchaseOrder({
<label className="text-sm font-bold text-gray-700">
預計入庫倉庫
</label>
<Select
<SearchableSelect
value={String(warehouseId)}
onValueChange={setWarehouseId}
disabled={isOrderSent}
>
<SelectTrigger className="h-12 border-gray-200 focus:ring-primary/20">
<SelectValue placeholder="請選擇倉庫" />
</SelectTrigger>
<SelectContent>
{warehouses.map((w) => (
<SelectItem key={w.id} value={String(w.id)}>
{w.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={warehouses.map((w) => ({ label: w.name, value: String(w.id) }))}
placeholder="請選擇倉庫"
searchPlaceholder="搜尋倉庫..."
/>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">供應商</label>
<Select
<SearchableSelect
value={String(supplierId)}
onValueChange={setSupplierId}
disabled={isOrderSent}
>
<SelectTrigger className="h-12 border-gray-200">
<SelectValue placeholder="選擇供應商" />
</SelectTrigger>
<SelectContent>
{suppliers.map((s) => (
<SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>
))}
</SelectContent>
</Select>
options={suppliers.map((s) => ({ label: s.name, value: String(s.id) }))}
placeholder="選擇供應商"
searchPlaceholder="搜尋供應商..."
/>
</div>
</div>
@@ -245,21 +234,12 @@ export default function CreatePurchaseOrder({
{order && (
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">狀態</label>
<Select
<SearchableSelect
value={status}
onValueChange={(v) => setStatus(v as any)}
>
<SelectTrigger className="h-12 border-gray-200">
<SelectValue placeholder="選擇狀態" />
</SelectTrigger>
<SelectContent>
{STATUS_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
placeholder="選擇狀態"
/>
</div>
)}
</div>
@@ -276,11 +256,71 @@ export default function CreatePurchaseOrder({
</div>
</div>
{/* 步驟二：品項明細 */}
{/* 發票資訊 */}
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<div className="p-6 bg-gray-50/50 border-b flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
<h2 className="text-lg font-bold">發票資訊</h2>
<span className="text-sm text-gray-500">（選填）</span>
</div>
<div className="p-8 space-y-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">
發票號碼
</label>
<Input
type="text"
value={invoiceNumber}
onChange={(e) => setInvoiceNumber(e.target.value)}
placeholder="AB-12345678"
maxLength={11}
className="h-12 border-gray-200"
/>
<p className="text-xs text-gray-500">格式：2 碼英文 + 分隔線 + 8 碼數字</p>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">
發票日期
</label>
<Input
type="date"
value={invoiceDate}
onChange={(e) => setInvoiceDate(e.target.value)}
className="h-12 border-gray-200"
/>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">
發票金額
</label>
<Input
type="number"
value={invoiceAmount}
onChange={(e) => setInvoiceAmount(e.target.value)}
placeholder="0"
min="0"
step="0.01"
className="h-12 border-gray-200"
/>
{invoiceAmount && totalAmount > 0 && parseFloat(invoiceAmount) !== totalAmount && (
<p className="text-xs text-amber-600">
⚠️ 發票金額與採購總額不一致（總額：{formatCurrency(totalAmount)}）
</p>
)}
</div>
</div>
</div>
</div>
{/* 步驟三：品項明細 */}
<div className={`bg-white rounded-lg border shadow-sm overflow-hidden transition-all duration-300 ${!hasSupplier ? 'opacity-60 saturate-50' : ''}`}>
<div className="p-6 bg-gray-50/50 border-b flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">3</div>
<h2 className="text-lg font-bold">採購商品明細</h2>
</div>
<Button

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

@@ -100,6 +100,36 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
)}
</div>
{/* 發票資訊卡片 */}
{(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>
)}
{/* 採購項目卡片 */}
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<div className="p-6 border-b border-gray-100">

65
resources/js/Pages/Warehouse/AddInventory.tsx
View File

@@ -8,13 +8,7 @@ import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import {
Table,
TableBody,
@@ -242,18 +236,13 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
<Label htmlFor="reason" className="text-gray-700">
入庫原因 <span className="text-red-500">*</span>
</Label>
<Select value={reason} onValueChange={(value) => setReason(value as InboundReason)}>
<SelectTrigger id="reason" className="border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
{INBOUND_REASONS.map((r) => (
<SelectItem key={r} value={r}>
{r}
</SelectItem>
))}
</SelectContent>
</Select>
<SearchableSelect
value={reason}
onValueChange={(value) => setReason(value as InboundReason)}
options={INBOUND_REASONS.map((r) => ({ label: r, value: r }))}
placeholder="選擇入庫原因"
className="border-gray-300"
/>
{errors.reason && (
<p className="text-sm text-red-500">{errors.reason}</p>
)}
@@ -331,23 +320,16 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
<TableRow key={item.tempId}>
{/* 商品 */}
<TableCell>
<Select
<SearchableSelect
value={item.productId}
onValueChange={(value) =>
handleProductChange(item.tempId, value)
}
>
<SelectTrigger className="border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent className="z-[9999]">
{products.map((product) => (
<SelectItem key={product.id} value={product.id}>
{product.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={products.map((p) => ({ label: p.name, value: p.id }))}
placeholder="選擇商品"
searchPlaceholder="搜尋商品..."
className="border-gray-300"
/>
{errors[`item-${index}-product`] && (
<p className="text-xs text-red-500 mt-1">
{errors[`item-${index}-product`]}
@@ -378,23 +360,20 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
{/* 單位 */}
<TableCell>
{item.largeUnit ? (
<Select
value={item.selectedUnit}
<SearchableSelect
value={item.selectedUnit || ""}
onValueChange={(value) =>
handleUpdateItem(item.tempId, {
selectedUnit: value as 'base' | 'large',
unit: value === 'base' ? item.baseUnit : item.largeUnit
})
}
>
<SelectTrigger className="border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent className="z-[9999]">
<SelectItem value="base">{item.baseUnit}</SelectItem>
<SelectItem value="large">{item.largeUnit}</SelectItem>
</SelectContent>
</Select>
options={[
{ label: item.baseUnit || "個", value: "base" },
{ label: item.largeUnit || "", value: "large" }
]}
className="border-gray-300"
/>
) : (
<Input
value={item.baseUnit || "個"}

15
resources/js/hooks/usePurchaseOrderForm.ts
View File

@@ -18,6 +18,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
const [notes, setNotes] = useState("");
const [status, setStatus] = useState<PurchaseOrderStatus>("draft");
const [warehouseId, setWarehouseId] = useState<string | number>("");
const [invoiceNumber, setInvoiceNumber] = useState("");
const [invoiceDate, setInvoiceDate] = useState("");
const [invoiceAmount, setInvoiceAmount] = useState("");
// 載入編輯訂單資料
useEffect(() => {
@@ -28,6 +31,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
setNotes(order.remark || "");
setStatus(order.status);
setWarehouseId(order.warehouse_id || "");
setInvoiceNumber(order.invoiceNumber || "");
setInvoiceDate(order.invoiceDate || "");
setInvoiceAmount(order.invoiceAmount ? String(order.invoiceAmount) : "");
}
}, [order]);
@@ -38,6 +44,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
setNotes("");
setStatus("draft");
setWarehouseId("");
setInvoiceNumber("");
setInvoiceDate("");
setInvoiceAmount("");
};
const selectedSupplier = suppliers.find((s) => String(s.id) === String(supplierId));
@@ -142,6 +151,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
selectedSupplier,
isOrderSent,
warehouseId,
invoiceNumber,
invoiceDate,
invoiceAmount,
// Setters
setSupplierId,
@@ -149,6 +161,9 @@ export function usePurchaseOrderForm({ order, suppliers }: UsePurchaseOrderFormP
setNotes,
setStatus,
setWarehouseId,
setInvoiceNumber,
setInvoiceDate,
setInvoiceAmount,
// Methods
addItem,

3
resources/js/types/purchase-order.ts
View File

@@ -78,6 +78,9 @@ export interface PurchaseOrder {
remark?: string;
reviewInfo?: ReviewInfo; // 審核資訊
paymentInfo?: PaymentInfo; // 付款資訊
invoiceNumber?: string; // 發票號碼
invoiceDate?: string; // 發票日期
invoiceAmount?: number; // 發票金額
}
export interface CommonProduct {