建立檔案

components/app-submission-dialog.tsx

@@ -0,0 +1,668 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useAuth } from "@/contexts/auth-context"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import {
+  Upload,
+  FileText,
+  Link,
+  CheckCircle,
+  Clock,
+  Info,
+  Lightbulb,
+  Target,
+  Zap,
+  AlertTriangle,
+  FileVideo,
+  X,
+} from "lucide-react"
+
+interface AppSubmissionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function AppSubmissionDialog({ open, onOpenChange }: AppSubmissionDialogProps) {
+  const { user, canSubmitApp } = useAuth()
+  const [step, setStep] = useState(1)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [formData, setFormData] = useState({
+    name: "",
+    type: "文字處理",
+    description: "",
+    appUrl: "",
+    demoFile: null as File | null,
+    sourceCodeUrl: "",
+    documentation: "",
+    features: "",
+    technicalDetails: "",
+    requestFeatured: false,
+    agreeTerms: false,
+  })
+
+  // 檢查用戶權限
+  if (!user || !canSubmitApp()) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center space-x-2">
+              <AlertTriangle className="w-5 h-5 text-orange-600" />
+              <span>權限不足</span>
+            </DialogTitle>
+            <DialogDescription>您目前沒有提交應用的權限</DialogDescription>
+          </DialogHeader>
+          <div className="text-center py-6">
+            <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <AlertTriangle className="w-8 h-8 text-orange-600" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">需要開發者權限</h3>
+            <p className="text-gray-600 mb-4">
+              只有開發者角色可以提交 AI 應用申請。您目前是{user?.role === "admin" ? "管理員" : "一般用戶"}身份。
+            </p>
+            <div className="bg-blue-50 rounded-lg p-4 mb-4">
+              <div className="flex items-start space-x-3">
+                <Info className="w-5 h-5 text-blue-600 mt-0.5" />
+                <div className="text-left">
+                  <p className="text-sm font-medium text-blue-900">如何獲得開發者權限？</p>
+                  <ul className="text-sm text-blue-700 mt-1 space-y-1">
+                    <li>• 聯繫管理員申請角色升級</li>
+                    <li>• 說明您的開發背景和需求</li>
+                    <li>• 等待管理員審核和調整</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <Button onClick={() => onOpenChange(false)} className="w-full">
+              我知道了
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  const handleInputChange = (field: string, value: string | boolean | File | null) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null
+    handleInputChange("demoFile", file)
+  }
+
+  const removeFile = () => {
+    handleInputChange("demoFile", null)
+  }
+
+  const handleNext = () => {
+    if (step < 3) {
+      setStep(step + 1)
+    }
+  }
+
+  const handlePrevious = () => {
+    if (step > 1) {
+      setStep(step - 1)
+    }
+  }
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true)
+
+    // 模擬提交過程
+    await new Promise((resolve) => setTimeout(resolve, 2000))
+
+    setIsSubmitting(false)
+    setIsSubmitted(true)
+
+    // 3秒後關閉對話框
+    setTimeout(() => {
+      onOpenChange(false)
+      setIsSubmitted(false)
+      setStep(1)
+      setFormData({
+        name: "",
+        type: "文字處理",
+        description: "",
+        appUrl: "",
+        demoFile: null,
+        sourceCodeUrl: "",
+        documentation: "",
+        features: "",
+        technicalDetails: "",
+        requestFeatured: false,
+        agreeTerms: false,
+      })
+    }, 3000)
+  }
+
+  const isStep1Valid = formData.name && formData.description && formData.appUrl
+  const isStep2Valid = formData.features
+  const isStep3Valid = formData.agreeTerms
+
+  if (isSubmitted) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-md">
+          <div className="text-center py-8">
+            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <CheckCircle className="w-8 h-8 text-green-600" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">提交成功！</h3>
+            <p className="text-gray-600 mb-4">您的應用申請已成功提交，我們將在 1-3 個工作日內完成審核。</p>
+            <div className="bg-blue-50 rounded-lg p-4 mb-4">
+              <div className="flex items-start space-x-3">
+                <Info className="w-5 h-5 text-blue-600 mt-0.5" />
+                <div className="text-left">
+                  <p className="text-sm font-medium text-blue-900">後續流程</p>
+                  <ul className="text-sm text-blue-700 mt-1 space-y-1">
+                    <li>• 管理員將審核您的應用</li>
+                    <li>• 審核結果將透過電子郵件通知</li>
+                    <li>• 通過審核後應用將上線展示</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <p className="text-sm text-gray-500">此對話框將自動關閉...</p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center space-x-2">
+            <Upload className="w-5 h-5 text-blue-600" />
+            <span>提交 AI 應用申請</span>
+          </DialogTitle>
+          <DialogDescription>分享您的 AI 創新成果，讓更多人體驗您的應用</DialogDescription>
+        </DialogHeader>
+
+        {/* Progress Indicator */}
+        <div className="flex items-center justify-center space-x-4 mb-6">
+          {[1, 2, 3].map((stepNumber) => (
+            <div key={stepNumber} className="flex items-center">
+              <div
+                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
+                  step >= stepNumber ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                }`}
+              >
+                {stepNumber}
+              </div>
+              {stepNumber < 3 && (
+                <div className={`w-12 h-0.5 mx-2 ${step > stepNumber ? "bg-blue-600" : "bg-gray-200"}`} />
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Form */}
+          <div className="lg:col-span-2">
+            {step === 1 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <FileText className="w-5 h-5" />
+                    <span>基本資訊</span>
+                  </CardTitle>
+                  <CardDescription>請填寫您的 AI 應用基本資訊</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="name">應用名稱 *</Label>
+                      <Input
+                        id="name"
+                        value={formData.name}
+                        onChange={(e) => handleInputChange("name", e.target.value)}
+                        placeholder="輸入您的應用名稱"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="type">應用類型 *</Label>
+                      <Select value={formData.type} onValueChange={(value) => handleInputChange("type", value)}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="文字處理">文字處理</SelectItem>
+                          <SelectItem value="圖像生成">圖像生成</SelectItem>
+                          <SelectItem value="語音辨識">語音辨識</SelectItem>
+                          <SelectItem value="推薦系統">推薦系統</SelectItem>
+                          <SelectItem value="數據分析">數據分析</SelectItem>
+                          <SelectItem value="其他">其他</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="description">應用描述 *</Label>
+                    <Textarea
+                      id="description"
+                      value={formData.description}
+                      onChange={(e) => handleInputChange("description", e.target.value)}
+                      placeholder="詳細描述您的應用功能、特色和創新點..."
+                      rows={4}
+                    />
+                    <p className="text-xs text-gray-500">建議 100-500 字，清楚說明應用的核心功能和價值</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="appUrl">應用連結 *</Label>
+                    <div className="relative">
+                      <Link className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                      <Input
+                        id="appUrl"
+                        value={formData.appUrl}
+                        onChange={(e) => handleInputChange("appUrl", e.target.value)}
+                        placeholder="https://your-app.example.com"
+                        className="pl-10"
+                      />
+                    </div>
+                    <p className="text-xs text-gray-500">用戶將通過此連結訪問您的應用</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="demoFile">演示檔案（可選）</Label>
+                    <div className="space-y-3">
+                      {!formData.demoFile ? (
+                        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors">
+                          <input
+                            type="file"
+                            id="demoFile"
+                            accept="video/*,.mp4,.avi,.mov,.wmv,.flv,.webm"
+                            onChange={handleFileChange}
+                            className="hidden"
+                          />
+                          <label htmlFor="demoFile" className="cursor-pointer">
+                            <div className="flex flex-col items-center space-y-2">
+                              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
+                                <FileVideo className="w-6 h-6 text-gray-400" />
+                              </div>
+                              <div>
+                                <p className="text-sm font-medium text-gray-900">點擊上傳演示檔案</p>
+                                <p className="text-xs text-gray-500">支援 MP4, AVI, MOV, WMV 等格式，最大 100MB</p>
+                              </div>
+                            </div>
+                          </label>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200">
+                          <div className="flex items-center space-x-3">
+                            <FileVideo className="w-5 h-5 text-blue-600" />
+                            <div>
+                              <p className="text-sm font-medium text-blue-900">{formData.demoFile.name}</p>
+                              <p className="text-xs text-blue-700">
+                                {(formData.demoFile.size / 1024 / 1024).toFixed(2)} MB
+                              </p>
+                            </div>
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={removeFile}
+                            className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <X className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                    <p className="text-xs text-gray-500">上傳應用演示影片，幫助用戶更好地了解您的應用</p>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {step === 2 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <Zap className="w-5 h-5" />
+                    <span>詳細資訊</span>
+                  </CardTitle>
+                  <CardDescription>提供更多應用細節，幫助審核和展示</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="features">主要功能特色 *</Label>
+                    <Textarea
+                      id="features"
+                      value={formData.features}
+                      onChange={(e) => handleInputChange("features", e.target.value)}
+                      placeholder="列出應用的主要功能和特色，例如：&#10;• 支援多語言對話&#10;• 上下文理解能力&#10;• 個性化回應..."
+                      rows={4}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="technicalDetails">技術細節（可選）</Label>
+                    <Textarea
+                      id="technicalDetails"
+                      value={formData.technicalDetails}
+                      onChange={(e) => handleInputChange("technicalDetails", e.target.value)}
+                      placeholder="技術架構、使用的 AI 模型、開發框架等..."
+                      rows={3}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="sourceCodeUrl">原始碼連結（可選）</Label>
+                    <div className="relative">
+                      <Link className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                      <Input
+                        id="sourceCodeUrl"
+                        value={formData.sourceCodeUrl}
+                        onChange={(e) => handleInputChange("sourceCodeUrl", e.target.value)}
+                        placeholder="https://github.com/username/repo"
+                        className="pl-10"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="documentation">說明文件連結（可選）</Label>
+                    <div className="relative">
+                      <Link className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                      <Input
+                        id="documentation"
+                        value={formData.documentation}
+                        onChange={(e) => handleInputChange("documentation", e.target.value)}
+                        placeholder="https://docs.your-app.com"
+                        className="pl-10"
+                      />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {step === 3 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <CheckCircle className="w-5 h-5" />
+                    <span>確認提交</span>
+                  </CardTitle>
+                  <CardDescription>最後確認您的申請資訊</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  {/* Application Summary */}
+                  <div className="bg-gray-50 rounded-lg p-4">
+                    <h4 className="font-medium mb-3">申請摘要</h4>
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="text-gray-500">應用名稱：</span>
+                        <span className="font-medium">{formData.name}</span>
+                      </div>
+                      <div>
+                        <span className="text-gray-500">應用類型：</span>
+                        <Badge variant="outline">{formData.type}</Badge>
+                      </div>
+                      <div className="col-span-2">
+                        <span className="text-gray-500">申請人：</span>
+                        <span className="font-medium">
+                          {user?.name} ({user?.department})
+                        </span>
+                      </div>
+                      {formData.demoFile && (
+                        <div className="col-span-2">
+                          <span className="text-gray-500">演示檔案：</span>
+                          <span className="font-medium">{formData.demoFile.name}</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Featured Request */}
+                  <div className="flex items-center space-x-3 p-4 bg-yellow-50 rounded-lg">
+                    <Switch
+                      id="requestFeatured"
+                      checked={formData.requestFeatured}
+                      onCheckedChange={(checked) => handleInputChange("requestFeatured", checked)}
+                    />
+                    <div className="flex-1">
+                      <Label htmlFor="requestFeatured" className="font-medium">
+                        申請精選展示
+                      </Label>
+                      <p className="text-sm text-gray-600">
+                        如果您認為您的應用具有創新性和實用性，可以申請在精選區域展示
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Terms Agreement */}
+                  <div className="space-y-4">
+                    <div className="flex items-start space-x-3 p-4 border rounded-lg">
+                      <Switch
+                        id="agreeTerms"
+                        checked={formData.agreeTerms}
+                        onCheckedChange={(checked) => handleInputChange("agreeTerms", checked)}
+                      />
+                      <div className="flex-1">
+                        <Label htmlFor="agreeTerms" className="font-medium">
+                          我同意提交條款 *
+                        </Label>
+                        <div className="text-sm text-gray-600 mt-2 space-y-1">
+                          <p>• 我確認提交的應用資訊真實有效</p>
+                          <p>• 我同意平台對應用進行審核和展示</p>
+                          <p>• 我理解審核可能需要 1-3 個工作日</p>
+                          <p>• 我同意遵守平台的使用條款和社群規範</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-4">
+            {/* Progress Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">提交進度</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className={`flex items-center space-x-3 ${step >= 1 ? "text-blue-600" : "text-gray-400"}`}>
+                  <div
+                    className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${
+                      step >= 1 ? "bg-blue-600 text-white" : "bg-gray-200"
+                    }`}
+                  >
+                    1
+                  </div>
+                  <span className="text-sm">基本資訊</span>
+                </div>
+                <div className={`flex items-center space-x-3 ${step >= 2 ? "text-blue-600" : "text-gray-400"}`}>
+                  <div
+                    className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${
+                      step >= 2 ? "bg-blue-600 text-white" : "bg-gray-200"
+                    }`}
+                  >
+                    2
+                  </div>
+                  <span className="text-sm">詳細資訊</span>
+                </div>
+                <div className={`flex items-center space-x-3 ${step >= 3 ? "text-blue-600" : "text-gray-400"}`}>
+                  <div
+                    className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${
+                      step >= 3 ? "bg-blue-600 text-white" : "bg-gray-200"
+                    }`}
+                  >
+                    3
+                  </div>
+                  <span className="text-sm">確認提交</span>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Tips Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center space-x-2">
+                  <Lightbulb className="w-4 h-4" />
+                  <span>提交建議</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                {step === 1 && (
+                  <>
+                    <div className="flex items-start space-x-2">
+                      <Target className="w-4 h-4 text-blue-500 mt-0.5" />
+                      <p>應用名稱要簡潔明確，能體現核心功能</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <Target className="w-4 h-4 text-blue-500 mt-0.5" />
+                      <p>描述要突出創新點和實用價值</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <Target className="w-4 h-4 text-blue-500 mt-0.5" />
+                      <p>確保應用連結可正常訪問</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <FileVideo className="w-4 h-4 text-blue-500 mt-0.5" />
+                      <p>演示檔案有助於展示應用功能</p>
+                    </div>
+                  </>
+                )}
+                {step === 2 && (
+                  <>
+                    <div className="flex items-start space-x-2">
+                      <Zap className="w-4 h-4 text-green-500 mt-0.5" />
+                      <p>詳細列出應用的核心功能特色</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <Zap className="w-4 h-4 text-green-500 mt-0.5" />
+                      <p>技術細節有助於審核人員理解</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <Zap className="w-4 h-4 text-green-500 mt-0.5" />
+                      <p>提供原始碼可增加可信度</p>
+                    </div>
+                  </>
+                )}
+                {step === 3 && (
+                  <>
+                    <div className="flex items-start space-x-2">
+                      <CheckCircle className="w-4 h-4 text-purple-500 mt-0.5" />
+                      <p>仔細檢查所有資訊的準確性</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <CheckCircle className="w-4 h-4 text-purple-500 mt-0.5" />
+                      <p>確認同意提交條款</p>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <CheckCircle className="w-4 h-4 text-purple-500 mt-0.5" />
+                      <p>提交後將進入審核流程</p>
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Review Process Card */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center space-x-2">
+                  <Clock className="w-4 h-4" />
+                  <span>審核流程</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                <div className="flex items-center space-x-3">
+                  <div className="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
+                    <Upload className="w-3 h-3 text-blue-600" />
+                  </div>
+                  <span>提交申請</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="w-6 h-6 bg-yellow-100 rounded-full flex items-center justify-center">
+                    <Clock className="w-3 h-3 text-yellow-600" />
+                  </div>
+                  <span>管理員審核</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
+                    <CheckCircle className="w-3 h-3 text-green-600" />
+                  </div>
+                  <span>審核通過上線</span>
+                </div>
+                <Separator />
+                <div className="bg-blue-50 p-3 rounded-lg">
+                  <p className="text-xs text-blue-700">
+                    <strong>預計時間：</strong>1-3 個工作日
+                    <br />
+                    <strong>通知方式：</strong>電子郵件
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex justify-between pt-6 border-t">
+          <Button variant="outline" onClick={handlePrevious} disabled={step === 1}>
+            上一步
+          </Button>
+
+          <div className="flex space-x-3">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+
+            {step < 3 ? (
+              <Button
+                onClick={handleNext}
+                disabled={(step === 1 && !isStep1Valid) || (step === 2 && !isStep2Valid)}
+                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+              >
+                下一步
+              </Button>
+            ) : (
+              <Button
+                onClick={handleSubmit}
+                disabled={!isStep3Valid || isSubmitting}
+                className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Clock className="w-4 h-4 mr-2 animate-spin" />
+                    提交中...
+                  </>
+                ) : (
+                  <>
+                    <Upload className="w-4 h-4 mr-2" />
+                    提交申請
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}