add editor

src/app/user/projects/[id]/page.tsx

@@ -10,6 +10,7 @@ import Swal from "sweetalert2";
 import PageBreadcrumb from "@/components/common/PageBreadCrumb";
 import { apiAddProjectMember, apiChangeProjectOwner, apiDeleteProject, apiGetProjectDetail, apiRemoveProjectMember, apiUpdateProject, apiUpdateProjectMemberRole } from "@/service/projectService";
 import Loading from "@/app/loading";
+import Button from "@/components/ui/button/Button";
 
 type TabType = "overview" | "members" | "settings";
 
@@ -256,7 +257,7 @@ export default function ProjectDetailsPage() {
             </span>
           </div>
 
-          <div className="flex gap-4">
+          <div className="flex items-center gap-4">
             {[
               {
                 id: "overview",
@@ -305,6 +306,11 @@ export default function ProjectDetailsPage() {
                 )}
               </button>
             ))}
+
+            <div className="flex-1" />
+            <Button size="sm" variant="outline" onClick={() => router.push(`/editor/${id}`)}>
+              Mo editor
+            </Button>
           </div>
         </div>
       </div>

src/app/user/projects/page.tsx

@@ -217,7 +217,15 @@ export default function ProjectsPage() {
                           </div>
                         </div>
 
-                        <div className="flex items-center mt-4 md:mt-0 w-[120px] justify-end shrink-0">
+                        <div className="flex items-center mt-4 md:mt-0 gap-10 w-[240px] justify-end shrink-0">
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => router.push(`/editor/${project.id}`)}
+                          >
+                            Editor
+                          </Button>
+
                           <div className="flex -space-x-2 overflow-hidden">
                             {project.members && project.members.length > 0 ? (
                               <>
@@ -330,4 +338,4 @@ export default function ProjectsPage() {
       </Modal>
     </div>
   );
-}
+}

src/app/user/submissions/[id]/page.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useParams } from "next/navigation";
+import { toast } from "sonner";
+
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import ComponentCard from "@/components/common/ComponentCard";
+import Badge from "@/components/ui/badge/Badge";
+import Button from "@/components/ui/button/Button";
+
+import Map from "@/uhm/components/Map";
+import { DEFAULT_BACKGROUND_LAYER_VISIBILITY } from "@/uhm/lib/backgroundLayers";
+import { EMPTY_FEATURE_COLLECTION } from "@/uhm/lib/geo/constants";
+import { fetchSectionCommits } from "@/uhm/api/sections";
+import type { EditorSnapshot, SectionCommit } from "@/uhm/types/sections";
+import type { EntitySnapshot } from "@/uhm/types/entities";
+
+import type { Submission } from "@/interface/submission";
+import { apiGetSubmissionById } from "@/service/submissionService";
+import type { Project } from "@/interface/project";
+import { apiGetProjectDetail } from "@/service/projectService";
+
+function formatTime(value?: string | null) {
+  if (!value) return "-";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  return d.toLocaleString("vi-VN");
+}
+
+export default function SubmissionDetailPage() {
+  const params = useParams();
+  const id = String(params.id || "");
+  const [row, setRow] = useState<Submission | null>(null);
+  const [project, setProject] = useState<Project | null>(null);
+  const [commits, setCommits] = useState<SectionCommit[]>([]);
+  const [snapshot, setSnapshot] = useState<EditorSnapshot | null>(null);
+  const [snapshotEntities, setSnapshotEntities] = useState<EntitySnapshot[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingExtras, setIsLoadingExtras] = useState(false);
+
+  const headCommitSnapshotJson = useMemo(() => {
+    const headId = project?.latest_commit_id || null;
+    if (!headId) return null;
+    const head = commits.find((c) => c.id === headId) || null;
+    return (head as any)?.snapshot_json ?? null;
+  }, [commits, project?.latest_commit_id]);
+
+  const draft = useMemo(
+    () => snapshot?.editor_feature_collection || EMPTY_FEATURE_COLLECTION,
+    [snapshot]
+  );
+
+  useEffect(() => {
+    let disposed = false;
+    async function load() {
+      if (!id) return;
+      try {
+        setIsLoading(true);
+        const res = await apiGetSubmissionById(id);
+        if (!disposed) setRow(res?.data || null);
+      } catch (err) {
+        console.error(err);
+        toast.error("Khong the tai submission.");
+      } finally {
+        if (!disposed) setIsLoading(false);
+      }
+    }
+    load();
+    return () => {
+      disposed = true;
+    };
+  }, [id]);
+
+  useEffect(() => {
+    let disposed = false;
+    async function loadExtras() {
+      if (!row?.project_id) return;
+      try {
+        setIsLoadingExtras(true);
+
+        const [projectRes, commitRows] = await Promise.all([
+          apiGetProjectDetail(row.project_id),
+          fetchSectionCommits(row.project_id),
+        ]);
+
+        if (disposed) return;
+        setProject(projectRes?.data || null);
+        setCommits(commitRows || []);
+
+        const commit = (commitRows || []).find((c) => c.id === row.commit_id) || null;
+        const snap = (commit?.snapshot_json || null) as EditorSnapshot | null;
+        setSnapshot(snap);
+        setSnapshotEntities((snap?.entities || []) as EntitySnapshot[]);
+      } catch (err) {
+        console.error(err);
+        toast.error("Khong the tai thong tin project/commit.");
+      } finally {
+        if (!disposed) setIsLoadingExtras(false);
+      }
+    }
+    loadExtras();
+    return () => {
+      disposed = true;
+    };
+  }, [row?.commit_id, row?.project_id]);
+
+  return (
+    <div className="max-w-6xl mx-auto pb-10">
+      <PageBreadcrumb
+        pageTitle="Chi tiet submission"
+        paths={[{ name: "Kiem duyet submissions", href: "/user/submissions" }]}
+      />
+
+      <div className="mt-6">
+        <ComponentCard title="Thong tin">
+          {isLoading ? (
+            <div className="p-6 text-sm text-gray-500 dark:text-gray-400">Dang tai...</div>
+          ) : row ? (
+            <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">ID</div>
+                <div className="font-mono break-all">{row.id}</div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">Status</div>
+                <div className="mt-1">
+                  <Badge size="sm" variant="light" color="light">
+                    {row.status}
+                  </Badge>
+                </div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">Project</div>
+                <div className="font-medium break-words">{row.project_title || "-"}</div>
+                <div className="font-mono break-all text-xs text-gray-500 dark:text-gray-400 mt-1">{row.project_id}</div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">Commit</div>
+                <div className="font-mono break-all">{row.commit_id}</div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">User</div>
+                <div className="font-mono break-all">{row.user_id}</div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">Created</div>
+                <div>{formatTime(row.created_at)}</div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">Reviewed by</div>
+                <div className="font-mono break-all">{row.reviewed_by || "-"}</div>
+              </div>
+              <div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">Reviewed at</div>
+                <div>{formatTime(row.reviewed_at)}</div>
+              </div>
+              <div className="md:col-span-2">
+                <div className="text-xs text-gray-500 dark:text-gray-400">Review note</div>
+                <div className="mt-1 whitespace-pre-wrap">{row.review_note || "-"}</div>
+              </div>
+              <div className="md:col-span-2">
+                <div className="text-xs text-gray-500 dark:text-gray-400">Content</div>
+                <div className="mt-1 whitespace-pre-wrap">{row.content || "-"}</div>
+              </div>
+
+              <div className="md:col-span-2 flex justify-end">
+                <Button size="sm" variant="outline" onClick={() => (window.location.href = `/editor/${row.project_id}`)}>
+                  Open editor
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="p-6 text-sm text-gray-500 dark:text-gray-400">Khong tim thay submission.</div>
+          )}
+        </ComponentCard>
+      </div>
+
+      {row ? (
+        <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <ComponentCard title="Map view">
+            <div className="p-4">
+              <div className="rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800">
+                <Map
+                  mode="idle"
+                  draft={draft}
+                  selectedFeatureId={null}
+                  onSelectFeatureId={() => {}}
+                  backgroundVisibility={DEFAULT_BACKGROUND_LAYER_VISIBILITY}
+                  allowGeometryEditing={false}
+                  respectBindingFilter={false}
+                  height="320px"
+                  fitToDraftBounds
+                  fitBoundsKey={row.id}
+                />
+              </div>
+              {isLoadingExtras ? (
+                <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">Dang tai snapshot/commits...</div>
+              ) : snapshot ? (
+                <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">
+                  Snapshot schema_version: {snapshot.schema_version}
+                </div>
+              ) : (
+                <div className="mt-3 text-xs text-gray-500 dark:text-gray-400">
+                  Khong tim thay snapshot cho commit nay.
+                </div>
+              )}
+            </div>
+          </ComponentCard>
+
+          <ComponentCard title="Entities (snapshot)">
+            <div className="p-4">
+              {snapshotEntities.length === 0 ? (
+                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co entities trong snapshot.</div>
+              ) : (
+                <div className="max-w-full overflow-x-auto">
+                  <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[720px]">
+                    <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
+                      <div className="col-span-2">Op</div>
+                      <div className="col-span-6">Name</div>
+                      <div className="col-span-4">Entity ID</div>
+                    </div>
+                    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+                      {snapshotEntities.map((e) => (
+                        <div key={`${e.operation}:${e.id}`} className="grid grid-cols-12 gap-4 px-5 py-3 text-sm">
+                          <div className="col-span-2">
+                            <Badge size="sm" variant="light" color="dark">
+                              {e.operation}
+                            </Badge>
+                          </div>
+                          <div className="col-span-6 min-w-0 truncate">{e.name || "-"}</div>
+                          <div className="col-span-4 font-mono text-xs break-all">{e.id}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </ComponentCard>
+        </div>
+      ) : null}
+
+      {row ? (
+        <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <ComponentCard title="Head commit snapshot_json">
+            <div className="p-4">
+              <pre className="text-xs whitespace-pre-wrap break-words rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0d1117] p-4 overflow-auto max-h-[420px]">
+                {JSON.stringify(headCommitSnapshotJson, null, 2)}
+              </pre>
+            </div>
+          </ComponentCard>
+
+          <ComponentCard title="Project members">
+            <div className="p-4">
+              {!project ? (
+                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co du lieu project.</div>
+              ) : (project.members || []).length === 0 ? (
+                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co thanh vien.</div>
+              ) : (
+                <div className="max-w-full overflow-x-auto">
+                  <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[640px]">
+                    <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
+                      <div className="col-span-5">Member</div>
+                      <div className="col-span-3">Role</div>
+                      <div className="col-span-4">User ID</div>
+                    </div>
+                    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+                      {(project.members || []).map((m) => (
+                        <div key={m.user_id} className="grid grid-cols-12 gap-4 px-5 py-3 text-sm">
+                          <div className="col-span-5 min-w-0 truncate">{m.display_name || "-"}</div>
+                          <div className="col-span-3">
+                            <Badge size="sm" variant="light" color="info">
+                              {m.role}
+                            </Badge>
+                          </div>
+                          <div className="col-span-4 font-mono text-xs break-all">{m.user_id}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </ComponentCard>
+        </div>
+      ) : null}
+
+      {row ? (
+        <div className="mt-6">
+          <ComponentCard title="Commits">
+            <div className="p-4">
+              {commits.length === 0 ? (
+                <div className="text-sm text-gray-500 dark:text-gray-400">Khong co commits.</div>
+              ) : (
+                <div className="max-w-full overflow-x-auto">
+                  <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[900px]">
+                    <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
+                      <div className="col-span-3">Commit</div>
+                      <div className="col-span-5">Title</div>
+                      <div className="col-span-2">Created</div>
+                      <div className="col-span-2">User</div>
+                    </div>
+                    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+                      {commits.map((c) => {
+                        const isTarget = c.id === row.commit_id;
+                        return (
+                          <div
+                            key={c.id}
+                            className={`grid grid-cols-12 gap-4 px-5 py-3 text-sm ${isTarget ? "bg-brand-50/60 dark:bg-brand-500/10" : ""}`}
+                          >
+                            <div className="col-span-3 font-mono text-xs break-all">
+                              {isTarget ? <b>{c.id}</b> : c.id}
+                            </div>
+                            <div className="col-span-5 min-w-0 truncate">{c.edit_summary || "-"}</div>
+                            <div className="col-span-2 text-xs text-gray-600 dark:text-gray-300">{formatTime(c.created_at)}</div>
+                            <div className="col-span-2 font-mono text-xs break-all">{c.user_id}</div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </ComponentCard>
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/app/user/submissions/page.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { toast } from "sonner";
+
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import ComponentCard from "@/components/common/ComponentCard";
+import Badge from "@/components/ui/badge/Badge";
+import Button from "@/components/ui/button/Button";
+import Label from "@/components/form/Label";
+import { Modal } from "@/components/ui/modal";
+import { useModal } from "@/hooks/useModal";
+
+import type { Submission, SubmissionStatus } from "@/interface/submission";
+import { apiSearchSubmissions, apiUpdateSubmissionStatus } from "@/service/submissionService";
+
+type Decision = "APPROVED" | "REJECTED";
+
+function statusBadge(status: SubmissionStatus) {
+  switch (status) {
+    case "PENDING":
+      return (
+        <Badge size="sm" variant="light" color="warning">
+          PENDING
+        </Badge>
+      );
+    case "APPROVED":
+      return (
+        <Badge size="sm" variant="light" color="success">
+          APPROVED
+        </Badge>
+      );
+    case "REJECTED":
+      return (
+        <Badge size="sm" variant="light" color="error">
+          REJECTED
+        </Badge>
+      );
+    default:
+      return (
+        <Badge size="sm" variant="light" color="light">
+          {String(status || "UNKNOWN")}
+        </Badge>
+      );
+  }
+}
+
+function formatTime(value?: string | null) {
+  if (!value) return "-";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  return d.toLocaleString("vi-VN");
+}
+
+export default function SubmissionsPage() {
+  const [items, setItems] = useState<Submission[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const limit = 20;
+  const [totalPages, setTotalPages] = useState(1);
+
+  const [search, setSearch] = useState("");
+  const [projectId, setProjectId] = useState("");
+  const [status, setStatus] = useState<"ALL" | "PENDING" | "APPROVED" | "REJECTED">("PENDING");
+
+  const { isOpen, openModal, closeModal } = useModal();
+  const [active, setActive] = useState<Submission | null>(null);
+  const [decision, setDecision] = useState<Decision>("APPROVED");
+  const [reviewNote, setReviewNote] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const query = useMemo(() => {
+    const trimmedSearch = search.trim();
+    const trimmedProject = projectId.trim();
+    return {
+      page,
+      limit,
+      project_id: trimmedProject.length ? trimmedProject : undefined,
+      search: trimmedSearch.length ? trimmedSearch : undefined,
+      statuses: status === "ALL" ? undefined : ([status] as any),
+      sort: "created_at" as const,
+    };
+  }, [limit, page, projectId, search, status]);
+
+  const fetchList = async () => {
+    try {
+      setIsLoading(true);
+      const res = await apiSearchSubmissions(query);
+      const payload = res?.data;
+      const rows = payload?.data || [];
+      setItems(rows);
+      setTotalPages(payload?.pagination?.total_pages || 1);
+    } catch (err) {
+      console.error(err);
+      toast.error("Khong the tai danh sach submissions.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchList();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
+
+  const openReview = (row: Submission, nextDecision: Decision) => {
+    setActive(row);
+    setDecision(nextDecision);
+    setReviewNote("");
+    openModal();
+  };
+
+  const submitDecision = async () => {
+    if (!active) return;
+    const note = reviewNote.trim();
+    if (note.length < 10) {
+      toast.error("Review note toi thieu 10 ky tu.");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      await apiUpdateSubmissionStatus(active.id, { status: decision, review_note: note });
+      toast.success(decision === "APPROVED" ? "Da duyet submission." : "Da tu choi submission.");
+      closeModal();
+      await fetchList();
+    } catch (err: any) {
+      console.error(err);
+      toast.error(err?.response?.data?.message || "Cap nhat trang thai that bai.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto pb-10">
+      <PageBreadcrumb pageTitle="Kiem duyet submissions" />
+
+      <div className="mt-6">
+        <ComponentCard title="Danh sach submissions">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-5">
+            <div className="md:col-span-2">
+              <Label>Search</Label>
+              <input
+                value={search}
+                onChange={(e) => {
+                  setPage(1);
+                  setSearch(e.target.value);
+                }}
+                placeholder="Tim theo keyword (>= 2 ky tu)"
+                className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
+              />
+            </div>
+            <div>
+              <Label>Project ID</Label>
+              <input
+                value={projectId}
+                onChange={(e) => {
+                  setPage(1);
+                  setProjectId(e.target.value);
+                }}
+                placeholder="UUID"
+                className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
+              />
+            </div>
+            <div>
+              <Label>Status</Label>
+              <select
+                value={status}
+                onChange={(e) => {
+                  setPage(1);
+                  setStatus(e.target.value as any);
+                }}
+                className="h-11 w-full rounded-xl border border-gray-200 bg-transparent px-4 py-2.5 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800"
+              >
+                <option value="PENDING">PENDING</option>
+                <option value="APPROVED">APPROVED</option>
+                <option value="REJECTED">REJECTED</option>
+                <option value="ALL">ALL</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="relative min-h-[260px]">
+            {isLoading ? (
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 rounded-xl">
+                <div className="w-10 h-10 border-4 border-t-brand-500 rounded-full animate-spin" />
+              </div>
+            ) : null}
+
+            <div className="max-w-full overflow-x-auto">
+              <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-[#0d1117] min-w-[900px]">
+                <div className="grid grid-cols-12 gap-4 px-5 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-[#161b22] text-xs font-semibold text-gray-600 dark:text-gray-300">
+                  <div className="col-span-4">Project</div>
+                  <div className="col-span-2">Submitter</div>
+                  <div className="col-span-1">Status</div>
+                  <div className="col-span-2">Created</div>
+                  <div className="col-span-3 text-right">Actions</div>
+                </div>
+
+                <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+                  {items.length === 0 ? (
+                    <div className="p-6 text-sm text-gray-500 dark:text-gray-400">Khong co submissions.</div>
+                  ) : null}
+                  {items.map((row) => (
+                    <div
+                      key={row.id}
+                      className="grid grid-cols-12 gap-4 px-5 py-4 text-sm hover:bg-gray-50 dark:hover:bg-[#161b22] cursor-pointer"
+                      onClick={(e) => {
+                        const target = e.target as HTMLElement | null;
+                        if (target && target.closest("button")) return;
+                        window.location.href = `/user/submissions/${row.id}`;
+                      }}
+                      role="link"
+                      tabIndex={0}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") window.location.href = `/user/submissions/${row.id}`;
+                      }}
+                    >
+                      <div className="col-span-4 min-w-0">
+                        <div className="font-medium text-gray-800 dark:text-gray-200 truncate">
+                          {row.project_title || row.project_id}
+                        </div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                          Submission:{" "}
+                          <Link className="hover:underline" href={`/user/submissions/${row.id}`}>
+                            {row.id}
+                          </Link>
+                        </div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                          Commit: {row.commit_id}
+                        </div>
+                      </div>
+                      <div className="col-span-2 min-w-0 text-xs text-gray-600 dark:text-gray-300 truncate">
+                        {row.user?.display_name || row.user?.email || row.user_id}
+                      </div>
+                      <div className="col-span-1">{statusBadge(row.status)}</div>
+                      <div className="col-span-2 text-xs text-gray-600 dark:text-gray-300">{formatTime(row.created_at)}</div>
+                      <div className="col-span-3 flex justify-end gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => (window.location.href = `/editor/${row.project_id}`)}
+                        >
+                          Open editor
+                        </Button>
+                        {row.status === "PENDING" ? (
+                          <>
+                            <Button size="sm" className="bg-brand-500 hover:bg-brand-600 text-white" onClick={() => openReview(row, "APPROVED")}>
+                              Duyet
+                            </Button>
+                            <Button size="sm" variant="outline" onClick={() => openReview(row, "REJECTED")}>
+                              Tu choi
+                            </Button>
+                          </>
+                        ) : (
+                          <Button size="sm" variant="outline" onClick={() => openReview(row, row.status === "APPROVED" ? "REJECTED" : "APPROVED")}>
+                            Doi trang thai
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between mt-4">
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                Page {page} / {totalPages}
+              </div>
+              <div className="flex gap-2">
+                <Button size="sm" variant="outline" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>
+                  Prev
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>
+                  Next
+                </Button>
+              </div>
+            </div>
+          </div>
+        </ComponentCard>
+      </div>
+
+      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[620px] m-4">
+        <div className="p-6 bg-white rounded-3xl dark:bg-gray-900">
+          <h3 className="mb-2 text-xl font-bold text-gray-800 dark:text-white/90">
+            {decision === "APPROVED" ? "Duyet submission" : "Tu choi submission"}
+          </h3>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mb-4 break-all">
+            {active?.id}
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <div>
+              <Label>Review note (&gt;= 10 ky tu)</Label>
+              <textarea
+                rows={4}
+                value={reviewNote}
+                onChange={(e) => setReviewNote(e.target.value)}
+                className="w-full rounded-xl border border-gray-200 bg-transparent px-4 py-3 text-sm text-gray-800 outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-800 dark:text-white/90 dark:focus:border-brand-800 custom-scrollbar"
+                placeholder={decision === "APPROVED" ? "Ly do duyet..." : "Ly do tu choi..."}
+              />
+            </div>
+
+            <div className="flex items-center justify-end gap-3 mt-2">
+              <Button size="sm" variant="outline" type="button" onClick={closeModal} disabled={isSubmitting}>
+                Huy
+              </Button>
+              <Button
+                size="sm"
+                type="button"
+                onClick={submitDecision}
+                disabled={isSubmitting}
+                className={decision === "APPROVED" ? "bg-brand-500 hover:bg-brand-600 text-white" : "bg-red-600 hover:bg-red-700 text-white"}
+              >
+                {isSubmitting ? "Dang xu ly..." : decision === "APPROVED" ? "Duyet" : "Tu choi"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}