ui update

Author: rabbull

src/app/claim/new/page.tsx

@@ -27,6 +27,10 @@ type UploadItem = {
 
 const currencies: Currency[] = ["CHF", "USD", "EUR", "CNY", "GBP"];
 
+const INVOICE_REQUIRED_TAG_IDS = new Set<string>([
+  // 在此处填写需要强制上传正规发票的标签 ID，例如 'tag-id-invoice'
+]);
+
 function makeObjectKey(file: File): string {
   const today = new Date().toISOString().slice(0, 10);
   const uuid = (globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)) as string;
@@ -60,6 +64,10 @@ export default function NewClaimPage() {
   }, []);
 
   const uploadedPhotos = useMemo(() => uploads.filter((u) => u.status === "done" && !!u.photo).map((u) => u.photo as PhotoResponse), [uploads]);
+  const requiresInvoiceReminder = useMemo(
+    () => selectedTagIds.some((id) => INVOICE_REQUIRED_TAG_IDS.has(id)),
+    [selectedTagIds],
+  );
 
   async function handleFilesChosen(files: FileList | null) {
     if (!files || files.length === 0) return;
@@ -259,6 +267,12 @@ export default function NewClaimPage() {
           <input type="password" value={password2} onChange={(e) => setPassword2(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('passwordConfirm')} />
         </section>
 
+        {requiresInvoiceReminder && (
+          <div className="rounded border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800">
+            {t("invoiceReminder")}
+          </div>
+        )}
+
         {error && <div className="text-sm text-red-600">{error}</div>}
 
         <div className="flex items-center gap-3">

src/components/ClaimFlowchart.tsx

@@ -20,6 +20,7 @@ export function ClaimFlowchart({ current }: Props) {
       PAID: t("status_PAID"),
       FINISHED: t("status_FINISHED"),
       REJECTED: t("status_REJECTED"),
+      PAYMENT_FAILED: t("status_PAYMENT_FAILED"),
       WITHDRAW: t("status_WITHDRAW"),
     }),
     [t]
@@ -86,6 +87,7 @@ export function ClaimFlowchart({ current }: Props) {
       setNode("PAID");
       setNode("FINISHED");
       setNode("REJECTED");
+      setNode("PAYMENT_FAILED");
       setNode("WITHDRAW");
 
       // Edges
@@ -105,7 +107,7 @@ export function ClaimFlowchart({ current }: Props) {
       edge("PAID", "FINISHED");
       edge("SUBMITTED", "WITHDRAW");
       edge("SUBMITTED", "REJECTED");
-      edge("APPROVED", "REJECTED");
+      edge("APPROVED", "PAYMENT_FAILED");
 
       const svg = d3.select(svgEl);
       svg.selectAll("*").remove();

src/lib/i18n.tsx

@@ -39,6 +39,7 @@ const dict: Record<Lang, Record<string, string>> = {
     payoutBankAddress: "银行地址",
     tags: "标签",
     attachments: "附件（发票/小票照片）",
+    invoiceReminder: "请务必在附件中上传正规发票，否则审批可能被驳回。",
     password: "访问密码（可选）",
     passwordHint: "可为该报销单设置访问密码。设置后，查看或更新需要输入此密码。",
     passwordConfirm: "再次输入密码",
@@ -49,7 +50,7 @@ const dict: Record<Lang, Record<string, string>> = {
     process: "流程",
     actions: "操作",
     withdraw: "撤回申请",
-    confirmFinish: "确认收款，标记为完成",
+    confirmFinish: "确认收款",
     amount: "金额",
     expenseAt: "消费时间",
     createdAt: "创建时间",
@@ -62,6 +63,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_PAID: "已支付",
     status_FINISHED: "已完成",
     status_REJECTED: "已拒绝",
+    status_PAYMENT_FAILED: "付款失败",
     status_WITHDRAW: "已撤回",
     claimIdNote: "此 ID 类似密码，请妥善保管，不要分享。",
     copy: "复制",
@@ -97,6 +99,7 @@ const dict: Record<Lang, Record<string, string>> = {
     payoutBankAddress: "Bank Address",
     tags: "Tags",
     attachments: "Attachments (receipt photos)",
+    invoiceReminder: "Please upload the official invoice as an attachment before submitting, otherwise the claim may be rejected.",
     password: "Password (optional)",
     passwordHint: "You can set a password. Viewing or updating later requires it.",
     passwordConfirm: "Confirm password",
@@ -107,7 +110,7 @@ const dict: Record<Lang, Record<string, string>> = {
     process: "Process",
     actions: "Actions",
     withdraw: "Withdraw",
-    confirmFinish: "Confirm received, mark finished",
+    confirmFinish: "Confirm received",
     amount: "Amount",
     expenseAt: "Expense Time",
     createdAt: "Created At",
@@ -120,6 +123,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_PAID: "Paid",
     status_FINISHED: "Finished",
     status_REJECTED: "Rejected",
+    status_PAYMENT_FAILED: "Payment Failed",
     status_WITHDRAW: "Withdrawn",
     claimIdNote: "Treat this ID like a password. Keep it private.",
     copy: "Copy",
@@ -155,6 +159,7 @@ const dict: Record<Lang, Record<string, string>> = {
     payoutBankAddress: "Bankadresse",
     tags: "Tags",
     attachments: "Beilagen (Belege/Fotos)",
+    invoiceReminder: "Bitte laden Sie vor dem Einreichen die offizielle Rechnung als Anhang hoch, sonst kann die Spesenanfrage abgelehnt werden.",
     password: "Passwort (optional)",
     passwordHint: "Sie können ein Passwort setzen. Ansicht/Änderung erfordert es.",
     passwordConfirm: "Passwort bestätigen",
@@ -165,7 +170,7 @@ const dict: Record<Lang, Record<string, string>> = {
     process: "Ablauf",
     actions: "Aktionen",
     withdraw: "Zurückziehen",
-    confirmFinish: "Erhalt bestätigen, als abgeschlossen markieren",
+    confirmFinish: "Erhalt bestätigen",
     amount: "Betrag",
     expenseAt: "Ausgabedatum",
     createdAt: "Erstellt am",
@@ -178,6 +183,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_PAID: "Bezahlt",
     status_FINISHED: "Abgeschlossen",
     status_REJECTED: "Abgelehnt",
+    status_PAYMENT_FAILED: "Zahlung fehlgeschlagen",
     status_WITHDRAW: "Zurückgezogen",
     claimIdNote: "Behandeln Sie diese ID wie ein Passwort. Nicht teilen.",
     copy: "Kopieren",
@@ -213,6 +219,7 @@ const dict: Record<Lang, Record<string, string>> = {
     payoutBankAddress: "Adresse de la banque",
     tags: "Tags",
     attachments: "Pièces jointes (reçus)",
+    invoiceReminder: "Veuillez joindre la facture officielle dans les fichiers avant l'envoi, sans quoi la demande pourrait être refusée.",
     password: "Mot de passe (optionnel)",
     passwordHint: "Vous pouvez définir un mot de passe. Requis pour consulter/modifier.",
     passwordConfirm: "Confirmer le mot de passe",
@@ -223,7 +230,7 @@ const dict: Record<Lang, Record<string, string>> = {
     process: "Processus",
     actions: "Actions",
     withdraw: "Retirer",
-    confirmFinish: "Confirmer reçu, marquer terminé",
+    confirmFinish: "Confirmer reçu",
     amount: "Montant",
     expenseAt: "Date de dépense",
     createdAt: "Créé le",
@@ -236,6 +243,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_PAID: "Payé",
     status_FINISHED: "Terminé",
     status_REJECTED: "Rejeté",
+    status_PAYMENT_FAILED: "Paiement échoué",
     status_WITHDRAW: "Retiré",
     claimIdNote: "Considérez cet ID comme un mot de passe. Ne le partagez pas.",
     copy: "Copier",
@@ -271,6 +279,7 @@ const dict: Record<Lang, Record<string, string>> = {
     payoutBankAddress: "Indirizzo della banca",
     tags: "Tag",
     attachments: "Allegati (ricevute/foto)",
+    invoiceReminder: "Ricordati di caricare la fattura ufficiale tra gli allegati prima di inviare, altrimenti la richiesta potrebbe essere rifiutata.",
     password: "Password (opzionale)",
     passwordHint: "Puoi impostare una password. Sarà richiesta per vedere/modificare in seguito.",
     passwordConfirm: "Conferma password",
@@ -281,7 +290,7 @@ const dict: Record<Lang, Record<string, string>> = {
     process: "Processo",
     actions: "Azioni",
     withdraw: "Ritira",
-    confirmFinish: "Conferma ricevuto, segna come completata",
+    confirmFinish: "Conferma ricevuto",
     amount: "Importo",
     expenseAt: "Data della spesa",
     createdAt: "Creato il",
@@ -294,6 +303,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_PAID: "Pagata",
     status_FINISHED: "Completata",
     status_REJECTED: "Rifiutata",
+    status_PAYMENT_FAILED: "Pagamento fallito",
     status_WITHDRAW: "Ritirata",
     claimIdNote: "Tratta questo ID come una password. Mantienilo privato.",
     copy: "Copia",

src/lib/types.ts

@@ -9,6 +9,7 @@ export type ClaimStatus =
   | 'PAID'
   | 'FINISHED'
   | 'REJECTED'
+  | 'PAYMENT_FAILED'
   | 'WITHDRAW';
 
 export interface PayoutInfo {