resources/js/Pages/PurchaseOrder/Index.tsx

/**
 * 採購單管理主頁面
 */

import { useState, useEffect } from "react";
import { Plus, ShoppingCart, Search, RotateCcw, Calendar } from 'lucide-react';
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router } from "@inertiajs/react";
import PurchaseOrderTable from "@/Components/PurchaseOrder/PurchaseOrderTable";
import type { PurchaseOrder } from "@/types/purchase-order";
import Pagination from "@/Components/shared/Pagination";
import { getBreadcrumbs } from "@/utils/breadcrumb";
import { Can } from "@/Components/Permission/Can";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/Components/ui/select";

interface Props {
    orders: {
        data: PurchaseOrder[];
        links: any[];
        total: number;
        from: number;
        to: number;
    };
    filters: {
        search?: string;
        status?: string;
        warehouse_id?: string;
        date_start?: string;
        date_end?: string;
        sort_field?: string;
        sort_direction?: string;
        per_page?: string;
    };
    warehouses: { id: number; name: string }[];
}

export default function PurchaseOrderIndex({ orders, filters, warehouses }: Props) {
    // 篩選狀態
    const [search, setSearch] = useState(filters.search || "");
    const [status, setStatus] = useState<string>(filters.status || "all");
    const [warehouseId, setWarehouseId] = useState<string>(filters.warehouse_id || "all");
    const [dateStart, setDateStart] = useState(filters.date_start || "");
    const [dateEnd, setDateEnd] = useState(filters.date_end || "");
    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");

    // 同步 URL 參數到 State (雖有初始值，但若由外部連結進入可確保同步)
    useEffect(() => {
        setSearch(filters.search || "");
        setStatus(filters.status || "all");
        setWarehouseId(filters.warehouse_id || "all");
        setDateStart(filters.date_start || "");
        setDateEnd(filters.date_end || "");
        setPerPage(filters.per_page || "10");
    }, [filters]);

    const handleFilter = () => {
        router.get(
            route('purchase-orders.index'),
            {
                search,
                status: status === 'all' ? undefined : status,
                warehouse_id: warehouseId === 'all' ? undefined : warehouseId,
                date_start: dateStart,
                date_end: dateEnd,
                per_page: perPage,
                sort_field: filters.sort_field,
                sort_direction: filters.sort_direction,
            },
            { preserveState: true, replace: true }
        );
    };

    const handleReset = () => {
        setSearch("");
        setStatus("all");
        setWarehouseId("all");
        setDateStart("");
        setDateEnd("");

        router.get(route('purchase-orders.index'));
    };

    const handlePerPageChange = (value: string) => {
        setPerPage(value);
        router.get(
            route("purchase-orders.index"),
            {
                ...filters,
                per_page: value,
            },
            { preserveState: false, replace: true, preserveScroll: true }
        );
    };

    const handleNavigateToCreateOrder = () => {
        router.get(route('purchase-orders.create'));
    };

    return (
        <AuthenticatedLayout breadcrumbs={getBreadcrumbs("purchaseOrders")}>
            <Head title="採購單管理" />
            <div className="container mx-auto p-6 max-w-7xl">
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                            <ShoppingCart className="h-6 w-6 text-primary-main" />
                            採購單管理
                        </h1>
                        <p className="text-gray-500 mt-1">
                            建立與管理採購訂單，追蹤入庫狀態
                        </p>
                    </div>
                    <div className="flex gap-2">
                        <Can permission="purchase_orders.create">
                            <Button
                                onClick={handleNavigateToCreateOrder}
                                className="gap-2 button-filled-primary"
                            >
                                <Plus className="h-4 w-4" />
                                建立採購單
                            </Button>
                        </Can>
                    </div>
                </div>

                {/* 篩選區塊 */}
                <div className="bg-white p-5 rounded-lg shadow-sm border border-gray-200 mb-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                        {/* 關鍵字搜尋 */}
                        <div className="space-y-1">
                            <Label className="text-xs text-gray-500">關鍵字搜尋</Label>
                            <div className="relative">
                                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
                                <Input
                                    placeholder="搜尋採購單號、廠商..."
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                    className="pl-9"
                                    onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
                                />
                            </div>
                        </div>

                        {/* 狀態篩選 */}
                        <div className="space-y-1">
                            <Label className="text-xs text-gray-500">訂單狀態</Label>
                            <Select value={status} onValueChange={setStatus}>
                                <SelectTrigger>
                                    <SelectValue placeholder="選擇狀態" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="all">全部狀態</SelectItem>
                                    <SelectItem value="draft">草稿</SelectItem>
                                    <SelectItem value="pending">待審核</SelectItem>
                                    <SelectItem value="processing">處理中</SelectItem>
                                    <SelectItem value="shipping">運送中</SelectItem>
                                    <SelectItem value="confirming">待確認</SelectItem>
                                    <SelectItem value="completed">已完成</SelectItem>
                                    <SelectItem value="cancelled">已取消</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {/* 倉庫篩選 */}
                        <div className="space-y-1">
                            <Label className="text-xs text-gray-500">入庫倉庫</Label>
                            <SearchableSelect
                                value={warehouseId}
                                onValueChange={setWarehouseId}
                                options={[
                                    { label: "全部倉庫", value: "all" },
                                    ...warehouses.map(w => ({ label: w.name, value: String(w.id) }))
                                ]}
                                placeholder="選擇倉庫"
                                className="w-full"
                            />
                        </div>

                        {/* 日期範圍 - 開始 */}
                        <div className="space-y-1">
                            <Label className="text-xs text-gray-500">開始日期</Label>
                            <div className="relative">
                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
                                <Input
                                    type="date"
                                    value={dateStart}
                                    onChange={(e) => setDateStart(e.target.value)}
                                    className="pl-9 block w-full"
                                />
                            </div>
                        </div>

                        {/* 日期範圍 - 結束 */}
                        <div className="space-y-1">
                            <Label className="text-xs text-gray-500">結束日期</Label>
                            <div className="relative">
                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
                                <Input
                                    type="date"
                                    value={dateEnd}
                                    onChange={(e) => setDateEnd(e.target.value)}
                                    className="pl-9 block w-full text-left"
                                />
                            </div>
                        </div>
                    </div>

                    <div className="flex items-center justify-end gap-3 pt-2 border-t border-gray-100">
                        <Button
                            variant="outline"
                            onClick={handleReset}
                            className="flex items-center gap-2 button-outlined-primary"
                        >
                            <RotateCcw className="h-4 w-4" />
                            重置條件
                        </Button>
                        <Button
                            onClick={handleFilter}
                            className="flex items-center gap-2 button-filled-primary"
                        >
                            <Search className="h-4 w-4" />
                            查詢紀錄
                        </Button>
                    </div>
                </div>

                <PurchaseOrderTable
                    orders={orders.data}
                />

                {/* 分頁元件 - 統一樣式 */}
                <div className="mt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div className="flex items-center gap-2 text-sm text-gray-500">
                        <span>每頁顯示</span>
                        <SearchableSelect
                            value={perPage}
                            onValueChange={handlePerPageChange}
                            options={[
                                { label: "10", value: "10" },
                                { label: "20", value: "20" },
                                { label: "50", value: "50" },
                                { label: "100", value: "100" }
                            ]}
                            className="w-[100px] h-8"
                            showSearch={false}
                        />
                        <span>筆</span>
                    </div>
                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
                        <Pagination links={orders.links} />
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								/**
 								 * 採購單管理主頁面
 								 */
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								import { useState, useEffect } from "react";
 								import { Plus, ShoppingCart, Search, RotateCcw, Calendar } from 'lucide-react';
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								import { Button } from "@/Components/ui/button";
 								import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 								import { Head, router } from "@inertiajs/react";
 								import PurchaseOrderTable from "@/Components/PurchaseOrder/PurchaseOrderTable";
 								import type { PurchaseOrder } from "@/types/purchase-order";
 								import Pagination from "@/Components/shared/Pagination";
-												麵包屑功能完善

											
										
										
											2026-01-07 13:06:49 +08:00
+								import { getBreadcrumbs } from "@/utils/breadcrumb";
-												feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能

											
										
										
											2026-01-13 17:00:58 +08:00
+								import { Can } from "@/Components/Permission/Can";
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								import { SearchableSelect } from "@/Components/ui/searchable-select";
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								import { Input } from "@/Components/ui/input";
 								import { Label } from "@/Components/ui/label";
 								import {
 								    Select,
 								    SelectContent,
 								    SelectItem,
 								    SelectTrigger,
 								    SelectValue,
 								} from "@/Components/ui/select";
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
 								interface Props {
 								    orders: {
 								        data: PurchaseOrder[];
 								        links: any[];
 								        total: number;
 								        from: number;
 								        to: number;
 								    };
 								    filters: {
 								        search?: string;
 								        status?: string;
 								        warehouse_id?: string;
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								        date_start?: string;
 								        date_end?: string;
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								        sort_field?: string;
 								        sort_direction?: string;
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								        per_page?: string;
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								    };
 								    warehouses: { id: number; name: string }[];
 								}
 								export default function PurchaseOrderIndex({ orders, filters, warehouses }: Props) {
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								    // 篩選狀態
 								    const [search, setSearch] = useState(filters.search || "");
 								    const [status, setStatus] = useState<string>(filters.status || "all");
 								    const [warehouseId, setWarehouseId] = useState<string>(filters.warehouse_id || "all");
 								    const [dateStart, setDateStart] = useState(filters.date_start || "");
 								    const [dateEnd, setDateEnd] = useState(filters.date_end || "");
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								    // 同步 URL 參數到 State (雖有初始值，但若由外部連結進入可確保同步)
 								    useEffect(() => {
 								        setSearch(filters.search || "");
 								        setStatus(filters.status || "all");
 								        setWarehouseId(filters.warehouse_id || "all");
 								        setDateStart(filters.date_start || "");
 								        setDateEnd(filters.date_end || "");
 								        setPerPage(filters.per_page || "10");
 								    }, [filters]);
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								    const handleFilter = () => {
 								        router.get(
 								            route('purchase-orders.index'),
 								            {
 								                search,
 								                status: status === 'all' ? undefined : status,
 								                warehouse_id: warehouseId === 'all' ? undefined : warehouseId,
 								                date_start: dateStart,
 								                date_end: dateEnd,
 								                per_page: perPage,
 								                sort_field: filters.sort_field,
 								                sort_direction: filters.sort_direction,
 								            },
 								            { preserveState: true, replace: true }
 								        );
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								    };
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								    const handleReset = () => {
 								        setSearch("");
 								        setStatus("all");
 								        setWarehouseId("all");
 								        setDateStart("");
 								        setDateEnd("");
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								        router.get(route('purchase-orders.index'));
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								    };
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								    const handlePerPageChange = (value: string) => {
 								        setPerPage(value);
 								        router.get(
 								            route("purchase-orders.index"),
 								            {
 								                ...filters,
 								                per_page: value,
 								            },
 								            { preserveState: false, replace: true, preserveScroll: true }
 								        );
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								    };
 								    const handleNavigateToCreateOrder = () => {
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								        router.get(route('purchase-orders.create'));
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								    };
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								    return (
-												麵包屑功能完善

											
										
										
											2026-01-07 13:06:49 +08:00
+								        <AuthenticatedLayout breadcrumbs={getBreadcrumbs("purchaseOrders")}>
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								            <Head title="採購單管理" />
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								            <div className="container mx-auto p-6 max-w-7xl">
 								                <div className="flex items-center justify-between mb-6">
 								                    <div>
-												feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範

											
										
										
											2026-01-13 13:30:51 +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 13:30:51 +08:00
+								                            採購單管理
 								                        </h1>
 								                        <p className="text-gray-500 mt-1">
 								                            建立與管理採購訂單，追蹤入庫狀態
 								                        </p>
 								                    </div>
 								                    <div className="flex gap-2">
-												feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能

											
										
										
											2026-01-13 17:00:58 +08:00
+								                        <Can permission="purchase_orders.create">
 								                            <Button
 								                                onClick={handleNavigateToCreateOrder}
 								                                className="gap-2 button-filled-primary"
 								                            >
 								                                <Plus className="h-4 w-4" />
 								                                建立採購單
 								                            </Button>
 								                        </Can>
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								                    </div>
 								                </div>
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								                {/* 篩選區塊 */}
 								                <div className="bg-white p-5 rounded-lg shadow-sm border border-gray-200 mb-6">
 								                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
 								                        {/* 關鍵字搜尋 */}
 								                        <div className="space-y-1">
 								                            <Label className="text-xs text-gray-500">關鍵字搜尋</Label>
 								                            <div className="relative">
 								                                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
 								                                <Input
 								                                    placeholder="搜尋採購單號、廠商..."
 								                                    value={search}
 								                                    onChange={(e) => setSearch(e.target.value)}
 								                                    className="pl-9"
 								                                    onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
 								                                />
 								                            </div>
 								                        </div>
 								                        {/* 狀態篩選 */}
 								                        <div className="space-y-1">
 								                            <Label className="text-xs text-gray-500">訂單狀態</Label>
 								                            <Select value={status} onValueChange={setStatus}>
 								                                <SelectTrigger>
 								                                    <SelectValue placeholder="選擇狀態" />
 								                                </SelectTrigger>
 								                                <SelectContent>
 								                                    <SelectItem value="all">全部狀態</SelectItem>
 								                                    <SelectItem value="draft">草稿</SelectItem>
 								                                    <SelectItem value="pending">待審核</SelectItem>
 								                                    <SelectItem value="processing">處理中</SelectItem>
 								                                    <SelectItem value="shipping">運送中</SelectItem>
 								                                    <SelectItem value="confirming">待確認</SelectItem>
 								                                    <SelectItem value="completed">已完成</SelectItem>
 								                                    <SelectItem value="cancelled">已取消</SelectItem>
 								                                </SelectContent>
 								                            </Select>
 								                        </div>
 								                        {/* 倉庫篩選 */}
 								                        <div className="space-y-1">
 								                            <Label className="text-xs text-gray-500">入庫倉庫</Label>
 								                            <SearchableSelect
 								                                value={warehouseId}
 								                                onValueChange={setWarehouseId}
 								                                options={[
 								                                    { label: "全部倉庫", value: "all" },
 								                                    ...warehouses.map(w => ({ label: w.name, value: String(w.id) }))
 								                                ]}
 								                                placeholder="選擇倉庫"
 								                                className="w-full"
 								                            />
 								                        </div>
 								                        {/* 日期範圍 - 開始 */}
 								                        <div className="space-y-1">
 								                            <Label className="text-xs text-gray-500">開始日期</Label>
 								                            <div className="relative">
 								                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
 								                                <Input
 								                                    type="date"
 								                                    value={dateStart}
 								                                    onChange={(e) => setDateStart(e.target.value)}
 								                                    className="pl-9 block w-full"
 								                                />
 								                            </div>
 								                        </div>
 								                        {/* 日期範圍 - 結束 */}
 								                        <div className="space-y-1">
 								                            <Label className="text-xs text-gray-500">結束日期</Label>
 								                            <div className="relative">
 								                                <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
 								                                <Input
 								                                    type="date"
 								                                    value={dateEnd}
 								                                    onChange={(e) => setDateEnd(e.target.value)}
 								                                    className="pl-9 block w-full text-left"
 								                                />
 								                            </div>
 								                        </div>
 								                    </div>
 								                    <div className="flex items-center justify-end gap-3 pt-2 border-t border-gray-100">
 								                        <Button
 								                            variant="outline"
 								                            onClick={handleReset}
 								                            className="flex items-center gap-2 button-outlined-primary"
 								                        >
 								                            <RotateCcw className="h-4 w-4" />
 								                            重置條件
 								                        </Button>
 								                        <Button
 								                            onClick={handleFilter}
 								                            className="flex items-center gap-2 button-filled-primary"
 								                        >
 								                            <Search className="h-4 w-4" />
 								                            查詢紀錄
 								                        </Button>
 								                    </div>
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								                </div>
 								                <PurchaseOrderTable
 								                    orders={orders.data}
 								                />
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								                {/* 分頁元件 - 統一樣式 */}
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								                <div className="mt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								                    <div className="flex items-center gap-2 text-sm text-gray-500">
 								                        <span>每頁顯示</span>
 								                        <SearchableSelect
 								                            value={perPage}
 								                            onValueChange={handlePerPageChange}
 								                            options={[
 								                                { label: "10", value: "10" },
 								                                { label: "20", value: "20" },
 								                                { label: "50", value: "50" },
 								                                { label: "100", value: "100" }
 								                            ]}
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								                            className="w-[100px] h-8"
-												feat: 統一清單頁面分頁與每頁顯示 UI

											
										
										
											2026-01-13 17:09:52 +08:00
+								                            showSearch={false}
 								                        />
 								                        <span>筆</span>
 								                    </div>
-												feat: 統一採購單與操作紀錄 UI、增強各模組操作紀錄功能

- 統一採購單篩選列與表單樣式 (移除舊元件、標準化 Input)
- 增強操作紀錄功能 (加入篩選、快照、詳細異動比對)
- 統一刪除確認視窗與按鈕樣式
- 修復庫存編輯頁面樣式
- 實作採購單品項異動紀錄
- 實作角色分配異動紀錄
- 擴充供應商與倉庫模組紀錄

											
										
										
											2026-01-19 17:07:45 +08:00
+								                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
 								                        <Pagination links={orders.links} />
 								                    </div>
-												first commit

											
										
										
											2025-12-30 15:03:19 +08:00
+								                </div>
 								            </div>
 								        </AuthenticatedLayout>
 								    );
 								}