taDuc
819 lines
39 KiB
TypeScript
819 lines
39 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useParams, useRouter } from "next/navigation";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { toast } from "sonner";
|
|
|
|
import Map from "@/uhm/components/Map";
|
|
import BackgroundLayersPanel from "@/uhm/components/editor/BackgroundLayersPanel";
|
|
import TimelineBar from "@/uhm/components/ui/TimelineBar";
|
|
import ProjectEntityRefsPanel from "@/uhm/components/editor/ProjectEntityRefsPanel";
|
|
import EntityWikiBindingsPanel from "@/uhm/components/editor/EntityWikiBindingsPanel";
|
|
import GeometryBindingPanel from "@/uhm/components/editor/GeometryBindingPanel";
|
|
import SelectedGeometryPanel from "@/uhm/components/editor/SelectedGeometryPanel";
|
|
import WikiSidebarPanel from "@/uhm/components/wiki/WikiSidebarPanel";
|
|
|
|
import { fetchProjectCommits } from "@/uhm/api/projects";
|
|
import { requestJson } from "@/uhm/api/http";
|
|
import { API_ENDPOINTS } from "@/uhm/api/config";
|
|
import { normalizeEditorSnapshot, getDefaultTypeIdForFeature, normalizeFeatureEntityIds } from "@/uhm/lib/editor/snapshot/editorSnapshot";
|
|
import { normalizeTimelineYearValue } from "@/uhm/lib/utils/timeline";
|
|
import { isFeatureVisibleAtYear } from "@/uhm/lib/editor/editorPageUtils";
|
|
import { buildEntityLabelContextDraft as buildPreviewEntityLabelContextDraft } from "@/uhm/lib/preview/relationIndex";
|
|
import { getDirectGeometryChildIds } from "@/uhm/lib/editor/geometry/geometryBinding";
|
|
import { ResizeHandle } from "@/uhm/components/ui/ResizeHandle";
|
|
import { EMPTY_FEATURE_COLLECTION, WORLD_BBOX } from "@/uhm/lib/map/geo/constants";
|
|
import { FIXED_TIMELINE_RANGE, clampYearToFixedRange } from "@/uhm/lib/utils/timeline";
|
|
import { loadBackgroundLayerVisibilityFromStorage } from "@/uhm/lib/editor/background/backgroundVisibilityStorage";
|
|
|
|
|
|
import { apiGetSubmissionDetail, updateSubmission } from "@/service/submisisonService";
|
|
import { SubmissionItem } from "@/components/tables/SubmissionsTable";
|
|
import {
|
|
EditorStoreProvider,
|
|
useEditorStore,
|
|
useEditorStoreApi,
|
|
} from "@/uhm/store/editorStore";
|
|
|
|
import type { Feature, FeatureCollection, GeometryEntitySnapshot, GeometrySnapshot } from "@/uhm/types/geo";
|
|
import type { EditorSnapshot, ProjectCommit, EntityWikiLinkSnapshot, Project } from "@/uhm/types/projects";
|
|
import type { EntitySnapshot } from "@/uhm/types/entities";
|
|
import type { WikiSnapshot } from "@/uhm/types/wiki";
|
|
|
|
const CURRENT_YEAR = new Date().getUTCFullYear();
|
|
const DEFAULT_EDITOR_USER_ID = "admin-viewer";
|
|
|
|
// Helper functions copied from useProjectCommands.ts to build read-only session snapshot.
|
|
function toEditorSessionSnapshot(snapshot: EditorSnapshot): EditorSnapshot {
|
|
return {
|
|
...snapshot,
|
|
entities: toEditorSessionEntities(snapshot.entities),
|
|
geometries: toEditorSessionGeometries(snapshot.geometries),
|
|
geometry_entity: toEditorSessionGeometryEntity(snapshot.geometry_entity),
|
|
wikis: toEditorSessionWikis(snapshot.wikis),
|
|
entity_wiki: toEditorSessionEntityWikiLinks(snapshot.entity_wiki),
|
|
};
|
|
}
|
|
|
|
function toEditorSessionEntities(input: EditorSnapshot["entities"]): EntitySnapshot[] {
|
|
const rows = Array.isArray(input) ? input : [];
|
|
return rows
|
|
.filter((e): e is any => Boolean(e) && (typeof e.id === "string" || typeof e.id === "number"))
|
|
.filter((e) => e.operation !== "delete")
|
|
.map((e) => {
|
|
const id = String(e.id);
|
|
const source: EntitySnapshot["source"] = e.source === "inline" ? "inline" : "ref";
|
|
return {
|
|
id,
|
|
source,
|
|
operation: "reference",
|
|
name: typeof e.name === "string" ? e.name : undefined,
|
|
description: typeof e.description === "string" ? e.description : e.description ?? null,
|
|
time_start: normalizeTimelineYearValue(e.time_start) ?? undefined,
|
|
time_end: normalizeTimelineYearValue(e.time_end) ?? undefined,
|
|
};
|
|
});
|
|
}
|
|
|
|
function toEditorSessionGeometries(input: EditorSnapshot["geometries"]): GeometrySnapshot[] {
|
|
const rows = Array.isArray(input) ? input : [];
|
|
return rows
|
|
.filter((g): g is any => Boolean(g) && (typeof g.id === "string" || typeof g.id === "number"))
|
|
.filter((g) => g.operation !== "delete")
|
|
.map((g) => {
|
|
const id = String(g.id);
|
|
const source: GeometrySnapshot["source"] = g.source === "inline" ? "inline" : "ref";
|
|
return {
|
|
id,
|
|
source,
|
|
operation: "reference",
|
|
type: g.type ?? undefined,
|
|
draw_geometry: g.draw_geometry,
|
|
geometry: g.geometry,
|
|
bound_with: g.bound_with ?? null,
|
|
time_start: normalizeTimelineYearValue(g.time_start) ?? undefined,
|
|
time_end: normalizeTimelineYearValue(g.time_end) ?? undefined,
|
|
bbox: g.bbox
|
|
? {
|
|
min_lng: g.bbox.min_lng,
|
|
min_lat: g.bbox.min_lat,
|
|
max_lng: g.bbox.max_lng,
|
|
max_lat: g.bbox.max_lat,
|
|
}
|
|
: g.bbox ?? undefined,
|
|
};
|
|
});
|
|
}
|
|
|
|
function toEditorSessionGeometryEntity(input: EditorSnapshot["geometry_entity"]): GeometryEntitySnapshot[] {
|
|
const rows = Array.isArray(input) ? input : [];
|
|
const deduped = new globalThis.Map<string, GeometryEntitySnapshot>();
|
|
for (const row of rows) {
|
|
if (!row) continue;
|
|
const safeRow = row as any;
|
|
if (safeRow.operation === "delete") continue;
|
|
const geometry_id = typeof safeRow.geometry_id === "string" || typeof safeRow.geometry_id === "number"
|
|
? String(safeRow.geometry_id).trim()
|
|
: "";
|
|
const entity_id = typeof safeRow.entity_id === "string" || typeof safeRow.entity_id === "number"
|
|
? String(safeRow.entity_id).trim()
|
|
: "";
|
|
if (!geometry_id || !entity_id) continue;
|
|
const key = `${geometry_id}::${entity_id}`;
|
|
deduped.set(key, {
|
|
geometry_id,
|
|
entity_id,
|
|
operation: "reference",
|
|
});
|
|
}
|
|
return Array.from(deduped.values()).sort((a, b) => {
|
|
const g = a.geometry_id.localeCompare(b.geometry_id);
|
|
if (g !== 0) return g;
|
|
return a.entity_id.localeCompare(b.entity_id);
|
|
});
|
|
}
|
|
|
|
function toEditorSessionWikis(input: EditorSnapshot["wikis"]): WikiSnapshot[] {
|
|
const rows = Array.isArray(input) ? input : [];
|
|
return rows
|
|
.filter((w): w is any => Boolean(w) && typeof w.id === "string" && w.id.trim().length > 0)
|
|
.filter((w) => w.operation !== "delete")
|
|
.map((w) => {
|
|
const source: WikiSnapshot["source"] = w.source === "inline" ? "inline" : "ref";
|
|
return {
|
|
id: w.id,
|
|
source,
|
|
operation: "reference",
|
|
title: typeof w.title === "string" ? w.title : "",
|
|
slug: w.slug ?? null,
|
|
doc: w.doc ?? null,
|
|
};
|
|
});
|
|
}
|
|
|
|
function toEditorSessionEntityWikiLinks(input: EditorSnapshot["entity_wiki"]): EntityWikiLinkSnapshot[] {
|
|
const rows = Array.isArray(input) ? input : [];
|
|
const deduped = new globalThis.Map<string, EntityWikiLinkSnapshot>();
|
|
for (const row of rows) {
|
|
if (!row) continue;
|
|
const safeRow = row as any;
|
|
if (safeRow.operation === "delete") continue;
|
|
const entity_id = typeof safeRow.entity_id === "string" || typeof safeRow.entity_id === "number"
|
|
? String(safeRow.entity_id).trim()
|
|
: "";
|
|
const wiki_id = typeof safeRow.wiki_id === "string" || typeof safeRow.wiki_id === "number"
|
|
? String(safeRow.wiki_id).trim()
|
|
: "";
|
|
if (!entity_id || !wiki_id) continue;
|
|
const key = `${entity_id}::${wiki_id}`;
|
|
deduped.set(key, {
|
|
entity_id,
|
|
wiki_id,
|
|
operation: "reference",
|
|
});
|
|
}
|
|
return Array.from(deduped.values()).sort((a, b) => {
|
|
const e = a.entity_id.localeCompare(b.entity_id);
|
|
if (e !== 0) return e;
|
|
return a.wiki_id.localeCompare(b.wiki_id);
|
|
});
|
|
}
|
|
|
|
export default function SubmissionDetailPage() {
|
|
return (
|
|
<EditorStoreProvider
|
|
options={{
|
|
emptyFeatureCollection: EMPTY_FEATURE_COLLECTION,
|
|
defaultEditorUserId: DEFAULT_EDITOR_USER_ID,
|
|
fallbackTimelineRange: FIXED_TIMELINE_RANGE,
|
|
currentYear: CURRENT_YEAR,
|
|
}}
|
|
>
|
|
<SubmissionDetailPageContent />
|
|
</EditorStoreProvider>
|
|
);
|
|
}
|
|
|
|
// Side Component to set the Zustand store state based on loaded data.
|
|
function StoreInitializer({
|
|
project,
|
|
sessionSnapshot,
|
|
}: {
|
|
project: Project;
|
|
sessionSnapshot: EditorSnapshot;
|
|
}) {
|
|
const store = useEditorStoreApi();
|
|
useEffect(() => {
|
|
if (!project || !sessionSnapshot) return;
|
|
const state = store.getState();
|
|
state.setActiveSection(project);
|
|
state.setSelectedProjectId(project.id);
|
|
state.setBaselineSnapshot(sessionSnapshot);
|
|
state.setBaselineFeatureCollection(sessionSnapshot?.editor_feature_collection || EMPTY_FEATURE_COLLECTION);
|
|
state.setSnapshotEntityRows(sessionSnapshot?.entities || []);
|
|
state.setSnapshotWikis(sessionSnapshot?.wikis || []);
|
|
state.setSnapshotEntityWikiLinks(sessionSnapshot?.entity_wiki || []);
|
|
state.setBackgroundVisibility(loadBackgroundLayerVisibilityFromStorage());
|
|
state.setIsBackgroundVisibilityReady(true);
|
|
|
|
// Auto-detect the earliest year from geometries or entities to center the timeline.
|
|
let minYear: number | null = null;
|
|
if (sessionSnapshot?.geometries && sessionSnapshot.geometries.length > 0) {
|
|
for (const g of sessionSnapshot.geometries) {
|
|
if (g.time_start !== undefined && g.time_start !== null) {
|
|
const y = Number(g.time_start);
|
|
if (!Number.isNaN(y)) {
|
|
if (minYear === null || y < minYear) {
|
|
minYear = y;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (minYear === null && sessionSnapshot?.entities && sessionSnapshot.entities.length > 0) {
|
|
for (const e of sessionSnapshot.entities) {
|
|
if (e.time_start !== undefined && e.time_start !== null) {
|
|
const y = Number(e.time_start);
|
|
if (!Number.isNaN(y)) {
|
|
if (minYear === null || y < minYear) {
|
|
minYear = y;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (minYear !== null) {
|
|
state.setTimelineDraftYear(clampYearToFixedRange(minYear));
|
|
}
|
|
}, [project, sessionSnapshot, store]);
|
|
|
|
return null;
|
|
}
|
|
|
|
function clampNumber(value: number, min: number, max: number): number {
|
|
if (value < min) return min;
|
|
if (value > max) return max;
|
|
return value;
|
|
}
|
|
|
|
function SubmissionDetailPageContent() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const id = String(params.id || "");
|
|
|
|
const [submission, setSubmission] = useState<SubmissionItem | null>(null);
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [sessionSnapshot, setSessionSnapshot] = useState<EditorSnapshot | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [reviewNote, setReviewNote] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
// Retrieve Zustand state
|
|
const {
|
|
baselineFeatureCollection,
|
|
selectedFeatureIds,
|
|
setSelectedFeatureIds,
|
|
timelineDraftYear,
|
|
setTimelineDraftYear,
|
|
backgroundVisibility,
|
|
geometryVisibility,
|
|
snapshotEntityRows,
|
|
snapshotWikis,
|
|
snapshotEntityWikiLinks,
|
|
leftPanelWidth,
|
|
setLeftPanelWidth,
|
|
rightPanelWidth,
|
|
setRightPanelWidth,
|
|
timelineFilterEnabled,
|
|
setTimelineFilterEnabled,
|
|
} = useEditorStore(useShallow((state) => ({
|
|
baselineFeatureCollection: state.baselineFeatureCollection,
|
|
selectedFeatureIds: state.selectedFeatureIds,
|
|
setSelectedFeatureIds: state.setSelectedFeatureIds,
|
|
timelineDraftYear: state.timelineDraftYear,
|
|
setTimelineDraftYear: state.setTimelineDraftYear,
|
|
backgroundVisibility: state.backgroundVisibility,
|
|
geometryVisibility: state.geometryVisibility,
|
|
snapshotEntityRows: state.snapshotEntityRows,
|
|
snapshotWikis: state.snapshotWikis,
|
|
snapshotEntityWikiLinks: state.snapshotEntityWikiLinks,
|
|
leftPanelWidth: state.leftPanelWidth,
|
|
setLeftPanelWidth: state.setLeftPanelWidth,
|
|
rightPanelWidth: state.rightPanelWidth,
|
|
setRightPanelWidth: state.setRightPanelWidth,
|
|
timelineFilterEnabled: state.timelineFilterEnabled,
|
|
setTimelineFilterEnabled: state.setTimelineFilterEnabled,
|
|
})));
|
|
|
|
// Fetch submission details and project commit snapshot
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const subRes = await apiGetSubmissionDetail(id);
|
|
if (!subRes || !subRes.status || !subRes.data) {
|
|
throw new Error("Không thể tải thông tin submission");
|
|
}
|
|
const subData = subRes.data as SubmissionItem;
|
|
setSubmission(subData);
|
|
setReviewNote(subData.review_note || "");
|
|
|
|
const projectId = subData.project_id;
|
|
const commits = await fetchProjectCommits(projectId);
|
|
|
|
const projRes = await requestJson<Project>(`${API_ENDPOINTS.projects}/${encodeURIComponent(projectId)}`);
|
|
setProject(projRes);
|
|
|
|
const targetCommit = commits.find((c) => String(c.id) === String(subData.commit_id));
|
|
if (!targetCommit) {
|
|
throw new Error(`Không tìm thấy commit #${subData.commit_id} của project`);
|
|
}
|
|
|
|
const snapshot = normalizeEditorSnapshot(targetCommit.snapshot_json);
|
|
const session = snapshot ? toEditorSessionSnapshot(snapshot) : null;
|
|
setSessionSnapshot(session);
|
|
} catch (err: any) {
|
|
console.error("Error loading submission details:", err);
|
|
setError(err.message || "Lỗi hệ thống");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
if (id) {
|
|
loadData();
|
|
}
|
|
}, [id]);
|
|
|
|
// Apply filters based on timeline year
|
|
const activeTimelineYear = timelineDraftYear;
|
|
const activeTimelineFilterEnabled = timelineFilterEnabled;
|
|
|
|
const activeMapDraft = useMemo<FeatureCollection>(() => {
|
|
const draft = baselineFeatureCollection || EMPTY_FEATURE_COLLECTION;
|
|
if (!activeTimelineFilterEnabled) return draft;
|
|
return {
|
|
type: "FeatureCollection",
|
|
features: draft.features.filter((f) => isFeatureVisibleAtYear(f, activeTimelineYear)),
|
|
};
|
|
}, [baselineFeatureCollection, activeTimelineFilterEnabled, activeTimelineYear]);
|
|
|
|
const mapLabelContextDraft = useMemo<FeatureCollection>(() => {
|
|
return baselineFeatureCollection || EMPTY_FEATURE_COLLECTION;
|
|
}, [baselineFeatureCollection]);
|
|
|
|
// Handle review (approve / reject)
|
|
const handleReview = async (status: "APPROVED" | "REJECTED") => {
|
|
if (!submission) return;
|
|
setSubmitting(true);
|
|
try {
|
|
const res = await updateSubmission(submission.id, {
|
|
status,
|
|
review_note: reviewNote,
|
|
});
|
|
if (res?.status) {
|
|
toast.success("Cập nhật trạng thái submission thành công!");
|
|
setSubmission((prev) => prev ? { ...prev, status, review_note: reviewNote } : null);
|
|
} else {
|
|
toast.error(res?.message || "Cập nhật thất bại");
|
|
}
|
|
} catch (err: any) {
|
|
console.error(err);
|
|
toast.error("Lỗi khi cập nhật trạng thái submission");
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Right Sidebar Geometry Choices
|
|
const geometryChoices = useMemo(() => {
|
|
const draft = baselineFeatureCollection || EMPTY_FEATURE_COLLECTION;
|
|
const mapRenderGeometryIds = new Set(
|
|
activeMapDraft.features.map((feature) => String(feature.properties.id))
|
|
);
|
|
|
|
const rows = draft.features
|
|
.filter((f) => f && f.properties && (typeof f.properties.id === "string" || typeof f.properties.id === "number"))
|
|
.map((f) => {
|
|
const id = String(f.properties.id);
|
|
const semantic = String(f.properties.type || getDefaultTypeIdForFeature(f) || "").trim();
|
|
const label = semantic.length ? `${semantic} (${f.geometry.type})` : "Geometry";
|
|
const timeStart = normalizeTimelineYearValue(f.properties.time_start);
|
|
const timeEnd = normalizeTimelineYearValue(f.properties.time_end);
|
|
const hasStart = timeStart !== null;
|
|
const hasEnd = timeEnd !== null;
|
|
const timeStatus: "missing" | "partial" | "complete" =
|
|
!hasStart && !hasEnd
|
|
? "missing"
|
|
: !hasStart || !hasEnd
|
|
? "partial"
|
|
: "complete";
|
|
const isTimelineVisible = mapRenderGeometryIds.has(id);
|
|
const timelineStatus: "off" | "visible" | "filteredOut" = !activeTimelineFilterEnabled
|
|
? "off"
|
|
: isTimelineVisible
|
|
? "visible"
|
|
: "filteredOut";
|
|
return {
|
|
id,
|
|
label,
|
|
time_start: timeStart,
|
|
time_end: timeEnd,
|
|
isTimelineVisible,
|
|
isOrphan: normalizeFeatureEntityIds(f).length === 0,
|
|
timeStatus,
|
|
timelineStatus,
|
|
isNew: false,
|
|
};
|
|
});
|
|
|
|
rows.sort((a, b) => {
|
|
const na = String(a.label || a.id);
|
|
const nb = String(b.label || b.id);
|
|
return na.localeCompare(nb);
|
|
});
|
|
return rows;
|
|
}, [baselineFeatureCollection, activeMapDraft, activeTimelineFilterEnabled]);
|
|
|
|
// Selected features state resolution
|
|
const selectedFeatures = useMemo<Feature[]>(() => {
|
|
const draft = baselineFeatureCollection || EMPTY_FEATURE_COLLECTION;
|
|
return selectedFeatureIds
|
|
.map((fid) => draft.features.find((f) => f.properties.id === fid) || null)
|
|
.filter((f): f is Feature => Boolean(f));
|
|
}, [baselineFeatureCollection, selectedFeatureIds]);
|
|
|
|
const selectedFeature = selectedFeatures[0] || null;
|
|
|
|
const selectedGeometryChildIds = useMemo<string[]>(() => {
|
|
if (!selectedFeature) return [];
|
|
return getDirectGeometryChildIds(
|
|
baselineFeatureCollection || EMPTY_FEATURE_COLLECTION,
|
|
String(selectedFeature.properties.id)
|
|
);
|
|
}, [baselineFeatureCollection, selectedFeature]);
|
|
|
|
const selectedGeometryTime = useMemo(() => {
|
|
if (!selectedFeature) return null;
|
|
const start = normalizeTimelineYearValue(selectedFeature.properties.time_start);
|
|
const end = normalizeTimelineYearValue(selectedFeature.properties.time_end);
|
|
return { time_start: start, time_end: end };
|
|
}, [selectedFeature]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div style={{ display: "flex", width: "100vw", height: "100vh", background: "#0b1220", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: "16px" }}>
|
|
<div style={{ width: "48px", height: "48px", border: "4px solid #1f2937", borderTop: "4px solid #38bdf8", borderRadius: "50%", animation: "spin 1s linear infinite" }} />
|
|
<div style={{ color: "#94a3b8", fontSize: "14px", fontWeight: 500 }}>Đang tải dữ liệu bản đồ...</div>
|
|
<style>{`
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !submission || !project || !sessionSnapshot) {
|
|
return (
|
|
<div style={{ display: "flex", width: "100vw", height: "100vh", background: "#0b1220", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: "20px", color: "#f8fafc" }}>
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="12" y1="8" x2="12" y2="12" />
|
|
<line x1="12" y1="16" x2="12.01" y2="16" />
|
|
</svg>
|
|
<div style={{ fontSize: "16px", fontWeight: 600 }}>{error || "Không thể tìm thấy submission"}</div>
|
|
<button
|
|
onClick={() => router.push("/submissions")}
|
|
style={{
|
|
background: "#3b82f6",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "10px 20px",
|
|
borderRadius: "8px",
|
|
cursor: "pointer",
|
|
fontWeight: 600,
|
|
fontSize: "14px",
|
|
}}
|
|
>
|
|
Quay lại danh sách
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ display: "flex", minHeight: "100vh", background: "#0b1220" }}>
|
|
<style>{`
|
|
html, body {
|
|
overflow: hidden !important;
|
|
scrollbar-width: none !important;
|
|
}
|
|
html::-webkit-scrollbar, body::-webkit-scrollbar {
|
|
display: none !important;
|
|
}
|
|
`}</style>
|
|
|
|
{/* Initialize store with project & snapshot data */}
|
|
<StoreInitializer project={project} sessionSnapshot={sessionSnapshot} />
|
|
|
|
{/* Left Sidebar showing submission details and review form */}
|
|
<div
|
|
style={{
|
|
width: leftPanelWidth,
|
|
background: "#0b1220",
|
|
borderRight: "1px solid #1f2937",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100vh",
|
|
color: "#f8fafc",
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<div style={{ padding: "16px", borderBottom: "1px solid #1f2937", display: "flex", alignItems: "center", gap: "12px" }}>
|
|
<button
|
|
onClick={() => router.push("/submissions")}
|
|
style={{
|
|
background: "transparent",
|
|
border: "none",
|
|
color: "#94a3b8",
|
|
cursor: "pointer",
|
|
padding: "4px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
title="Quay lại danh sách"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<div style={{ fontSize: "11px", color: "#94a3b8", fontWeight: 500 }}>Chi tiết yêu cầu duyệt</div>
|
|
<div style={{ fontSize: "14px", fontWeight: 700, color: "#f8fafc" }}>#{submission.id.slice(0, 8)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info scroll area */}
|
|
<div style={{ flex: 1, overflowY: "auto", padding: "16px", display: "flex", flexDirection: "column", gap: "20px" }}>
|
|
{/* Project Title */}
|
|
<div>
|
|
<div style={{ fontSize: "10px", textTransform: "uppercase", color: "#94a3b8", fontWeight: 600, letterSpacing: "0.05em", marginBottom: "6px" }}>Dự án</div>
|
|
<div style={{ fontSize: "15px", fontWeight: 700, color: "#38bdf8" }}>{submission.project_title}</div>
|
|
<div style={{ fontSize: "12px", color: "#cbd5e1", marginTop: "4px", lineHeight: "1.5" }}>{submission.project_description || "Không có mô tả dự án."}</div>
|
|
</div>
|
|
|
|
{/* Submitter */}
|
|
<div>
|
|
<div style={{ fontSize: "10px", textTransform: "uppercase", color: "#94a3b8", fontWeight: 600, letterSpacing: "0.05em", marginBottom: "6px" }}>Người gửi</div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
|
{submission.user?.avatar_url ? (
|
|
<img src={submission.user.avatar_url} alt="avatar" style={{ width: "32px", height: "32px", borderRadius: "50%" }} />
|
|
) : (
|
|
<div style={{ width: "32px", height: "32px", borderRadius: "50%", background: "#334155", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: "12px", color: "#e2e8f0" }}>
|
|
{submission.user?.display_name?.charAt(0).toUpperCase() || "U"}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<div style={{ fontSize: "13px", fontWeight: 600 }}>{submission.user?.display_name || "N/A"}</div>
|
|
<div style={{ fontSize: "12px", color: "#94a3b8" }}>{submission.user?.email || ""}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Meta grid */}
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
|
|
<div>
|
|
<div style={{ fontSize: "10px", textTransform: "uppercase", color: "#94a3b8", fontWeight: 600, letterSpacing: "0.05em", marginBottom: "4px" }}>Ngày tạo</div>
|
|
<div style={{ fontSize: "12px", color: "#e2e8f0" }}>{new Date(submission.created_at).toLocaleString("vi-VN")}</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: "10px", textTransform: "uppercase", color: "#94a3b8", fontWeight: 600, letterSpacing: "0.05em", marginBottom: "4px" }}>Trạng thái</div>
|
|
<div>
|
|
<span
|
|
style={{
|
|
display: "inline-block",
|
|
padding: "2px 8px",
|
|
borderRadius: "4px",
|
|
fontSize: "11px",
|
|
fontWeight: 700,
|
|
background: submission.status === "PENDING" ? "#eab308" : submission.status === "APPROVED" || submission.status === "SUCCESS" ? "#22c55e" : "#ef4444",
|
|
color: "#0f172a",
|
|
}}
|
|
>
|
|
{submission.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{submission.content && (
|
|
<div>
|
|
<div style={{ fontSize: "10px", textTransform: "uppercase", color: "#94a3b8", fontWeight: 600, letterSpacing: "0.05em", marginBottom: "6px" }}>Nội dung ghi chú</div>
|
|
<div style={{ fontSize: "12px", color: "#cbd5e1", background: "#0f172a", padding: "10px", borderRadius: "6px", border: "1px solid #1f2937", whiteSpace: "pre-wrap" }}>
|
|
{submission.content}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Review Forms */}
|
|
<div style={{ borderTop: "1px solid #1f2937", paddingTop: "16px", marginTop: "8px" }}>
|
|
<div style={{ fontSize: "10px", textTransform: "uppercase", color: "#94a3b8", fontWeight: 600, letterSpacing: "0.05em", marginBottom: "10px" }}>Đánh giá của Admin</div>
|
|
|
|
{submission.status === "PENDING" ? (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
|
|
<textarea
|
|
value={reviewNote}
|
|
onChange={(e) => setReviewNote(e.target.value)}
|
|
placeholder="Nhập phản hồi/ghi chú duyệt tại đây..."
|
|
style={{
|
|
width: "100%",
|
|
height: "100px",
|
|
background: "#0f172a",
|
|
border: "1px solid #1f2937",
|
|
borderRadius: "6px",
|
|
color: "#cbd5e1",
|
|
padding: "8px 10px",
|
|
fontSize: "12px",
|
|
outline: "none",
|
|
resize: "none",
|
|
}}
|
|
/>
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px" }}>
|
|
<button
|
|
onClick={() => handleReview("APPROVED")}
|
|
disabled={submitting}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "#16a34a",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "10px 12px",
|
|
borderRadius: "6px",
|
|
cursor: submitting ? "not-allowed" : "pointer",
|
|
fontSize: "13px",
|
|
fontWeight: 700,
|
|
transition: "background 0.2s",
|
|
}}
|
|
>
|
|
{submitting ? "Đang xử lý..." : "Duyệt thông qua"}
|
|
</button>
|
|
<button
|
|
onClick={() => handleReview("REJECTED")}
|
|
disabled={submitting}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "#dc2626",
|
|
color: "white",
|
|
border: "none",
|
|
padding: "10px 12px",
|
|
borderRadius: "6px",
|
|
cursor: submitting ? "not-allowed" : "pointer",
|
|
fontSize: "13px",
|
|
fontWeight: 700,
|
|
transition: "background 0.2s",
|
|
}}
|
|
>
|
|
{submitting ? "Đang xử lý..." : "Từ chối duyệt"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
<div>
|
|
<div style={{ fontSize: "11px", color: "#94a3b8" }}>Người duyệt</div>
|
|
<div style={{ fontSize: "13px", fontWeight: 600, color: "#e2e8f0" }}>{submission.reviewer?.display_name || "Admin"}</div>
|
|
</div>
|
|
{submission.reviewed_at && (
|
|
<div>
|
|
<div style={{ fontSize: "11px", color: "#94a3b8" }}>Thời gian duyệt</div>
|
|
<div style={{ fontSize: "12px", color: "#cbd5e1" }}>{new Date(submission.reviewed_at).toLocaleString("vi-VN")}</div>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<div style={{ fontSize: "11px", color: "#94a3b8", marginBottom: "4px" }}>Ghi chú duyệt</div>
|
|
<div style={{ fontSize: "12px", color: "#cbd5e1", background: "#0f172a", padding: "10px", borderRadius: "6px", border: "1px solid #1f2937", minHeight: "40px" }}>
|
|
{submission.review_note || "(Không có ghi chú)"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resize left panel */}
|
|
<ResizeHandle
|
|
title="Resize left panel"
|
|
onDrag={(deltaX) => {
|
|
setLeftPanelWidth((prev) => clampNumber(prev + deltaX, 220, 520));
|
|
}}
|
|
/>
|
|
|
|
{/* Map Area */}
|
|
<div style={{ flex: 1, position: "relative", minHeight: "100vh" }}>
|
|
<Map
|
|
mode="idle"
|
|
renderDraft={activeMapDraft}
|
|
labelContextDraft={mapLabelContextDraft}
|
|
labelTimelineYear={activeTimelineFilterEnabled ? activeTimelineYear : null}
|
|
selectedFeatureIds={selectedFeatureIds}
|
|
onSelectFeatureIds={setSelectedFeatureIds}
|
|
allowGeometryEditing={false}
|
|
allowFeatureSelection={true}
|
|
backgroundVisibility={backgroundVisibility}
|
|
geometryVisibility={geometryVisibility}
|
|
applyGeometryBindingFilter={activeTimelineFilterEnabled}
|
|
hoverPopupEnabled={true}
|
|
/>
|
|
|
|
<TimelineBar
|
|
year={activeTimelineYear}
|
|
onYearChange={setTimelineDraftYear}
|
|
isLoading={false}
|
|
disabled={false}
|
|
statusText={null}
|
|
filterEnabled={activeTimelineFilterEnabled}
|
|
onFilterEnabledChange={setTimelineFilterEnabled}
|
|
/>
|
|
</div>
|
|
|
|
{/* Resize right panel */}
|
|
<ResizeHandle
|
|
title="Resize right panel"
|
|
onDrag={(deltaX) => {
|
|
setRightPanelWidth((prev) => clampNumber(prev - deltaX, 260, 720));
|
|
}}
|
|
/>
|
|
|
|
{/* Right Sidebar showing geometry, entities, wikis, and bindings */}
|
|
<BackgroundLayersPanel
|
|
width={rightPanelWidth}
|
|
topContent={
|
|
<div style={{ display: "grid", gap: "12px" }}>
|
|
<GeometryBindingPanel
|
|
geometries={geometryChoices}
|
|
selectedGeometryId={selectedFeature ? String(selectedFeature.properties.id) : null}
|
|
selectedGeometryChildIds={selectedGeometryChildIds}
|
|
onToggleBindGeometryForSelectedGeometry={() => {}} // no-op read-only
|
|
onFocusGeometry={(id) => {
|
|
const target = baselineFeatureCollection?.features.find((f) => String(f.properties.id) === String(id));
|
|
if (target) {
|
|
setSelectedFeatureIds([target.properties.id]);
|
|
}
|
|
}}
|
|
readOnly={true}
|
|
/>
|
|
|
|
<ProjectEntityRefsPanel
|
|
onCreateEntityOnly={() => {}}
|
|
onUpdateEntity={() => {}}
|
|
hasSelectedGeometry={Boolean(selectedFeature)}
|
|
selectedGeometryTime={selectedGeometryTime}
|
|
onToggleBindEntityForSelectedGeometry={() => {}}
|
|
onRerollEntityId={() => {}}
|
|
onDeleteEntity={() => {}}
|
|
readOnly={true}
|
|
/>
|
|
|
|
<WikiSidebarPanel
|
|
projectId={project.id}
|
|
setWikis={() => {}}
|
|
onRemoveWiki={() => {}}
|
|
readOnly={true}
|
|
/>
|
|
|
|
<EntityWikiBindingsPanel
|
|
setLinks={() => {}}
|
|
readOnly={true}
|
|
/>
|
|
|
|
{selectedFeatures.length > 0 ? (
|
|
<SelectedGeometryPanel
|
|
selectedFeatures={selectedFeatures}
|
|
onApplyGeometryMetadata={async () => ({ ok: true })}
|
|
onDeleteFeatures={() => {}}
|
|
onDeselectAll={() => setSelectedFeatureIds([])}
|
|
changeCount={0}
|
|
onReplayEdit={() => {}}
|
|
onRerollGeometryId={() => {}}
|
|
readOnly={true}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|