617 lines
23 KiB
TypeScript
617 lines
23 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
CheckCircleOutlined,
|
||
CloseCircleOutlined,
|
||
DownloadOutlined,
|
||
InboxOutlined,
|
||
ReloadOutlined,
|
||
StepForwardOutlined,
|
||
} from '@ant-design/icons';
|
||
import {
|
||
Alert,
|
||
Button,
|
||
Checkbox,
|
||
Descriptions,
|
||
Flex,
|
||
Modal,
|
||
Select,
|
||
Space,
|
||
Spin,
|
||
Steps,
|
||
Table,
|
||
Tag,
|
||
Tooltip,
|
||
Typography,
|
||
Upload,
|
||
} from 'antd';
|
||
import type { UploadProps } from 'antd';
|
||
import { message } from '../../ui/app-message';
|
||
import { useUserStore } from '../../store/user/userStore';
|
||
import {
|
||
commitImportStep,
|
||
createImportRun,
|
||
getImportRun,
|
||
importErrorReportUrl,
|
||
previewImportStep,
|
||
} from '../../api/imports';
|
||
import {
|
||
STEP_FIELDS,
|
||
type ImportPreviewResult,
|
||
type ImportReceipt,
|
||
type ImportRunDetail,
|
||
type ImportStepKey,
|
||
} from './types';
|
||
|
||
interface ImportWizardModalProps {
|
||
open: boolean;
|
||
/** AI 对话生成的导入任务；为空时向导从上传文件开始。 */
|
||
runId?: string | null;
|
||
onClose: () => void;
|
||
}
|
||
|
||
type RowAction = 'create' | 'update' | 'skip';
|
||
|
||
const ACTION_META: Record<RowAction, { label: string; color: string }> = {
|
||
create: { label: '新建', color: 'blue' },
|
||
update: { label: '更新', color: 'orange' },
|
||
skip: { label: '跳过', color: 'default' },
|
||
};
|
||
|
||
function guessMapping(stepKey: ImportStepKey, headers: string[]): Record<string, string> {
|
||
const mapping: Record<string, string> = {};
|
||
for (const field of STEP_FIELDS[stepKey]) {
|
||
const hit = headers.find((header) => {
|
||
const normalizedHeader = header.replace(/[\s（）()]/g, '').toLowerCase();
|
||
const normalizedLabel = field.label.replace(/[\s（）()]/g, '').toLowerCase();
|
||
return (
|
||
normalizedHeader === normalizedLabel ||
|
||
normalizedHeader.includes(normalizedLabel) ||
|
||
normalizedLabel.includes(normalizedHeader)
|
||
);
|
||
});
|
||
if (hit) mapping[field.key] = hit;
|
||
}
|
||
return mapping;
|
||
}
|
||
|
||
function keyInfo(stepKey: ImportStepKey, row: ImportPreviewResult['rows'][number]): string {
|
||
const fields = row.fields;
|
||
if (stepKey === 'students') {
|
||
return [fields.name, fields.studentNo, fields.phone].filter(Boolean).join(' / ');
|
||
}
|
||
if (stepKey === 'rooms') {
|
||
return [fields.roomNumber, fields.building, fields.floor].filter(Boolean).join(' / ');
|
||
}
|
||
if (stepKey === 'checkins') {
|
||
return [fields.name, fields.studentNo, fields.phone, fields.roomNumber, fields.checkInDate]
|
||
.filter(Boolean)
|
||
.join(' / ');
|
||
}
|
||
return [fields.studentNo, fields.phone, fields.oldRoom, fields.newRoom, fields.transferDate]
|
||
.filter(Boolean)
|
||
.join(' / ');
|
||
}
|
||
|
||
async function downloadErrorReport(runId: string, stepKey?: ImportStepKey): Promise<void> {
|
||
const token = useUserStore.getState().token;
|
||
const response = await fetch(importErrorReportUrl(runId, stepKey), {
|
||
headers: token ? { Authorization: `Bearer ${token}` } : undefined,
|
||
});
|
||
if (!response.ok) throw new Error('错误报告下载失败');
|
||
const blob = await response.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
const anchor = document.createElement('a');
|
||
anchor.href = url;
|
||
anchor.download = `导入错误报告-${runId.slice(0, 8)}.csv`;
|
||
anchor.click();
|
||
window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
|
||
}
|
||
|
||
export const ImportWizardModal: React.FC<ImportWizardModalProps> = ({
|
||
open,
|
||
runId: initialRunId,
|
||
onClose,
|
||
}) => {
|
||
const [run, setRun] = useState<ImportRunDetail | null>(null);
|
||
const [loadingRun, setLoadingRun] = useState(false);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [activeStepKey, setActiveStepKey] = useState<ImportStepKey | null>(null);
|
||
const [sheetSelection, setSheetSelection] = useState<Record<string, string[]>>({});
|
||
const [mappingDraft, setMappingDraft] = useState<Record<string, Record<string, string>>>({});
|
||
const [previewByStep, setPreviewByStep] = useState<Record<string, ImportPreviewResult>>({});
|
||
const [previewLoading, setPreviewLoading] = useState(false);
|
||
const [onlyErrors, setOnlyErrors] = useState(false);
|
||
const [rowActions, setRowActions] = useState<Record<number, RowAction>>({});
|
||
const [commitLoading, setCommitLoading] = useState(false);
|
||
const [receipt, setReceipt] = useState<ImportReceipt | null>(null);
|
||
const [reportDownloading, setReportDownloading] = useState(false);
|
||
const requestSeq = useRef(0);
|
||
|
||
const loadRun = useCallback(async (runId: string) => {
|
||
const seq = ++requestSeq.current;
|
||
setLoadingRun(true);
|
||
try {
|
||
const detail = await getImportRun(runId);
|
||
if (seq !== requestSeq.current) return;
|
||
setRun(detail);
|
||
const selections: Record<string, string[]> = {};
|
||
const mappings: Record<string, Record<string, string>> = {};
|
||
const sheetHeaders = new Map(detail.sheets.map((sheet) => [sheet.name, sheet.headers]));
|
||
for (const step of detail.steps) {
|
||
selections[step.stepKey] = step.sheets;
|
||
const mapped =
|
||
step.mapping && Object.keys(step.mapping).length > 0
|
||
? step.mapping
|
||
: guessMapping(step.stepKey, sheetHeaders.get(step.sheets[0] ?? '') ?? []);
|
||
mappings[step.stepKey] = mapped;
|
||
}
|
||
setSheetSelection(selections);
|
||
setMappingDraft(mappings);
|
||
setPreviewByStep({});
|
||
setRowActions({});
|
||
setReceipt(null);
|
||
const firstActive =
|
||
detail.steps.find((step) => step.status !== 'skipped' && step.status !== 'committed') ??
|
||
detail.steps.find((step) => step.status !== 'skipped');
|
||
setActiveStepKey(firstActive?.stepKey ?? detail.currentStepKey);
|
||
} catch (error) {
|
||
if (seq !== requestSeq.current) return;
|
||
message.error(error instanceof Error ? error.message : '导入任务加载失败');
|
||
setRun(null);
|
||
} finally {
|
||
if (seq === requestSeq.current) setLoadingRun(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!open || !initialRunId) return;
|
||
void loadRun(initialRunId);
|
||
}, [open, initialRunId, loadRun]);
|
||
|
||
const activeStep = useMemo(
|
||
() => run?.steps.find((step) => step.stepKey === activeStepKey) ?? null,
|
||
[run, activeStepKey],
|
||
);
|
||
const preview = activeStepKey ? (previewByStep[activeStepKey] ?? null) : null;
|
||
|
||
const sheetOptions = useMemo(() => (run?.sheets ?? []).map((sheet) => sheet.name), [run]);
|
||
const headerOptions = useMemo(() => {
|
||
if (!run || !activeStepKey) return [];
|
||
const names = sheetSelection[activeStepKey] ?? [];
|
||
const headers = new Set<string>();
|
||
for (const sheet of run.sheets) {
|
||
if (names.includes(sheet.name)) sheet.headers.forEach((header) => headers.add(header));
|
||
}
|
||
return [...headers];
|
||
}, [run, activeStepKey, sheetSelection]);
|
||
|
||
const handleUpload: UploadProps['customRequest'] = async (options) => {
|
||
const file = options.file as File;
|
||
setUploading(true);
|
||
try {
|
||
const detail = await createImportRun(file, { source: 'manual' });
|
||
await loadRun(detail.id);
|
||
message.success(`已识别 ${detail.sheets.length} 个工作表`);
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '文件上传失败');
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
};
|
||
|
||
const handlePreview = async () => {
|
||
if (!run || !activeStepKey || !activeStep) return;
|
||
const mapping = mappingDraft[activeStepKey] ?? {};
|
||
const required = STEP_FIELDS[activeStepKey]
|
||
.filter((field) => field.required)
|
||
.map((field) => field.key);
|
||
const missing = required.filter((key) => !mapping[key]);
|
||
if (missing.length > 0) {
|
||
message.warning('请先完成必填列的映射');
|
||
return;
|
||
}
|
||
setPreviewLoading(true);
|
||
try {
|
||
const result = await previewImportStep(run.id, activeStepKey, {
|
||
sheets: sheetSelection[activeStepKey] ?? [],
|
||
mapping,
|
||
});
|
||
setPreviewByStep((prev) => ({ ...prev, [activeStepKey]: result }));
|
||
setRowActions({});
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '预览失败');
|
||
} finally {
|
||
setPreviewLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleCommit = async () => {
|
||
if (!run || !activeStepKey || !preview) return;
|
||
setCommitLoading(true);
|
||
try {
|
||
const decisions = preview.rows
|
||
.filter((row) => row.status === 'valid')
|
||
.map((row) => ({ rowId: row.id, action: rowActions[row.id] ?? row.action ?? 'create' }));
|
||
const result = await commitImportStep(run.id, activeStepKey, decisions);
|
||
setReceipt(result);
|
||
const refreshed = await getImportRun(run.id);
|
||
setRun(refreshed);
|
||
setPreviewByStep({});
|
||
setRowActions({});
|
||
if (result.nextStepKey) {
|
||
setActiveStepKey(result.nextStepKey);
|
||
const nextStep = refreshed.steps.find((step) => step.stepKey === result.nextStepKey);
|
||
setMappingDraft((prev) => ({
|
||
...prev,
|
||
[result.nextStepKey as string]: nextStep?.mapping ?? {},
|
||
}));
|
||
}
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '提交失败');
|
||
} finally {
|
||
setCommitLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleReupload = async (file: File) => {
|
||
if (!run || !activeStepKey) return;
|
||
setUploading(true);
|
||
try {
|
||
const detail = await createImportRun(file, {
|
||
source: 'manual',
|
||
stages: [{ stepKey: activeStepKey, sheet: sheetSelection[activeStepKey]?.[0] }],
|
||
mapping: { [activeStepKey]: mappingDraft[activeStepKey] ?? {} },
|
||
});
|
||
await loadRun(detail.id);
|
||
message.success('已重新上传，并保留原列映射');
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : '重新上传失败');
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
};
|
||
|
||
const previewRows = useMemo(() => {
|
||
if (!preview) return [];
|
||
return onlyErrors ? preview.rows.filter((row) => row.status === 'error') : preview.rows;
|
||
}, [preview, onlyErrors]);
|
||
|
||
const columns = useMemo(() => {
|
||
if (!activeStepKey) return [];
|
||
return [
|
||
{ title: '行号', dataIndex: 'rowNumber', width: 70 },
|
||
{ title: '工作表', dataIndex: 'sheetName', width: 120, ellipsis: true },
|
||
{
|
||
title: '数据',
|
||
key: 'data',
|
||
render: (_: unknown, row: ImportPreviewResult['rows'][number]) =>
|
||
keyInfo(activeStepKey, row),
|
||
},
|
||
{
|
||
title: '判定',
|
||
key: 'action',
|
||
width: 90,
|
||
render: (_: unknown, row: ImportPreviewResult['rows'][number]) => {
|
||
const action = rowActions[row.id] ?? row.action;
|
||
return action ? (
|
||
<Tag color={ACTION_META[action].color}>{ACTION_META[action].label}</Tag>
|
||
) : (
|
||
'-'
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '状态',
|
||
key: 'status',
|
||
width: 90,
|
||
render: (_: unknown, row: ImportPreviewResult['rows'][number]) =>
|
||
row.status === 'error' ? (
|
||
<Tag color="red" icon={<CloseCircleOutlined />}>
|
||
错误
|
||
</Tag>
|
||
) : (
|
||
<Tag color="green" icon={<CheckCircleOutlined />}>
|
||
有效
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '错误信息',
|
||
key: 'errors',
|
||
ellipsis: true,
|
||
render: (_: unknown, row: ImportPreviewResult['rows'][number]) =>
|
||
row.errors.length > 0 ? (
|
||
<Tooltip title={row.errors.join('；')}>
|
||
<Typography.Text type="danger" style={{ maxWidth: 320 }}>
|
||
{row.errors.join('；')}
|
||
</Typography.Text>
|
||
</Tooltip>
|
||
) : null,
|
||
},
|
||
{
|
||
title: '处理方式',
|
||
key: 'decision',
|
||
width: 120,
|
||
render: (_: unknown, row: ImportPreviewResult['rows'][number]) =>
|
||
row.status === 'valid' ? (
|
||
<Select
|
||
size="small"
|
||
value={rowActions[row.id] ?? row.action ?? 'create'}
|
||
options={
|
||
row.action === 'update'
|
||
? [
|
||
{ value: 'update', label: '更新' },
|
||
{ value: 'skip', label: '跳过' },
|
||
]
|
||
: [
|
||
{ value: 'create', label: '新建' },
|
||
{ value: 'skip', label: '跳过' },
|
||
]
|
||
}
|
||
onChange={(value: RowAction) =>
|
||
setRowActions((prev) => ({ ...prev, [row.id]: value }))
|
||
}
|
||
/>
|
||
) : null,
|
||
},
|
||
];
|
||
}, [activeStepKey, rowActions]);
|
||
|
||
const stageItems = useMemo(
|
||
() =>
|
||
(run?.steps ?? [])
|
||
.filter((step) => step.status !== 'skipped')
|
||
.map((step) => ({
|
||
key: step.stepKey,
|
||
title: step.label,
|
||
status:
|
||
step.status === 'committed'
|
||
? ('finish' as const)
|
||
: step.stepKey === activeStepKey
|
||
? ('process' as const)
|
||
: ('wait' as const),
|
||
})),
|
||
[run, activeStepKey],
|
||
);
|
||
|
||
const allCommitted = run?.status === 'committed';
|
||
|
||
return (
|
||
<Modal
|
||
open={open}
|
||
onCancel={onClose}
|
||
footer={null}
|
||
width={980}
|
||
title="Excel 批量导入向导"
|
||
destroyOnHidden={false}
|
||
>
|
||
{!run && !loadingRun ? (
|
||
<Space orientation="vertical" size={16} style={{ width: '100%' }}>
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
message="上传 Excel 后，系统会自动识别工作表并按业务依赖分阶段（学生/宿舍 → 入住/换宿）。每一阶段都需要先预览、再确认，确认后才会写入数据库。"
|
||
/>
|
||
<Upload.Dragger
|
||
accept=".xlsx,.csv"
|
||
maxCount={1}
|
||
showUploadList={false}
|
||
disabled={uploading}
|
||
customRequest={handleUpload}
|
||
>
|
||
<p className="ant-upload-drag-icon">
|
||
<InboxOutlined />
|
||
</p>
|
||
<p className="ant-upload-text">点击或拖拽 .xlsx / .csv 文件到此区域</p>
|
||
<p className="ant-upload-hint">单文件不超过 10MB；.xls 请先另存为 .xlsx</p>
|
||
</Upload.Dragger>
|
||
</Space>
|
||
) : (
|
||
<Space orientation="vertical" size={16} style={{ width: '100%' }}>
|
||
<Flex justify="space-between" align="center" wrap gap={8}>
|
||
<Space wrap>
|
||
<Typography.Text strong>{run?.fileName}</Typography.Text>
|
||
<Tag color={allCommitted ? 'success' : 'processing'}>
|
||
{allCommitted ? '已完成' : '待处理'}
|
||
</Tag>
|
||
<Tag>当前阶段：{activeStep?.label ?? '—'}</Tag>
|
||
</Space>
|
||
<Space>
|
||
{preview && preview.summary.error > 0 && (
|
||
<Button
|
||
size="small"
|
||
icon={<DownloadOutlined />}
|
||
loading={reportDownloading}
|
||
onClick={() => {
|
||
setReportDownloading(true);
|
||
void downloadErrorReport(run?.id ?? '', activeStepKey ?? undefined)
|
||
.then(() => message.success('错误报告已下载'))
|
||
.catch((error: unknown) =>
|
||
message.error(error instanceof Error ? error.message : '下载失败'),
|
||
)
|
||
.finally(() => setReportDownloading(false));
|
||
}}
|
||
>
|
||
下载错误报告
|
||
</Button>
|
||
)}
|
||
<Button size="small" onClick={onClose}>
|
||
关闭
|
||
</Button>
|
||
</Space>
|
||
</Flex>
|
||
|
||
<Steps
|
||
size="small"
|
||
items={stageItems}
|
||
onChange={(index) => {
|
||
const step = (run?.steps ?? []).filter((s) => s.status !== 'skipped')[index];
|
||
if (step) setActiveStepKey(step.stepKey);
|
||
}}
|
||
/>
|
||
|
||
{loadingRun ? (
|
||
<Flex justify="center" style={{ padding: 32 }}>
|
||
<Spin description="正在加载导入任务..." />
|
||
</Flex>
|
||
) : allCommitted ? (
|
||
<Space orientation="vertical" size={12} style={{ width: '100%' }}>
|
||
<Alert type="success" showIcon message="全部阶段已提交完成" />
|
||
<Descriptions
|
||
bordered
|
||
size="small"
|
||
column={2}
|
||
items={(run?.steps ?? [])
|
||
.filter((step) => step.status !== 'skipped')
|
||
.map((step) => ({
|
||
key: step.stepKey,
|
||
label: step.label,
|
||
children: step.summary
|
||
? `新建 ${step.summary.create} / 更新 ${step.summary.update} / 跳过 ${step.summary.skip} / 失败 ${step.summary.error}`
|
||
: '—',
|
||
}))}
|
||
/>
|
||
<Button type="primary" onClick={onClose}>
|
||
完成
|
||
</Button>
|
||
</Space>
|
||
) : activeStep ? (
|
||
<Space orientation="vertical" size={12} style={{ width: '100%' }}>
|
||
{receipt && (
|
||
<Alert
|
||
type={receipt.status === 'committed' ? 'success' : 'warning'}
|
||
showIcon
|
||
title={receipt.message}
|
||
closable
|
||
onClose={() => setReceipt(null)}
|
||
/>
|
||
)}
|
||
{activeStep.status === 'committed' ? (
|
||
<Alert
|
||
type="success"
|
||
showIcon
|
||
title={`「${activeStep.label}」已提交`}
|
||
description={
|
||
activeStep.summary
|
||
? `新建 ${activeStep.summary.create} / 更新 ${activeStep.summary.update} / 跳过 ${activeStep.summary.skip} / 失败 ${activeStep.summary.error}`
|
||
: undefined
|
||
}
|
||
/>
|
||
) : preview ? (
|
||
<Space orientation="vertical" size={12} style={{ width: '100%' }}>
|
||
<Flex wrap gap={12} align="center">
|
||
<Space size={4}>
|
||
<Tag color="blue">共 {preview.summary.total} 行</Tag>
|
||
<Tag color="green">有效 {preview.summary.valid}</Tag>
|
||
<Tag color="red">错误 {preview.summary.error}</Tag>
|
||
<Tag color="blue">新建 {preview.summary.create}</Tag>
|
||
<Tag color="orange">更新 {preview.summary.update}</Tag>
|
||
</Space>
|
||
<Checkbox
|
||
checked={onlyErrors}
|
||
onChange={(e) => setOnlyErrors(e.target.checked)}
|
||
>
|
||
只看错误行
|
||
</Checkbox>
|
||
</Flex>
|
||
<Table
|
||
size="small"
|
||
rowKey="id"
|
||
columns={columns}
|
||
dataSource={previewRows}
|
||
pagination={{ pageSize: 10, showSizeChanger: false }}
|
||
scroll={{ x: 900 }}
|
||
/>
|
||
<Flex justify="end" gap={8}>
|
||
<Upload
|
||
accept=".xlsx,.csv"
|
||
showUploadList={false}
|
||
beforeUpload={(file) => {
|
||
void handleReupload(file);
|
||
return false;
|
||
}}
|
||
>
|
||
<Button icon={<ReloadOutlined />} loading={uploading}>
|
||
重新上传并保留映射
|
||
</Button>
|
||
</Upload>
|
||
<Button
|
||
type="primary"
|
||
icon={<StepForwardOutlined />}
|
||
loading={commitLoading}
|
||
onClick={() => void handleCommit()}
|
||
>
|
||
确认提交本阶段
|
||
</Button>
|
||
</Flex>
|
||
</Space>
|
||
) : (
|
||
<Space orientation="vertical" size={12} style={{ width: '100%' }}>
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
title={`配置「${activeStep.label}」阶段`}
|
||
description="选择该阶段使用的工作表，并确认列映射；系统会按“学号/手机号/宿舍号”自动区分新建或更新。"
|
||
/>
|
||
<Flex align="center" gap={8}>
|
||
<Typography.Text style={{ width: 120 }}>工作表</Typography.Text>
|
||
<Select
|
||
mode="multiple"
|
||
style={{ minWidth: 320, flex: 1 }}
|
||
placeholder="选择该阶段的工作表"
|
||
value={sheetSelection[activeStepKey ?? ''] ?? []}
|
||
options={sheetOptions.map((name) => ({ value: name, label: name }))}
|
||
onChange={(values: string[]) =>
|
||
setSheetSelection((prev) => ({
|
||
...prev,
|
||
[activeStepKey ?? '']: values,
|
||
}))
|
||
}
|
||
/>
|
||
</Flex>
|
||
{STEP_FIELDS[activeStep.stepKey].map((field) => (
|
||
<Flex key={field.key} align="center" gap={8}>
|
||
<Typography.Text style={{ width: 120 }}>
|
||
{field.label}
|
||
{field.required ? <span style={{ color: '#ff4d4f' }}> *</span> : null}
|
||
{field.identity ? <Tag style={{ marginLeft: 4 }}>匹配键</Tag> : null}
|
||
</Typography.Text>
|
||
<Select
|
||
allowClear
|
||
showSearch
|
||
style={{ minWidth: 320, flex: 1 }}
|
||
placeholder="选择对应列（留空则自动识别）"
|
||
value={mappingDraft[activeStepKey ?? '']?.[field.key]}
|
||
options={headerOptions.map((header) => ({ value: header, label: header }))}
|
||
onChange={(value?: string) =>
|
||
setMappingDraft((prev) => {
|
||
const current = { ...prev[activeStepKey ?? ''] };
|
||
if (value) current[field.key] = value;
|
||
else delete current[field.key];
|
||
return { ...prev, [activeStepKey ?? '']: current };
|
||
})
|
||
}
|
||
/>
|
||
</Flex>
|
||
))}
|
||
<Flex justify="end">
|
||
<Button
|
||
type="primary"
|
||
loading={previewLoading}
|
||
onClick={() => void handlePreview()}
|
||
>
|
||
开始校验预览
|
||
</Button>
|
||
</Flex>
|
||
</Space>
|
||
)}
|
||
</Space>
|
||
) : (
|
||
<Alert type="warning" showIcon message="当前没有可处理的阶段" />
|
||
)}
|
||
</Space>
|
||
)}
|
||
</Modal>
|
||
);
|
||
};
|