504 lines
18 KiB
TypeScript
504 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useCallback, useRef } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
} from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import {
|
||
apiBase,
|
||
financeApi,
|
||
type FinanceRecordRead,
|
||
type FinanceSyncResponse,
|
||
type FinanceSyncResult,
|
||
} from "@/lib/api/client";
|
||
import { Download, Inbox, Loader2, Mail, FileText, Upload } from "lucide-react";
|
||
import { toast } from "sonner";
|
||
|
||
export default function FinancePage() {
|
||
const [months, setMonths] = useState<string[]>([]);
|
||
const [selectedMonth, setSelectedMonth] = useState<string>("");
|
||
const [records, setRecords] = useState<FinanceRecordRead[]>([]);
|
||
const [loadingMonths, setLoadingMonths] = useState(true);
|
||
const [loadingRecords, setLoadingRecords] = useState(false);
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [lastSync, setLastSync] = useState<FinanceSyncResponse | null>(null);
|
||
const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
|
||
const [uploadFile, setUploadFile] = useState<File | null>(null);
|
||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [reviewRecord, setReviewRecord] = useState<FinanceRecordRead | null>(null);
|
||
const [reviewAmount, setReviewAmount] = useState("");
|
||
const [reviewDate, setReviewDate] = useState("");
|
||
const [savingReview, setSavingReview] = useState(false);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const previewUrlRef = useRef<string | null>(null);
|
||
|
||
const loadMonths = useCallback(async () => {
|
||
try {
|
||
const list = await financeApi.listMonths();
|
||
setMonths(list);
|
||
if (list.length > 0 && !selectedMonth) setSelectedMonth(list[0]);
|
||
} catch {
|
||
toast.error("加载月份列表失败");
|
||
} finally {
|
||
setLoadingMonths(false);
|
||
}
|
||
}, [selectedMonth]);
|
||
|
||
const loadRecords = useCallback(async () => {
|
||
if (!selectedMonth) {
|
||
setRecords([]);
|
||
return;
|
||
}
|
||
setLoadingRecords(true);
|
||
try {
|
||
const list = await financeApi.listRecords(selectedMonth);
|
||
setRecords(list);
|
||
} catch {
|
||
toast.error("加载记录失败");
|
||
} finally {
|
||
setLoadingRecords(false);
|
||
}
|
||
}, [selectedMonth]);
|
||
|
||
useEffect(() => {
|
||
loadMonths();
|
||
}, [loadMonths]);
|
||
|
||
useEffect(() => {
|
||
loadRecords();
|
||
}, [loadRecords]);
|
||
|
||
const handleSync = async () => {
|
||
setSyncing(true);
|
||
toast.loading("正在同步邮箱…", { id: "finance-sync" });
|
||
try {
|
||
const res: FinanceSyncResponse = await financeApi.sync();
|
||
setLastSync(res);
|
||
toast.dismiss("finance-sync");
|
||
if (res.new_files > 0) {
|
||
toast.success(`发现 ${res.new_files} 个新文件`);
|
||
await loadMonths();
|
||
if (selectedMonth) await loadRecords();
|
||
} else {
|
||
toast.info("收件箱已是最新，无新文件");
|
||
}
|
||
} catch (e) {
|
||
toast.dismiss("finance-sync");
|
||
toast.error(e instanceof Error ? e.message : "同步失败");
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
};
|
||
|
||
const resetUploadDialog = useCallback(() => {
|
||
setUploadFile(null);
|
||
if (previewUrlRef.current) {
|
||
URL.revokeObjectURL(previewUrlRef.current);
|
||
previewUrlRef.current = null;
|
||
}
|
||
setPreviewUrl(null);
|
||
setReviewRecord(null);
|
||
setReviewAmount("");
|
||
setReviewDate("");
|
||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||
}, []);
|
||
|
||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
const allowed = ["application/pdf", "image/jpeg", "image/png", "image/webp"];
|
||
if (!allowed.includes(file.type) && !file.name.match(/\.(pdf|jpg|jpeg|png|webp)$/i)) {
|
||
toast.error("仅支持 PDF、JPG、PNG、WEBP");
|
||
return;
|
||
}
|
||
if (previewUrlRef.current) {
|
||
URL.revokeObjectURL(previewUrlRef.current);
|
||
previewUrlRef.current = null;
|
||
}
|
||
setUploadFile(file);
|
||
setReviewRecord(null);
|
||
setReviewAmount("");
|
||
setReviewDate("");
|
||
if (file.type.startsWith("image/")) {
|
||
const url = URL.createObjectURL(file);
|
||
previewUrlRef.current = url;
|
||
setPreviewUrl(url);
|
||
} else {
|
||
setPreviewUrl(null);
|
||
}
|
||
};
|
||
|
||
const handleUploadSubmit = async () => {
|
||
if (!uploadFile) return;
|
||
setUploading(true);
|
||
try {
|
||
const record = await financeApi.uploadInvoice(uploadFile);
|
||
setReviewRecord(record);
|
||
setReviewAmount(record.amount != null ? String(record.amount) : "");
|
||
setReviewDate(record.billing_date || "");
|
||
toast.success("已上传，请核对金额与日期");
|
||
await loadMonths();
|
||
if (selectedMonth === record.month) await loadRecords();
|
||
} catch (e) {
|
||
toast.error(e instanceof Error ? e.message : "上传失败");
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
};
|
||
|
||
const handleReviewSave = async () => {
|
||
if (!reviewRecord) return;
|
||
const amount = reviewAmount.trim() ? parseFloat(reviewAmount) : null;
|
||
const billing_date = reviewDate.trim() || null;
|
||
setSavingReview(true);
|
||
try {
|
||
await financeApi.updateRecord(reviewRecord.id, { amount, billing_date });
|
||
toast.success("已保存");
|
||
setUploadDialogOpen(false);
|
||
resetUploadDialog();
|
||
if (selectedMonth) await loadRecords();
|
||
} catch (e) {
|
||
toast.error(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setSavingReview(false);
|
||
}
|
||
};
|
||
|
||
const handleDownloadZip = async () => {
|
||
if (!selectedMonth) {
|
||
toast.error("请先选择月份");
|
||
return;
|
||
}
|
||
try {
|
||
await financeApi.downloadMonth(selectedMonth);
|
||
toast.success(`已下载 ${selectedMonth}.zip`);
|
||
} catch (e) {
|
||
toast.error(e instanceof Error ? e.message : "下载失败");
|
||
}
|
||
};
|
||
|
||
const formatDate = (s: string) =>
|
||
new Date(s).toLocaleString("zh-CN", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
|
||
const typeLabel: Record<string, string> = {
|
||
invoices: "发票",
|
||
bank_records: "流水",
|
||
statements: "流水",
|
||
receipts: "回执",
|
||
manual: "手动上传",
|
||
others: "其他",
|
||
};
|
||
|
||
const monthlyTotal = records.reduce((sum, r) => sum + (r.amount ?? 0), 0);
|
||
const totalInvoicesThisMonth = records.filter(
|
||
(r) => r.amount != null && (r.type === "manual" || r.type === "invoices")
|
||
).reduce((s, r) => s + (r.amount ?? 0), 0);
|
||
|
||
return (
|
||
<div className="p-6 max-w-5xl">
|
||
<div className="flex flex-col gap-6">
|
||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-xl font-semibold">财务归档</h1>
|
||
<p className="text-sm text-muted-foreground mt-0.5">
|
||
从网易邮箱同步发票、回执、流水等附件，或手动上传发票
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
{selectedMonth && (
|
||
<Card className="py-2 px-4">
|
||
<p className="text-xs text-muted-foreground">本月发票合计</p>
|
||
<p className="text-lg font-semibold">
|
||
¥{totalInvoicesThisMonth.toLocaleString("zh-CN", { minimumFractionDigits: 2 })}
|
||
</p>
|
||
</Card>
|
||
)}
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setUploadDialogOpen(true);
|
||
resetUploadDialog();
|
||
}}
|
||
>
|
||
<Upload className="h-4 w-4" />
|
||
<span className="ml-2">上传发票</span>
|
||
</Button>
|
||
<Button onClick={handleSync} disabled={syncing} size="default">
|
||
{syncing ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Mail className="h-4 w-4" />
|
||
)}
|
||
<span className="ml-2">同步邮箱</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Upload Invoice Dialog */}
|
||
<Dialog open={uploadDialogOpen} onOpenChange={(open) => {
|
||
setUploadDialogOpen(open);
|
||
if (!open) resetUploadDialog();
|
||
}}>
|
||
<DialogContent className="sm:max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>{reviewRecord ? "核对金额与日期" : "上传发票"}</DialogTitle>
|
||
</DialogHeader>
|
||
{!reviewRecord ? (
|
||
<>
|
||
<div
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:bg-muted/50"
|
||
>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept=".pdf,.jpg,.jpeg,.png,.webp"
|
||
className="hidden"
|
||
onChange={handleFileSelect}
|
||
/>
|
||
{previewUrl ? (
|
||
<img src={previewUrl} alt="预览" className="max-h-48 mx-auto object-contain" />
|
||
) : uploadFile ? (
|
||
<p className="text-sm font-medium">{uploadFile.name}</p>
|
||
) : (
|
||
<p className="text-sm text-muted-foreground">点击或拖拽 PDF/图片到此处</p>
|
||
)}
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setUploadDialogOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleUploadSubmit} disabled={!uploadFile || uploading}>
|
||
{uploading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||
<span className="ml-2">上传并识别</span>
|
||
</Button>
|
||
</DialogFooter>
|
||
</>
|
||
) : (
|
||
<>
|
||
{previewUrl && (
|
||
<img src={previewUrl} alt="预览" className="max-h-32 rounded border object-contain" />
|
||
)}
|
||
<div className="grid gap-2">
|
||
<Label>金额</Label>
|
||
<Input
|
||
type="number"
|
||
step="0.01"
|
||
value={reviewAmount}
|
||
onChange={(e) => setReviewAmount(e.target.value)}
|
||
placeholder="可手动修改"
|
||
/>
|
||
</div>
|
||
<div className="grid gap-2">
|
||
<Label>开票日期</Label>
|
||
<Input
|
||
type="date"
|
||
value={reviewDate}
|
||
onChange={(e) => setReviewDate(e.target.value)}
|
||
/>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => { setReviewRecord(null); setReviewAmount(""); setReviewDate(""); }}>
|
||
继续上传
|
||
</Button>
|
||
<Button onClick={handleReviewSave} disabled={savingReview}>
|
||
{savingReview ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||
<span className="ml-2">保存并关闭</span>
|
||
</Button>
|
||
</DialogFooter>
|
||
</>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Sync History / Last sync */}
|
||
<Card>
|
||
<CardHeader className="py-3">
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Inbox className="h-4 w-4" />
|
||
同步记录
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="py-2">
|
||
{lastSync !== null ? (
|
||
<>
|
||
<p className="text-sm text-muted-foreground">
|
||
最近一次同步：发现 <strong>{lastSync.new_files}</strong> 个新文件
|
||
</p>
|
||
{lastSync.details && lastSync.details.length > 0 && (
|
||
<div className="mt-2 space-y-2">
|
||
{Object.entries(
|
||
lastSync.details.reduce<Record<string, FinanceSyncResult[]>>(
|
||
(acc, item) => {
|
||
const t = item.type || "others";
|
||
if (!acc[t]) acc[t] = [];
|
||
acc[t].push(item);
|
||
return acc;
|
||
},
|
||
{},
|
||
),
|
||
).map(([t, items]) => (
|
||
<div key={t}>
|
||
<p className="text-xs font-medium text-muted-foreground">
|
||
{typeLabel[t] ?? t}（{items.length}）
|
||
</p>
|
||
<ul className="mt-1 ml-4 list-disc space-y-0.5 text-xs text-muted-foreground">
|
||
{items.map((it) => (
|
||
<li key={it.id}>
|
||
{it.file_name}
|
||
<span className="ml-1 text-[11px] text-muted-foreground/80">
|
||
[{it.month}]
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
) : (
|
||
<p className="text-sm text-muted-foreground">
|
||
点击「同步邮箱」后，将显示本次同步结果
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Month + Download */}
|
||
<Card>
|
||
<CardHeader className="py-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<CardTitle className="text-base">按月份查看</CardTitle>
|
||
<div className="flex items-center gap-2">
|
||
<Select
|
||
value={selectedMonth}
|
||
onValueChange={setSelectedMonth}
|
||
disabled={loadingMonths}
|
||
>
|
||
<SelectTrigger className="w-[160px]">
|
||
<SelectValue placeholder="选择月份" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{months.map((m) => (
|
||
<SelectItem key={m} value={m}>
|
||
{m}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={handleDownloadZip}
|
||
disabled={!selectedMonth || records.length === 0}
|
||
>
|
||
<Download className="h-4 w-4" />
|
||
<span className="ml-1.5">下载本月全部 (.zip)</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{loadingRecords ? (
|
||
<p className="text-sm text-muted-foreground flex items-center gap-1 py-4">
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
加载中…
|
||
</p>
|
||
) : records.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground py-4">
|
||
{selectedMonth ? "该月份暂无归档文件" : "请选择月份或先同步邮箱"}
|
||
</p>
|
||
) : (
|
||
<>
|
||
<p className="text-xs text-muted-foreground mb-2">
|
||
类型：发票 / 回执 / 流水。同步的发票已按「日期_金额_原文件名」重命名。
|
||
</p>
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>类型</TableHead>
|
||
<TableHead>文件名</TableHead>
|
||
<TableHead>金额</TableHead>
|
||
<TableHead>开票/归档时间</TableHead>
|
||
<TableHead className="w-[100px]">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{records.map((r) => (
|
||
<TableRow key={r.id}>
|
||
<TableCell>
|
||
<span className="text-muted-foreground">
|
||
{typeLabel[r.type] ?? r.type}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="font-medium">{r.file_name}</TableCell>
|
||
<TableCell>
|
||
{r.amount != null
|
||
? `¥${Number(r.amount).toLocaleString("zh-CN", { minimumFractionDigits: 2 })}`
|
||
: "—"}
|
||
</TableCell>
|
||
<TableCell className="text-muted-foreground text-sm">
|
||
{r.billing_date || formatDate(r.created_at)}
|
||
</TableCell>
|
||
<TableCell>
|
||
<a
|
||
href={`${apiBase()}${r.file_path.startsWith("/") ? "" : "/"}${r.file_path}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-primary text-sm hover:underline inline-flex items-center gap-1"
|
||
>
|
||
<FileText className="h-3.5 w-3.5" />
|
||
下载
|
||
</a>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
<TableRow className="bg-muted/30 font-medium">
|
||
<TableCell colSpan={2}>本月合计</TableCell>
|
||
<TableCell>
|
||
¥{monthlyTotal.toLocaleString("zh-CN", { minimumFractionDigits: 2 })}
|
||
</TableCell>
|
||
<TableCell colSpan={2} />
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|