Wire Import and Audit Log pages, add Create User action
- Import page: schedule (XLSX/CSV) and entity import with dry-run toggle - Audit Log page: paginated, filterable by object type - Nav items now clickable (removed stubs) - StartOS Action: Create User with name/email/password/role inputs - Default first-boot creds: jonathan@ten31.xyz
This commit is contained in:
Johnny 5
@@ -1,4 +1,129 @@
|
||||
import { sdk } from '../sdk'
|
||||
|
||||
// No custom actions for v1. Config is handled at install time.
|
||||
export const actions = sdk.Actions.of()
|
||||
const { InputSpec, Value, Action } = sdk
|
||||
|
||||
// ============================================
|
||||
// Action: Create User
|
||||
// ============================================
|
||||
const createUserInputSpec = InputSpec.of({
|
||||
name: Value.text({
|
||||
name: 'Full Name',
|
||||
description: 'Display name for the user',
|
||||
default: '',
|
||||
required: true,
|
||||
placeholder: 'Jane Smith',
|
||||
}),
|
||||
email: Value.text({
|
||||
name: 'Email',
|
||||
description: 'Login email address',
|
||||
default: '',
|
||||
required: true,
|
||||
placeholder: 'jane@ten31.com',
|
||||
patterns: [
|
||||
{
|
||||
regex: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
|
||||
description: 'Must be a valid email address',
|
||||
},
|
||||
],
|
||||
}),
|
||||
password: Value.text({
|
||||
name: 'Password',
|
||||
description: 'Initial password (user should change after first login)',
|
||||
default: '',
|
||||
required: true,
|
||||
placeholder: 'minimum 4 characters',
|
||||
}),
|
||||
role: Value.select({
|
||||
name: 'Role',
|
||||
description:
|
||||
'approver: full access including sign-off. cfo: read + edit + submit. fund_admin: read + edit + submit. viewer: read only.',
|
||||
default: 'viewer',
|
||||
values: {
|
||||
approver: 'Approver',
|
||||
cfo: 'CFO',
|
||||
fund_admin: 'Fund Admin',
|
||||
viewer: 'Viewer',
|
||||
},
|
||||
}),
|
||||
})
|
||||
|
||||
const createUserAction = Action.withInput(
|
||||
'create-user',
|
||||
{
|
||||
name: 'Create User',
|
||||
description: 'Add a new user account with a role',
|
||||
warning: null,
|
||||
allowedStatuses: 'only-running',
|
||||
group: null,
|
||||
visibility: 'enabled',
|
||||
},
|
||||
createUserInputSpec,
|
||||
async () => ({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'viewer' as const,
|
||||
}),
|
||||
async ({ input, effects }) => {
|
||||
try {
|
||||
const sub = await sdk.SubContainer.of(
|
||||
effects,
|
||||
{ imageId: 'main' },
|
||||
sdk.Mounts.of().mountVolume({
|
||||
volumeId: 'main',
|
||||
subpath: null,
|
||||
mountpoint: '/data',
|
||||
readonly: false,
|
||||
}),
|
||||
'create-user-task',
|
||||
)
|
||||
|
||||
const result = await sub.exec(
|
||||
[
|
||||
'python3',
|
||||
'-m',
|
||||
'ten31portal.cli',
|
||||
'create-user',
|
||||
'--name',
|
||||
input.name,
|
||||
'--email',
|
||||
input.email,
|
||||
'--role',
|
||||
input.role,
|
||||
'--password',
|
||||
input.password,
|
||||
],
|
||||
{
|
||||
env: { TEN31_DB_PATH: '/data/portal.db' },
|
||||
},
|
||||
30000,
|
||||
)
|
||||
|
||||
if (result.exitCode !== 0) {
|
||||
const stderr = result.stderr?.toString() || 'Unknown error'
|
||||
return {
|
||||
version: '1' as const,
|
||||
title: 'Error',
|
||||
message: `Failed to create user: ${stderr}`,
|
||||
result: null,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
version: '1' as const,
|
||||
title: 'User Created',
|
||||
message: `Created user ${input.name} (${input.email}) with role: ${input.role}`,
|
||||
result: null,
|
||||
}
|
||||
} catch (e: any) {
|
||||
return {
|
||||
version: '1' as const,
|
||||
title: 'Error',
|
||||
message: `Failed to create user: ${e.message || e}`,
|
||||
result: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export const actions = sdk.Actions.of().addAction(createUserAction)
|
||||
|
||||
@@ -6,6 +6,8 @@ import EntitiesList from "./pages/EntitiesList";
|
||||
import EntityOverview from "./pages/EntityOverview";
|
||||
import Investments from "./pages/Investments";
|
||||
import ValuationWorkflow from "./pages/ValuationWorkflow";
|
||||
import Import from "./pages/Import";
|
||||
import AuditLog from "./pages/AuditLog";
|
||||
|
||||
function ProtectedRoutes() {
|
||||
const { user, loading } = useAuth();
|
||||
@@ -29,6 +31,8 @@ function ProtectedRoutes() {
|
||||
<Route path="/entities/:id" element={<EntityOverview />} />
|
||||
<Route path="/entities/:id/investments" element={<Investments />} />
|
||||
<Route path="/entities/:id/valuation" element={<ValuationWorkflow />} />
|
||||
<Route path="/import" element={<Import />} />
|
||||
<Route path="/audit" element={<AuditLog />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
|
||||
@@ -3,8 +3,8 @@ import { useAuth } from "../context/AuthContext";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ label: "Entities", path: "/" },
|
||||
{ label: "Import", path: "/import", stub: true },
|
||||
{ label: "Audit Log", path: "/audit", stub: true },
|
||||
{ label: "Import", path: "/import" },
|
||||
{ label: "Audit Log", path: "/audit" },
|
||||
];
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
@@ -25,22 +25,16 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
: location.pathname.startsWith(item.path);
|
||||
return (
|
||||
<li key={item.path}>
|
||||
{item.stub ? (
|
||||
<span className="block px-4 py-2 text-sm text-gray-400 cursor-not-allowed">
|
||||
{item.label}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`block px-4 py-2 text-sm ${
|
||||
active
|
||||
? "bg-orange-50 text-orange-600 border-r-2 border-orange-500 font-medium"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`block px-4 py-2 text-sm ${
|
||||
active
|
||||
? "bg-orange-50 text-orange-600 border-r-2 border-orange-500 font-medium"
|
||||
: "text-gray-700 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api, type AuditEntry } from "../api";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { formatDate } from "../format";
|
||||
|
||||
export default function AuditLog() {
|
||||
const { user } = useAuth();
|
||||
const [entries, setEntries] = useState<AuditEntry[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [filterType, setFilterType] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const canView = user && ["approver", "cfo"].includes(user.role);
|
||||
|
||||
useEffect(() => {
|
||||
if (!canView) return;
|
||||
loadData();
|
||||
}, [page, filterType]);
|
||||
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params: any = { page };
|
||||
if (filterType) params.object_type = filterType;
|
||||
const data = await api.listAudit(params);
|
||||
setEntries(data);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!canView) {
|
||||
return (
|
||||
<div className="text-gray-500 text-sm">
|
||||
Audit log requires approver or CFO role.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ACTION_COLORS: Record<string, string> = {
|
||||
create: "bg-green-100 text-green-700",
|
||||
update: "bg-blue-100 text-blue-700",
|
||||
delete: "bg-red-100 text-red-600",
|
||||
submit: "bg-yellow-100 text-yellow-700",
|
||||
approve: "bg-green-100 text-green-700",
|
||||
return: "bg-red-100 text-red-600",
|
||||
update_valuations: "bg-blue-100 text-blue-700",
|
||||
import_entities: "bg-purple-100 text-purple-700",
|
||||
import_schedule: "bg-purple-100 text-purple-700",
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-900 mb-6">Audit Log</h1>
|
||||
|
||||
{/* Filter */}
|
||||
<div className="mb-4 flex gap-3 items-center">
|
||||
<label className="text-sm text-gray-600">Filter by type:</label>
|
||||
<select
|
||||
value={filterType}
|
||||
onChange={(e) => { setFilterType(e.target.value); setPage(1); }}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded text-sm"
|
||||
>
|
||||
<option value="">All</option>
|
||||
<option value="entity">Entity</option>
|
||||
<option value="holding">Holding</option>
|
||||
<option value="position">Position</option>
|
||||
<option value="round">Round</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-gray-500 text-sm">Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-600">Time</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-600">Action</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-600">Type</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-600">ID</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-600">User</th>
|
||||
<th className="text-left px-4 py-3 font-medium text-gray-600">Detail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map((e) => (
|
||||
<tr key={e.id} className="border-b border-gray-100">
|
||||
<td className="px-4 py-2 text-gray-600 whitespace-nowrap">
|
||||
{formatDate(e.created_at)}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={`inline-block px-2 py-0.5 text-xs rounded ${ACTION_COLORS[e.action] || "bg-gray-100 text-gray-600"}`}>
|
||||
{e.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-gray-700">{e.object_type}</td>
|
||||
<td className="px-4 py-2 text-gray-500">{e.object_id ?? "—"}</td>
|
||||
<td className="px-4 py-2 text-gray-600">#{e.actor_user_id ?? "system"}</td>
|
||||
<td className="px-4 py-2 text-gray-500 text-xs max-w-xs truncate">
|
||||
{e.detail ? JSON.stringify(e.detail) : "—"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{entries.length === 0 && (
|
||||
<tr>
|
||||
<td className="px-4 py-6 text-center text-gray-400" colSpan={6}>
|
||||
No audit entries.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex gap-3 mt-4">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded text-sm disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="px-3 py-1.5 text-sm text-gray-600">Page {page}</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
disabled={entries.length < 50}
|
||||
className="px-3 py-1.5 border border-gray-300 rounded text-sm disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { api, type Entity } from "../api";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export default function Import() {
|
||||
const { user } = useAuth();
|
||||
const [entities, setEntities] = useState<Entity[]>([]);
|
||||
const [entityId, setEntityId] = useState("");
|
||||
const [asOf, setAsOf] = useState("");
|
||||
const [mode, setMode] = useState<"entities" | "schedule">("schedule");
|
||||
const [commit, setCommit] = useState(false);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [result, setResult] = useState<any>(null);
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const canImport = user && ["approver", "cfo"].includes(user.role);
|
||||
|
||||
useEffect(() => {
|
||||
api.listEntities().then(setEntities);
|
||||
}, []);
|
||||
|
||||
async function handleImport() {
|
||||
if (!file) return;
|
||||
setError("");
|
||||
setResult(null);
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.set("commit", String(commit));
|
||||
|
||||
let url: string;
|
||||
if (mode === "entities") {
|
||||
url = `/api/import/entities?${params}`;
|
||||
} else {
|
||||
if (!entityId || !asOf) {
|
||||
setError("Select an entity and quarter-end date.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
params.set("entity_id", entityId);
|
||||
params.set("as_of", asOf);
|
||||
url = `/api/import/schedule?${params}`;
|
||||
}
|
||||
|
||||
const res = await fetch(url, { method: "POST", body: form });
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setError(data.detail || "Import failed");
|
||||
} else {
|
||||
setResult(data);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!canImport) {
|
||||
return (
|
||||
<div className="text-gray-500 text-sm">
|
||||
Import requires approver or CFO role.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
<h1 className="text-2xl font-semibold text-gray-900 mb-6">Import</h1>
|
||||
|
||||
{/* Mode selector */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<button
|
||||
onClick={() => setMode("schedule")}
|
||||
className={`px-4 py-2 text-sm rounded ${
|
||||
mode === "schedule"
|
||||
? "bg-gray-900 text-white"
|
||||
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Schedule of Investments
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode("entities")}
|
||||
className={`px-4 py-2 text-sm rounded ${
|
||||
mode === "entities"
|
||||
? "bg-gray-900 text-white"
|
||||
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Entities
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-6 space-y-4">
|
||||
{mode === "schedule" && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-700 mb-1">Entity</label>
|
||||
<select
|
||||
value={entityId}
|
||||
onChange={(e) => setEntityId(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
|
||||
>
|
||||
<option value="">Select entity...</option>
|
||||
{entities.map((e) => (
|
||||
<option key={e.id} value={e.id}>
|
||||
{e.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-700 mb-1">
|
||||
Quarter-end date (seed round)
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={asOf}
|
||||
onChange={(e) => setAsOf(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-gray-700 mb-1">
|
||||
{mode === "schedule" ? "Carta XLSX or CSV file" : "Entities CSV file"}
|
||||
</label>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept={mode === "schedule" ? ".xlsx,.xls,.csv" : ".csv"}
|
||||
onChange={(e) => setFile(e.target.files?.[0] || null)}
|
||||
className="w-full text-sm text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="commit"
|
||||
checked={commit}
|
||||
onChange={(e) => setCommit(e.target.checked)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
<label htmlFor="commit" className="text-sm text-gray-700">
|
||||
Commit (uncheck for dry-run preview)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleImport}
|
||||
disabled={loading || !file}
|
||||
className="px-4 py-2 bg-gray-900 text-white text-sm rounded hover:bg-gray-800 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Importing..." : commit ? "Import" : "Preview (dry run)"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
{result && (
|
||||
<div className="mt-6 bg-white border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-sm font-medium text-gray-900 mb-3">
|
||||
{result.committed ? "Import Complete" : "Dry Run Preview"}
|
||||
</h3>
|
||||
|
||||
{result.source_entity_name && (
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
Source: {result.source_entity_name}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{result.summary && (
|
||||
<div className="text-sm text-gray-700 mb-3">
|
||||
Created: {result.summary.created} | Updated: {result.summary.updated} | Errors: {result.summary.error_rows}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.holdings_count != null && (
|
||||
<div className="text-sm text-gray-700 mb-3">
|
||||
Holdings: {result.holdings_count} | Positions: {result.positions_count}
|
||||
{result.seed_round_id && ` | Seed round #${result.seed_round_id}`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.holdings && result.holdings.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<h4 className="text-xs font-medium text-gray-500 uppercase mb-1">Holdings</h4>
|
||||
<ul className="text-sm text-gray-700 space-y-0.5">
|
||||
{result.holdings.map((h: any, i: number) => (
|
||||
<li key={i}>{h.company_name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.positions && result.positions.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<h4 className="text-xs font-medium text-gray-500 uppercase mb-1">
|
||||
Positions ({result.positions.length})
|
||||
</h4>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="text-xs w-full">
|
||||
<thead>
|
||||
<tr className="text-left text-gray-500">
|
||||
<th className="pr-3 py-1">Company</th>
|
||||
<th className="pr-3 py-1">Security</th>
|
||||
<th className="pr-3 py-1">Date</th>
|
||||
<th className="pr-3 py-1 text-right">Cost</th>
|
||||
<th className="pr-3 py-1 text-right">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.positions.map((p: any, i: number) => (
|
||||
<tr key={i} className="text-gray-700">
|
||||
<td className="pr-3 py-0.5">{p.company_name}</td>
|
||||
<td className="pr-3 py-0.5">{p.security_name}</td>
|
||||
<td className="pr-3 py-0.5">{p.investment_date || "—"}</td>
|
||||
<td className="pr-3 py-0.5 text-right">
|
||||
{p.cost_cents != null ? `$${(p.cost_cents / 100).toLocaleString()}` : "—"}
|
||||
</td>
|
||||
<td className="pr-3 py-0.5 text-right">
|
||||
{p.value_cents != null ? `$${(p.value_cents / 100).toLocaleString()}` : "—"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.errors && result.errors.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-red-500 uppercase mb-1">
|
||||
Errors ({result.errors.length})
|
||||
</h4>
|
||||
<ul className="text-xs text-red-600 space-y-1">
|
||||
{result.errors.map((e: any, i: number) => (
|
||||
<li key={i}>
|
||||
Row {e.row}: {e.errors?.join(", ")}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.preview && result.preview.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-xs font-medium text-gray-500 uppercase mb-1">
|
||||
Entities ({result.preview.length})
|
||||
</h4>
|
||||
<ul className="text-sm text-gray-700 space-y-0.5">
|
||||
{result.preview.map((p: any, i: number) => (
|
||||
<li key={i}>
|
||||
<span className={`text-xs px-1 rounded ${p.action === "create" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`}>
|
||||
{p.action}
|
||||
</span>{" "}
|
||||
{p.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user