140 lines
6.6 KiB
TypeScript
140 lines
6.6 KiB
TypeScript
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/Components/ui/dialog";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { Label } from "@/Components/ui/label";
|
||
import { Upload, AlertCircle, Info, FileSpreadsheet } from "lucide-react";
|
||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/Components/ui/accordion";
|
||
import { useForm } from "@inertiajs/react";
|
||
import { Alert, AlertDescription } from "@/Components/ui/alert";
|
||
import React from "react";
|
||
|
||
interface SalesImportDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
}
|
||
|
||
export default function SalesImportDialog({ open, onOpenChange }: SalesImportDialogProps) {
|
||
const { data, setData, post, processing, errors, reset, clearErrors } = useForm<{
|
||
file: File | null;
|
||
}>({
|
||
file: null,
|
||
});
|
||
|
||
|
||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
if (e.target.files && e.target.files[0]) {
|
||
setData("file", e.target.files[0]);
|
||
clearErrors("file");
|
||
}
|
||
};
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
post(route("sales-imports.store"), {
|
||
onSuccess: () => {
|
||
reset();
|
||
onOpenChange(false);
|
||
},
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-[500px]">
|
||
<DialogHeader>
|
||
<DialogTitle>匯入銷售單</DialogTitle>
|
||
<DialogDescription>
|
||
請上傳統一格式的銷售單 Excel 檔案。系統將自動解析內容。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
{/* 下載範本區域 */}
|
||
<div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-100">
|
||
<Label className="font-medium flex items-center gap-2">
|
||
<FileSpreadsheet className="w-4 h-4 text-green-600" />
|
||
步驟 1：取得 Excel 範本
|
||
</Label>
|
||
<div className="text-sm text-gray-500 mb-2">
|
||
下載標準範本以確保資料格式正確。請勿修改欄位名稱。
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => window.location.href = route('sales-imports.template')}
|
||
className="w-full sm:w-auto button-outlined-primary"
|
||
>
|
||
<Upload className="w-4 h-4 mr-2 rotate-180" />
|
||
下載範本 (.xlsx)
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 上傳檔案區域 */}
|
||
<div className="space-y-2">
|
||
<Label className="font-medium flex items-center gap-2">
|
||
<Upload className="w-4 h-4 text-blue-600" />
|
||
步驟 2：上傳檔案
|
||
</Label>
|
||
|
||
<div className="grid w-full max-w-sm items-center gap-1.5">
|
||
<Input
|
||
id="file"
|
||
type="file"
|
||
accept=".xlsx, .xls, .csv"
|
||
onChange={handleFileChange}
|
||
className="cursor-pointer"
|
||
/>
|
||
</div>
|
||
{errors.file && (
|
||
<Alert variant="destructive" className="mt-2">
|
||
<AlertCircle className="h-4 w-4" />
|
||
<AlertDescription className="whitespace-pre-wrap">
|
||
{errors.file}
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
<p className="text-xs text-gray-500">支援格式：.xlsx, .xls, .csv</p>
|
||
</div>
|
||
|
||
{/* 匯入說明 - 使用 Accordion 收合 */}
|
||
<Accordion type="single" collapsible className="w-full border rounded-lg px-2">
|
||
<AccordionItem value="item-1" className="border-b-0">
|
||
<AccordionTrigger className="text-sm text-gray-500 hover:no-underline py-3">
|
||
<div className="flex items-center gap-2">
|
||
<Info className="h-4 w-4" />
|
||
匯入與欄位說明
|
||
</div>
|
||
</AccordionTrigger>
|
||
<AccordionContent>
|
||
<div className="text-sm text-gray-600 space-y-2 pb-2 pl-6">
|
||
<ul className="list-disc space-y-1">
|
||
<li><span className="font-medium text-gray-700">檔案格式</span>：請使用統一的 Excel 格式（商品銷貨單）。</li>
|
||
<li><span className="font-medium text-gray-700">自動解析</span>：系統將自動解析機台編號、商品代號與交易時間。</li>
|
||
<li><span className="font-medium text-gray-700">後續動作</span>：匯入後請至「待確認」清單檢查內容，確認無誤後再執行扣庫。</li>
|
||
</ul>
|
||
</div>
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => onOpenChange(false)}
|
||
disabled={processing}
|
||
className="button-outlined-primary"
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button type="submit" disabled={!data.file || processing} className="button-filled-primary">
|
||
{processing ? "匯入中..." : "開始匯入"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|