293 lines
12 KiB
TypeScript
293 lines
12 KiB
TypeScript
|
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<string>(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 (
|
||
|
|
<AuthenticatedLayout
|
||
|
|
breadcrumbs={[
|
||
|
|
{ label: "銷售管理", href: "#" },
|
||
|
|
{
|
||
|
|
label: "銷售訂單管理",
|
||
|
|
href: route("integration.sales-orders.index"),
|
||
|
|
isPage: true,
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<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">
|
||
|
|
<TrendingUp className="h-6 w-6 text-primary-main" />
|
||
|
|
銷售訂單管理
|
||
|
|
</h1>
|
||
|
|
<p className="text-gray-500 mt-1">
|
||
|
|
檢視從 POS 或販賣機同步進來的銷售訂單紀錄
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 篩選列 */}
|
||
|
|
<div className="bg-white rounded-xl border border-gray-200 p-4 mb-4">
|
||
|
|
<div className="flex flex-wrap items-center gap-3">
|
||
|
|
<SearchableSelect
|
||
|
|
value={filters.source || ""}
|
||
|
|
onValueChange={(v) =>
|
||
|
|
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="篩選來源"
|
||
|
|
/>
|
||
|
|
<div className="flex items-center gap-2 flex-1 min-w-[300px]">
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
value={search}
|
||
|
|
onChange={(e) => setSearch(e.target.value)}
|
||
|
|
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
||
|
|
placeholder="搜尋外部訂單號 (External Order ID)..."
|
||
|
|
className="h-9"
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="button-outlined-primary h-9"
|
||
|
|
onClick={handleSearch}
|
||
|
|
>
|
||
|
|
<Search className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 表格 */}
|
||
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||
|
|
<Table>
|
||
|
|
<TableHeader className="bg-gray-50">
|
||
|
|
<TableRow>
|
||
|
|
<TableHead className="w-[50px] text-center">#</TableHead>
|
||
|
|
<TableHead>外部訂單號</TableHead>
|
||
|
|
<TableHead className="text-center">來源</TableHead>
|
||
|
|
<TableHead className="text-center">狀態</TableHead>
|
||
|
|
<TableHead>付款方式</TableHead>
|
||
|
|
<TableHead className="text-right">總金額</TableHead>
|
||
|
|
<TableHead>銷售時間</TableHead>
|
||
|
|
<TableHead className="text-center">操作</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{orders.data.length === 0 ? (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={8} className="text-center py-8 text-gray-500">
|
||
|
|
無符合條件的資料
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
) : (
|
||
|
|
orders.data.map((order, index) => (
|
||
|
|
<TableRow key={order.id}>
|
||
|
|
<TableCell className="text-gray-500 font-medium text-center">
|
||
|
|
{startIndex + index}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="font-mono text-sm">
|
||
|
|
{order.external_order_id}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<StatusBadge variant={getSourceVariant(order.source)}>
|
||
|
|
{order.source_label || getSourceLabel(order.source)}
|
||
|
|
</StatusBadge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<StatusBadge variant={getStatusVariant(order.status)}>
|
||
|
|
{getStatusLabel(order.status)}
|
||
|
|
</StatusBadge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-gray-600">
|
||
|
|
{order.payment_method || "—"}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-right font-medium">
|
||
|
|
${formatNumber(parseFloat(order.total_amount))}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-gray-500 text-sm">
|
||
|
|
{formatDate(order.sold_at)}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<div className="flex items-center justify-center gap-2">
|
||
|
|
<Can permission="sales_orders.view">
|
||
|
|
<Link href={route("integration.sales-orders.show", order.id)}>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="button-outlined-primary"
|
||
|
|
title="檢視明細"
|
||
|
|
>
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</Can>
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 分頁 */}
|
||
|
|
<div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||
|
|
<div className="flex items-center 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-[90px] h-8"
|
||
|
|
showSearch={false}
|
||
|
|
/>
|
||
|
|
<span>筆</span>
|
||
|
|
</div>
|
||
|
|
<span className="text-sm text-gray-500">
|
||
|
|
共 {orders.total} 筆紀錄
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Pagination links={orders.links} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</AuthenticatedLayout>
|
||
|
|
);
|
||
|
|
}
|