feat: 前端分離+功能api化

1. 新增資產管理CRUD、googleOAuth登入
2. 更改原記帳controller

resources/js/Pages/Expenses/Import.vue

@@ -1,18 +1,33 @@
 <script setup>
-import { useForm, usePage } from "@inertiajs/vue3";
+import { ref, reactive } from "vue";
+import axios from "axios";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
-import { computed } from "vue";
 
-const form = useForm({
+const form = reactive({
     file: null,
 });
 
-const flash = computed(() => usePage().props.flash);
+const flashMessage = ref("");
 
-const submit = () => {
-    form.post(route("expenses.import.store"), {
-        forceFormData: true,
-    });
+const submit = async () => {
+    // 因為有檔案，必須使用 FormData
+    const formData = new FormData();
+    formData.append('file', form.file);
+
+    try {
+        const response = await axios.post("/api/expenses/import", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        
+        // 成功後的處理 (例如顯示成功訊息)
+        console.log("上傳成功", response.data);
+        flashMessage.value = "匯入成功！";
+    } catch (error) {
+        // 錯誤處理
+        console.error("上傳失敗", error.response?.data);
+    }
 };
 </script>
 
@@ -26,10 +41,10 @@ const submit = () => {
             <div class="bg-white rounded-lg shadow p-6">
                 <!-- 成功訊息 -->
                 <div
-                    v-if="flash?.message"
+                    v-if="flashMessage"
                     class="mb-4 p-4 bg-green-50 text-green-700 rounded"
                 >
-                    {{ flash.message }}
+                    {{ flashMessage }}
                 </div>
 
                 <h3 class="text-lg font-medium mb-2">上傳財政部發票 CSV</h3>