feat: 新增採購單發票欄位、更新 SearchableSelect 樣式與搜尋門檻至 10 個項目
This commit is contained in:
@@ -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} />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 || "個"}
|
||||
|
||||
Reference in New Issue
Block a user