feat(商品): 調整商品代號顯示與會計報表樣式

resources/js/Pages/Accounting/Report.tsx

@@ -28,6 +28,7 @@ import { Badge } from "@/Components/ui/badge";
 import Pagination from "@/Components/shared/Pagination";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Can } from "@/Components/Permission/Can";
+import { Checkbox } from "@/Components/ui/checkbox";
 
 interface Record {
     id: string;
@@ -71,6 +72,7 @@ export default function AccountingReport({ records, summary, filters }: PageProp
     const initialRangeType = (filters.date_start === today && filters.date_end === today) ? "today" : "custom";
     const [dateRangeType, setDateRangeType] = useState(initialRangeType);
     const [perPage, setPerPage] = useState(filters.per_page?.toString() || "10");
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
     const handleDateRangeChange = (type: string) => {
         setDateRangeType(type);
@@ -111,14 +113,35 @@ export default function AccountingReport({ records, summary, filters }: PageProp
         setDateStart("");
         setDateEnd("");
         setPerPage("10");
+        setSelectedIds([]);
         router.get(route("accounting.report"), {}, { preserveState: false });
     };
 
+    const toggleSelectAll = () => {
+        if (selectedIds.length === records.data.length) {
+            setSelectedIds([]);
+        } else {
+            setSelectedIds(records.data.map(r => r.id));
+        }
+    };
+
+    const toggleSelect = (id: string) => {
+        setSelectedIds(prev =>
+            prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+        );
+    };
+
     const handleExport = () => {
-        window.location.href = route("accounting.export", {
+        const query: any = {
             date_start: dateStart,
             date_end: dateEnd,
-        });
+        };
+
+        if (selectedIds.length > 0) {
+            query.selected_ids = selectedIds.join(',');
+        }
+
+        window.location.href = route("accounting.export", query);
     };
 
     return (
@@ -142,7 +165,8 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                             variant="outline"
                             className="button-outlined-primary gap-2"
                         >
-                            <Download className="h-4 w-4" /> 匯出 CSV 報表
+                            <Download className="h-4 w-4" />
+                            {selectedIds.length > 0 ? `匯出已選 (${selectedIds.length})` : '匯出 CSV 報表'}
                         </Button>
                     </Can>
                 </div>
@@ -265,6 +289,13 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                     <Table>
                         <TableHeader className="bg-gray-50">
                             <TableRow>
+                                <TableHead className="w-[50px] text-center">
+                                    <Checkbox
+                                        checked={records.data.length > 0 && selectedIds.length === records.data.length}
+                                        onCheckedChange={toggleSelectAll}
+                                        aria-label="Select all"
+                                    />
+                                </TableHead>
                                 <TableHead className="w-[140px] text-center">日期</TableHead>
                                 <TableHead className="w-[120px] text-center">來源</TableHead>
                                 <TableHead className="w-[140px] text-center">類別</TableHead>
@@ -275,7 +306,7 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                         <TableBody>
                             {records.data.length === 0 ? (
                                 <TableRow>
-                                    <TableCell colSpan={5}>
+                                    <TableCell colSpan={6}>
                                         <div className="flex flex-col items-center justify-center space-y-2 py-8 text-gray-400">
                                             <FileText className="h-10 w-10 opacity-20" />
                                             <p>此日期區間內無支出紀錄</p>
@@ -285,6 +316,13 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                             ) : (
                                 records.data.map((record) => (
                                     <TableRow key={record.id}>
+                                        <TableCell className="text-center">
+                                            <Checkbox
+                                                checked={selectedIds.includes(record.id)}
+                                                onCheckedChange={() => toggleSelect(record.id)}
+                                                aria-label={`Select record ${record.id}`}
+                                            />
+                                        </TableCell>
                                         <TableCell className="font-medium text-gray-700 text-center">
                                             {formatDateWithDayOfWeek(record.date)}
                                         </TableCell>