import { useState } from "react"; import { Head, Link, router } from "@inertiajs/react"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Search, TrendingUp, Eye, } from "lucide-react"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge"; import { Button } from "@/Components/ui/button"; import { Input } from "@/Components/ui/input"; import { SearchableSelect } from "@/Components/ui/searchable-select"; import Pagination from "@/Components/shared/Pagination"; import { formatDate } from "@/lib/date"; import { formatNumber } from "@/utils/format"; import { Can } from "@/Components/Permission/Can"; interface SalesOrder { id: number; external_order_id: string; status: string; payment_method: string; total_amount: string; sold_at: string; created_at: string; source: string; source_label: string | null; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface Props { orders: { data: SalesOrder[]; total: number; per_page: number; current_page: number; last_page: number; links: PaginationLink[]; }; filters: { search?: string; per_page?: string; source?: string; }; } // 來源篩選選項 const sourceOptions = [ { label: "全部來源", value: "" }, { label: "POS 收銀機", value: "pos" }, { label: "販賣機", value: "vending" }, { label: "手動匯入", value: "manual_import" }, ]; const getSourceLabel = (source: string): string => { switch (source) { case 'pos': return 'POS'; case 'vending': return '販賣機'; case 'manual_import': return '手動匯入'; default: return source; } }; const getSourceVariant = (source: string): StatusVariant => { switch (source) { case 'pos': return 'info'; case 'vending': return 'warning'; case 'manual_import': return 'neutral'; default: return 'neutral'; } }; const getStatusVariant = (status: string): StatusVariant => { switch (status) { case 'completed': return 'success'; case 'pending': return 'warning'; case 'cancelled': return 'destructive'; default: return 'neutral'; } }; const getStatusLabel = (status: string): string => { switch (status) { case 'completed': return "已完成"; case 'pending': return "待處理"; case 'cancelled': return "已取消"; default: return status; } }; export default function SalesOrderIndex({ orders, filters }: Props) { const [search, setSearch] = useState(filters.search || ""); const [perPage, setPerPage] = useState(filters.per_page || "10"); const handleSearch = () => { router.get( route("integration.sales-orders.index"), { ...filters, search, page: 1 }, { preserveState: true, replace: true } ); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route("integration.sales-orders.index"), { ...filters, per_page: value, page: 1 }, { preserveState: false, replace: true } ); }; const startIndex = (orders.current_page - 1) * orders.per_page + 1; return (

銷售訂單管理

檢視從 POS 或販賣機同步進來的銷售訂單紀錄

{/* 篩選列 */}

router.get( route("integration.sales-orders.index"), { ...filters, source: v || undefined, page: 1 }, { preserveState: true, replace: true } ) } options={sourceOptions} className="w-[160px] h-9" showSearch={false} placeholder="篩選來源" />

setSearch(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSearch()} placeholder="搜尋外部訂單號 (External Order ID)..." className="h-9" />

{/* 表格 */}

# 外部訂單號來源狀態付款方式總金額銷售時間操作 {orders.data.length === 0 ? ( 無符合條件的資料 ) : ( orders.data.map((order, index) => ( {startIndex + index} {order.external_order_id} {order.source_label || getSourceLabel(order.source)} {getStatusLabel(order.status)} {order.payment_method || "—"} ${formatNumber(parseFloat(order.total_amount))} {formatDate(order.sold_at)}

)) )}

{/* 分頁 */}

每頁顯示筆

共 {orders.total} 筆紀錄

); }