344 行
13 KiB
TypeScript
344 行
13 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { fetchDepartments } from "../api/departments";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import {
|
|
fetchReimbursementApprovalBottleneck,
|
|
fetchReimbursementStatsSummary,
|
|
fetchReimbursementStatsTrend,
|
|
fetchReimbursementTopExpenseTypes,
|
|
type ReimbursementStatsQuery,
|
|
} from "../api/reimbursements";
|
|
import { isApiError } from "../api/types";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { SectionPanel } from "../components/patterns/SectionPanel";
|
|
import { Button } from "../components/ui/button";
|
|
|
|
function currentDateString() {
|
|
return new Date().toISOString().slice(0, 10);
|
|
}
|
|
|
|
function defaultDateFromString() {
|
|
const now = new Date();
|
|
now.setDate(1);
|
|
now.setMonth(now.getMonth() - 2);
|
|
return now.toISOString().slice(0, 10);
|
|
}
|
|
|
|
function resolveErrorMessage(error: unknown) {
|
|
if (isApiError(error)) {
|
|
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
|
}
|
|
if (error instanceof Error) {
|
|
return error.message;
|
|
}
|
|
return "加载失败，请稍后重试。";
|
|
}
|
|
|
|
function formatCurrency(value: string | number | null | undefined) {
|
|
const numeric = Number(value ?? 0);
|
|
return new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(
|
|
Number.isFinite(numeric) ? numeric : 0,
|
|
);
|
|
}
|
|
|
|
function formatAvgDays(value: number | null) {
|
|
if (value == null) {
|
|
return "-";
|
|
}
|
|
const normalized = Number(value);
|
|
if (!Number.isFinite(normalized)) {
|
|
return "-";
|
|
}
|
|
return `${normalized.toFixed(1)} 天`;
|
|
}
|
|
|
|
function formatPeriod(value: string | null) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
return value.length === 7 ? value : value.replace("T", " ").slice(0, 10);
|
|
}
|
|
|
|
function normalizeBarWidth(current: number, max: number) {
|
|
if (max <= 0 || current <= 0) {
|
|
return "0%";
|
|
}
|
|
return `${Math.max(8, Math.min(100, (current / max) * 100))}%`;
|
|
}
|
|
|
|
export function ReimbursementDashboardPage() {
|
|
const queryClient = useQueryClient();
|
|
const [dateFrom, setDateFrom] = useState(defaultDateFromString());
|
|
const [dateTo, setDateTo] = useState(currentDateString());
|
|
const [departmentId, setDepartmentId] = useState("");
|
|
|
|
const filters = useMemo<ReimbursementStatsQuery>(
|
|
() => ({
|
|
dateFrom: dateFrom || undefined,
|
|
dateTo: dateTo || undefined,
|
|
departmentId: departmentId || undefined,
|
|
}),
|
|
[dateFrom, dateTo, departmentId],
|
|
);
|
|
|
|
const departmentsQuery = useQuery({
|
|
queryKey: ["departments", "reimbursements-dashboard"],
|
|
queryFn: () => fetchDepartments({ includeArchived: false }),
|
|
});
|
|
|
|
const summaryQuery = useQuery({
|
|
queryKey: ["reimbursements", "stats", "summary", filters],
|
|
queryFn: () => fetchReimbursementStatsSummary(filters),
|
|
});
|
|
|
|
const trendQuery = useQuery({
|
|
queryKey: ["reimbursements", "stats", "trend", filters],
|
|
queryFn: () => fetchReimbursementStatsTrend({ ...filters, granularity: "month" }),
|
|
});
|
|
|
|
const topExpenseTypesQuery = useQuery({
|
|
queryKey: ["reimbursements", "stats", "top-expense-types", filters],
|
|
queryFn: () => fetchReimbursementTopExpenseTypes({ ...filters, limit: 10 }),
|
|
});
|
|
|
|
const bottleneckQuery = useQuery({
|
|
queryKey: ["reimbursements", "stats", "approval-bottleneck", filters],
|
|
queryFn: () => fetchReimbursementApprovalBottleneck(filters),
|
|
});
|
|
|
|
const loading =
|
|
summaryQuery.isLoading ||
|
|
trendQuery.isLoading ||
|
|
topExpenseTypesQuery.isLoading ||
|
|
bottleneckQuery.isLoading;
|
|
|
|
const firstError =
|
|
summaryQuery.error ??
|
|
trendQuery.error ??
|
|
topExpenseTypesQuery.error ??
|
|
bottleneckQuery.error ??
|
|
departmentsQuery.error;
|
|
|
|
const summary = summaryQuery.data;
|
|
const trendItems = trendQuery.data?.items ?? [];
|
|
const topExpenseTypes = topExpenseTypesQuery.data?.items ?? [];
|
|
const bottlenecks = bottleneckQuery.data?.items ?? [];
|
|
|
|
const maxTrendCount = Math.max(1, ...trendItems.map((item) => Number(item.count ?? 0)));
|
|
const maxTrendAmount = Math.max(1, ...trendItems.map((item) => Number(item.amount ?? 0)));
|
|
const maxExpenseTypeAmount = Math.max(1, ...topExpenseTypes.map((item) => Number(item.totalAmount ?? 0)));
|
|
|
|
async function handleRefresh() {
|
|
await queryClient.invalidateQueries({ queryKey: ["reimbursements", "stats"] });
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="报销统计分析"
|
|
subtitle="按时间范围与部门查看报销规模、处理效率、费用结构和审批瓶颈。"
|
|
actions={
|
|
<Button type="button" variant="secondary" onClick={() => void handleRefresh()}>
|
|
刷新
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
{firstError ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
|
{resolveErrorMessage(firstError)}
|
|
</p>
|
|
) : null}
|
|
|
|
<div className="card-std space-y-4 p-6">
|
|
<div className="grid gap-3 md:grid-cols-4">
|
|
<div className="space-y-1">
|
|
<label className="text-xs text-zinc-600" htmlFor="reimbursement-dashboard-date-from">
|
|
开始日期
|
|
</label>
|
|
<input
|
|
id="reimbursement-dashboard-date-from"
|
|
className="input-std"
|
|
type="date"
|
|
value={dateFrom}
|
|
onChange={(event) => setDateFrom(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-xs text-zinc-600" htmlFor="reimbursement-dashboard-date-to">
|
|
结束日期
|
|
</label>
|
|
<input
|
|
id="reimbursement-dashboard-date-to"
|
|
className="input-std"
|
|
type="date"
|
|
value={dateTo}
|
|
onChange={(event) => setDateTo(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-xs text-zinc-600" htmlFor="reimbursement-dashboard-department">
|
|
部门
|
|
</label>
|
|
<select
|
|
id="reimbursement-dashboard-department"
|
|
className="select-std"
|
|
value={departmentId}
|
|
onChange={(event) => setDepartmentId(event.target.value)}
|
|
>
|
|
<option value="">全部部门</option>
|
|
{(departmentsQuery.data?.items ?? []).map((department) => (
|
|
<option key={department.id} value={department.id}>
|
|
{department.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="flex items-end">
|
|
<div className="rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600">
|
|
默认窗口：近 3 个自然月
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<div className="card-std p-5">
|
|
<div className="text-xs text-zinc-500">报销总数</div>
|
|
<div className="mt-2 text-3xl font-semibold text-zinc-900">
|
|
{loading ? "..." : summary?.totalCount ?? 0}
|
|
</div>
|
|
</div>
|
|
<div className="card-std p-5">
|
|
<div className="text-xs text-zinc-500">报销总金额</div>
|
|
<div className="mt-2 text-3xl font-semibold text-zinc-900">
|
|
{loading ? "..." : formatCurrency(summary?.totalAmount)}
|
|
</div>
|
|
</div>
|
|
<div className="card-std p-5">
|
|
<div className="text-xs text-zinc-500">平均处理天数</div>
|
|
<div className="mt-2 text-3xl font-semibold text-zinc-900">
|
|
{loading ? "..." : formatAvgDays(summary?.avgProcessingDays ?? null)}
|
|
</div>
|
|
</div>
|
|
<div className="card-std p-5">
|
|
<div className="text-xs text-zinc-500">待审批数</div>
|
|
<div className="mt-2 text-3xl font-semibold text-zinc-900">
|
|
{loading ? "..." : summary?.byStatus.reviewing.count ?? 0}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<SectionPanel
|
|
title="报销趋势"
|
|
description="按月观察报销数量与金额的变化，帮助判断高峰月份和支付节奏。"
|
|
>
|
|
{trendItems.length ? (
|
|
<div className="grid gap-3 lg:grid-cols-2">
|
|
{trendItems.map((item) => (
|
|
<div key={item.period ?? "unknown"} className="rounded-2xl border border-zinc-200 bg-white p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-sm font-medium text-zinc-900">{formatPeriod(item.period)}</div>
|
|
<div className="text-xs text-zinc-500">已支付 {item.paidCount} 单</div>
|
|
</div>
|
|
<div className="mt-4 space-y-3">
|
|
<div>
|
|
<div className="mb-1 flex items-center justify-between text-xs text-zinc-500">
|
|
<span>数量</span>
|
|
<span>{item.count} 单</span>
|
|
</div>
|
|
<div className="h-2 rounded-full bg-zinc-100">
|
|
<div
|
|
className="h-2 rounded-full bg-zinc-900"
|
|
style={{ width: normalizeBarWidth(Number(item.count ?? 0), maxTrendCount) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="mb-1 flex items-center justify-between text-xs text-zinc-500">
|
|
<span>金额</span>
|
|
<span>{formatCurrency(item.amount)}</span>
|
|
</div>
|
|
<div className="h-2 rounded-full bg-emerald-100">
|
|
<div
|
|
className="h-2 rounded-full bg-emerald-600"
|
|
style={{ width: normalizeBarWidth(Number(item.amount ?? 0), maxTrendAmount) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-zinc-500">当前筛选下暂无趋势数据。</div>
|
|
)}
|
|
</SectionPanel>
|
|
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<SectionPanel
|
|
title="费用类型排行"
|
|
description="按金额查看最主要的费用类型，帮助财务快速定位结构变化。"
|
|
>
|
|
{topExpenseTypes.length ? (
|
|
<div className="space-y-3">
|
|
{topExpenseTypes.map((item, index) => (
|
|
<div key={item.expenseTypeId} className="rounded-2xl border border-zinc-200 bg-white p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-sm font-semibold text-zinc-900">
|
|
{index + 1}. {item.expenseTypeName}
|
|
</div>
|
|
<div className="mt-1 text-xs text-zinc-500">{item.count} 条报销明细</div>
|
|
</div>
|
|
<div className="text-sm font-medium text-zinc-700">{formatCurrency(item.totalAmount)}</div>
|
|
</div>
|
|
<div className="mt-3 h-2 rounded-full bg-zinc-100">
|
|
<div
|
|
className="h-2 rounded-full bg-amber-500"
|
|
style={{ width: normalizeBarWidth(Number(item.totalAmount ?? 0), maxExpenseTypeAmount) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-zinc-500">当前筛选下暂无费用类型排行。</div>
|
|
)}
|
|
</SectionPanel>
|
|
|
|
<SectionPanel
|
|
title="审批瓶颈"
|
|
description="观察 reviewing 中的待处理堆积情况，帮助尽快发现卡点。"
|
|
>
|
|
{bottlenecks.length ? (
|
|
<div className="space-y-3">
|
|
{bottlenecks.map((item) => {
|
|
const isStale = item.oldestPendingDays > 3;
|
|
return (
|
|
<div key={`${item.assigneeId ?? "role"}-${item.assigneeName}`} className="rounded-2xl border border-zinc-200 bg-white p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-sm font-semibold text-zinc-900">{item.assigneeName}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">
|
|
待处理 {item.pendingCount} 单
|
|
</div>
|
|
</div>
|
|
<div className={`text-sm font-medium ${isStale ? "text-red-600" : "text-zinc-700"}`}>
|
|
最长等待 {item.oldestPendingDays} 天
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-zinc-500">当前筛选下暂无审批瓶颈。</div>
|
|
)}
|
|
</SectionPanel>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|