feat(sales): replace import page with dialog UI and support template download

resources/js/Components/Sales/SalesImportDialog.tsx

@@ -0,0 +1,139 @@
+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>
+    );
+}