fix(workspaces): streamline member import modal
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
import { Fragment, useMemo, useRef, useState } from "react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { AlertCircle, CheckCircle2, Download, FileSpreadsheet, UploadCloud, XCircle } from "lucide-react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { AlertCircle, CheckCircle2, Download, FileSpreadsheet, HelpCircle, Loader2, UploadCloud, XCircle } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
@@ -12,6 +11,7 @@ import {
|
||||
type WorkspaceMemberImportValidationResponse,
|
||||
} from "../../api/workspaces";
|
||||
import type { PriceUnit } from "../../api/rates";
|
||||
import { Modal } from "../Modal";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
type ImportLabels = {
|
||||
@@ -45,6 +45,21 @@ type ImportLabels = {
|
||||
invalid?: string;
|
||||
noRows?: string;
|
||||
localErrors?: string;
|
||||
helpTitle?: string;
|
||||
helpDescription?: string;
|
||||
helpCurrencyTitle?: string;
|
||||
helpRolesTitle?: string;
|
||||
roleAdminDescription?: string;
|
||||
roleMemberDescription?: string;
|
||||
roleGuestDescription?: string;
|
||||
helpMobilePrefix?: string;
|
||||
helpMobileSuffix?: string;
|
||||
helpRolePrefix?: string;
|
||||
helpRoleSuffix?: string;
|
||||
helpRatePrefix?: string;
|
||||
helpRateMiddle?: string;
|
||||
helpRateSuffix?: string;
|
||||
helpSamplesTitle?: string;
|
||||
success?: string;
|
||||
parseFailed?: string;
|
||||
missingMobile?: string;
|
||||
@@ -53,11 +68,10 @@ type ImportLabels = {
|
||||
invalidRate?: string;
|
||||
rateCurrencyPair?: string;
|
||||
tooManyRows?: string;
|
||||
messageMap?: Record<string, string>;
|
||||
};
|
||||
|
||||
type ParsedRow = WorkspaceMemberImportRowInput & {
|
||||
local_messages: string[];
|
||||
};
|
||||
type ParsedRow = WorkspaceMemberImportRowInput;
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
@@ -68,8 +82,6 @@ type Props = {
|
||||
onImported: () => void | Promise<void>;
|
||||
};
|
||||
|
||||
const MAX_ROWS = 500;
|
||||
const ROLE_VALUES = new Set(["admin", "member", "guest"]);
|
||||
const DIGIT_MAP: Record<string, string> = {
|
||||
"۰": "0",
|
||||
"۱": "1",
|
||||
@@ -176,46 +188,21 @@ const tableRowsToObjects = (rows: string[][]) => {
|
||||
});
|
||||
};
|
||||
|
||||
const buildParsedRows = (records: Array<{ line: number; record: Record<string, string> }>, labels: ImportLabels) => {
|
||||
const seenMobiles = new Set<string>();
|
||||
const buildParsedRows = (records: Array<{ line: number; record: Record<string, string> }>) => {
|
||||
return records
|
||||
.filter(({ record }) => Object.values(record).some((value) => String(value || "").trim()))
|
||||
.map(({ line, record }) => {
|
||||
const mobile = normalizeDigits(record.mobile);
|
||||
const role = normalizeDigits(record.role || "member").toLowerCase() as ParsedRow["role"];
|
||||
const role = normalizeDigits(record.role || "member").toLowerCase();
|
||||
const hourlyRate = normalizeDigits(record.hourly_rate);
|
||||
const currency = normalizeDigits(record.currency).toUpperCase();
|
||||
const localMessages: string[] = [];
|
||||
|
||||
if (!mobile) {
|
||||
localMessages.push(labels.missingMobile || "Mobile is required.");
|
||||
} else if (seenMobiles.has(mobile)) {
|
||||
localMessages.push(labels.duplicateMobile || "This mobile appears more than once.");
|
||||
} else {
|
||||
seenMobiles.add(mobile);
|
||||
}
|
||||
|
||||
if (!ROLE_VALUES.has(role || "member")) {
|
||||
localMessages.push(labels.invalidRole || "Role must be admin, member, or guest.");
|
||||
}
|
||||
|
||||
if (hourlyRate && Number.isNaN(Number(hourlyRate.replace(/,/g, "")))) {
|
||||
localMessages.push(labels.invalidRate || "Hourly rate must be a valid number.");
|
||||
}
|
||||
if (hourlyRate && Number(hourlyRate.replace(/,/g, "")) <= 0) {
|
||||
localMessages.push(labels.invalidRate || "Hourly rate must be greater than zero.");
|
||||
}
|
||||
if (Boolean(hourlyRate) !== Boolean(currency)) {
|
||||
localMessages.push(labels.rateCurrencyPair || "Hourly rate and currency must be provided together.");
|
||||
}
|
||||
|
||||
return {
|
||||
line,
|
||||
mobile,
|
||||
role: ROLE_VALUES.has(role || "") ? role : "member",
|
||||
role: (role || "member") as ParsedRow["role"],
|
||||
hourly_rate: hourlyRate ? hourlyRate.replace(/,/g, "") : "",
|
||||
currency,
|
||||
local_messages: localMessages,
|
||||
};
|
||||
});
|
||||
};
|
||||
@@ -237,6 +224,12 @@ const sampleRows = [
|
||||
["09999999998", "guest", "", ""],
|
||||
];
|
||||
|
||||
const ColumnCode = ({ children }: { children: string }) => (
|
||||
<code className="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs font-semibold text-slate-800 dark:bg-slate-800 dark:text-slate-100">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
|
||||
export function WorkspaceMemberImportModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
@@ -252,15 +245,15 @@ export function WorkspaceMemberImportModal({
|
||||
const [validation, setValidation] = useState<WorkspaceMemberImportValidationResponse | null>(null);
|
||||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isHelpOpen, setIsHelpOpen] = useState(false);
|
||||
|
||||
const localInvalidCount = parsedRows.filter((row) => row.local_messages.length > 0).length;
|
||||
const canValidate = parsedRows.length > 0 && localInvalidCount === 0 && !isValidating;
|
||||
const canCommit = Boolean(validation?.can_commit && validation.import_token) && !isImporting;
|
||||
const currencyColumns = useMemo(() => {
|
||||
const splitIndex = Math.ceil(priceUnits.length / 2);
|
||||
return [priceUnits.slice(0, splitIndex), priceUnits.slice(splitIndex)].filter((items) => items.length);
|
||||
}, [priceUnits]);
|
||||
|
||||
const currencyCodes = useMemo(
|
||||
() => priceUnits.map((unit) => unit.code).filter(Boolean).join(", "),
|
||||
[priceUnits],
|
||||
);
|
||||
const translateMessage = (message: string) => labels.messageMap?.[message] || message;
|
||||
|
||||
const reset = () => {
|
||||
setFileName("");
|
||||
@@ -269,6 +262,7 @@ export function WorkspaceMemberImportModal({
|
||||
setValidation(null);
|
||||
setIsValidating(false);
|
||||
setIsImporting(false);
|
||||
setIsHelpOpen(false);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
@@ -279,6 +273,22 @@ export function WorkspaceMemberImportModal({
|
||||
onClose();
|
||||
};
|
||||
|
||||
const validateRows = async (rows: ParsedRow[]) => {
|
||||
setIsValidating(true);
|
||||
setValidation(null);
|
||||
try {
|
||||
const response = await validateWorkspaceMemberImport({
|
||||
workspace: workspaceId,
|
||||
rows,
|
||||
});
|
||||
setValidation(response);
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : labels.parseFailed || "Failed to validate member import");
|
||||
} finally {
|
||||
setIsValidating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const parseFile = async (file: File) => {
|
||||
setParseError("");
|
||||
setValidation(null);
|
||||
@@ -300,21 +310,9 @@ export function WorkspaceMemberImportModal({
|
||||
throw new Error("Unsupported file type.");
|
||||
}
|
||||
|
||||
const hasMobileHeader = records.length > 0 && Object.prototype.hasOwnProperty.call(records[0].record, "mobile");
|
||||
if (!hasMobileHeader && records.length === 0) {
|
||||
throw new Error(labels.noRows || "No rows were found in this file.");
|
||||
}
|
||||
if (!hasMobileHeader) {
|
||||
throw new Error(labels.missingMobile || "The file must include a mobile column.");
|
||||
}
|
||||
|
||||
const nextRows = buildParsedRows(records, labels);
|
||||
if (nextRows.length > MAX_ROWS) {
|
||||
setParseError(labels.tooManyRows || `Import is limited to ${MAX_ROWS} rows.`);
|
||||
setParsedRows([]);
|
||||
return;
|
||||
}
|
||||
const nextRows = buildParsedRows(records);
|
||||
setParsedRows(nextRows);
|
||||
void validateRows(nextRows);
|
||||
} catch (error) {
|
||||
setParsedRows([]);
|
||||
setParseError(error instanceof Error ? error.message : labels.parseFailed || "Failed to parse the file.");
|
||||
@@ -328,22 +326,6 @@ export function WorkspaceMemberImportModal({
|
||||
}
|
||||
};
|
||||
|
||||
const handleValidate = async () => {
|
||||
setIsValidating(true);
|
||||
setValidation(null);
|
||||
try {
|
||||
const response = await validateWorkspaceMemberImport({
|
||||
workspace: workspaceId,
|
||||
rows: parsedRows.map(({ local_messages: _localMessages, ...row }) => row),
|
||||
});
|
||||
setValidation(response);
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : labels.parseFailed || "Failed to validate member import");
|
||||
} finally {
|
||||
setIsValidating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!validation?.import_token) return;
|
||||
setIsImporting(true);
|
||||
@@ -380,216 +362,253 @@ export function WorkspaceMemberImportModal({
|
||||
downloadBlob(new Blob([content], { type: "text/plain;charset=utf-8" }), `workspace-members-sample.${format}`);
|
||||
};
|
||||
|
||||
const displayedRows: WorkspaceMemberImportResultRow[] =
|
||||
validation?.rows ||
|
||||
parsedRows.map((row) => ({
|
||||
line: row.line,
|
||||
mobile: row.mobile,
|
||||
role: row.role || "member",
|
||||
hourly_rate: row.hourly_rate || "",
|
||||
currency: row.currency || "",
|
||||
status: row.local_messages.length ? "invalid" : "valid",
|
||||
action: row.local_messages.length ? "none" : "add_member",
|
||||
user: null,
|
||||
messages: row.local_messages,
|
||||
}));
|
||||
const displayedRows: WorkspaceMemberImportResultRow[] = validation?.rows || [];
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-slate-950/50 backdrop-blur-sm" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
maxWidth="max-w-6xl"
|
||||
title={labels.title || "Import members"}
|
||||
footer={
|
||||
<>
|
||||
<Button type="button" variant="secondary" onClick={handleClose}>
|
||||
{labels.close || "Close"}
|
||||
</Button>
|
||||
<Button type="button" disabled={!canCommit} onClick={handleImport}>
|
||||
{isImporting ? labels.importing || "Importing..." : labels.import || "Import members"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{labels.description ||
|
||||
"Upload a file with mobile, role, hourly_rate, and currency columns. Mobile is required; role defaults to member."}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsHelpOpen(true)}
|
||||
className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-slate-200 text-slate-500 transition hover:border-blue-300 hover:text-blue-600 dark:border-slate-700 dark:text-slate-400 dark:hover:border-blue-700 dark:hover:text-blue-300"
|
||||
aria-label={labels.helpTitle || "Import help"}
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-5xl overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950">
|
||||
<div className="border-b border-slate-200 px-6 py-5 dark:border-slate-800">
|
||||
<Dialog.Title className="text-lg font-semibold text-slate-950 dark:text-white">
|
||||
{labels.title || "Import members"}
|
||||
</Dialog.Title>
|
||||
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
||||
{labels.description ||
|
||||
"Upload a file with mobile, role, hourly_rate, and currency columns. Mobile is required; role defaults to member."}
|
||||
<HelpCircle className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-5 text-center dark:border-slate-700 dark:bg-slate-900/60">
|
||||
<UploadCloud className="mx-auto h-9 w-9 text-blue-500" />
|
||||
<h3 className="mt-3 text-sm font-semibold text-slate-900 dark:text-white">
|
||||
{labels.uploadTitle || "Upload file"}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">
|
||||
{labels.uploadDescription || "CSV, TSV, TXT, or XLSX. The first row must be headers."}
|
||||
</p>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".csv,.tsv,.txt,.xlsx"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<Button type="button" className="mt-4 gap-2" onClick={() => fileInputRef.current?.click()} disabled={isValidating}>
|
||||
{isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileSpreadsheet className="h-4 w-4" />}
|
||||
{isValidating ? labels.validating || "Validating..." : labels.chooseFile || "Choose file"}
|
||||
</Button>
|
||||
{fileName ? (
|
||||
<p className="mt-3 truncate text-xs text-slate-500 dark:text-slate-400">
|
||||
{(labels.selectedFile || "Selected file")}: {fileName}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{parseError ? (
|
||||
<div className="flex gap-2 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300">
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
{parseError}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl bg-slate-100 p-3 dark:bg-slate-900">
|
||||
<p className="text-xs text-slate-500">{labels.totalRows || "Total rows"}</p>
|
||||
<p className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
{validation?.summary.total ?? parsedRows.length}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 p-6 lg:grid-cols-[320px_minmax(0,1fr)]">
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-5 text-center dark:border-slate-700 dark:bg-slate-900/60">
|
||||
<UploadCloud className="mx-auto h-9 w-9 text-blue-500" />
|
||||
<h3 className="mt-3 text-sm font-semibold text-slate-900 dark:text-white">
|
||||
{labels.uploadTitle || "Upload file"}
|
||||
</h3>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">
|
||||
{labels.uploadDescription || "CSV, TSV, TXT, or XLSX. The first row must be headers."}
|
||||
</p>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".csv,.tsv,.txt,.xlsx"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<Button type="button" className="mt-4 gap-2" onClick={() => fileInputRef.current?.click()}>
|
||||
<FileSpreadsheet className="h-4 w-4" />
|
||||
{labels.chooseFile || "Choose file"}
|
||||
</Button>
|
||||
{fileName ? (
|
||||
<p className="mt-3 truncate text-xs text-slate-500 dark:text-slate-400">
|
||||
{(labels.selectedFile || "Selected file")}: {fileName}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-slate-200 p-4 dark:border-slate-800">
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
{labels.currency || "Currency"}: {currencyCodes || "-"}
|
||||
</p>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("csv")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleCsv || "CSV sample"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("tsv")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleTsv || "TSV sample"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("txt")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleTxt || "TXT sample"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("xlsx")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleXlsx || "XLSX sample"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{parseError ? (
|
||||
<div className="flex gap-2 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300">
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
{parseError}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl bg-slate-100 p-3 dark:bg-slate-900">
|
||||
<p className="text-xs text-slate-500">{labels.totalRows || "Total rows"}</p>
|
||||
<p className="text-lg font-semibold text-slate-900 dark:text-white">
|
||||
{validation?.summary.total ?? parsedRows.length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-emerald-50 p-3 dark:bg-emerald-950/30">
|
||||
<p className="text-xs text-emerald-700 dark:text-emerald-300">{labels.validRows || "Valid rows"}</p>
|
||||
<p className="text-lg font-semibold text-emerald-700 dark:text-emerald-300">
|
||||
{validation?.summary.valid ?? parsedRows.length - localInvalidCount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-red-50 p-3 dark:bg-red-950/30">
|
||||
<p className="text-xs text-red-700 dark:text-red-300">{labels.invalidRows || "Invalid rows"}</p>
|
||||
<p className="text-lg font-semibold text-red-700 dark:text-red-300">
|
||||
{validation?.summary.invalid ?? localInvalidCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{localInvalidCount > 0 && !validation ? (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-300">
|
||||
{labels.localErrors || "Fix local file errors before backend validation."}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="max-h-[440px] overflow-auto rounded-xl border border-slate-200 dark:border-slate-800">
|
||||
<table className="min-w-full divide-y divide-slate-200 text-sm dark:divide-slate-800">
|
||||
<thead className="sticky top-0 bg-slate-100 text-xs uppercase text-slate-500 dark:bg-slate-900 dark:text-slate-400">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-start">{labels.line || "Line"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.mobile || "Mobile"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.user || "User"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.role || "Role"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.hourlyRate || "Hourly rate"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.currency || "Currency"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.status || "Status"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.messages || "Messages"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
{displayedRows.length ? (
|
||||
displayedRows.map((row) => (
|
||||
<tr key={`${row.line}-${row.mobile}`} className="bg-white dark:bg-slate-950">
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.line ?? "-"}</td>
|
||||
<td className="px-3 py-2 font-medium text-slate-900 dark:text-white">{row.mobile || "-"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.user?.full_name || "-"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.role || "member"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.hourly_rate || "-"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.currency || "-"}</td>
|
||||
<td className="px-3 py-2">
|
||||
{row.status === "valid" ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
{labels.valid || "Valid"}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-500/15 dark:text-red-300">
|
||||
<XCircle className="h-3 w-3" />
|
||||
{labels.invalid || "Invalid"}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="min-w-[220px] px-3 py-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
{row.messages.length ? row.messages.join(" | ") : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-3 py-10 text-center text-slate-500 dark:text-slate-400">
|
||||
{labels.noRows || "No rows loaded yet."}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl bg-emerald-50 p-3 dark:bg-emerald-950/30">
|
||||
<p className="text-xs text-emerald-700 dark:text-emerald-300">{labels.validRows || "Valid rows"}</p>
|
||||
<p className="text-lg font-semibold text-emerald-700 dark:text-emerald-300">
|
||||
{validation?.summary.valid ?? 0}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800 sm:flex-row sm:justify-end">
|
||||
<Button type="button" variant="secondary" onClick={handleClose}>
|
||||
{labels.close || "Close"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" disabled={!canValidate} onClick={handleValidate}>
|
||||
{isValidating ? labels.validating || "Validating..." : labels.validate || "Validate file"}
|
||||
</Button>
|
||||
<Button type="button" disabled={!canCommit} onClick={handleImport}>
|
||||
{isImporting ? labels.importing || "Importing..." : labels.import || "Import members"}
|
||||
</Button>
|
||||
<div className="rounded-xl bg-red-50 p-3 dark:bg-red-950/30">
|
||||
<p className="text-xs text-red-700 dark:text-red-300">{labels.invalidRows || "Invalid rows"}</p>
|
||||
<p className="text-lg font-semibold text-red-700 dark:text-red-300">
|
||||
{validation?.summary.invalid ?? 0}
|
||||
</p>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
|
||||
{isValidating ? (
|
||||
<div className="flex items-center gap-2 rounded-xl border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700 dark:border-blue-900/60 dark:bg-blue-950/30 dark:text-blue-300">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{labels.validating || "Validating..."}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="max-h-[460px] overflow-auto rounded-xl border border-slate-200 dark:border-slate-800">
|
||||
<table className="min-w-full divide-y divide-slate-200 text-sm dark:divide-slate-800">
|
||||
<thead className="sticky top-0 bg-slate-100 text-xs uppercase text-slate-500 dark:bg-slate-900 dark:text-slate-400">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-start">{labels.line || "Line"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.mobile || "Mobile"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.user || "User"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.role || "Role"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.hourlyRate || "Hourly rate"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.currency || "Currency"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.status || "Status"}</th>
|
||||
<th className="px-3 py-2 text-start">{labels.messages || "Messages"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
{displayedRows.length ? (
|
||||
displayedRows.map((row) => (
|
||||
<tr key={`${row.line}-${row.mobile}`} className="bg-white dark:bg-slate-950">
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.line ?? "-"}</td>
|
||||
<td className="px-3 py-2 font-medium text-slate-900 dark:text-white">{row.mobile || "-"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.user?.full_name || "-"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.role || "member"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.hourly_rate || "-"}</td>
|
||||
<td className="px-3 py-2 text-slate-600 dark:text-slate-300">{row.currency || "-"}</td>
|
||||
<td className="px-3 py-2">
|
||||
{row.status === "valid" ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
{labels.valid || "Valid"}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-500/15 dark:text-red-300">
|
||||
<XCircle className="h-3 w-3" />
|
||||
{labels.invalid || "Invalid"}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="min-w-[220px] px-3 py-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
{row.messages.length ? row.messages.map(translateMessage).join(" | ") : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-3 py-10 text-center text-slate-500 dark:text-slate-400">
|
||||
{labels.noRows || "No rows loaded yet."}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
isOpen={isHelpOpen}
|
||||
onClose={() => setIsHelpOpen(false)}
|
||||
title={labels.helpTitle || "Import help"}
|
||||
maxWidth="max-w-lg"
|
||||
footer={
|
||||
<Button type="button" variant="secondary" onClick={() => setIsHelpOpen(false)}>
|
||||
{labels.close || "Close"}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="space-y-5 text-sm text-slate-600 dark:text-slate-300">
|
||||
<p>{labels.helpDescription || "Use these rules to prepare a valid member import file."}</p>
|
||||
<div>
|
||||
<h4 className="mb-2 font-semibold text-slate-900 dark:text-white">{labels.helpCurrencyTitle || "Currency options"}</h4>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{currencyColumns.map((units, columnIndex) => (
|
||||
<ul key={columnIndex} className="list-disc space-y-2 ps-5">
|
||||
{units.map((unit) => (
|
||||
<li key={unit.id || unit.code}>
|
||||
<ColumnCode>{unit.code}</ColumnCode>
|
||||
<span className="mx-1">:</span>
|
||||
<span>{unit.local_name || unit.name || unit.symbol || unit.code}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="mb-2 font-semibold text-slate-900 dark:text-white">{labels.helpRolesTitle || "Role options"}</h4>
|
||||
<ul className="list-disc space-y-2 ps-5">
|
||||
<li>
|
||||
<ColumnCode>admin</ColumnCode>
|
||||
<span className="mx-1">:</span>
|
||||
<span>{labels.roleAdminDescription || "Can manage workspace settings, members, projects, reports, and shared data."}</span>
|
||||
</li>
|
||||
<li>
|
||||
<ColumnCode>member</ColumnCode>
|
||||
<span className="mx-1">:</span>
|
||||
<span>{labels.roleMemberDescription || "Can use the workspace normally and record time for accessible projects."}</span>
|
||||
</li>
|
||||
<li>
|
||||
<ColumnCode>guest</ColumnCode>
|
||||
<span className="mx-1">:</span>
|
||||
<span>{labels.roleGuestDescription || "Has limited workspace access and can record time only where access is granted."}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul className="list-disc space-y-2 ps-5">
|
||||
<li>
|
||||
{labels.helpMobilePrefix || "Column"} <ColumnCode>mobile</ColumnCode>{" "}
|
||||
{labels.helpMobileSuffix || "is required and must belong to an existing registered user."}
|
||||
</li>
|
||||
<li>
|
||||
{labels.helpRolePrefix || "Column"} <ColumnCode>role</ColumnCode>{" "}
|
||||
{labels.helpRoleSuffix || "is optional. Empty role becomes member."}
|
||||
</li>
|
||||
<li>
|
||||
{labels.helpRatePrefix || "Columns"} <ColumnCode>hourly_rate</ColumnCode>{" "}
|
||||
{labels.helpRateMiddle || "and"} <ColumnCode>currency</ColumnCode>{" "}
|
||||
{labels.helpRateSuffix || "are optional, but must be filled together when used."}
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<h4 className="mb-2 font-semibold text-slate-900 dark:text-white">{labels.helpSamplesTitle || "Sample files"}</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("csv")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleCsv || "CSV sample"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("tsv")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleTsv || "TSV sample"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("txt")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleTxt || "TXT sample"}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" size="sm" className="gap-1" onClick={() => downloadSample("xlsx")}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{labels.sampleXlsx || "XLSX sample"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user