256 lines
13 KiB
TypeScript
256 lines
13 KiB
TypeScript
|
|
import { useState, useEffect } from "react";
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
|
import { Head, Link, router } from "@inertiajs/react";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/Components/ui/table";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
DialogFooter,
|
|
} from "@/Components/ui/dialog";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import { Label } from "@/Components/ui/label";
|
|
import {
|
|
Plus,
|
|
Search,
|
|
FileText,
|
|
ArrowLeftRight,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import Pagination from "@/Components/shared/Pagination";
|
|
import { toast } from "sonner";
|
|
|
|
export default function Index({ auth, orders, warehouses, filters }) {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// Create Dialog State
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
|
const [sourceWarehouseId, setSourceWarehouseId] = useState("");
|
|
const [targetWarehouseId, setTargetWarehouseId] = useState("");
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
// Handle warehouse filter change
|
|
const handleFilterChange = (value) => {
|
|
router.get(route('inventory.transfer.index'), { warehouse_id: value }, {
|
|
preserveState: true,
|
|
replace: true,
|
|
});
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
if (!sourceWarehouseId) {
|
|
toast.error("請選擇來源倉庫");
|
|
return;
|
|
}
|
|
if (!targetWarehouseId) {
|
|
toast.error("請選擇目的倉庫");
|
|
return;
|
|
}
|
|
if (sourceWarehouseId === targetWarehouseId) {
|
|
toast.error("來源與目的倉庫不能相同");
|
|
return;
|
|
}
|
|
setCreating(true);
|
|
router.post(route('inventory.transfer.store'), {
|
|
from_warehouse_id: sourceWarehouseId,
|
|
to_warehouse_id: targetWarehouseId
|
|
}, {
|
|
onFinish: () => setCreating(false),
|
|
onSuccess: () => {
|
|
setIsCreateOpen(false);
|
|
setSourceWarehouseId("");
|
|
setTargetWarehouseId("");
|
|
}
|
|
});
|
|
};
|
|
|
|
const getStatusBadge = (status) => {
|
|
switch (status) {
|
|
case 'draft':
|
|
return <Badge variant="secondary">草稿</Badge>;
|
|
case 'completed':
|
|
return <Badge className="bg-green-600">已完成</Badge>;
|
|
case 'voided':
|
|
return <Badge variant="destructive">已作廢</Badge>;
|
|
default:
|
|
return <Badge variant="outline">{status}</Badge>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
user={auth.user}
|
|
header={
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="font-semibold text-xl text-gray-800 leading-tight flex items-center gap-2">
|
|
<ArrowLeftRight className="h-5 w-5" />
|
|
庫存調撥
|
|
</h2>
|
|
</div>
|
|
}
|
|
>
|
|
<Head title="庫存調撥" />
|
|
|
|
<div className="py-12">
|
|
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-[200px]">
|
|
<Select
|
|
value={filters.warehouse_id || "all"}
|
|
onValueChange={(val) => handleFilterChange(val === "all" ? "" : val)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="篩選倉庫..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">所有倉庫</SelectItem>
|
|
{warehouses.map((w) => (
|
|
<SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
placeholder="搜尋調撥單號..."
|
|
className="pl-9"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
新增調撥單
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>建立新調撥單</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label>來源倉庫</Label>
|
|
<Select onValueChange={setSourceWarehouseId} value={sourceWarehouseId}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="選擇來源倉庫" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{warehouses.map(w => (
|
|
<SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>目的倉庫</Label>
|
|
<Select onValueChange={setTargetWarehouseId} value={targetWarehouseId}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="選擇目的倉庫" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{warehouses.filter(w => String(w.id) !== sourceWarehouseId).map(w => (
|
|
<SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" className="button-outlined-primary" onClick={() => setIsCreateOpen(false)}>取消</Button>
|
|
<Button onClick={handleCreate} className="button-filled-primary" disabled={creating || !sourceWarehouseId || !targetWarehouseId}>
|
|
{creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
新增
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>單號</TableHead>
|
|
<TableHead>狀態</TableHead>
|
|
<TableHead>來源倉庫</TableHead>
|
|
<TableHead>目的倉庫</TableHead>
|
|
<TableHead>建立日期</TableHead>
|
|
<TableHead>過帳日期</TableHead>
|
|
<TableHead>建立人員</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{orders.data.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={8} className="text-center h-24 text-gray-500">
|
|
尚無調撥單
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
orders.data.map((order) => (
|
|
<TableRow key={order.id}>
|
|
<TableCell className="font-medium">{order.doc_no}</TableCell>
|
|
<TableCell>{getStatusBadge(order.status)}</TableCell>
|
|
<TableCell>{order.from_warehouse_name}</TableCell>
|
|
<TableCell>{order.to_warehouse_name}</TableCell>
|
|
<TableCell>{order.created_at}</TableCell>
|
|
<TableCell>{order.posted_at}</TableCell>
|
|
<TableCell>{order.created_by}</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
asChild
|
|
>
|
|
<Link href={route('inventory.transfer.show', [order.id])}>
|
|
查看
|
|
</Link>
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<Pagination links={orders.links} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|