ENCOA-281
This commit is contained in:
Carlos-Mesquita
77
src/components/UserImportSummary/ExcelError.tsx
Normal file
77
src/components/UserImportSummary/ExcelError.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { FiAlertCircle } from "react-icons/fi";
|
||||
import Dropdown from '../Dropdown';
|
||||
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
|
||||
|
||||
const ParseExcelErrors: React.FC<{ errors: ExcelError[] }> = (props) => {
|
||||
const errorsByRow = errorsByRows(props.errors);
|
||||
|
||||
const ErrorTitle = (row: string) => (
|
||||
<div className="flex gap-2 items-center w-full">
|
||||
<FiAlertCircle className="text-red-500 h-5 w-5" />
|
||||
<h3 className="text-sm font-medium text-red-800">
|
||||
Errors found in row {row}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{Object.entries(errorsByRow).map(([row, rowErrors]) => (
|
||||
<div key={`row-${row}`} className="bg-red-50 rounded-lg">
|
||||
<Dropdown
|
||||
customTitle={ErrorTitle(row)}
|
||||
className="w-full text-left font-semibold flex justify-between items-center p-4"
|
||||
contentWrapperClassName="px-4 pb-4"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{rowErrors.required.length > 0 && (
|
||||
<div className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors">
|
||||
<div className="font-medium">
|
||||
Missing values:
|
||||
</div>
|
||||
<div className="text-red-600 mt-1 ml-2">
|
||||
<span>
|
||||
On columns:
|
||||
</span>
|
||||
<span className="font-mono bg-red-100/50 px-1 rounded">
|
||||
{rowErrors.required.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rowErrors.other.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{rowErrors.other.map((error, index) => (
|
||||
<div
|
||||
key={`validation-${index}`}
|
||||
className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors"
|
||||
>
|
||||
<div className="font-medium">
|
||||
{error.error}:
|
||||
</div>
|
||||
<div className="text-red-600 mt-1 ml-2">
|
||||
Value
|
||||
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
|
||||
{error.value}
|
||||
</span>
|
||||
in column
|
||||
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
|
||||
{error.column}
|
||||
</span>
|
||||
is invalid!
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParseExcelErrors;
|
||||
298
src/components/UserImportSummary/index.tsx
Normal file
298
src/components/UserImportSummary/index.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
FaCheckCircle,
|
||||
FaTimesCircle,
|
||||
FaExclamationCircle,
|
||||
FaInfoCircle,
|
||||
FaUsers,
|
||||
FaExclamationTriangle
|
||||
} from 'react-icons/fa';
|
||||
import { UserImport } from '@/interfaces/IUserImport';
|
||||
import Modal from '../Modal';
|
||||
import ParseExcelErrors from './ExcelError';
|
||||
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
|
||||
import UserTable from '../UserTable';
|
||||
|
||||
interface Props {
|
||||
parsedExcel: { rows?: any[]; errors?: any[] },
|
||||
newUsers: UserImport[],
|
||||
enlistedUsers: UserImport[],
|
||||
duplicateRows?: { duplicates: DuplicatesMap, count: number }
|
||||
}
|
||||
|
||||
export interface DuplicatesMap {
|
||||
studentID: Map<string, number[]>;
|
||||
email: Map<string, number[]>;
|
||||
passport_id: Map<string, number[]>;
|
||||
phone: Map<string, number[]>;
|
||||
}
|
||||
|
||||
interface ClassroomCounts {
|
||||
[key: string]: number;
|
||||
}
|
||||
|
||||
|
||||
const UserImportSummary: React.FC<Props> = ({ parsedExcel, newUsers, enlistedUsers, duplicateRows }) => {
|
||||
const [showErrorsModal, setShowErrorsModal] = useState(false);
|
||||
const [showDuplicatesModal, setShowDuplicatesModal] = useState(false);
|
||||
const [showEnlistedModal, setShowEnlistedModal] = useState(false);
|
||||
const [showClassroomModal, setShowClassromModal] = useState(false);
|
||||
|
||||
const classroomCounts = useMemo(() => {
|
||||
return newUsers.reduce((acc: ClassroomCounts, user) => {
|
||||
const group = user.groupName;
|
||||
acc[group] = (acc[group] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
}, [newUsers]);
|
||||
|
||||
const errorCount = Object.entries(errorsByRows(parsedExcel.errors as ExcelError[])).length || 0;
|
||||
|
||||
const fieldMapper = {
|
||||
"studentID": "Student ID",
|
||||
"passport_id": "Passport/National ID",
|
||||
"phone": "Phone Number",
|
||||
"email": "E-mail"
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className='flex justify-center font-semibold text-xl'>Import Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaInfoCircle className="h-5 w-5 text-blue-500" />
|
||||
<span>
|
||||
{`${parsedExcel.rows?.length} total spreadsheet rows`}
|
||||
{parsedExcel.rows && parsedExcel.rows.filter(row => row === null).length > 0 && (
|
||||
<span className="text-gray-500">
|
||||
{` (${parsedExcel.rows.filter(row => row === null).length} empty)`}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{newUsers.length > 0 ? (
|
||||
<FaCheckCircle className="h-5 w-5 text-green-500" />
|
||||
) : (
|
||||
<FaTimesCircle className="h-5 w-5 text-red-500" />
|
||||
)}
|
||||
<span>{`${newUsers.length} new user${newUsers.length > 1 ? "s" : ''} to import`}</span>
|
||||
</div>
|
||||
{newUsers.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowClassromModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View by classroom
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{enlistedUsers.length > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaUsers className="h-5 w-5 text-blue-500" />
|
||||
<span>{`${enlistedUsers.length} already registered user${enlistedUsers.length > 1 ? "s" : ''}`}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowEnlistedModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View details
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(duplicateRows && duplicateRows.count > 0) && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaExclamationCircle className="h-5 w-5 text-yellow-500" />
|
||||
<span>{duplicateRows.count} duplicate entries in file</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowDuplicatesModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View duplicates
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errorCount > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaTimesCircle className="h-5 w-5 text-red-500" />
|
||||
<span>{errorCount} invalid rows</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowErrorsModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View errors
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(enlistedUsers.length > 0 || (duplicateRows && duplicateRows.count > 0) || errorCount > 0) && (
|
||||
<div className="mt-6 rounded-lg border border-red-100 bg-white p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="mt-1">
|
||||
<FaExclamationTriangle className="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-3">
|
||||
<p className="font-medium text-gray-900">
|
||||
The following will be excluded from import:
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{duplicateRows && duplicateRows.count > 0 && (
|
||||
<li>
|
||||
<div className="text-gray-700">
|
||||
<span className="font-medium">{duplicateRows.count}</span> rows with duplicate values
|
||||
</div>
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
|
||||
const duplicates = Array.from(duplicateRows.duplicates[field].entries())
|
||||
.filter((entry) => entry[1].length > 1);
|
||||
if (duplicates.length === 0) return null;
|
||||
return (
|
||||
<div key={field} className="ml-4 text-sm text-gray-600">
|
||||
<span className="text-gray-500">{field}:</span> rows {
|
||||
duplicates.map(([_, rows]) => rows.join(', ')).join('; ')
|
||||
}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{errorCount > 0 && (
|
||||
<li>
|
||||
<div className="text-gray-700">
|
||||
<span className="font-medium">{errorCount}</span> rows with invalid or missing information
|
||||
</div>
|
||||
<div className="mt-1 ml-4 text-sm text-gray-600">
|
||||
Rows: {Object.keys(errorsByRows(parsedExcel.errors || [])).join(', ')}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Modal isOpen={showErrorsModal} onClose={() => setShowErrorsModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaTimesCircle className="w-5 h-5 text-red-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Validation Errors</h2>
|
||||
</div>
|
||||
<ParseExcelErrors errors={parsedExcel.errors!} />
|
||||
</>
|
||||
</Modal>
|
||||
|
||||
<Modal isOpen={showEnlistedModal} onClose={() => setShowEnlistedModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaUsers className="w-5 h-5 text-blue-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Already Registered Users</h2>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<UserTable users={enlistedUsers} />
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
|
||||
<Modal isOpen={showDuplicatesModal} onClose={() => setShowDuplicatesModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaExclamationCircle className="w-5 h-5 text-amber-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Duplicate Entries</h2>
|
||||
</div>
|
||||
{duplicateRows &&
|
||||
< div className="space-y-6">
|
||||
{(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
|
||||
const duplicates = Array.from(duplicateRows!.duplicates[field].entries())
|
||||
.filter((entry): entry is [string, number[]] => entry[1].length > 1);
|
||||
|
||||
if (duplicates.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={field} className="relative">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h2 className="text-md font-medium text-gray-700">
|
||||
{fieldMapper[field]} duplicates
|
||||
</h2>
|
||||
<span className="text-xs text-gray-500 ml-auto">
|
||||
{duplicates.length} {duplicates.length === 1 ? 'duplicate' : 'duplicates'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{duplicates.map(([value, rows]) => (
|
||||
<div
|
||||
key={value}
|
||||
className="group relative rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">{value}</span>
|
||||
<div className="mt-1 text-sm text-gray-600">
|
||||
Appears in rows:
|
||||
<span className="ml-1 text-blue-600 font-medium">
|
||||
{rows.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">
|
||||
{rows.length} occurrences
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
</Modal >
|
||||
|
||||
<Modal isOpen={showClassroomModal} onClose={() => setShowClassromModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaCheckCircle className="w-5 h-5 text-green-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Students by Classroom</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(classroomCounts).map(([classroom, count]) => (
|
||||
<div
|
||||
key={classroom}
|
||||
className="flex justify-between items-center rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-700">{classroom}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-medium text-gray-900">{count}</span>
|
||||
<span className="text-sm text-gray-500">students</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserImportSummary;
|
||||
Reference in New Issue
Block a user