buid new app

resources/js/Pages/Expenses/Import.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { useForm, usePage } from "@inertiajs/vue3";
+import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
+import { computed } from "vue";
+
+const form = useForm({
+    file: null,
+});
+
+const flash = computed(() => usePage().props.flash);
+
+const submit = () => {
+    form.post(route("expenses.import.store"), {
+        forceFormData: true,
+    });
+};
+</script>
+
+<template>
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold">匯入發票</h2>
+        </template>
+
+        <div class="py-8 max-w-xl mx-auto px-4">
+            <div class="bg-white rounded-lg shadow p-6">
+                <!-- 成功訊息 -->
+                <div
+                    v-if="flash?.message"
+                    class="mb-4 p-4 bg-green-50 text-green-700 rounded"
+                >
+                    {{ flash.message }}
+                </div>
+
+                <h3 class="text-lg font-medium mb-2">上傳財政部發票 CSV</h3>
+                <p class="text-sm text-gray-500 mb-6">
+                    請上傳從財政部電子發票平台下載的 CSV
+                    檔案，重複的發票號碼會自動略過。
+                </p>
+
+                <form @submit.prevent="submit" class="space-y-4">
+                    <div>
+                        <label class="block text-sm text-gray-600 mb-1"
+                            >選擇檔案</label
+                        >
+                        <input
+                            type="file"
+                            accept=".csv"
+                            @change="form.file = $event.target.files[0]"
+                            class="w-full border rounded px-3 py-2 text-sm"
+                        />
+                        <p
+                            v-if="form.errors.file"
+                            class="text-red-500 text-sm mt-1"
+                        >
+                            {{ form.errors.file }}
+                        </p>
+                    </div>
+
+                    <button
+                        type="submit"
+                        :disabled="!form.file || form.processing"
+                        class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        {{ form.processing ? "匯入中..." : "匯入" }}
+                    </button>
+                </form>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>