591 行
22 KiB
TypeScript
591 行
22 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { Link, useLocation, useParams, useSearchParams } from "react-router-dom";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
import {
|
|
createLeaveRequest,
|
|
fetchLeaveBalances,
|
|
fetchLeaveRequestDetail,
|
|
fetchLeaveRequests,
|
|
fetchLeaveTypes,
|
|
patchLeaveRequest,
|
|
submitLeaveRequest,
|
|
type LeaveRequestItem,
|
|
type LeaveRequestStatus,
|
|
type LeaveSession,
|
|
} from "../api/leave";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { hasPermission } from "../auth/permissions";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { MobileDetailHeader } from "../components/mobile/MobileDetailHeader";
|
|
import { Button } from "../components/ui/button";
|
|
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
|
|
import { PageScaffold } from "../components/patterns/PageScaffold";
|
|
import { resolveErrorMessage } from "../lib/resolveErrorMessage";
|
|
import {
|
|
formatApprovalHistoryTime,
|
|
resolveLeaveStatusHint,
|
|
workflowActionLabel,
|
|
} from "../lib/approvalDisplay";
|
|
|
|
type LeaveStatusFilter = "all" | LeaveRequestStatus;
|
|
type LeaveView = "form" | "records";
|
|
|
|
const STATUS_TABS: Array<{ value: LeaveStatusFilter; label: string }> = [
|
|
{ value: "all", label: "全部" },
|
|
{ value: "draft", label: "草稿" },
|
|
{ value: "reviewing", label: "审批中" },
|
|
{ value: "approved", label: "已通过" },
|
|
{ value: "rejected", label: "已驳回" },
|
|
];
|
|
|
|
const STATUS_LABEL: Record<LeaveRequestStatus, string> = {
|
|
draft: "草稿",
|
|
reviewing: "审批中",
|
|
approved: "已通过",
|
|
rejected: "已驳回",
|
|
cancelled: "已取消",
|
|
};
|
|
|
|
function leaveProgressFallback(status: LeaveRequestStatus | undefined) {
|
|
if (status === "draft") return "/mobile/approvals?progress=draft";
|
|
if (status === "approved") return "/mobile/approvals?progress=approved";
|
|
if (status === "rejected" || status === "cancelled") return "/mobile/approvals?progress=returned";
|
|
return "/mobile/approvals?progress=reviewing";
|
|
}
|
|
|
|
function isLeaveStatusFilter(value: string | null): value is LeaveStatusFilter {
|
|
return ["all", "draft", "reviewing", "approved", "rejected", "cancelled"].includes(value ?? "");
|
|
}
|
|
|
|
function resolveLeaveView(value: string | null): LeaveView {
|
|
return value === "form" ? "form" : "records";
|
|
}
|
|
|
|
function todayDate() {
|
|
return new Date().toISOString().slice(0, 10);
|
|
}
|
|
|
|
function formatSession(value: LeaveSession) {
|
|
return value === "am" ? "上午" : "下午";
|
|
}
|
|
|
|
function formatLeaveRange(item: LeaveRequestItem) {
|
|
return `${item.startDate} ${formatSession(item.startSession)} - ${item.endDate} ${formatSession(item.endSession)}`;
|
|
}
|
|
|
|
function LeaveRecordCard({
|
|
item,
|
|
isSaving,
|
|
onEdit,
|
|
onSubmit,
|
|
detailTo,
|
|
currentMobileSource,
|
|
showActions = true,
|
|
}: {
|
|
item: LeaveRequestItem;
|
|
isSaving: boolean;
|
|
onEdit: (item: LeaveRequestItem) => void;
|
|
onSubmit: (item: LeaveRequestItem) => void;
|
|
detailTo?: string;
|
|
currentMobileSource?: string;
|
|
showActions?: boolean;
|
|
}) {
|
|
const canEdit = item.status === "draft" || item.status === "rejected";
|
|
const canSubmit = item.status === "draft" || item.status === "rejected";
|
|
const approvalHistory = item.approvalHistory ?? [];
|
|
const content = (
|
|
<>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold text-zinc-900">{item.leaveType?.name ?? "请假"}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">{formatLeaveRange(item)}</div>
|
|
</div>
|
|
<span className="badge-neutral shrink-0">{STATUS_LABEL[item.status]}</span>
|
|
</div>
|
|
|
|
<div className="mobile-info-grid mt-4 text-sm">
|
|
<div>
|
|
<div className="text-xs text-zinc-500">天数</div>
|
|
<div className="mt-1 text-lg font-semibold text-zinc-900">{item.requestedDays}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-zinc-500">附件</div>
|
|
<div className="mt-1 truncate text-zinc-900">{item.attachment?.originalName ?? "-"}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{item.reason ? <p className="mt-3 line-clamp-2 text-sm text-zinc-500">{item.reason}</p> : null}
|
|
<div className="mt-3 rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600" data-testid="mobile-leave-status-hint">
|
|
{resolveLeaveStatusHint(item)}
|
|
</div>
|
|
{approvalHistory.length ? (
|
|
<div className="mt-2 text-xs text-zinc-500">
|
|
最近审批：{workflowActionLabel(approvalHistory[0].action)}
|
|
{approvalHistory[0].comment ? ` · ${approvalHistory[0].comment}` : ""}
|
|
{" · "}
|
|
{formatApprovalHistoryTime(approvalHistory[0].createdAt)}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<article className="mobile-card" data-testid="mobile-leave-record-card">
|
|
{detailTo ? (
|
|
<Link className="block" to={detailTo} state={{ from: currentMobileSource }}>
|
|
{content}
|
|
</Link>
|
|
) : content}
|
|
|
|
{showActions && (canEdit || canSubmit) ? (
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{canEdit ? (
|
|
<Button size="sm" variant="secondary" type="button" disabled={isSaving} onClick={() => onEdit(item)}>
|
|
编辑
|
|
</Button>
|
|
) : null}
|
|
{canSubmit ? (
|
|
<Button size="sm" type="button" disabled={isSaving} onClick={() => onSubmit(item)}>
|
|
提交
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export function MobileLeavePage() {
|
|
const queryClient = useQueryClient();
|
|
const location = useLocation();
|
|
const { leaveRequestId = "" } = useParams();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const { permissions } = useAuth();
|
|
const canCreateLeave = hasPermission(permissions, "leave.create");
|
|
const [view, setView] = useState<LeaveView>(() => resolveLeaveView(searchParams.get("view")));
|
|
const [statusFilter, setStatusFilter] = useState<LeaveStatusFilter>(() => {
|
|
const queryStatus = searchParams.get("status");
|
|
return isLeaveStatusFilter(queryStatus) ? queryStatus : "all";
|
|
});
|
|
const [editingItem, setEditingItem] = useState<LeaveRequestItem | null>(null);
|
|
const [leaveTypeId, setLeaveTypeId] = useState("");
|
|
const [startDate, setStartDate] = useState(todayDate);
|
|
const [endDate, setEndDate] = useState(todayDate);
|
|
const [startSession, setStartSession] = useState<LeaveSession>("am");
|
|
const [endSession, setEndSession] = useState<LeaveSession>("pm");
|
|
const [reason, setReason] = useState("");
|
|
const [attachmentFile, setAttachmentFile] = useState<File | null>(null);
|
|
const attachmentInputRef = useRef<HTMLInputElement | null>(null);
|
|
const currentMobileSource = useMemo(() => {
|
|
const params = new URLSearchParams(location.search);
|
|
params.set("view", view);
|
|
params.set("status", statusFilter);
|
|
const query = params.toString();
|
|
return `${location.pathname}${query ? `?${query}` : ""}`;
|
|
}, [location.pathname, location.search, statusFilter, view]);
|
|
|
|
useEffect(() => {
|
|
setView(resolveLeaveView(searchParams.get("view")));
|
|
const queryStatus = searchParams.get("status");
|
|
setStatusFilter(isLeaveStatusFilter(queryStatus) ? queryStatus : "all");
|
|
}, [searchParams]);
|
|
|
|
const leaveTypesQuery = useQuery({
|
|
queryKey: ["mobile", "leave", "types"],
|
|
queryFn: () => fetchLeaveTypes({ enabled: true }),
|
|
});
|
|
|
|
const balancesQuery = useQuery({
|
|
queryKey: ["mobile", "leave", "balances"],
|
|
queryFn: () => fetchLeaveBalances(),
|
|
});
|
|
|
|
const requestsQuery = useQuery({
|
|
queryKey: ["mobile", "leave", "requests", statusFilter],
|
|
queryFn: () =>
|
|
fetchLeaveRequests({
|
|
status: statusFilter === "all" ? undefined : statusFilter,
|
|
scope: "own",
|
|
page: 1,
|
|
pageSize: 20,
|
|
}),
|
|
});
|
|
|
|
const detailQuery = useQuery({
|
|
enabled: Boolean(leaveRequestId),
|
|
queryKey: ["mobile", "leave", "detail", leaveRequestId],
|
|
queryFn: () => fetchLeaveRequestDetail(leaveRequestId),
|
|
});
|
|
|
|
const invalidateLeaveQueries = async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["mobile", "leave"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["leave"] }),
|
|
]);
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setEditingItem(null);
|
|
setLeaveTypeId("");
|
|
setStartDate(todayDate());
|
|
setEndDate(todayDate());
|
|
setStartSession("am");
|
|
setEndSession("pm");
|
|
setReason("");
|
|
setAttachmentFile(null);
|
|
if (attachmentInputRef.current) {
|
|
attachmentInputRef.current.value = "";
|
|
}
|
|
};
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: () =>
|
|
createLeaveRequest({
|
|
leaveTypeId,
|
|
startDate,
|
|
endDate,
|
|
startSession,
|
|
endSession,
|
|
reason,
|
|
file: attachmentFile,
|
|
}),
|
|
onSuccess: async () => {
|
|
toast.success("请假草稿已创建");
|
|
resetForm();
|
|
await invalidateLeaveQueries();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: () => {
|
|
if (!editingItem) {
|
|
throw new Error("未选择请假单");
|
|
}
|
|
return patchLeaveRequest(editingItem.id, {
|
|
leaveTypeId,
|
|
startDate,
|
|
endDate,
|
|
startSession,
|
|
endSession,
|
|
reason,
|
|
file: attachmentFile,
|
|
});
|
|
},
|
|
onSuccess: async () => {
|
|
toast.success("请假单已保存");
|
|
resetForm();
|
|
await invalidateLeaveQueries();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const submitMutation = useMutation({
|
|
mutationFn: (item: LeaveRequestItem) => submitLeaveRequest(item.id),
|
|
onSuccess: async () => {
|
|
toast.success("请假单已提交");
|
|
await invalidateLeaveQueries();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const leaveTypes = leaveTypesQuery.data?.items ?? [];
|
|
const records = requestsQuery.data?.items ?? [];
|
|
const balances = balancesQuery.data?.items ?? [];
|
|
const balanceSummary = useMemo(
|
|
() =>
|
|
balances.reduce(
|
|
(summary, item) => ({
|
|
available: summary.available + item.available,
|
|
reserved: summary.reserved + item.reserved,
|
|
used: summary.used + item.used,
|
|
}),
|
|
{ available: 0, reserved: 0, used: 0 },
|
|
),
|
|
[balances],
|
|
);
|
|
const isSaving = createMutation.isPending || updateMutation.isPending || submitMutation.isPending;
|
|
|
|
const startEditing = (item: LeaveRequestItem) => {
|
|
setView("form");
|
|
const nextParams = new URLSearchParams(searchParams);
|
|
nextParams.set("view", "form");
|
|
nextParams.set("status", statusFilter);
|
|
setSearchParams(nextParams, { replace: true });
|
|
setEditingItem(item);
|
|
setLeaveTypeId(item.leaveType?.id ?? "");
|
|
setStartDate(item.startDate);
|
|
setEndDate(item.endDate);
|
|
setStartSession(item.startSession);
|
|
setEndSession(item.endSession);
|
|
setReason(item.reason ?? "");
|
|
setAttachmentFile(null);
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
};
|
|
|
|
function handleViewChange(value: string) {
|
|
const nextView = resolveLeaveView(value);
|
|
setView(nextView);
|
|
const nextParams = new URLSearchParams(searchParams);
|
|
nextParams.set("view", nextView);
|
|
nextParams.set("status", statusFilter);
|
|
setSearchParams(nextParams, { replace: true });
|
|
}
|
|
|
|
function handleStatusChange(value: string) {
|
|
if (!isLeaveStatusFilter(value)) {
|
|
return;
|
|
}
|
|
setStatusFilter(value);
|
|
const nextParams = new URLSearchParams(searchParams);
|
|
nextParams.set("view", "records");
|
|
nextParams.set("status", value);
|
|
setSearchParams(nextParams, { replace: true });
|
|
}
|
|
|
|
if (leaveRequestId) {
|
|
const detail = detailQuery.data;
|
|
|
|
return (
|
|
<PageScaffold className="space-y-3 pb-4">
|
|
<MobileDetailHeader
|
|
title="请假详情"
|
|
subtitle={detail?.leaveType?.name ?? "请假"}
|
|
fallbackTo={leaveProgressFallback(detail?.status)}
|
|
status={detail ? <span className="badge-neutral">{STATUS_LABEL[detail.status]}</span> : null}
|
|
testId="mobile-leave-detail-header"
|
|
/>
|
|
|
|
{detailQuery.isLoading ? <div className="mobile-card text-sm text-zinc-500">加载中...</div> : null}
|
|
{detailQuery.isError ? (
|
|
<div className="mobile-card text-sm text-red-600">{resolveErrorMessage(detailQuery.error)}</div>
|
|
) : null}
|
|
{detailQuery.data ? (
|
|
<LeaveRecordCard
|
|
item={detailQuery.data}
|
|
isSaving={false}
|
|
onEdit={startEditing}
|
|
onSubmit={(nextItem) => submitMutation.mutate(nextItem)}
|
|
showActions={false}
|
|
/>
|
|
) : null}
|
|
</PageScaffold>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PageScaffold className="space-y-3 pb-4">
|
|
<PageHeader title="请假" />
|
|
|
|
<section className="mobile-card">
|
|
<Tabs value={view} onValueChange={handleViewChange}>
|
|
<TabsList className="grid h-auto w-full grid-cols-2">
|
|
<TabsTrigger value="records" data-testid="mobile-leave-view-records">请假记录</TabsTrigger>
|
|
<TabsTrigger value="form" data-testid="mobile-leave-view-form">新建请假</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</section>
|
|
|
|
{view === "form" ? (
|
|
<>
|
|
<section className="mobile-card" data-testid="mobile-leave-summary">
|
|
<div className="mobile-metric-grid text-sm">
|
|
<div>
|
|
<div className="text-xs text-zinc-500">可用</div>
|
|
<div className="mt-1 text-2xl font-semibold text-zinc-900">{balanceSummary.available.toFixed(1)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-zinc-500">冻结</div>
|
|
<div className="mt-1 text-2xl font-semibold text-zinc-900">{balanceSummary.reserved.toFixed(1)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-zinc-500">已用</div>
|
|
<div className="mt-1 text-2xl font-semibold text-zinc-900">{balanceSummary.used.toFixed(1)}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mobile-card" data-testid="mobile-leave-form">
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<h3 className="text-base font-semibold text-zinc-900">{editingItem ? "编辑请假" : "新建请假"}</h3>
|
|
{editingItem ? (
|
|
<Button variant="secondary" size="sm" type="button" onClick={resetForm}>
|
|
取消
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>假期类型</span>
|
|
<select className="select-std" value={leaveTypeId} onChange={(event) => setLeaveTypeId(event.target.value)}>
|
|
<option value="">请选择</option>
|
|
{leaveTypes.map((item) => (
|
|
<option key={item.id} value={item.id}>
|
|
{item.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<div className="mobile-info-grid">
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>开始日期</span>
|
|
<input className="input-std" type="date" value={startDate} onChange={(event) => setStartDate(event.target.value)} />
|
|
</label>
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>结束日期</span>
|
|
<input className="input-std" type="date" value={endDate} onChange={(event) => setEndDate(event.target.value)} />
|
|
</label>
|
|
</div>
|
|
|
|
<div className="mobile-info-grid">
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>开始时段</span>
|
|
<select className="select-std" value={startSession} onChange={(event) => setStartSession(event.target.value as LeaveSession)}>
|
|
<option value="am">上午</option>
|
|
<option value="pm">下午</option>
|
|
</select>
|
|
</label>
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>结束时段</span>
|
|
<select className="select-std" value={endSession} onChange={(event) => setEndSession(event.target.value as LeaveSession)}>
|
|
<option value="am">上午</option>
|
|
<option value="pm">下午</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>说明</span>
|
|
<textarea
|
|
className="input-std h-24 resize-none"
|
|
placeholder="请输入请假原因"
|
|
value={reason}
|
|
onChange={(event) => setReason(event.target.value)}
|
|
/>
|
|
</label>
|
|
|
|
<label className="block space-y-2 text-sm text-zinc-700">
|
|
<span>附件</span>
|
|
<input
|
|
ref={attachmentInputRef}
|
|
className="hidden"
|
|
type="file"
|
|
onChange={(event) => setAttachmentFile(event.target.files?.[0] ?? null)}
|
|
/>
|
|
<div className="flex items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => attachmentInputRef.current?.click()}
|
|
>
|
|
选择附件
|
|
</Button>
|
|
<span className="min-w-0 flex-1 truncate text-sm text-zinc-500" data-testid="mobile-leave-attachment-name">
|
|
{attachmentFile?.name ?? "未选择文件"}
|
|
</span>
|
|
</div>
|
|
</label>
|
|
|
|
<Button
|
|
className="min-h-12 w-full"
|
|
type="button"
|
|
disabled={!canCreateLeave || isSaving || !leaveTypeId || !startDate || !endDate}
|
|
onClick={() => {
|
|
if (editingItem) {
|
|
updateMutation.mutate();
|
|
return;
|
|
}
|
|
createMutation.mutate();
|
|
}}
|
|
data-testid="mobile-leave-save"
|
|
>
|
|
{editingItem ? "保存修改" : "创建草稿"}
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mobile-card" data-testid="mobile-leave-balances">
|
|
<h3 className="text-base font-semibold text-zinc-900">额度</h3>
|
|
<div className="mt-3 space-y-2">
|
|
{balancesQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
|
|
{!balancesQuery.isLoading && !balances.length ? <div className="text-sm text-zinc-500">暂无额度</div> : null}
|
|
{balances.slice(0, 3).map((item) => (
|
|
<div key={item.leaveType.id} className="mobile-list-card">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="font-medium text-zinc-900">{item.leaveType.name}</div>
|
|
<span className="badge-success">启用</span>
|
|
</div>
|
|
<div className="mobile-metric-grid mt-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-zinc-500">可用</div>
|
|
<div className="font-semibold text-zinc-900">{item.available}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-zinc-500">冻结</div>
|
|
<div className="font-semibold text-zinc-900">{item.reserved}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-zinc-500">已用</div>
|
|
<div className="font-semibold text-zinc-900">{item.used}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</>
|
|
) : null}
|
|
|
|
{view === "records" ? (
|
|
<section className="mobile-card" data-testid="mobile-leave-records">
|
|
<h3 className="text-base font-semibold text-zinc-900">请假记录</h3>
|
|
<Tabs value={statusFilter} onValueChange={handleStatusChange}>
|
|
<TabsList className="mt-3 grid h-auto w-full grid-cols-5">
|
|
{STATUS_TABS.map((item) => (
|
|
<TabsTrigger key={item.value} value={item.value} data-testid={`mobile-leave-tab-${item.value}`}>
|
|
{item.label}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<div className="mt-4 space-y-3">
|
|
{requestsQuery.isLoading ? <div className="mobile-empty-state">加载中...</div> : null}
|
|
{requestsQuery.isError ? (
|
|
<div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">
|
|
{resolveErrorMessage(requestsQuery.error)}
|
|
</div>
|
|
) : null}
|
|
{!requestsQuery.isLoading && !requestsQuery.isError && !records.length ? (
|
|
<div className="mobile-empty-state">暂无请假记录</div>
|
|
) : null}
|
|
{records.map((item) => (
|
|
<LeaveRecordCard
|
|
currentMobileSource={currentMobileSource}
|
|
detailTo={`/mobile/leave/${encodeURIComponent(item.id)}`}
|
|
item={item}
|
|
isSaving={isSaving}
|
|
key={item.id}
|
|
onEdit={startEditing}
|
|
onSubmit={(nextItem) => submitMutation.mutate(nextItem)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</PageScaffold>
|
|
);
|
|
}
|
|
|
|
export default MobileLeavePage;
|