feat: 更新庫存報表、銷售匯入及採購單相關功能

resources/js/Pages/Sales/Import/Index.tsx

@@ -21,11 +21,12 @@ import {
     AlertDialogTrigger,
 } from "@/Components/ui/alert-dialog";
 import { Badge } from "@/Components/ui/badge";
-import { Plus, FileUp, Eye, Trash2 } from 'lucide-react';
+import { Plus, FileUp, Eye, Trash2, Search, X } from 'lucide-react';
 import { useState, useEffect } from "react";
 import { format } from 'date-fns';
 import Pagination from "@/Components/shared/Pagination";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
+import { Input } from "@/Components/ui/input";
 import { router } from "@inertiajs/react";
 import { usePermission } from "@/hooks/usePermission";
 import SalesImportDialog from "@/Components/Sales/SalesImportDialog";
@@ -47,27 +48,41 @@ interface Props {
         data: ImportBatch[];
         links: any[]; // Pagination links
     };
-    filters?: { // Add filters prop if not present, though we main need per_page state
+    filters?: {
         per_page?: string;
+        search?: string;
     }
 }
 
 export default function SalesImportIndex({ batches, filters = {} }: Props) {
     const { can } = usePermission();
     const [perPage, setPerPage] = useState(filters?.per_page?.toString() || "10");
+    const [search, setSearch] = useState(filters?.search || "");
     const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
 
     useEffect(() => {
         if (filters?.per_page) {
             setPerPage(filters.per_page.toString());
         }
-    }, [filters?.per_page]);
+        setSearch(filters?.search || "");
+    }, [filters]);
+
+    const handleFilter = () => {
+        router.get(
+            route("sales-imports.index"),
+            {
+                per_page: perPage,
+                search: search
+            },
+            { preserveState: true, replace: true }
+        );
+    };
 
     const handlePerPageChange = (value: string) => {
         setPerPage(value);
         router.get(
             route("sales-imports.index"),
-            { per_page: value },
+            { ...filters, per_page: value },
             { preserveState: true, preserveScroll: true, replace: true }
         );
     };
@@ -92,15 +107,56 @@ export default function SalesImportIndex({ batches, filters = {} }: Props) {
                             匯入並管理銷售出貨紀錄
                         </p>
                     </div>
-                    {can('sales_imports.create') && (
-                        <Button
-                            className="button-filled-primary gap-2"
-                            onClick={() => setIsImportDialogOpen(true)}
-                        >
-                            <Plus className="h-4 w-4" />
-                            新增匯入
-                        </Button>
-                    )}
+                </div>
+
+                {/* Toolbar (Aligned with Recipe Management) */}
+                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
+                    <div className="flex flex-col md:flex-row gap-4">
+                        {/* Search */}
+                        <div className="flex-1 relative">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                            <Input
+                                placeholder="搜尋批次 ID、匯入人員..."
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                className="pl-10 pr-10 h-9"
+                                onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
+                            />
+                            {search && (
+                                <button
+                                    onClick={() => {
+                                        setSearch("");
+                                        router.get(route('sales-imports.index'), { ...filters, search: "" }, { preserveState: true, replace: true });
+                                    }}
+                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                                >
+                                    <X className="h-4 w-4" />
+                                </button>
+                            )}
+                        </div>
+
+                        {/* Action Buttons */}
+                        <div className="flex gap-2 w-full md:w-auto">
+                            <Button
+                                variant="outline"
+                                className="button-outlined-primary"
+                                onClick={handleFilter}
+                            >
+                                <Search className="w-4 h-4 mr-2" />
+                                搜尋
+                            </Button>
+
+                            {can('sales_imports.create') && (
+                                <Button
+                                    className="button-filled-primary gap-2"
+                                    onClick={() => setIsImportDialogOpen(true)}
+                                >
+                                    <Plus className="h-4 w-4" />
+                                    新增匯入
+                                </Button>
+                            )}
+                        </div>
+                    </div>
                 </div>
 
                 <SalesImportDialog
@@ -112,7 +168,7 @@ export default function SalesImportIndex({ batches, filters = {} }: Props) {
                     <Table>
                         <TableHeader className="bg-gray-50">
                             <TableRow>
-                                <TableHead className="w-[100px]">ID</TableHead>
+                                <TableHead className="w-[80px] text-center">#</TableHead>
                                 <TableHead>匯入日期</TableHead>
                                 <TableHead>匯入人員</TableHead>
                                 <TableHead className="text-center w-[120px]">總數量</TableHead>
@@ -129,9 +185,11 @@ export default function SalesImportIndex({ batches, filters = {} }: Props) {
                                     </TableCell>
                                 </TableRow>
                             ) : (
-                                batches.data.map((batch) => (
+                                batches.data.map((batch, index) => (
                                     <TableRow key={batch.id} className="hover:bg-gray-50/50">
-                                        <TableCell className="font-medium">#{batch.id}</TableCell>
+                                        <TableCell className="text-center text-gray-500">
+                                            {(batches as any).from + index}
+                                        </TableCell>
                                         <TableCell>
                                             {format(new Date(batch.created_at), 'yyyy/MM/dd HH:mm')}
                                         </TableCell>